피그마로 SVG 파일 추출하기(id 값 자동생성) Exporting SVG files in Figma

벡터 이미지를 SVG로 추출할 때 Figma가 정말정말정말 유용하다.
특히 이미지의 요소들을 따로 따로 애니메이션으로 조작해야 할 때,
피그마에서 미리 그룹을 지어서 내보내서 그룹별로 ID를 가져와서 사용하면 되니 아주아주 간편하다.
(파일 추출시 "Include ID attribute"에 ✅ 체크를 하면 Figma가 해당 그룹명을 그대로 id값으로 추가!)

세부적인 방법은 DevEd 쌤의 튜토리얼로 확인해주시고,
👉 https://www.youtube.com/watch?v=gWai7fYp9PY
주의사항 한가지만 공유!

Figma로 SVG export시 주의점

<g clip-path="url(#clip0)">
...
blah blah blah
...
<clipPath id="clip0">
            <rect width="155.8" height="175.37" fill="white"/>
</clipPath>

피크마는 svg 파일 추출시 clip path id를 "clip0"으로 네이밍해주고, g 태그에서 해당 id를 불러와 clip한다. 그런데 만약 Figma로 두 개 이상의 SVG를 추출한다면 ? clip path id가 중복되게 된다.

아시다시피 id값은 하나만 존재해야 하기 때문에 svg 둘 중 하나는 path가 잘못 입혀져 표시가 되지 않는다.
(작업하다가 두번째 svg가 크기값만 존재하고 이미지는 보이지를 않아서 당황당황😳) 따라서 피그마로 id값 포함해서 추출한 후에 매뉴얼로 id값을 수정해서 저장해주어야 한다!