UXUI

피그마 기초 2

deo11 2025. 4. 9. 17:53

프레임과 그룹

프레임 : 피그마에서 코드 블록을 만드는 기능이자 실제 화면으로 인식하는 개체

- 프레임은 디자인을 코드로 바꿀 때 개발이 가능한 코드 블록으로 만들어진다.

- 박스 모델의 박스 하나하나가 다 피그마에서 프레임이라는 기능으로 구현되는 셈이다.

- 프레임은 다른 개체나 프레임을 넣을 수 있기 때문에 컨테이너(containal)라고도 불린다.

그룹 : 여러 개체를 하나로 묶어주는 기능

여러 개체를 조정하거나 디자인을 정리하는 등 편의를 위해 여러 개체를 하나도 담는 기능

  * 그룹은 실무에서 잘 사용하지 않음


부모-자식 관계와 레이어 정렬

 

감싸고 있는 것과 감싸진 것의 관계를 부모-자식(Parent-Child) 관계라고 한다.


🌟🌟🌟오토레이아웃🌟🌟🌟

오토레이아웃은 레이어를 쌓고 프레임을 배치하고 정렬하는 피그마의 핵심 기능이다.

1) 코드 블록의 구조

코드 블록은 피그마에선 프레임으로 만들 수 있다. 다른 말로는 컨테이너라고 부름.

- 패딩(Padding) : 코드 블록 안에 있는 개체와 함께 실제 블록의 사이즈가 되는 내부 여백

- 보더(Border) : 코드 블록 내부 공간 바로 바깥의 가장자리.실제 코드 블록의 테두리

- 마진(Margin) : 코드 블록 바깥의 여백이자 다른 코드 블록과의 간격

 

'UXUI' 카테고리의 다른 글

[내일배움캠프 1일차] UXUI 디자인 입문  (1) 2025.04.14
클론 디자인 만들기 🌟  (7) 2025.04.11
UX/UI 디자이너 온보딩  (0) 2025.04.11
피그마 기초 3  (0) 2025.04.10
피그마 기초  (0) 2025.04.09