Figma Design의 프레임

시작하기 전에

이 기능을 사용할 수 있는 사용자

팀이나 계획에 관계없이 누구나 프레임을 사용할 수 있습니다.

파일에 대한 편집 가능 액세스 권한이 있는 사람은 누구나 프레임을 만들고 편집할 수 있습니다.

Figma에서는 캔버스에 직접 레이어를 추가할 수 있습니다. 특정 디바이스나 화면 크기에 맞게 디자인하는 경우 디자인에 맞는 컨테이너를 만들 수 있습니다. 이것이 바로 프레임이 중요한 이유입니다.

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

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

프레임을 사용하면 레이아웃 그리드, 자동 레이아웃, 제약조건, 프로토타입 제작과 같은 추가 기능에 액세스할 수도 있습니다.

프레임 만들기

프레임 도구를 사용하여 캔버스에 프레임을 만듭니다. 다음과 같은 몇 가지 방법으로 프레임 도구를 선택할 수 있습니다.

• 단축키 F or A 를 사용합니다.
• 도구 모음에서 프레임 도구를 선택합니다.

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

• 캔버스를 클릭하여 100 x 100 크기의 기본 프레임을 만듭니다.
• 캔버스에서 클릭하고 드래그하여 사용자 정의 크기의 프레임을 만듭니다.
• 오른쪽 사이드바의 드롭다운을 사용해 프레임 사전 설정을 선택합니다.
  1. 인기 있는 디바이스 및 애셋 템플릿에 대한 사전 설정을 선택합니다.
     • 전화
     • 태블릿
     • 데스크톱
     • 프레젠테이션
     • 시청하기
     • 종이
     • 소셜 미디어
     • Figma 커뮤니티
     • 아카이브
  2. 화살표를 클릭하여 섹션을 확장하고 목록에서 사전 설정을 선택합니다.

레이어 패널에서 으로 프레임을 식별합니다.

프레임 속성

프레임과 관련된 몇 가지 속성이 있습니다. 프레임은 다음과 같은 속성을 지원합니다.

• 모서리 반경: 프레임의 모서리를 둥글게 하여 부드러운 모서리를 만듭니다.
• 콘텐츠 숨기기: 프레임 경계를 넘어 확장되는 프레임 내의 모든 개체를 숨깁니다.
• 레이아웃 그리드: 디자인의 시각적 구조에 도움이 되는 지침을 만듭니다.
• 자동 레이아웃: 콘텐츠에 반응하는 동적 프레임을 만듭니다.
• 채우기: 단색 채우기, 그라데이션, 이미지 (PNG, JPEG, GIF, TIFF, WEBP)를 프레임에 적용합니다.
• 선: 프레임에 선을 추가하여 테두리나 윤곽선을 만듭니다.
• 효과: 프레임에 그림자나 흐림 효과를 추가합니다.

추가 기능

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

• 레이아웃 그리드: 프레임에 투명한 그리드, 열 및/또는 행을 적용하여 시각적 구조를 제공합니다.
• 제약조건 : 프레임의 크기를 조정할 때 자식 개체가 어떻게 반응할지 정의합니다. 프레임 내의 개체 에 제약조건을 적용합니다.
• 자동 레이아웃: 프레임에 자동 레이아웃을 추가하여 콘텐츠에 반응하는 동적 레이아웃을 만듭니다.
• 프로토타입 제작: 캔버스의 프레임 사이를 이동하는 인터랙티브 프로토타입을 제작합니다.

프레임은 부모  개체입니다. 즉, 그 안에 배치한 자식 개체를 제어하거나 영향을 줄 수 있습니다.

Figma의 부모/자식 관계에 대해 자세히 알아보기 →

프레임 속성 조정

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

• 키보드 단축키 (Enter 또는 Return)를 사용하여 자식 개체를 선택합니다.
• 다음 형제를 선택하려면 Tab 키를 누릅니다.
• Shift + Tab 을 눌러 이전 형제를 선택합니다.
• Shift + Enter 를 눌러 부모를 선택합니다.

다른 프레임 안에 프레임 중첩

Figma에서는 다른 프레임 내부에 프레임을 만들 수 있습니다. 우리는 이 프로세스를 중첩이라고 부릅니다. 이를 통해 서로 다른 속성을 가진 프레임을 결합하여 복잡한 인터페이스를 구축할 수 있습니다.

이렇게 하면 새로운 계층 구조나 관계가 생성됩니다.

• 최상위 프레임: 캔버스에 바로 있는 모든 프레임입니다. 프레임이 최상위 프레임이 되려면 다른 프레임, 그룹 또는 개체 내에 중첩할 수 없습니다.
• 중첩된 프레임: 다른 프레임 내에 배치된 모든 프레임입니다. 최상위 프레임 내에 프레임을 배치하거나 다른 중첩된 프레임 내에 프레임을 배치할 수 있습니다. 중첩된 프레임은 모두 부모와 자식입니다.
• 자식: 프레임 내에 있는 모든 개체입니다.

부모, 자녀, 형제 관계에 대해 자세히 알아보세요 →

최상위 프레임

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

중첩된 프레임

중첩 프레임은 다른 프레임이나 개체 안에 배치하는 프레임입니다. 이렇게 하면 모두 부모와 자식이 됩니다. 다음 내부에 프레임을 배치할 수 있습니다.

• 최상위 프레임
• 다른 중첩 프레임
• 그룹에서

아래 예시에서는 각 요소가 고유한 프레임 안에 있습니다. 상단에 상태 표시줄이 있고 하단에 탐색 메뉴가 있습니다. 또한 향후 티켓에 대한 세부 정보가 포함된 카드도 있습니다.

디바이스 사전 설정 중 하나를 사용하여 요소에 대한 최상위 프레임을 만들 수 있습니다. 모바일 앱에서는 최상위 프레임에 요소를 추가하여 단일 화면을 구축할 수 있습니다.

프레임 크기 조절

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

프레임 드래그하기

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

1. 캔버스에서 프레임을 선택하거나 왼쪽 사이드바에서 레이어 패널을 선택합니다.
2. 모서리 중 하나에 있는 핸들을 클릭하고 드래그하여 크기를 조절합니다. 아니면 모서리 중 하나를 클릭하여 드래그합니다.

프레임 사전 설정 변경

프레임의 크기를 변경하려면 다른 프레임 사전 설정을 선택합니다. 

1. 프레임을 선택합니다.
2. 오른쪽 사이드바의 Properties Panel에서 프레임 필드를 선택합니다.
3. 목록에서 사전 설정을 선택합니다. 
4. 인기 있는 디바이스 및 애셋 템플릿에 대한 사전 설정을 선택합니다.
   • 전화
   • 태블릿
   • 데스크톱
   • 프레젠테이션
   • 시청하기
   • 종이
   • 소셜 미디어
   • Figma 커뮤니티
   • 아카이브
5. Figma는 사전 설정에 맞게 프레임의 크기를 업데이트합니다.

속성 패널

오른쪽 사이드바를 사용하여 프레임의 너비와 높이를 업데이트합니다.

W와 H 필드에 새 숫자를 입력하거나, 아이콘 위로 마우스를 가져가 필드를 스크러빙합니다. 줄이려면 왼쪽으로 드래그하고, 늘리려면 오른쪽으로 드래그합니다.

너비 및 높이 옆에 있는 링크 버튼을 토글하여 현재 비율로 크기 조정을 제한합니다.

크기에 맞게 조정하기

프레임의 크기를 조정하여 자식 개체에 맞게 축소하거나 확대할 수 있습니다. 이렇게 하면 프레임 안에 있는 개체의 가장 바깥쪽 경계를 중심으로 프레임이 다시 그려집니다.

• 다음 키보드 단축키를 사용합니다.
  • Mac: ⌥ Option Shift ⌘ Command R
  • Windows: Alt Shift Control R
• 오른쪽 사이드바의 Layout 섹션에서 을 클릭합니다.

프레임 그룹 해제

프레임을 그룹 해제하려면 프레임을 선택하고 다음을 누릅니다.

• Mac: ⌘ CommandShiftG 또는 ⌘ CommandDelete
• Windows: ControlShiftG 또는 ControlBackspace