이 가이드에서는 Figma Design에서 디자인 파일로 작업하는 기본 사항을 다룹니다.

Figma Design을 처음 사용하신다면, 초보자를 위한 Figma Design 강좌를 수강하시기를 권장합니다. 이 강좌에서는 디자인 파일 탐색, 레이어 작업, 프레임에 오토레이아웃 적용, 컴포넌트 생성 및 디자인에 프로토타입 제작 연결 추가까지 모든 것을 다룹니다. 끝까지 완료하면, 처음부터 끝까지 완전히 맞춤형 포트폴리오 웹사이트를 만들 수 있게 됩니다. 초보자를 위한 Figma Design 강좌에 대해 자세히 알아보세요.

Figma 제품 간 차이점에 대해 자세히 알아보고 싶으신가요? Figma란 무엇인가 가이드를 확인해 보세요.

디자인 파일이란?

디자인 파일은 디자인을 만들고, 공유하고, 테스트하는 데 필요한 도구를 제공합니다. 디자인 파일은 디자이너, 제품 관리자, 작가, 개발자에게 인기가 높습니다. 그러나 시각적인 요소를 제작하거나 소통하고 싶은 사람이라면 누구나 사용할 수 있습니다!

디자인 파일을 만들어 특정 문제를 탐색하거나 전체 디자인 프로세스를 관리하세요. 혼자서 아이디어를 스케치하거나 다른 사람들과 공유하여 함께 만들고 피드백을 받을 수 있습니다.

Figma 파일은 항상 최신 상태로 유지되므로 여러 사람이 동시에 같은 파일에서 작업할 수 있습니다. 하나의 실시간 파일을 사용하면 문서를 저장하거나 다운로드하거나 주고받을 필요 없이 모두가 같은 정보를 공유할 수 있습니다.

각 파일에는 자체 버전 기록이 있으며, 이를 통해 디자인의 변화를 추적할 수 있습니다. 이전 반복 수정 작업을 살펴보거나 새로운 버전을 만들어 이정표를 달성하세요.

파일 브라우저의 파일 디자인

파일 브라우저에서 파일 카드의 아이콘으로 Figma Design 파일을 식별할 수 있습니다.

디자인 파일 아이콘이 동그라미 표시된 디자인 파일의 예시입니다.

방법 알아보기

Figma를 처음 사용하는 경우, 파일을 처음 열었을 때 약간의 혼란을 느끼는 것이 정상입니다. 둘러보기를 통해 방향을 잡고 팀과 협업을 시작할 수 있도록 안내해 드리겠습니다.

사이드바와 하단 도구 모음이 있는 추상적인 Figma 사용자 인터페이스, 중앙 캔버스는 대부분 비어 있습니다.

디자인 파일에는 하단의 도구 모음, 왼쪽 사이드바, 오른쪽 사이드바, 캔버스라는 네 개의 영역이 있습니다.

밝은 보라색 배경에 여러 도구를 제공하는 Figma Design 도구 모음입니다.

도구 모음은 캔버스와 상호 작용하고 개체를 추가할 수 있는 허브입니다. 여기에는 개체를 선택하고, 캔버스에서 이동하고, 프레임, 모양, 텍스트 및 기타 레이어 ↓를 만드는 데 필요한 모든 도구가 들어 있습니다. 이 도구들은 디자인의 기본 요소가 됩니다.

더 깊이 파고들 준비가 되면 도구 모음의 각 도구를 탐색해 보세요. →

왼쪽 사이드바에는 Figma Design 파일 옵션, 페이지 탐색 및 에셋 도구가 보라색 배경에 표시됩니다.

왼쪽 사이드바에서는 레이어, 페이지, 에셋에 액세스하고 파일에 대한 작업을 수행할 수 있습니다.

에셋 패널을 사용하여 로컬 컴포넌트를 보거나 키트 또는 라이브러리에서 컴포넌트를 찾을 수 있습니다(편집 액세스 권한 필요).
파일 이동, 라이브러리 게시, 브랜치 생성, 버전 기록 표시와 같은 파일 수준의 작업에 액세스할 수 있습니다.
메뉴를 사용하여 더 많은 기능, 작업 및 설정에 액세스할 수 있습니다. 또는 다크 모드나 스크롤 동작과 같은 환경 설정을 조정할 수 있습니다.

