[UX/UI 사전캠프] 1주차 숙제 - 피그마 플러그인을 활용하여 유저 플로우 그리는 방법

Figma Plugin을 활용하여 유저 플로우 그리는 방법 총 정리!

 

1. 피그마를 켜서 New design file을 만든다.

---

2. 위쪽 섹션에서 Resources(단축키 Shift+I)를 누르고 나온 창에서 Plugins 파트로 넘어가서 Flow chart를 검색한다.

Figma의 상단 창에서 리소스를 클릭하면 뜨는 창

---

3. 플러그인을 Run하면 나오는 창에서 원하는 도형을 선택한다.

Plugin에서 Flow chart를 검색하고 실행했을 때 나오는 창

---

4. 작업창에 뜬 도형을 클릭하면 도형의 크기를 바꿀 수 있으며, Enter라고 적힌 텍스트는 더블 클릭하면 텍스트 속성을 바꿀 수 있고, 한 번 더 더블 클릭하면 텍스트 내용도 바꿀 수 있다.

왼쪽 : 도형 클릭 시 뜨는 모습 / 오른쪽 : 텍스트를 수정한 모습

---

5. 다시 도형 선택으로 돌아가서 상하좌우에 뜬 화살표를 클릭하면 이어서 다음에 띄울 모양을 고를 수 있다.

화살표 클릭 시 뜨는 도형 선택 창

---

6. 도형을 선택하면 도형과 이어진 화살표가 생기고, 새로 생긴 도형을 이동하면 화살표 길이와 방향도 자동으로 같이 움직인다.

화살표에 이어진 도형 생성

---

7. 화살표를 클릭하면 임의로 도형에 연결된 방향도 바꿀 수 있고, 화살표 길이도 수정할 수 있으며, 텍스트 부분을 더블클릭하면 입력할 수 있다.

화살표의 도형 연결부도 바꾸고 텍스트도 입력한 모습

---

8. 계속 이런 식으로 작업하면 끝!

완성된 유저 플로우