Figma에서는 Canvas에 직접 레이어를 추가할 수 있다. 특정 장치 또는 화면 크기에 맞게 디자인하는 경우 디자인에 대한 컨테이너를 만들 수 있다. 프레임이 들어오는 곳이다.
이전에 디자인 도구를 사용해 본 적이 있다면 대지(artboard)에 익숙할 것이다. 아트보드와 마찬가지로 프레임을 사용하면 디자인을 만들 캔버스 영역을 선택할 수 있다.
기존 아트보드와 달리 다른 프레임 내에 프레임을 중첩(nest) 할 수도 있다. 이를 통해 함께 작동하는 보다 복잡한 디자인을 만들 수 있다.
프레임은 또한 레이아웃 그리드(Layout Grid) , 자동 레이아웃(Auto Layout) , 제약 조건(Constraints) 및 프로토타이핑(Prototyping)과 같은 추가 기능에 대한 액세스를 제공한다.
Frame 만들기
프레임 도구를 사용하여 캔버스에 프레임을 만든다. 프레임 도구를 선택하는 몇 가지 방법이 있다.
- 키보드 단축키를
F 또는A 사용 - 도구 모음의 프레임(#) 도구 선택
![](https://i0.wp.com/knulab.com/wp-content/uploads/2021/10/figma-frame-1.png?w=758&ssl=1)
그런 다음 캔버스에서 다양한 프레임 크기를 만들 수 있다.
- 캔버스를 클릭하여 100 x 100 치수의 기본 프레임을 만든다.
- 캔버스를 클릭하고 드래그하여 사용자 정의 치수가 있는 프레임을 만든다.
- 오른쪽 사이드바의 드롭 다운을 사용하여 프레임 사전 설정값을 선택한다.
- 인기 있는 Device 및 Asset 템플릿에 대한 사전 설정 선택:
- Phone
- Tablet
- Desktop
- Watch
- Paper
- Social Media
- Figma Community
- 화살표를 클릭하여 섹션을 확장하고 목록에서 사전 설정값을 선택한다.
- 인기 있는 Device 및 Asset 템플릿에 대한 사전 설정 선택:
레이어 패널에서 프레임(#)을 식별한다.
![](https://i0.wp.com/knulab.com/wp-content/uploads/2021/10/file-VNyRVP9Yfq.png?w=758&ssl=1)
Tip! 단일 레이어이든 선택한 레이어이든 상관없이 기존 개체 주위에 프레임을 만들 수도 있다. 프레임 선택 키보드 단축키 사용:
맥 :
윈도우 :
Frame 속성
프레임은 다음 속성을 지원한다.
- Corner Radius : 부드러운 가장자리를 만들기 위해 프레임의 모서리를 둥글게 만든다.
- Clip Content : 프레임 경계를 넘어 확장되는 프레임 내의 모든 개체를 숨긴다.
- Layout Grids : 디자인의 시각적 구조에 도움이 되는 지침(guidelines)을 만든다.
- Auto Layout : 내용에 반응하는 동적 프레임(Dynamic Frames) 만든다.
- Fill : 단색 채우기, 그라디언트, 이미지 (PNG, JPEG, GIF, TIFF 및 WEBP)를 프레임에 적용한다.
- Stroke : 테두리 또는 윤곽선을 만들기 위해 프레임에 strokes(획)을 추가한다.
- Effects : 프레임에 shadow 또는 blurs 효과 추가
추가 기능
프레임을 사용하면 Figma의 추가 기능에 액세스할 수 있다. 다음 기능을 사용하려면 프레임을 사용해야 한다.
- Layout Grids : 시각적 구조를 제공하기 위해 프레임에 투명한 그리드(transparent grids), 열(columns) 또는 행(rows)을 적용한다.
- Constraints(제약 조건) : 프레임 크기를 조정할 때 자식 개체가 어떻게 반응하는지 정의한다. 프레임 내의 개체에 제약 조건(Constraints)을 적용한다.
- Auto Layout : 프레임에 자동 레이아웃을 추가하여 내용에 반응하는 동적 레이아웃을 생성한다.
- Prototyping : Canvas의 프레임 사이를 이동하는 대화형 프로토타입을 만든다.
Frame은 부모(parent) 개체이다. 이것은 당신이 그 안에 배치하는 모든 자식(child) 개체를 제어하거나 영향을 줄 수 있음을 의미한다.
Figma의 부모/자식 관계에 대해 자세히 알아보기 →
프레임 속성 조정
과거에는 프레임을 선택했을 때 자식 개체의 속성을 조정할 수 있었다. 이제 프레임 자체의 속성을 조정할 수 있다.
- 키보드 단축키
Enter 또는Return 를 사용하여 하위 개체를 선택한다. Tab 키를 눌러 다음 형제를 선택할 수 있다.Shift +Tab 키를 눌러 이전 형제를 선택한다.Shift +Enter 키로 상위 부모를 선택한다.
다른 Frame 내에 Frame 중첩
Figma에서는 다른 프레임 내에 프레임을 생성할 수 있다. 우리는 이 과정을 중첩(process nesting)이라고 부른다. 이를 통해 다양한 속성을 가진 프레임을 결합하여 복잡한 인터페이스를 구축할 수 있다.
그러면 새로운 계층(hierarchies) 또는 관계(relationships)가 생성된다.
- 최상위 프레임(Top-level frames) : 캔버스에 직접 있는 모든 프레임은 최상위 프레임이 되도록 다른 Frame, Group 또는 Object 내에 중첩할 수 없다.
- 중첩 프레임(Nested frame) : 다른 프레임 내에 배치되는 모든 프레임은 최상위 프레임 또는 다른 중첩 프레임 내에 프레임을 배치할 수 있다. 중첩 프레임은 부모와 자식 모두이다.
- 자식(Children) : 프레임 내에 있는 모든 개체.
부모(parent), 자녀(child) 및 형제자매(sibling) 관계에 대해 자세히 알 수 있다.
최상위 프레임(Top-level frames)
Figma는 레이어 패널에서 최상위 프레임을 굵게 표시하고 캔버스에 모든 최상위 프레임의 이름을 표시한다.
![](https://i0.wp.com/knulab.com/wp-content/uploads/2021/10/file-MDfX7gA6Aq.png?w=758&ssl=1)
중첩 프레임(Nested frames)
중첩 프레임은 다른 프레임이나 개체 내에 배치하는 프레임이다. 이것은 그들을 부모와 자녀로 만든다. 다음 위치에 프레임을 배치할 수 있다.
- 최상위 프레임 / Top-level frames
- 기타 중첩 프레임 / Other nested frames
- 그룹으로 / In groups
아래 예에서 각 요소는 자체 프레임으로 만들었다. 상단에는 상태 표시줄(status bar)이 있고 하단에는 탐색 메뉴(navigation menu)가 있다. 또한 예정된 티켓(Upcoming Tickets)에 대한 세부 정보가 포함된 카드도 있다.
장치(device) 사전 설정 중 하나를 사용하여 요소에 대한 최상위 프레임을 만들 수 있다. 모바일 앱에서 단일 화면을 만들기 위해 최상위 프레임에 요소를 추가할 수 있다.
![](https://i0.wp.com/knulab.com/wp-content/uploads/2021/10/file-vwL7ueP9ts.png?w=758&ssl=1)
Frame 크기 조정
프레임의 크기 또는 배율 변경을 포함하여 캔버스의 다른 개체와 마찬가지로 프레임과 상호 작용할 수 있다. 프레임의 크기를 변경하는 몇 가지 방법이 있다.
프레임 드래그
드래그하여 수동으로 프레임 크기를 조정한다.
- 캔버스에서 프레임을 선택하거나 왼쪽 사이드바에서 레이어 패널을 선택한다.
- 모서리 중 하나의 핸들을 클릭하고 드래그하여 크기를 조정한다. 또는 가장자리 중 하나를 클릭하고 리사이징한다.
Tip! 하위 개체에 대한 모든 제약 조건(Constraints)을 무시하려면 수정자 키를 누르고 있는다.
맥:
윈도우:
프레임 사전 설정 변경
프레임 크기를 변경하려면 다른 프레임 사전 설정을 선택해 보자.
- 프레임을 선택한다.
- 오른쪽 사이드바의 속성 패널에서 프레임 필드를 선택한다.
- 목록에서 사전 설정을 선택한다.
- 인기 있는 Device 및 Asset 템플릿에 대한 사전 설정 선택:
- Phone
- Tablet
- Desktop
- Watch
- Paper
- Social Media
- Figma Community
- Figma는 사전 설정과 일치하도록 프레임의 치수를 업데이트한다.
Note: 하위 개체에 제약 조건(Constraints)을 적용한 경우 Figma는 새 프레임 사전 설정과 일치하도록 크기를 조정한다. 그렇지 않으면 프레임 내부의 개체가 원래 치수와 위치를 유지한다.
속성 패널
오른쪽 사이드바의 속성 패널을 사용하여 프레임의 너비 와 높이를 업데이트한다.
W 및 H 필드 에 새 숫자를 입력 하거나 아이콘 위로 마우스를 가져가서 필드를 스크러빙한다. 감소하려면 왼쪽으로, 증가하려면 오른쪽으로 끓는다.
Width 및 Height 옆에 있는 링크 버튼을 토글 하여 현재 비율로 크기 조정을 제한한다.
![](https://i0.wp.com/knulab.com/wp-content/uploads/2021/10/file-GYdlkOZ1i2.png?w=758&ssl=1)
Tip! 가로/세로 사이즈 필드를 사용하여 계산을 수행할 수 있다. 이를 통해 개체의 크기를 빠르게 조정하거나 크기를 조정할 수 있다.
- % 비율(예: 50%)
- + 추가 예: +100
- – 빼기(예: -20)
- * 곱하기(예: *4)
- / 나누기(예: /8)
너비나 높이에 백분율을 곱하는 것은 불가능하다. *50%는 50%가 아닌 원래 값의 50배가 된다.
딱 맞게 크기 조정
프레임의 크기를 조정하여 자식 개체에 맞게 축소하거나 확대할 수 있다. 이렇게 하면 프레임 안에 있는 개체의 가장 바깥쪽 경계 주위에 프레임이 다시 그려진다.
- 키보드 단축키 사용:
- 맥:
⌥ Option +Shift +⌘ Command +R - 윈도우:
- 맥:
- 속성 패널의 오른쪽 상단 모서리에 있는 파란색 점선 안의 아이콘을 클릭한다.
![](https://i0.wp.com/knulab.com/wp-content/uploads/2021/10/file-Uo58OhBfHe.png?w=758&ssl=1)
출처 : Frames in Figma
댓글을 달려면 로그인해야 합니다.