[피그마2025강의] 5강 피그마 - 사각형 도형툴 - 햄버거 버튼 만들기

 

 

 

 

 

** 영상으로 보고 싶은 분은 아래 주소를 클릭해 주세요. 

https://youtu.be/QPrRZIQ9CuE

 

 

 

 

 

 

 

 

 

 

 

 

1. 피그마 도형툴

---

- 피그마도 일러스트레이터처럼 벡터 도형툴을 지원합니다.

- 간단한 아이콘은 쉽게 제작할 수 있습니다. 

- 툴박스에서 사각형 도형툴을 누르면 다양한 도형툴을 확인할 수 있습니다. 

- 툴 박스에서 세 번째 있는 사각형툴 옆의 드롭다운메뉴를 누르면 다양한 도형이 있습니다.

- 이번 포스트는 사각형 툴이니까 그냥 첫 번째 것을 누르면 되겠네요. 

 

 

 

 

 

 

반응형

 

 

 

 

 

 

 

 

 

2. 사각형 도형 그리기

---

- 도형을 그리는 여러 가지 방법을 알아보겠습니다. 

- 도형은 단독 요소로 그리는 것보다는 프레임에 그리는 것이 좋겠죠?

 

 

 

1) 프레임에 클릭

- 프레임에 클릭하면 아래와 같이 100x100 사이즈의 도형이 나옵니다. 

- 사이즈는 디자인 패널에서 언제든지 바꿀 수 있으므로 이것도 하나의 방법이겠죠?

- 보이는 것과 같이 클릭하면 100x100 사이즈의 사각형이 잘 나옵니다. 

 

 

 

---

 

 

 

2) 드래그

- 사각형 툴을 누르고 드래그하면 사용자가 원하는 만큼의 크기로 나옵니다. 

- 이때 단축키를 알면 더 좋습니다.

• [Shift]+드래그 : 정 사각형 비율로 사각형 생성
• [Alt]+드래그 : 드래그 시작점을 중앙으로 사각형 생성

- 두 개의 단축키를 동시에 누르면 정비율의 중앙에서 시작하는 사각형을 그릴 수 있습니다. 

 

 

---

 

 

 

3) 색상 변경

- 도형은 면색과 선택으로 나뉩니다. 

- 면색은 디자인 패널의 Fill에서 변경하고, 선색 및 굵기는 Stroke에서 추가한 후 변경하면 됩니다. 

 

 

 

---

 

 

 

 

4) 크기 변경

- 크기는 디자인 패널에서 수치를 직접 적어도 되고, 도형을 선택하고 드래그해도 됩니다.

 

 

 

 

---

 

 

 

5) 도형 복제

- 제자리 복제하고 싶다면 [Ctrl]+[D]를 누릅니다.

- 다른 위치로 복제하고 싶다면 [Alt]를 누르면 도형을 드래그하면 됩니다. 

- 여러 도형의 위치는 스마트 가이드(빨간 가이드선)가 자동으로 나와서 위치 조절이 쉽니다.

 

여태까지 배운 내용으로 햄버거버튼을 직접 만들어 보세요.

자세한 내용은 위에 첨부한 유튜브 영상을 참고해 주세요.