레이어 101: 레이어 유형 탐색

Figma Design에서 만들 수 있는 레이어에는 몇 가지 유형이 있습니다. 여기서는 기본 사항을 다루겠지만, 아직 살펴봐야 할 레이어가 더 있습니다.

프레임

프레임은 Figma의 기본 구성 요소입니다. 다른 개체를 넣을 수 있는 컨테이너라고 생각하면 됩니다. 이를 통해 레이어를 일관성 있는 디자인으로 배열하고 구성할 수 있습니다.

프레임은 정의된 크기를 가질 수 있으며 고유한 속성을 지원할 수 있습니다. 또한 Figma의 강력한 기능인 컴포넌트, 자동 레이아웃, 프로토타입 제작 등에도 액세스할 수 있습니다.

프레임 사전 설정을 사용하면 인기 있는 크기의 프레임을 빠르게 만들 수 있습니다. 여기에는 iPhone이나 Apple Watch와 같은 화면 및 기기, 또는 소셜 미디어 게시물, 배너와 같은 에셋 크기가 포함됩니다.

이 이미지에는 iPhone 14 및 15 Pro Max의 크기로 프레임이 사전 설정되어 있습니다. 프레임 도구를 선택한 경우 오른쪽 사이드바에서 프레임 사전 설정을 선택할 수 있습니다.

텍스트

대부분의 인터페이스 디자인에서는 타이포그래피가 중요합니다. 효과적인 유형은 정보를 전달하고, 주의를 끌고, 계층 구조를 구축하고, 감정을 불러일으킬 수 있습니다.

텍스트 도구 T 를 사용하여 텍스트 레이어를 만든 다음 입력하여 텍스트를 추가합니다. 오른쪽 사이드바의 Typography(타이포그래피) 섹션을 사용하여 텍스트의 서식과 스타일을 지정할 수 있습니다. Fill(채우기)과 같은 다른 섹션을 사용하여 색상과 같은 텍스트의 다른 측면을 변경할 수 있습니다.

Figma에서는 시작하는 데 도움이 되는 수백 개의 무료 Google 글꼴이 제공되지만, 원하는 글꼴을 직접 추가하여 사용할 수도 있습니다.

이 카드 디자인의 텍스트는 Figma의 모든 사용자가 사용할 수 있는 무료 Google 글꼴인 Space Grotesk를 사용했습니다.

도형

직사각형 R, 타원 O, 다각형과 같은 모양은 디자인에 시각적 흥미와 개성을 더할 수 있습니다.

여러 모양을 결합하여 아이콘과 같은 것을 만들 수도 있습니다. 펜 도구 P를 사용하면 직선과 곡선 또는 사용자 정의 모양과 그림을 만드는 데도 도움이 됩니다.

위는 다각형 도구를 사용하여 만든 팔각형입니다. Appearance(모양) 섹션의 Count(개수) 필드를 사용하여 다각형에 있는 변의 수를 조정할 수 있습니다.

이미지

디자인에 사진, 스크린샷, 기타 시각적 에셋을 추가해야 하나요? 문제 없습니다. Figma Design을 사용하면 이미지, GIF, 동영상도 추가할 수 있습니다.

Figma Design에서 이미지와 비디오는 레이어 유형이 아니라 채우기 유형입니다. 이를 통해 프레임, 모양, 텍스트 등 채우기 및 선 속성을 지원하는 어떤 레이어에도 이미지를 추가할 수 있습니다.

이미지를 끌어다 놓거나 복사하여 파일에 붙여넣습니다. Figma는 새로운 사각형 레이어에 채우기로 이미지를 추가합니다. 이미지 채우기가 필요한 모양이 이미 있으신가요? 오른쪽 사이드바의 Fill(채우기) 섹션에서 바로 추가할 수 있습니다.