[Figma] 아이콘 만들기와 Auto Layout(오토 레이아웃)

아이콘

아이콘 만들기

1. 원하는 모양을 만든다
2. 세부조절모드로 들어가 밴딩을 줄 수 있다
   • 밴딩은 쉬프트를 누르고 만지면 직각방향으로 밴딩이 가능하다
   • 알트를 누르면 한 점만 밴딩이 가능하다

선 아이콘 만들기

1. Ctrl+X 버튼을 눌러 선과 면을 swap한다
2. 원하는 두께에 맞게 stroke 을 조절한다
3. 알람 버튼처럼 종안쪽 선을 지워야한다면
   • 종 머리부분 복사 -> Ctrl+X로 다시 면 채우기
   • 방울이 위로가게 둔 상태에서 면 종머리와 함께 subtrack
   • 다시 Ctrl+X
4. 설정의 톱니바퀴처럼 세부 설정이 필요하다면
   • 요소를 더블클릭해서 요소에 사선이 그어진 상태에서 원하는 부분에 점 찍고 조정

아이콘 마무리

1. 유니온 해주기
2. 선은 블랙으로 해주기
   • 나중에 svg모드로 내보낼 때, 다른 색상으로 할 경우 색 덮어쓰기 할 때 색이 섞여 원하는 컬러가 안나올 수 있으므로 블랙으로 하는게 좋다
3. flatten 해주기(Ctrl+E)
4. 톱니바퀴처럼 만약 면처리가 안되어있으면(파란 윤곽이 외곽에만 생겨있으면)
   • 마우스 우클릭 outline stroke 처리를 하면 flatten과 같은 효과를 볼 수 있다.
5. 이름은 메타포(모양)대로 하는게 좋다
   • 기능대로 하면 다른 기능에서 똑같은 형태의 아이콘을 사용할 때 형태는 같고 이름은 다른 아이콘이 생길 수 있음
   • 그러므로 모양대로 하는게 좋다
   • line형과 filled 형 중 기본형을 정하고, 기본형이 아닌 것에 _line or _filled를 붙여주면 된다.

 

 

오토레이아웃

 

• 오토레이아웃도 프레임과 같은 영역임
• 자동으로 설정된 값이 있으면 오토레이아웃, 없으면 프레임이라고 함
• 프레임 생성 -> 오토레이아웃 : 상하좌우 패딩이 있는 레이아웃이 됨
• 요소 선택 -> 오토레이아웃 : 상하좌우 패딩 없는 레이아웃이 됨
• 규칙적인 레이아웃이 필요할 때 사용

 

오토레이아웃의 가로 사이즈 설정

1. fixed : 고정 사이즈
2. Hug contents : 오토레이아웃 안에 있는 컨텐츠를 포함하는 사이즈로 늘어난다
3. filled : 바깥을 둘러싼 프레임 기준으로 가로 세로 사이즈를 꽉 채운다 (오토레이아웃 안에 있는 오브젝트에 설정 가능)

 

 

fixed

 

 

Hug contents

 

 

 

Filled

 

- 레이아웃으로 만들어진 가로 사이즈 대비해서 꽉 차게 들어가게 됨

- 아이콘도 Filled 로 바꾸면 아이콘과 텍스트의 가로 비율이 똑같게 수정됨

 

 

 

도형에도 적용해보기

fixed 상태

 

 

 

Hug contents 상태

- 오브젝트들의 사이즈와 설정해 놓은 패딩 값으로 더해진 값 만큼으로 프레임이 조절됨

 

 

Filled

 

- 패딩을 제외한 남은 공간으로 꽉 참

 

 

- Direction을 Wrap으로 조정하면 프레임 크기에 따라 도형의 크기도 변함

 

 

 

Auto layout 과 Constraints

 

Auto layout

•  규칙적인 레이아웃이 필요할 때 사용
• 하단바, 카드, 리스트 등

• 아이콘과 글씨를 묶어 오토 레이아웃을 적용한 뒤 아이콘을 5개 만들어 또 한번 오토레이아웃 적용, Filled로 배열

• 아이콘과 글을 오토레이아웃으로 만든 같은 요소 여러개 만들고 세로 방향으로 한번 더 오토레이아웃 해서 간격 똑같이 두기

 

 

 

Constraints

• 부모 레이아웃에 상속이 필요할 때
• 리사이징 했을 때 레이아웃이 유지되어야 할 때
• 부모 레이아웃이 꼭 있어야 설정 가능! 없으면 Auto layout