피그마 패스파인더 오토레이아웃 배리언트 프로토타이핑 실습!

피그마 패스파인더 오토레이아웃 배리언트 프로토타이핑 실습!

 

라이프해킹스쿨 창업부트캠프 오늘의 블챌미션 
1. 도형툴 + 패스파인더 기능을 이용하여 피그마 아이콘 만들기

​2. 오토 레이아웃 기능을 응용하여 UI Card Design 예시 만들기

14기 단톡방에 올라올 만큼 꽤나 과정이 뭐 했던 카드 디자인

강의를 들을 때 약간 휙휙 지나가는 느낌에 간단한 기능들 위주였던 지라 기존에 디자인 지식이 없으면 응용이 약간 어렵겠다 싶었다. 만드는 과정도 공유했음.

1. 빨간색 1,2번 오토레이아웃 설정 후 파란색 1번 그룹으로 묶기

2. 4개 요소 선택 후 오토레이아웃 설정

3. 사진 요소 선택 후 오른쪽 Fixed width > Fill Container

4. 글씨 요소 선택 후 오른쪽 Fixed width > Fill Container

5. icon 요소 선택 후 오른쪽 Fixed width > Fill Container

6. 오른쪽 아이콘 세개 요소 선택 후 오른쪽 레이아웃 우측 가운데 설정

 

가이드 없이 하려니 은근.. 절차가 귀찮았음... 발견하기까지 귀찮게 작업 내역을 돌렸다가 돌아오고 하는 작업이 반복되었는데 포토샵처럼 작업내역이 나와있지 않아서 아주 아주 아주 아~~~ 주 귀찮았음.

​3. 배리언트 기능을 응용하여 Tab bar 만들기

간단한 탭바를 만들었다. 

오잉 맨아래 SHOP은 왜 표시 안되는지 모르겠지만 아무튼..

https://www.figma.com/proto/IEhDTgNGZcYkmx9M7Wj9m4/Tab-bar?node-id=1%3A3&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=1%3A3 

Figma

이렇게 구현까지 성공!

피그마 재밌다. 짜릿해