[Figma] 피그마 프레임과 섹션, 그룹의 차이점을 알아보자

 

해당 포스팅은 프레임과 섹션, 그룹의 차이점을 설명해 놓은 글입니다. 프레임(Frame)은 화면요소와 화면을 담는 컨테이너이고, 섹션(Section)은 화면들을 담는 단위, 그룹(Group)은 화면을 묶는 단위입니다. 

추가적으로 콘스트레인츠(Constraints) 개념까지 함께 정리해놓았습니다. 

 

요약하자면,

프레임, 섹션, 그룹의 차이점

 

• 섹션(Section) : 화면을 담는 단위로써 프레임과 화면 요소들을 담을 수 있다. 프레임 내에 담을 수 없다. 
• 프레임(Frame) : 화면요소와 화면을 담는 컨테이너(그룹)이다. 속성을 변경하더라도, 콘텐츠에 영향을 미치지 않는다.
• 그룹 (Group) :  화면들을 묶는단위로써 컨테이너 역할을 하지 않는다. 속성을 변경하면 콘텐츠에 영향을 미친다. 

 

프레임, 섹션, 그룹 어떻게 사용하는데?

프레임을 그리는 방법 2가지!

1. #Frame 선택 후 화면에 드래그 해서 그리기

2. #Frame 선택 후 오른쪽 디자인 패널에서 프레임 프리셋 사용하기

프레임, 섹션, 그룹 사용법

 

2번방법을 이용하면, iphone, Android, Tablet, Desktiom Presentation, Watch, papaer, Social media, 등 다양한 프레임 프리셋을 사용할 수 있다. 개발자와 퍼블리셔는 작업시 화면에 맞는 디자인을 작업 할 수 있기에, 프리셋을 사용하여 기획, 디자인 작업시 작업 효율이 높아질 수 있다. 

 

 

섹션 내부에 프레임(or 그룹) 어떻게 삽입해? 프레임 내부에 그룹 어떻게 삽입해?

옮기고 싶은 요소들 모두 드래그 or Shift로 선택하여 내부로 드래그하면, 파란색 테두리가 생기는 경우는 성공!
빨간색 테두리가 유지되면 삽입 실패! 

*Layers 패널에서도 드래그해서 삽입하는 방법도 있다. 

 

 

프레임, 섹션, 그룹 차이점이 뭐야?

[섹션 ⊃ 프레임 ⊃ 그룹 ]

섹션(Section)

           프레임(Frame)

그룹(Group)

	섹션	프레임	그룹
컨테이너역할	O	O	X
속성 변경시 콘텐츠 영향	X	X	O
사이즈 변경시 영향	X	X	O(크기에 맞춰)

 

 

프레임 콘스트레인츠 이해

콘스트레인츠가 뭔데?

프레임 안에 든 요소를 원하는 방향으로 고정시켜주는 기능이다. 

콘스트레인츠 사용

 

콘스트레인츠 어떻게 사용해?

요소, 도형, Text를 선택하면 디자인 패널의 Constraints 영역에서 고정하고 싶은 가로, 세로의 방향을 핀을 눌러 설정한다.

설정된 핀의 방향으로 고정되어, 요소 크기와 위치를 변경해도, 고정되어 변경되지 않는다.

 

콘스트레인츠는 언제 사용해?

상단바 타이틀, 버튼위치 등 컴포넌트를 고정된 위치에 배치하기 위해 자주 사용된다. 

 

 

 

 

▼ 함께 보면 좋은 피그마 콘텐츠▼

[Figma] 피그마 기본개념, 화면구조, 기능정리 ch.1 (Move, Scale, Local variable,Local style, Export)