[Figma 꿀팁] 기획자 + 디자이너 실무과정 / Figma로 앱 기획서 시안 만드는 방법

실제 앱을 기획하고 디자인 할 때, 많은 팀이 아직도 파워포인트나 엑셀로 화면 기획서를 작성하고 있죠. 하지만 실무에서는 빠른 협업과 피드백을 위해 Figma 에서 바로 앱 기획서 시안을 만드는 방식이 점점 더 일반화되고 있습니다. 이번 글에서는 제가 실제 프로젝트에서 사용하는 figma 앱 기획서 제작 과정을 처음부터 끝까지 전부 공유해드리겠습니다. 기획자, 디자이너 모두에게 도움이 될 수 있도록 기획 의도부터 컴포넌트 활용까지 전체 플로우를 정리했습니다. 

 

 

Step 1. 앱 기획 목적 정리 & 핵심 화면 스케치

가장 먼저 정리해야 하는 것은 이 두가지입니다. 

 

(1) 앱의 핵심 기능은 무엇인지?

예) 기록형 앱인지, SNS인지, 전자상거래인지 등

(2) 사용자의 흐름(플로우)은 어떻게 흘러가는지?

홈 > 검색 > 상세 > 결제 순인지 등

 

이걸 간단히 손으로 메모하거나, Wiro나 Whimsical 등으로 사용자 플로우를 정리해놓고 시작하면 디자인이 훨씬 수월해져요.

 

---

Step 2. Figma에서 프레임 셋업하기

- 모바일 앱 기준 : Iphone 13 사이즈 (390 x 844) 프레임 추천

- 한 줄 요약 : 페이지마다 하나의 Frame을 배치하고, 위에서 아래로 화면 흐름대로 정렬

 

---

Step 3. 레이아웃 그리드 & 스타일 정의

기획서라고 해서 아무렇게나 배치하면 안 됩니다. 실제 개발까지 고려한다면 컬럼 기반 레이아웃은 필수 입니다.

- Layout Grid : 4컬럼 or 8컬럼 설정

- Text style : Title, Subtitle, Body 등 사전 정의

- Color Style: 브랜드 컬러 / 기능성 컬러(에러, 경고 등)

 

이렇게 하면 기획서 단계에서도 디자인 시스템 기반 사고가 자연스럽게 스며듭니다.

---

Step 4. 와이어프레임 구성

이 단계에서 앱 기획서의 뼈대를 만듭니다.

- 도형 (Rectangle, Line, Text 등)을 활용해 컴포넌트 위치 구성

- 아이콘은 Iconify 플러그인으로 빠르게 불러고이

- 입력창, 버튼, 리스트 등은 재사용 가능한 컴포넌트로 만들어두기

 

 

---

Step 5. 기능설명 & 인터렉션 연결

각 화면 옆이나 상단에 설명 텍스트를 넣습니다.

- 이 화면의 목적은?

- 어떤 기능이 포함되는가?

- 개발자에게 전달할 조건이나 예외사항은?

 

Figma에서는 Sticky Note, Comment, 또는 그냥 Text로 간단히 메모를 추가할 수 있습니다.

 

또한 Prototype 기능을 활용해 화면간의 이동 흐름(예: 버튼 클릭 > 다음화면) 도 연결해두면 전체 플로우 파악이 쉬워집니다.

 

---

Step 6. 기획서 PDF 또는 링크 공유

- File > Export frames to PDF로 내보내기

또는 Share > Anyone with Link로 프로토타입 공유

 

> 기획문서를 굳이 Word나 PPT로 만들 필요 없이 Figma 하나로 링크 공유 + PDF 전달까지 모두 해결됩니다.

 

Figma는 단순한 디자인 툴이 아닙니다. 아이디어 구성, 사용자 플로우 설계, 화면 기획서 작성, 디자인 시스템 구축까지 한번에 가능한 강력한 도구입니다. 특히 앱 서비스를 만들때 기획자-디자이너 간 커뮤니케이션을 빠르게하기 위해서는 처음부터 Figma에서 기획서 시안을 제작하는 것이 시간도, 품질도, 모두 만족스럽습니다.