전생처럼 느껴지는 까마득한 과거의 나만무를 떠올려보면 우리 팀은 나만무 개발에 앞서 와이어프레임이라는 것을 그렸다.
모든 팀원이 설계할 프로그램의 구조를 제대로 이해했는지 검증하고,
팀원 외 사람들에게 프로젝트 기획 설명을 할 때 도움이 되는 과정이였다.
그런데 이 과정에 피그마 플러그인을 사용한다면, 기획 단계의 결과물이 단순 화면 기획서에 그치지 않고 실제 인터랙션이 가능한 서비스 수준으로 확장되는 경험을 할 수 있다고 한다.
Anima
UI/UX 디자인 도구인 피그마(Figma)에서 시각적으로 작업한 디자인 화면을 실제 웹 브라우저에서 동작하는 코드로 변환하는 플러그인
사용법
1. figma로 이미지를 만들고 actions 아이콘을 클릭 해 Anima 플러그인을 찾아보자.
2. 1에서 디자인한 프레임을 클릭하고, 코드 변환을 원하는 프레임을 선택해준다.
React, Vue, HTML 중 원하는 형식으로 코드 출력도 가능하며
스타일링도 CSS, Tailwind, Email compatible 중 선택가능하다.
3. Preview를 통해 프레임이 코드로 잘 변환되었는지 확인해보자.
이후 실제 개발 환경에 바로 적용하거나, 수정을 원하면 수정하여 적용하면 된다.
기타
디자인 컴포넌트를 직접 그리는 것이 번거롭다면,
정글인으로서 익숙할 HTML 등을 Figma 디자인 파일로 추출해 주는 플러그인을 활용하는 것도 좋은 방법일 것 이다.
결론
다양한 피그마 플러그인을 사용하면 효율적인 퍼블리싱과 이미지 제작에 도움을 받을 수 있어,
사이드 프로젝트의 개발 속도를 높이고 포트폴리오를 보강하는데 도움이 될 것이다.
양치기소녀