왼쪽 사이드바 탐색 →

오른쪽 사이드바에서는 디자인에 대한 정보를 자세히 확인할 수 있습니다. 선택한 항목이 없는 경우 색상 또는 텍스트 스타일과 같은 로컬 리소스가 표시됩니다.

레이어를 선택하면 현재 선택된 레이어의 속성을 탐색할 수 있습니다. 권한에 따라 사이드바에서 볼 수 있는 내용과 수행할 수 있는 작업이 결정됩니다.

오른쪽 사이드바에서는 디자인을 공유하고 실시간으로 협업할 수 있는 도구를 찾을 수도 있습니다. 예를 들어, 파일을 공유하고 다른 사람이 있는지 확인하며, 음성으로 대화하는 등의 기능을 사용할 수 있습니다.

필요한 경우, 개인 확대 및 보기 옵션을 조정할 수도 있습니다. 여기서 변경한 내용은 내 보기 설정에만 적용됩니다.

댓글 탭과 속성 탭을 나란히 비교하며, 왼쪽에는 댓글이, 오른쪽에는 디자인 속성이 표시됩니다.

보기 전용 액세스

댓글: 댓글 보기 및 검색
속성: 선택한 항목의 속성 확인

오른쪽 사이드바를 나란히 보여주며, 하나는 디자인 탭이 선택된 예시이고, 다른 하나는 프로토타입 탭이 선택된 예시입니다. 선택된 탭 아래에 연결된 설정이 표시됩니다.

액세스 편집

디자인: 레이어의 디자인 속성 확인 및 편집
프로토타입: 프로토타입 상호작용, 흐름 및 설정 확인 및 편집

오른쪽 사이드바 탐색 →

Dev Mode를 이용한 디자인 검사

핸드오프 프로세스의 일부로 파일을 보고 계신가요? Dev Mode는 디자인 파일을 검사하고 탐색하기 위한 개발자 중심 인터페이스입니다.

Dev Mode를 사용하면 ready for development 상태의 디자인을 식별해서 코드로 변환하는 데 필요한 정보에 액세스할 수 있습니다. Dev Mode 가이드 →

캔버스

캔버스는 레이어를 배열하여 디자인을 만드는 작업 영역입니다. 아이디어를 탐구하고 반복할 수 있는 공간이 충분할 것입니다.

이동하여 주변 탐색

파일 주변을 이동하며 캔버스에 있는 다른 내용을 확인합니다.

마우스: Space 바를 누른 채로 클릭하고 드래그하여 캔버스 주변을 이동합니다.

트랙패드: 두 손가락을 사용하여 원하는 방향으로 밀어서 캔버스를 이동합니다. Figma는 컴퓨터의 기본 스크롤 방향 설정을 사용합니다.

확대 및 축소

확대해서 자세히 보거나, 축소해서 전체적인 그림을 봅니다. 화면 오른쪽 상단에서 현재 확대/축소 수준을 확인합니다.

마우스: ⌘ Command/Ctrl 키를 누른 채로 아래로 스크롤하면 확대되고, 위로 스크롤하면 축소됩니다.

트랙패드: 두 손가락을 모아서 축소하거나 두 손가락을 벌려서 확대합니다.

캔버스에서 핀치, 이동, 확대/축소 동작 예시를 보여주는 애니메이션 이미지입니다.

스트레스 없는 탐험

처음으로 파일에 참여하거나 탐색하는 경우, 캔버스에 있는 개체와 상호 작용하는 것이 약간 무섭게 느껴질 수 있습니다. 사용자는 종종 실수로 내용을 옮기거나 변경하거나 삭제할까 봐 걱정합니다.

걱정하지 마세요. 도구 모음에서 손 도구를 선택하거나 키보드에서 H를 누릅니다. 이제 의도치 않게 변경할 염려 없이 파일을 클릭하고, 드래그하고, 확대/축소할 수 있습니다.

종합

간단히 요약해 보겠습니다! 도구 모음은 레이어를 만들고 결합하는 데 필요한 도구와 기능을 제공합니다. 레이어는 캔버스에 정렬하여 디자인을 만들 수 있습니다.

왼쪽 사이드바에서는 파일을 탐색하고 구성할 수 있습니다. 오른쪽 사이드바에서는 레이어 속성을 볼 수 있습니다.

