창업부트캠프 300 17기 블로그 챌린지 #13~14

 

 

[01]

​

1. 도형툴 + 패스파인더 기능을 이용하여

피그마 아이콘 만들기

​-> 피그마의 기본 아이콘을 똑같이 제작

-> 일러스트, 포토샵 사용해봤으면 매우 쉬움

-> 기본 디자인 툴 다룬 적 없으면 상당히 어려울 것으로 예상됨

 

-> 장난삼아 몇가지 컬러, 모양 베리에이션 해봄

 

 

---

 

 

 

2. 오토 레이아웃 기능을 응용하여

UI Card Design 예시 만들기

​

-> 오토레이아웃 실습 과제 프레임 

 

버튼 제작함

-> Auto Layout 기능 단축키 => Shift + A

-> Emoji 넣을 때도 텍스트에서 넣기 => Command + Ctrl + Space bar

 

 

 

 

 

 

 

---

 

 

 

 

3. 배리언트 기능을 응용하여

Tab bar 만들기

 

Tab bar 제작

-> 기본 버튼을 먼저 제작 후 간격 만든 후 Fill 값 채우기

-> 기본 버튼을 1개 먼저 제작

-> 그 다음 사이즈를 다양하게 줄여줌, 2 또는 4 단위로 Text size 줄이기

-> 개발자와 소통할 수 있게 <명칭 적어놓기>

 

 

 

 

 

-> 제작시 전체 클릭

-> Create multiple components 

 

 

 

 

 

 

 

비교 

멀티플 컴포넌트 한 것 VS  그냥 컴포넌트 한 것 

-> 멀티플로 하면 각각의 프레임으로 선택가능

     그냥 컴포넌트하면 하나의 컴포넌트로 묶임

 

-> Create multiple components     VS     components