화면기획서 작업 시간 줄여주는 피그마 플러그인 BEST 3

기획자의 업무일지

기획자수박 2024. 11. 17. 16:00

피그마로 화면기획서 작업하는 기획자들 주목!👋

저번 글에서는 화면기획서를 피그마로 작업했을 때 좋은 점을 적어봤다.
(저번 글 : 화면기획서 툴 바꾸기 : 피그마로 바꾸면 좋은 점 4가지)

하지만 그 장점들을 어나더레벨로 한 층 끌어올려주는 기능이 피그마에 있었으니, 바로 ‘플러그인’!

*플러그인이란?

피그마에선 지원하지 않지만, 피그마 안에서 별도로 다운받아 쓸 수 있는 일종의 확장 프로그램. 외부 프로그램을 내 피그마 안에 덧붙힐 수 있달까.

피그마에는 수많은 플러그인들이 있는데,

우리는 기획자니까 기획자가 화면기획서를 피그마에서 작업할 때 유용한 플러그인들만 모아봤다.

다 직접 쓰고 있고 실제로 유용하다고 느낀 것들만 추렸으니, 꼭 다운받아서 써보길 추천한다.

- 설명 : 아이콘을 바로 첨부할 수 있는 플러그인

우리의 지난 날들
- 구글 슬라이드 ‘도형’ 기능으로 아이콘을 그려본 적 있는 사람..
  하나하나 도형 따서.. 붙히고.. 정렬해서.. 그룹화했던 지난 날들…⭐️

Feather-icons 장점
- UXUI에 쓰이는 대표적인 아이콘들만 모아놓은 플러그인이다.
  - 그렇게 다양하지 않지만 화면기획서를 작업하기엔 충분하다.
- 원하는 UXUI 아이콘들을 피그마에서 즉각으로 검색해, 즉각으로 첨부할 수 있다.
  - 이 얼마나 편리한가?
- 예쁘다
  - 아이콘에 군더더기가 없고 깔끔하다
  - 필요한 형태만 있는 아이콘이어서 와이어프레임 정도의 기획안을 만들 때도 제격이다.
- 선 하나하나 커스텀이 가능하다.
  - 이미지로 첨부되는게 아니라 벡터 형태로 첨부되기 때문에 선 하나하나를 따로 짚어내 굵기나 코너 비율 등 세세하게 설정할 수 있다.

+아이콘 플러그인 추천 추가

- 설명 : 빨간 번호와 디스크립션을 자동으로 정렬해주는 플러그인

우리의 지난 날들
- 하나의(혹은 연관된) 기능에 대한 디스크립션을 슬라이드 한 페이지에 담기 위해 노력했던 지난 날들..
  - 디스크립션이 한 페이지를 넘어갈 때 우리는 어떤 선택을 했어야 했는가
    - 디스크립션 표를 잘라서 화면 옆에다가 낑겨붙히기
    - 페이지 하나 더 할애하기 (화면기획서 페이지가 왜이렇게 많냐는 잔소리에 영향끼침)
- 빨간 번호 아이콘 붙히기 x n번
  - 빨간 박스 안에 번호가 있는 아이콘을 만들고, 그 위치를 마우스로 지정해서, 그 번호에 맞는 디스크립션을 작성해야 했다.
    - 스티커 붙히기인가, 싶다.

Commentor의 장점
- 디스크립션 길이를 신경쓰지 않아도 된다.
  - 지난 포스팅에서 언급했던 대로 피그마에서는 ‘한 페이지’의 규격이 정해져있지 않기 때문에 디스크립션이 한 페이지를 넘어가는지 아닌지 신경쓸 필요가 없다. 마음껏 적어라! (물론 필요한 말만 적어야하지만)
- 빨간 아이콘의 위치를 신경쓰지 않아도 된다.
  - 알잘딱깔센으로 11시 방향에 붙혀준다.
  - 번호를 달 프레임 또는 도형을 클릭만 하고→ 내용을 적고 → Create를 누르면 알아서 아이콘을 그 위치에 붙혀준다.
- 번호를 일일이 바꾸지 않아도 된다.
  - 추가하는 순서대로 번호가 알아서 카운트업되고 -> 지정한 요소 옆에 붙혀준다.
- 디스크립션도 알아서 정렬된다.
  - 프레임 옆에 디스크립션도 알아서 순서대로 정렬된다. 순서를 바꾸어도 알아서 정렬된다. (오토레이아웃이 잡혀있기 때문)

- 설명 : 플로우 흐름을 나타내는 화살표를 쉽게 표현해주는 플러그인

우리의 지난 날들
- 화면기획서에도 플로우 설명은 중요하다.
  - 플로우를 설명하기 위해 구글 슬라이드 '도형' 기능으로 그렸던 화살표들을 기억해라.
  - 울진 마라
- 플로우가 변경될 경우 화살표 도형을 다시 연결해야 했다
  - 기획 단계에서 플로우가 변경되는 일은 비일비재하다.
  - 울지 말랬다.

Autoflow의 장점
- ‘shift’ 키보드와 함께 연결하고 싶은 요소를 순서대로 클릭만 하면 화살표로 연결된다.
- 화살표 선의 유연성, 색, 굵기 등을 커스텀할 수 있다.
  - 개인적으로 기능의 논리적 순서로는 각이 있는 선으로, 유저가 사용하는 순서의 플로우를 나타낸다면 유연한 선으로 표현하고 있다.
- 연결하는 요소의 위치가 변경되어도 자동으로 화살표가 따라간다.
  - 다시 화살표를 눌러서 드래그해서, 붙혀낼 필요가 없다.
  - 여기서 난 오열했다.

이렇게 피그마 플러그인을 쓰면

기능이 더욱 무궁무진해지고, 화면기획서의 작업 시간을 대폭 단축시킬 수 있다.

실제로 화면기획서를 피그마로 작업하면서

작업 시간이 많이 줄었다는 걸 체감하고 있다.

여러 요소들을 플러그인 기능으로 대체하고, 반복해서 그려야할 요소들은 component(이전 포스팅에 설명)로 활용하고 있기 때문이다.

혹시 화면기획서를 피그마로 작업하고 있는 기획자분들 중에

제가 추천하지 않은 좋은 플러그인이 있다면 댓글로 추천 부탁드립니다!🙌

다음 포스팅엔

이 모든 과정을 배우게 된 강의를 소개시켜드리려 한다.

피그마에 대해 생판 몰랐을 때, 이 짧은 과정의 강의로 정말 많은 걸 배우게 됐고

이 강의에서 배운 것만으로도 현업을 무리없이 수행하고 있다.

그럼 글 끝.