brunch

You can make anything
by writing

C.S.Lewis

by ProtoPie Aug 13. 2021

ProtoPie
Figma 용 ProtoPie 플러그인

ProtoPie, 피그마, Figma, 프로토타입


Free Your Ideas, ProtoPie



이번 편에서는 피그마에서 디자인한 작업물을 ProtoPie로 더 쉽고 간편하게 가져올 수 있는 Figma 용 ProtoPie 플러그인을 소개해 드리도록 하겠습니다. 피그마 임포팅에 어떤 변화가 있는지 함께 알아볼까요?





Figma + ProtoPie 워크플로우의 중요성


2019년 초에 출시된 기존의 피그마 임포트는 디자인, 프로토타이핑, 반복적인 테스팅 등 많은 작업에서 활용되었습니다. 이러한 높은 활용도를 바탕으로 Figma + ProtoPie 워크플로우는 많은 디자이너들에게 필수인 작업 방식이 되었죠. 그리고 어떻게 하면 피그마와 ProtoPie 워크플로우를 개선할 수 있을지에 대한 피드백도 함께 받았습니다.



Figma 임포트 개선 요청 피드


보내주신 의견을 바탕으로 단순히 기존 버전의 개선이 아니라 설계 단계부터 새롭게 시작했습니다. 그 결과, 더 사실적이고 인터랙티브한 프로토타입 제작이 가능한 Figma 용 ProtoPie 플러그인을 선보이게 되었죠.




Figma 용 ProtoPie 플러그인


Figma 용 ProtoPie: 작업 속도 향상을 위해 개선된 가져오기 기능


Figma 용 ProtoPie 플러그인은 기존 레거시 임포트와 달리 유연하고 빠르게 피그마에서 작업한 내용을 ProtoPie에 가져올 수 있습니다.



빛처럼 빠른 속도로 임포팅할 수 있습니다.


하나 혹은 다중의 Top-level 프레임을 scene으로 한 번에 임포트하거나 원하는 Object만 피그마에서와 같은 속성(레이어 순서, 포지션 등)으로 따로 임포트할 수 있습니다.





어떤 것이 달라졌나요?


왼쪽: 레거시 Figma 임포트/ 오른쪽: 새로운 Figma 용 ProtoPie 플러그인


· 한 개 혹은 여러 개의 프레임과 오브젝트 임포트 할 수 있습니다.
· Top-level 프레임 Scene으로 임포트 할 수 있습니다.
· 원하는 요소를 선택 적으로 임포트 할 수 있습니다.
· 벡터 레이어를 SVG로 임포트 할 수 있습니다.
· 텍스트 레이어를 텍스트 레이어로 변환 가능한 SVG로 임포트 할 수 있습니다.
· Contraint를 그대로 임포트 할 수 있습니다.

Figma 용 ProtoPie 플러그인 자세히 알아보세요.




왜 Figma + ProtoPie가 필요한가요?


Figma 플러스 ProtoPie 로고


ProtoPie는 Figma 디자인에 생명을 불어넣어 실제 제품과는 구별할 수 없을 만큼 사실적인 프로토타입을 만들 수 있도록 도와줍니다.

ProtoPie를 통해 Figma 디자인에 condition, formula 그리고 variable 등이 활용된 다이나믹한 인터랙션을 추가해보세요. 텍스트 입력이나 카메라, 음성, 미디어 재생을 프로토타입에 추가하여 한 단계 높은 수준의 사실감을 더할 수 있습니다. 그뿐만 아니라 다른 사람과 커뮤니케이션할 수 있는 프로토타입도 가능하죠.




ProtoPie가 처음이세요?


예제를 통해 Figma 용 ProtoPie 플러그인을 체험해보세요.




Figma Import 개선 과정


제품 디자인 책임자인 David Lee의 Figma Import 개선 과정을 만나보세요.

위 링크 본문 및 영상은 영문으로 제작된 점 참고 부탁드립니다.






ProtoPie 평생 무료로 사용하기




ProtoPie의 다른 업데이트 기능 더 살펴보기




매거진의 이전글 ProtoPie Cloud로 상황에 맞는 공유하기
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari