피그마 실습 - 아이콘,버튼,텍스트필드 만들기

* 피그마는 오브젝트를 구분 짓는데 레이어에 이름을 활용한다

특히 컴포넌트 단위에서 레이어 이름에 (/)가 들어가면 <그룹명/그룹명/오브젝트명> 으로 각 요소를 단계별로 그룹화해서 관리할 수 있다.

<아이콘 만들기>

1. 도형으로 아이콘 형태를 얼추 만들어준다.

2. shift + X 으로 도형을 선으로 바꿔준다.

3. 선을 center로 바꾸고 두께와 테두리 라운드를 준다.

4. 마우스 우클릭 outline stroke 을 통해 패스를 면으로 바꿔준다.

5. constraints을 scale로 바꿔준다.

constraints를 둘 다 scale로 바꿔줘야만, 화면이 커지고 줄어들때 같이 커지고 줄어든다.

icon 전용 여백 레이아웃 가이드을 저장해놓고 쓰면 편하다

+ < 별 꼭짓점 늘리기 >

별 먼저 그린 후 - 별 한번 클릭 - 오른쪽 패널에서 꼭짓점 수랑 각도 설정해서 다양한 별을 만들 수 있다.

<버튼 만들기>

1. 글자 써서 shift + a 로 오토레이아웃 전환

2. 배경 색 넣어준다

3. 여백과 코너 등을 조절해준다

4. 원하는 글자로 수정한다.

<텍스트 필드>

검색창을 텍스트 필드라고 부른다.

글자정렬은 글자말고 프레임 선택해서 오른쪽 파란색 아이콘을 왼쪽으로 클릭해준다.

텍스트필드 속 글씨는 fill로 선택해준다.

얼레벌레