하루만에 Figma로 프로토타입 만들기

스마트 앱 공모전의 기획부터 발표영상 제작까지 진행했다.
그 과정에서 우리가 기획한 APP의 프로토타입을 제작할 필요성을 느껴 이름만 딱 한번 들어봤던 figma를 사용하게 되었다.
하루만에 공모전 기획부터 발표영상 제작까지

---

디자인

UI적인 부분과 색감 사용에 무지하기 때문에 카카오톡과 네이버의 색감 및 디자인을 빌렸고, 나는 고대세종에서 진행하는 교내 공모전이었기 때문에 대표색은 크림슨색으로 디자인했다.

---

Figma 사용법

1. 로그인 후 degign file 클릭

2. 어떤 프레임에서 만들 것인지 선택(스마트폰 기종 종류가 다양함)

오른쪽 탭에 뜹니다. 확인해주시고 하나를 정해서 클릭하면 프레임이 생김

3. 도구들 소개

1. 도형
   
   
   사각형을 아무렇게나 만들어보았다.
   1) x, y : xy 좌표
   2) w, h : width, height
   3) 각도 : 0~360
   4) 모서리 뾰족함 정도 : 둥글게 깎을 수 있음
   5) 맨 위에 정렬 기능 있으니까 사용
   6) fill : 채우기( 색깔 네모 누르면 스포이드도 가능 )
   7) stroke : 테두리
   8) export : 내보내기 ( 아래에서 자세히 설명, 잘못 클릭하면 이 도형만 내보내기 될 수 있음 주의!! )

2. 텍스트
   
   T클릭하고 드래그하면 사용가능
   
   1) 크기
   2) 정렬도 가능 왼오 정렬, 위아래 정렬 다 가능

3. 프로토타입(완전중요)
   
   오른쪽 위 탭에 프로토타입 보인다. 클릭

이런식으로 도형을 드래그해서 다른 페이지로 연결 가능

오른쪽 위에 run돌렸을 때, 이제 왼쪽 회색 네모 클릭 시 오른쪽 페이지로 진입가능!! 짱중요!! 간단하면서도 중요!!
https://youtu.be/-sAAa-CCOcg?si=ibfzZXLCUSjn3OwN
이해 안되면 이 영상 참고! 3분만에 완전 이해 가능해요

4. 내보내기

페이지 하나만을 내보내고 싶다면, 페이지 위쪽에 iPhone14 & 15 어쩌고를 클릭하면 페이지 전체가 선택된다. 그 후 export를 누르면 바로 파일이 다운된다!!

---

마지막으로 제가 만든 프로토타입 영상 남기며!!
소개 끝 도움되셨길 바랍니당
https://youtu.be/FxgR1jT51y8