질문사항

피그마에서 프로토타이핑으로 만든 애니메이션(예: 완료 시 체크 표시)을 개발자에게 SVG나 JSON 형태로 전달하려면 어떻게 해야 하나요? 관련 플러그인이 있나요?

답변

피그마에서 만든 애니메이션을 개발자에게 전달하는 방법은 요청하는 파일 형식에 따라 달라집니다.

SVG (Scalable Vector Graphics):

애니메이션의 개별 요소(예: 체크 표시 아이콘 자체)를 SVG로 전달하는 경우, 피그마의 기본 `Export` 기능을 사용하면 됩니다. 해당 요소를 선택하고 오른쪽 사이드바의 `Export` 섹션에서 SVG 형식으로 내보내기 할 수 있습니다.

SVG는 정적인 벡터 그래픽에 적합하며, 개발자가 CSS나 JavaScript를 이용해 애니메이션을 직접 구현할 때 유용합니다.

JSON (Lottie/Bodymovin):

피그마에서 구현한 애니메이션 자체를 JSON 형태로 전달하라는 요청은 주로 [Lottie](https://lottiefiles.com/)와 같은 라이브러리를 통해 웹/앱에서 쉽게 구현할 수 있는 애니메이션 포맷을 의미합니다.

피그마 자체에는 Lottie JSON으로 직접 내보내는 기능이 없습니다. 이 경우, 플러그인을 활용해야 합니다. 대표적인 플러그인으로는 `LottieFiles` 플러그인이 있습니다.

`LottieFiles` 플러그인을 사용하면 피그마에서 만든 애니메이션을 Lottie JSON 파일로 변환하여 내보낼 수 있습니다. 이 파일은 개발자가 Lottie 라이브러리를 사용하여 앱이나 웹에 쉽게 적용할 수 있습니다.

개발자와 협의하여 어떤 방식이 가장 효율적인지 결정하는 것이 중요합니다.