[피그마2025강의] 2강 피그마 프레임(Frame)

 

 

 

 

 

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

https://youtu.be/0sXTWvFDFP4

 

- 영상에는 프레임, 가이드, 그리드에 관련된 모든 영상이 있지만, 프레임 부분인 앞부분만 보면 됩니다. 

 

 

 

 

 

 

 

 

 

1. 프레임이란?

---

- 프레임(Frame)은 포토샵/일러스트레이터/XD 등의 아트보드와 같은 개념입니다.

- 위 그림에서 보이는 흰색 종이 같은 부분입니다 

- 툴박스에서 우물정(#) 아이콘을 누른 후 드래그하면 나옵니다. 

- 디자인을 작업할 틀이라고 생각하면 됩니다. 

- 디자인 요소를 그룹화시켜주는 기능을 합니다. 

- 그룹화 시켜주는 요소는 그룹, 프레임, 섹션, 오토레이아웃, 프레임 등이 있는데 나머지도 차차 배워 나갈 예정입니다. 

- 프레임을 드래그하지 않아도 옆의 디자인 패널에서 많은 기기 장치의 사이즈대로 프레임을 만들 수 있습니다.

- 기기 사이즈를 모두 외울 수 없는데, 피그마가 제시해 주니 매우 편리하죠?

- 하지만 모든 것이 있는 것은 아니니 프로젝트에 따라 사용자가 드래그해서 사이즈를 맞추면 됩니다. 

- 자세한 실습은 동영상을 보고 따라 해주세요. 

 

 

 

 

 

반응형

 

 

 

 

 

 

 

 

 

2. 프레임 프로토타입

---

- 프레임(Frame)을 기기 사이즈로 만들면 그에 따른 프로토타입으로 지정할 수 있습니다.

- 위의 그림처럼 모바일 기기인 iPhone 16 Pro Max를 선택해서 프레임을 생성합니다.

- Prototype 패널에 간 다음 Show Prototype settings를 선택합니다. 

- 그럼 Prototype 패널에 기기가 씌워져 있는 것을 확인할 수 있습니다. 

- 원래 갖고 있는 색상으로 색상 선택도 가능하니 한번 변경해 보세요. 

- 프레임을 선택한 후 우측 상단의 플레이버튼(Present)을 클릭합니다. 

- 그럼 위와 같은 기기가 씌워진 형태로 나옵니다.

- 현재는 디자인된 것이 없어서 흰 부분만 보이고 디자인을 하면 실제처럼 스크롤도 내리고, 프로토타입도 지정이 가능합니다.