피그마 Frame

Figma에서는 Canvas에 직접 레이어를 추가할 수 있다. 특정 장치 또는 화면 크기에 맞게 디자인하는 경우 디자인에 대한 컨테이너를 만들 수 있다. 프레임이 들어오는 곳이다.

이전에 디자인 도구를 사용해 본 적이 있다면 대지(artboard)에 익숙할 것이다. 아트보드와 마찬가지로 프레임을 사용하면 디자인을 만들 캔버스 영역을 선택할 수 있다.

기존 아트보드와 달리 다른 프레임 내에 프레임을 중첩(nest) 할 수도 있다. 이를 통해 함께 작동하는 보다 복잡한 디자인을 만들 수 있다.

프레임 도구를 사용하여 캔버스에 프레임을 만든다. 프레임 도구를 선택하는 몇 가지 방법이 있다.

그런 다음 캔버스에서 다양한 프레임 크기를 만들 수 있다.

레이어 패널에서 프레임(#)을 식별한다.

Tip! 단일 레이어이든 선택한 레이어이든 상관없이 기존 개체 주위에 프레임을 만들 수도 있다. 프레임 선택 키보드 단축키 사용:

맥 : ⌥ Option + ⌘ Command + G
윈도우 : Ctrl + Alt + G

프레임은 다음 속성을 지원한다.

프레임을 사용하면 Figma의 추가 기능에 액세스할 수 있다. 다음 기능을 사용하려면 프레임을 사용해야 한다.

Layout Grids : 시각적 구조를 제공하기 위해 프레임에 투명한 그리드(transparent grids), 열(columns) 또는 행(rows)을 적용한다.
Constraints(제약 조건) : 프레임 크기를 조정할 때 자식 개체가 어떻게 반응하는지 정의한다. 프레임 내의 개체에 제약 조건(Constraints)을 적용한다.
Auto Layout : 프레임에 자동 레이아웃을 추가하여 내용에 반응하는 동적 레이아웃을 생성한다.
Prototyping : Canvas의 프레임 사이를 이동하는 대화형 프로토타입을 만든다.

Frame은 부모(parent) 개체이다. 이것은 당신이 그 안에 배치하는 모든 자식(child) 개체를 제어하거나 영향을 줄 수 있음을 의미한다.

과거에는 프레임을 선택했을 때 자식 개체의 속성을 조정할 수 있었다. 이제 프레임 자체의 속성을 조정할 수 있다.

Figma에서는 다른 프레임 내에 프레임을 생성할 수 있다. 우리는 이 과정을 중첩(process nesting)이라고 부른다. 이를 통해 다양한 속성을 가진 프레임을 결합하여 복잡한 인터페이스를 구축할 수 있다.

그러면 새로운 계층(hierarchies) 또는 관계(relationships)가 생성된다.

최상위 프레임(Top-level frames) : 캔버스에 직접 있는 모든 프레임은 최상위 프레임이 되도록 다른 Frame, Group 또는 Object 내에 중첩할 수 없다.
중첩 프레임(Nested frame) : 다른 프레임 내에 배치되는 모든 프레임은 최상위 프레임 또는 다른 중첩 프레임 내에 프레임을 배치할 수 있다. 중첩 프레임은 부모와 자식 모두이다.
자식(Children) : 프레임 내에 있는 모든 개체.

Figma는 레이어 패널에서 최상위 프레임을 굵게 표시하고 캔버스에 모든 최상위 프레임의 이름을 표시한다.

중첩 프레임은 다른 프레임이나 개체 내에 배치하는 프레임이다. 이것은 그들을 부모와 자녀로 만든다. 다음 위치에 프레임을 배치할 수 있다.

아래 예에서 각 요소는 자체 프레임으로 만들었다. 상단에는 상태 표시줄(status bar)이 있고 하단에는 탐색 메뉴(navigation menu)가 있다. 또한 예정된 티켓(Upcoming Tickets)에 대한 세부 정보가 포함된 카드도 있다.

장치(device) 사전 설정 중 하나를 사용하여 요소에 대한 최상위 프레임을 만들 수 있다. 모바일 앱에서 단일 화면을 만들기 위해 최상위 프레임에 요소를 추가할 수 있다.

프레임의 크기 또는 배율 변경을 포함하여 캔버스의 다른 개체와 마찬가지로 프레임과 상호 작용할 수 있다. 프레임의 크기를 변경하는 몇 가지 방법이 있다.

드래그하여 수동으로 프레임 크기를 조정한다.

Tip! 하위 개체에 대한 모든 제약 조건(Constraints)을 무시하려면 수정자 키를 누르고 있는다.

맥: ⌘ Command
윈도우: Ctrl

프레임 크기를 변경하려면 다른 프레임 사전 설정을 선택해 보자.