티스토리 뷰
프레임은 피그마(Figma)에서 디자인의 기초가 되는 컨테이너 역할을 수행하며, 특정 기기나 화면 크기에 맞춘 디자인을 만들 때 매우 유용한 도구이다. 이전 디자인 도구의 **아트보드(Artboard)**와 유사하지만, 프레임은 더 유연하고 강력한 기능을 제공한다.
프레임을 사용하면 레이아웃 그리드 , 자동 레이아웃 , 제약 조건 및 프로토타입 제작 과 같은 추가 기능에 액세스할 수도 있습니다 .
1. 프레임의 기본 개념
- 기기별 디자인 설정: 프레임은 특정 기기나 화면 크기에 맞는 컨테이너를 만들어 디자인을 구성할 수 있다. 예를 들어, 스마트폰, 태블릿, 데스크탑 등의 다양한 해상도에 맞춘 레이아웃을 각 프레임으로 구분해 디자인할 수 있다.
- 아트보드와 유사한 개념: 아트보드를 사용해 본 적이 있다면 프레임이 익숙할 것이다. 프레임을 활용하면 캔버스에서 영역을 선택하고, 그 안에 요소들을 추가해 독립적인 디자인을 구성할 수 있다.
2. 프레임의 중첩 기능
- 중첩 프레임: 프레임 안에 다른 프레임을 중첩해 넣을 수 있다. 이렇게 하면 복잡한 구조를 가진 UI를 설계할 때, 다양한 요소들이 하나의 부모 프레임 내에서 논리적으로 구성되도록 관리할 수 있다.
- 복잡한 디자인의 관리: 중첩된 프레임을 통해 함께 작동하는 인터페이스 구성 요소들을 그룹화하고, 계층 구조를 유지하며 작업할 수 있다. 예를 들어, 카드 레이아웃이나 메뉴 바와 같은 UI 구성 요소들은 개별 프레임으로 중첩해 설계할 수 있다.
- 레이아웃 Grid : 디자인에 시각적 구조를 만듭니다
- 자동 레이아웃 : 콘텐츠에 반응하는 동적 프레임을 만듭니다
- 클립 콘텐츠 : 프레임 경계를 넘어 확장되는 프레임 내의 모든 객체를 숨깁니다.
최상위 프레임
Figma에서는 레이어 패널에서 최상위 프레임을 굵게 표시하고 , 캔버스에 있는 모든 최상위 프레임의 이름을 표시합니다.
프레임 만들기
캔버스에서 다양한 크기의 프레임을 만들 수 있습니다.
- 캔버스를 클릭하여 100 x 100 크기의 기본 프레임을 만듭니다.
- 캔버스에서 클릭하고 드래그하여 사용자 정의 크기의 프레임을 만듭니다.
프레임 속성
프레임과 관련된 몇 가지 속성이 있습니다. 프레임은 다음 속성을 지원합니다.
- 모서리 반경 : 프레임의 모서리를 둥글게 만들어 부드러운 모서리를 만듭니다.
- 클립 콘텐츠 : 프레임 경계를 넘어서는 프레임 내의 모든 객체를 숨깁니다.
- 레이아웃 그리드 : 디자인의 시각적 구조를 정하는 데 도움이 되는 가이드라인을 만듭니다.
- 자동 레이아웃: 콘텐츠에 반응하는 동적 프레임을 만듭니다.
- 채우기 : 프레임에 단색 채우기, 그라데이션, 이미지 (PNG, JPEG, GIF, TIFF 및 WEBP)를 적용합니다.
- 획 : 프레임에 획을 추가하여 테두리나 윤곽선을 만듭니다.
- 효과 : 프레임에 그림자나 흐림 효과 추가
추가기능
- Layout Grids: 투명한 그리드, 컬럼, 또는 행을 프레임에 적용하여 시각적인 구조를 제공, 예를 들어, 그리드를 사용하여 웹 페이지의 주요 섹션을 구분하거나, 컬럼과 행을 사용하여 복잡한 레이아웃의 균형을 맞출 수 있다.
- Constraints : 프레임 안의 자식 객체가 프레임 크기 조정에 어떻게 반응할지 정의할 수 있다. 이를 통해 화면 크기가 달라지더라도 요소의 위치와 크기가 의도한 대로 유지되도록 설정할 수 있다. 예를 들어 버튼이 화면의 우측 하단에 고정되도록 설정하여, 프레임 크기를 조정할 때도 버튼이 원하는 위치에 남아 있도록 만들 수 있다.
- Auto Layout: 프레임에 자동 레이아웃 기능을 추가하여, 콘텐츠에 따라 동적으로 반응하는 레이아웃을 만들 수 있다. 요소들이 자동으로 정렬되고 간격이 유지되므로, 디자인 작업이 훨씬 간편해진다. 자동 레이아웃은 목록, 버튼 그룹, 카드 레이아웃 등과 같은 동적이고 반응형인 구성 요소를 만들 때 유용하다. 예를 들어, 리스트 항목이 추가되면 자동으로 아래로 정렬되고, 간격이 유지되는 효과를 낼 수 있다.
- Prototyping: 프레임을 사용하여 캔버스 내에서 프레임 간에 이동하는 상호작용 프로토타입을 생성할 수 있다. 이를 통해 사용자 흐름과 페이지 전환을 시뮬레이션하여 실제와 유사한 사용자 경험을 미리 보여줄 수 있다. 프로토타입 기능은 화면 전환, 버튼 클릭에 따른 페이지 이동 등 사용자 인터랙션을 설정할 수 있어, 개발 전 사용자의 경험을 테스트하고 피드백을 받을 수 있다.
프레임 크기 조절
프레임 크기 조절은 피그마(Figma)에서 캔버스 상의 프레임 크기를 쉽게 변경할 수 있도록 도와주는 기본 기능이다. 다른 객체와 마찬가지로 프레임도 상호작용을 통해 크기를 조절할 수 있으며, 이를 통해 디자인 작업을 보다 유연하게 진행할 수 있다. 프레임 크기를 변경하는 방법에는 몇 가지가 있다.
- 프레임의 크기를 수동으로 조절하려면 프레임 가장자리를 드래그하면 된다. 프레임을 선택한 후, **모서리에 있는 핸들(handle)**을 드래그하여 원하는 크기로 조정할 수 있다.
- 캔버스에서 직접 프레임을 클릭하거나, 왼쪽 사이드바의 레이어 패널에서 프레임을 선택할 수 있다.
- 프레임을 선택한 후, 오른쪽 **속성 패널(Properties Panel)**에서 프레임의 가로와 세로 크기 수치를 직접 입력할 수 있다.
- 비율 유지하며 크기 조절하기 : 프레임의 크기를 조절할 때, Shift 키를 누른 채 드래그하면 가로와 세로의 비율을 유지하며 크기를 변경할 수 있다.
연습
- 파일의 thumbnail을 만들어보자.
- F 프레임을 설정 하자 > presentation slide 4:3
- 프레임 이름을 변경 해 본다.
- fill과 stroke의 색상 설정
- shape 툴에서 원을 이용하여 다채로운 모양을 만들어 본다.
- T text 를 작성하여 옵셥에서 텍스트의 크기를 설정 해 보자.
- ctrl + alt +g > 텍스트 그룹을 프레임으로 설정
- position 설정을 통해 정렬을 해 본다.
- 프레임 제목 선택 > 오른쪽 마우스 > set as thumbnail
728x90
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
반응형