피그마에서 이미지를 SVG로 변환한 후, Dev Mode에서 해당 SVG 코드를 확인하는 방법이 궁금합니다.
답변
피그마에서 이미지를 SVG로 변환한 후 Dev Mode에서 SVG 코드를 확인하는 방법은 다음과 같습니다.
기본적인 방법:
이미지를 SVG로 변환:
Figma 내에서 벡터화: 만약 이미지가 단순한 형태(아이콘, 로고 등)라면, Figma의 펜 툴이나 도형 툴로 다시 그려서 벡터화할 수 있습니다. 이 경우, 이미 생성된 벡터 요소는 이미 SVG 형태입니다.
외부 변환 툴 사용: PNG, JPG 등의 래스터 이미지를 SVG 벡터 이미지로 변환해야 한다면, `convertio.co/kr/`와 같은 온라인 이미지 변환 서비스를 사용합니다. (복잡한 사진 이미지는 SVG로 변환하기에 적합하지 않습니다.)
SVG 파일을 Figma로 가져오기: 변환된 SVG 파일을 Figma로 드래그 앤 드롭하거나 `File > Place image/video`를 통해 가져옵니다.
Dev Mode에서 SVG 코드 확인:
Figma로 가져온 SVG 레이어를 선택합니다.
Figma 우측 상단의 `Dev Mode`를 활성화합니다.
`Inspect` 패널에서 해당 SVG 레이어의 CSS/코드 정보를 확인합니다. SVG 요소의 경우, `SVG` 탭 또는 `Code` 섹션에서 SVG 코드를 직접 볼 수 있습니다.
플러그인 활용:
`SVG Copy Code` 플러그인: 이 플러그인은 Figma 내의 SVG 요소를 선택했을 때, 해당 SVG 코드를 클립보드에 복사해주는 기능을 제공합니다. 외부 변환 툴로 SVG를 만든 후 Figma로 가져와서 이 플러그인을 사용하면 Dev Mode를 거치지 않고도 빠르게 코드를 얻을 수 있습니다.
주의사항:
래스터 이미지(PNG, JPG)를 SVG로 변환하는 것은 이미지의 복잡도에 따라 결과물의 품질이나 파일 크기가 크게 달라질 수 있습니다. 복잡한 사진 이미지는 SVG로 변환하기에 적합하지 않습니다.
Dev Mode에서 제공하는 SVG 코드는 Figma가 렌더링하는 방식에 따라 최적화되거나 일부 속성이 다르게 표현될 수 있습니다.