[Framer] Figma 프로젝트 Framer로 이동시키기(Importing)

Framer는 프로토타입에 최적화된 툴입니다. 기존에 스케치나 피그마를 사용하여 프로젝트를 진행하고 있었다면 이를 Framer에 가지고 와서 작업을 진행 할 수 있습니다 🥳

Figma에서 Framer로 이동 시키기 위한 플러그인을 제공하고 있습니다. 피그마의 대쉬 보드에서 작업 파일로 이동합니다

프래머로 임포트할 레이어를 드래그 혹은 선택해 줍니다.

그 후 상단의 도형 여러개가 그려져 있는 아이콘을 누른 뒤 Plugins에서 "Figma to HTML with Framer"를 검색해 줍니다. 위 이미지에서 두번째에 있는 플러그인이 사용할 플러그인입니다. 

출처 : Figma

플러그인에 마우스를 올렸을 때 나타나는 "Run"버튼을 누르면 피그마의 레이어를 클립보드에 복사하게 됩니다. 위 창이 나타난다면 "Copy to clipboard" 버튼을 눌러 주시면 됩니다. 

 

 

클립보드에 성공적으로 복사하게 되면 피그마 창 아래에 토스트 메시지가 뜹니다. 이를 확인했다면 이제 Framer로 이동해 줍니다.

출처 : Framer

Framer의 대쉬 보드로 이동하면 New 버튼이 있습니다. 새로 프로젝트를 생성해 주세요. 혹은 기존에 생성해 둔 프로젝트로 들어가 줍니다.

Ctl + V를 누르면 피그마 프로젝트를 Framer에 임포트하기 시작합니다.

굉장히 빠른 속도로 많은 량의 레이어를 완벽하게 가지고 옵니다 🤗