페이지와 레이어라는 핵심 개념을 조금 더 자세히 살펴보겠습니다.

페이지

페이지는 디자인 파일을 정리하는 데 도움이 됩니다. 각 페이지는 자체 캔버스로서 아이디어를 만들고 탐색할 수 있는 공간을 더 많이 제공합니다. 페이지는 다음과 같이 활용할 수 있습니다.

이정표 또는 상태별로 디자인 관리
컴포넌트 정리
아이디어 스크래치패드 유지
이전 디자인 보관

Figma 파일 브라우저는 왼쪽 사이드바에 개요, 사용자 조사, 컴포넌트와 같은 마일스톤별로 정리된 페이지를 표시합니다.

파일의 페이지를 탐색하려면 왼쪽 사이드바에서 현재 페이지 이름을 클릭하세요. 아이콘을 탭하여 새 페이지를 만들 수도 있습니다. 사이드바에서 페이지 보기 →

페이지는 특정 디자인 컬렉션을 공유하는 데 매우 유용합니다. 예를 들어 검토가 필요하거나 디자인이 ready for development 상태가 되었을 때 별도의 페이지를 만들 수 있습니다.

페이지를 공유하려면 페이지 이름을 마우스 오른쪽 버튼으로 클릭하고 페이지 링크 복사를 클릭합니다. 누구든지 해당 링크를 열면 올바른 페이지로 이동하게 됩니다.

레이어

디자인은 일반적으로 모양, 텍스트 및 기타 요소의 조합으로 제작됩니다.

캔버스에 개체를 추가하면 Figma는 각 개체를 별도의 레이어로 취급합니다. 별도의 레이어를 사용하면 각 레이어의 속성을 자체적으로 변경하거나 편집할 수 있습니다.

이름, 프로필 사진, 이미지, 캡션을 포함하는 이 소셜 게시물 디자인처럼 말이죠.

도넛과 함께 있는 강아지를 보여주는 소셜 미디어 게시물 디자인으로, 프로필 이름, 이미지, 캡션이 레이어로 구성된 Figma 캔버스에 포함되어 있습니다.

Figma를 사용하는 데는 기하학 전문 지식이 필요하지 않습니다. 하지만 캔버스에서 3차원으로 작업하고 있다는 걸 알면 도움이 됩니다.

캔버스에는 레이어의 좌표를 알려주는 X(수평)와 Y(세로) 축이 있습니다. 또한 레이어의 깊이 또는 나타나는 순서를 알려주는 3차원 Z-index도 있습니다.

레이어 패널에서 레이어 보기

레이어는 다른 레이어의 위, 뒤, 옆, 안에 위치할 수 있습니다. 레이어가 어떻게 구성되어 있는지 보려면 왼쪽 사이드바의 레이어 패널을 확인하세요.

레이어의 종류

각 레이어에는 레이어 유형의 이름과 아이콘이 있습니다. 이러한 아이콘 중 일부가 도구 모음에 표시되는 것을 눈치채셨을 것입니다. 도구 모음에서 해당 도구를 선택하거나 키보드 바로가기를 사용하면 해당 유형의 레이어를 더 만들 수 있습니다.

레이어 아이콘	레이어 이름	바로가기
	프레임	`F`
	그룹	`⌘ Command` `G`
	컴포넌트	`⌥ Option` `⌘ Command` `K` 또는 `Ctrl` + `Alt` + `K`
	인스턴스	N/A
	텍스트	`T`
	도형	`R`
	이미지	`⇧ Shift` `⌘ Command` `k` 또는 `Shift` `Ctrl` `k`
	오토레이아웃	`Shift` `A`
	섹션	`Shift` `S`
	GIF 또는 동영상	`⇧ Shift` `⌘ Command` `k` 또는 `Shift` `Ctrl` `k`

레이어 순서 및 계층 구조

레이어 패널에 레이어가 표시되는 순서도 중요합니다. 레이어 순서는 캔버스에서 레이어가 어떻게 겹치는지를 결정합니다.

이 메뉴에는 배경 역할을 하는 직사각형이 있습니다. 레이어 패널에서 다른 레이어 아래에 있으므로 캔버스에서도 다른 레이어 위에 나타납니다. 이것이 레이어 패널에서 다른 레이어들 위에 있다면 텍스트나 아이콘 레이어가 보이지 않을 것입니다.

