Figma #3 - icon만들기

Lina·2024년 6월 6일
0

Web Design

목록 보기
16/29
post-thumbnail

◎ 피그마는 오브젝트를 구분 짓는데 레이어의 이름을 활용합니다.
특히 컴포넌트 단위에서 레이어 이름에 /를 사용하면 <그룹명/그룹명/오브젝트명>으로 각 요소를 단계별로 그룹화하여 관리할 수 있습니다.

icon 만들기

  1. f를 눌러 프레임을 선택한후 프레임을 하나 추가해 준다.
  2. 왼쪽 메뉴에서 Grid styles [+] 을 선택해서 원하는 스타일의 그리드를 생성하고, 이름을 입력한다.




3. 프레임을 하나 만들고, ctrl+r을 눌러서 이름을 Icon/lock로 변경.

4. 왼쪽 메뉴에서 Layout grid ->Grid sytles->icon grid-24 선택!

5. 이제 자물쇠 모양 아이콘을 하나 만들어 볼건데 사각형을 그릴 수 있게 r을 눌러서 자물쇠 아랫 부분이 될 사각형을 하나 그려준다.

6. 자물쇠 윗부분을 만들기 위해 사각형을 하나 추가하고 아래 그림처럼 속성값을 변경해준다.

7. 자물쇠 아랫부분에 가로 4px 세로 4px인 원을 하나 그려주고, 자물쇠 아래부분 사각형과 원을 동시에 선택한후 Subtract selection해서 구멍을 낸다.


8. 이제 자물쇠 윗부분 사각형의 Corner radius를 조정해 주고, 위치를 다시 잡아준다.

9. 자물쇠 모양 전체를 선택해서 Union selection해준다.

10. Flatten selection도 해준다.

11. 마우스 오른쪽 버튼을 누르고 Outline stroke를 클릭.

12. shift+x를 해서 선면을 교체해 주고, Stroke을 2로 준다.
(갑자기 자물쇠에서 카메라가 되버렸네 ㅠ.ㅠ)
Constraints도 scale로 수정해준다. 아이콘 만들기 끝!

◎ Flatten

여러 개의 레이어를 하나로 통합시키며, 동시에 백터 정보를 초기화하는 역할을 한다. 이 기능은 다수의 레이어를 단일 레이어로 통합하는 특성을 이용해 합치기나 오브젝트 빼기 등을 활용해서 아이콘 레이어를 정리할 때 쓰거나 서로 다른 레이어에 있는 패스를 연결할 때 사용함. 한 번 통합한 레이어는 실행 취소 말고는 다시 되돌리 수 없다!

  • 레이어를 통합한다.
  • 레이어가 하나로 합쳐지는 겨우 최상위 레이어의 속성을 물려받는다.
  • 각도 및 radius를 0으로 초기화함.
  • 크기에 맞게 패스 조정됨.
  • 단축키 : Ctrl+E

◎ Outline stroke

주로 선으로 그려진 아이콘을 면으로 변경하거나 텍스트의 형태로 오브오브젝 만들 때 사용.

  • stroke정보를 fill(면)으로 전환한다.
  • corner radius가 적용된 경우 둥근 정도를 패스와 커브로 변경한다.
profile
웹디자인 스케치

0개의 댓글