창의적인 디지털 디자인 세계에 오신 것을 환영합니다. LottieFiles는 창의성이 움직임과 만나 화려한 시각적 심포니를 만들어내는 그런 멋진 공간이죠. 여러분이 많은 시간을 들여 세밀하게 디자인 컨셉을 구상하고, 그것을 모션 디자이너에게 전달하여 애니메이션화 시키는데 시간을 소비한 적이 있다면, 우리가 여러분을 위해 준비한 이 도구에 주목해 보세요.

여러분이 상상한 디자인을 몇 번의 클릭으로 쉽게 움직일 수 있게 해주는 혁신적이고 사용자 친화적인 도구를 상상해보신 적 있으신가요? 그리고 그것이 여러분이 가장 좋아하는 디자인 플랫폼인 Figma에서 가능하다면 어떨까요? 여러분의 상상을 현실로 바꿔줄 혁신적인 기능을 소개 합니다. 바로 Figma to Lottie 플러그인 입니다.

이 새로운 Figma to Lottie 기능은 Figma 내에서 생성한 애니메이션을 쉽게 Lottie 포맷으로 내보낼 수 있게 해주는 혁신적인 도구입니다. 단일 프레임이나 또는 전체 프로토타입을 애니메이션화하는 경우에도 이 플러그인이 완벽하게 수행해 낼 수 있습니다. 이 블로그는 여러분의 시각을 더욱 생동감 있게 만드는 놀라운 여정을 안내해 드릴 거에요, 모든 수준의 디자이너에게 적합한 즐거움으로 말이죠.

Figma에서 애니메이션 만드는 방법 비디오 튜토리얼 시청

정신 없이 돌아가는 디자인 세계에선 시간이 아주 중요한 요소라는걸 충분히 이해 합니다. 그래서 시각적 학습자이거나 혹은 좀 더 빠르게 돌아보길 원하는 디자이너 혹은 개발자 이시라면  LottieFiles for Figma 플러그인의 놀라운 기능을 사용하는 방법을 자세히 안내하는 아래 튜토리얼 비디오를 시청해 보세요.

이 비디오에서는 단일 프레임부터 전체 프로토타입 및 여러 프레임을 애니메이션화하는 방법, 작업 공간에서 애니메이션을 사용자 정의하는 방법 등을 모두 다룹니다. 그러니 편안히 앉아서 재생 버튼을 누르고 눈 앞에서 펼쳐지는 애니메이션 마법의 세계를 확인하세요.

단일 프레임, 프로토타입 및 여러 프레임 애니메이션화

이제 조금 더 세분화로 문서화된 튜토리얼로 들어가 볼까요? Figma에서 어떻게 쉽고 빠르게 다양한 플랫폼에서 적용 가능한 Lottie 애니메이션을 만들 수 있는지 알아보려면 아래 표시된 단계들을 따라 해 보세요.

단일 프레임 애니메이션화

프레임을 선택하고 플러그인의 Export to Lottie 섹션으로 이동합니다. 그런 다음 Export to Lottie 버튼을 클릭하세요. 아주 쉽죠?

여러분은 여러분의 스타일에 맞게 매력적인 애니메이션을 만들 수 있도록 다양한 애니메이션 프리셋도 확인할 수 있습니다.프로토타입 애니메이션화

프로토타입 애니메이션화

플러그인의 Export to Lottie 섹션으로 이동합니다. 그런 다음 드롭다운 메뉴에서 애니메이션화하려는 프로토타입 플로우를 선택하면 즉시 애니메이션이 생성됩니다!

다중 프레임 애니메이션 만들기

플러그인의 Export to Lottie 섹션으로 이동합니다. 그런 다음 애니메이션으로 만들려는 모든 프레임을 선택하고 Export to Lottie를 클릭하여 애니메이션을 생성합니다. 심지어 프로토타입 설정이 필요하지 않습니다!

Lottie 애니메이션에 만족하면 GIF로 삽입하거나 작업 공간에 저장할 수 있습니다.

GIF로 삽입 및 작업 공간에 저장

  • GIF로 삽입: GIF로 삽입할 때 Small, Medium, 또는 Large 중에서 선택할 수 있습니다. 애니메이션이 잘 작동하는지 미리보기도 가능합니다.
  • 작업 공간에 저장: 이를 위해서는 Save to workspace를 클릭한 다음, 원하는 폴더를 선택하고 애니메이션을 저장하면 됩니다.

작업 공간에서는 색상 팔레트를 사용하거나 속도를 조절하는 등 여러 옵션이 제공됩니다. 사용자 정의 후에 다시 GIF로 삽입하거나 작업 공간에 저장할 수 있는 옵션이 있습니다.

여러분은 또한 작업 공간에서 애니메이션의 상태를 전환할 수 있습니다. 여기에는 Approved, In Progress, Needs Review, 그리고 No Status와 같은 태그가 포함되어 있어 개발자에게 효과적으로 전달할 수 있습니다.

Discover 섹션에서 Lottie 애니메이션 검색

Discover 섹션을 클릭하면 여러분이 디자인에 사용할 수 있는 준비된 Lottie 애니메이션 라이브러리에 접근할 수 있습니다.

라이브러리에서 애니메이션을 검색하고 색상 팔레트로 색상을 변경하거나 속도를 변경할 수 있습니다.

지금 바로 Figma에서 여러분만의 애니메이션을 만들어보세요

누구나 쉽고 빠르게 멋진 애니메이션을 만들수 있는 방법! 이보다 더 간단할 수 있을까요? 지금까지 여러분은 정적인 디자인을 LottieFiles for Figma 플러그인으로 더욱 매력적이고 사람의 시선을 사로잡는 애니메이션으로 변환하는 빠르고 쉬운 방법을 알아봤습니다. 이제 여러분의 손끝에서 창조되는 나만의 애니메이션을 새로운 프로젝트에 추가해 보세요.

기능 및 프리셋의 다양성, 창의적인 작업을 위한 여러 기능뿐만 아니라 여러분의 디자인 프로세스가 Figma to Lottie로 더욱 흥미롭고 효율적으로 변할 거라 확신합니다.  단일 프레임, 다중 프레임 또는 전체 프로토타입을 애니메이션화하든 상관없이 실험하고 탐험하며, 그리고 그 무엇보다도 즐겁게 디자인하세요. 그럼 다음에 또 만나요!

LottieFiles for Figma 플러그인으로 누구나 디자인에 모션 애니메이션과 움직임을 추가할 수 있습니다! 더 알고 싶거나 LottieFiles for Figma를 다운로드하려면 https://lottiefiles.com/plugins/figma로 이동하세요.