컨테이너 역할을 하는 레이어

레이어가 다른 레이어 안에 있을 수 있다고 언급했습니다. 레이어 패널에서 해당 레이어 옆에 화살표가 있는 경우 레이어에 다른 레이어가 포함되어 있는지 확인할 수 있습니다. 해당 컨테이너 내의 레이어를 보려면 화살표를 클릭합니다.

레이어 간의 관계

컨테이너와 그 안의 레이어 간의 관계를 설명하기 위해 부모와 자식이라는 용어를 사용합니다.

부모 레이어에는 프레임, 컴포넌트 및 그룹과 같은 다른 레이어가 포함됩니다.
자식 레이어는 부모 레이어 안에 있는 레이어입니다. 자식 레이어는 도형이나 텍스트와 같은 개별 레이어이거나, 자식 요소가 있는 컨테이너일 수 있습니다.

부모, 자식 및 형제 관계 →

컨테이너 작업

그룹, 프레임, 섹션은 컨테이너 역할을 하는 레이어 유형입니다. 비슷해 보이지만 각각 고유한 이점이 있습니다.

그룹

그룹은 레이어를 하나의 요소로 결합할 때 좋습니다. 레이어 패널을 단순화하고 캔버스에서 상호 작용할 수 있는 단일 개체를 제공합니다. 예: 함께 모아두고 싶은 모양 모음이 있는 경우

그룹은 고유한 요소가 아닌 레이어의 모음이므로 자체적인 차원이나 속성이 없습니다. 그룹을 변경하면 실제로 그룹의 각 레이어에 해당 변경 사항이 적용됩니다.

프레임

프레임은 Figma에서 레이어를 결합하는 또 다른 방법입니다. 프레임은 앱 디자인의 단일 페이지처럼 특정 기기나 화면 크기에 ‌스캐폴딩 역할을 할 수 있습니다. 또한 탐색 모음의 레이어처럼, 서로 다른 요소를 구성하는 레이어의 컨테이너 역할도 할 수 있습니다. 다른 프레임 안에 프레임을 넣는 것도 가능합니다.

그룹과 달리 프레임은 채우기, 둥근 모서리, 그림자 같은 자체 치수와 속성을 가질 수 있습니다. 또한 오토레이아웃, 제약조건, 레이아웃 그리드 같은 기능으로 내부 레이어를 제어하거나 영향을 줄 수 있습니다.

프레임 사전 설정

Figma에는 일반 에셋, 기기 및 화면 크기에 대한 프레임 사전 설정이 있습니다. 모바일 앱을 디자인하든 Instagram 게시물을 작성하든 상관없습니다. 프레임 사전 설정 살펴보기 →

섹션

섹션 도구로 캔버스의 특정 영역을 지정하고 라벨을 지정할 수 있습니다. 섹션을 사용하여 관련 개념과 아이디어를 그룹으로 묶거나 디자인을 정리할 수 있습니다.

섹션은 초점을 맞추고, 맥락을 제공하고, 공동작업자들이 프로세스를 진행하도록 안내하는 데 도움이 됩니다. 이는 핸드오프를 위한 디자인 공유 또는 검토와 같은 활동에 적합합니다.

그룹과 프레임을 언제 사용해야 하는지에 대한 자세한 정보는 모범 사례 가이드를 확인해 보세요.

레이어 속성 살펴보기

캔버스의 레이어나 개체 위로 마우스를 가져가면 전체 요소 주위에 상자가 나타납니다. 레이어를 클릭하여 선택하고 해당 속성 정보를 자세히 확인합니다.

왼쪽 사이드바에서 레이어의 이름과 레이어의 구성 방식을 확인할 수 있습니다. 오른쪽 사이드바에서는 레이어의 속성을 볼 수 있습니다.

레이어의 속성에는 레이어의 크기, 캔버스에서의 위치 등 레이어에 대한 기본 정보가 포함됩니다. 색상, 텍스트 속성 또는 그림자 등의 효과와 같은 스타일링도 가능합니다.

어떤 속성이 보일지는 선택한 레이어의 유형에 따라 달라집니다. 레이어가 스타일을 사용하는 경우, 스타일 이름과 아이콘만 오른쪽 사이드바에 표시됩니다.

지원:

프레임 그룹 컴포넌트 인스턴스 오토레이아웃 섹션 GIF