오른쪽 사이드바에서 레이어 속성 디자인, 프로토타입 제작, 탐색하기

Figma Design에 있을 때, 캔버스 양쪽에 사이드바가 보입니다. 도구 모음과 함께, 이러한 사이드바는 Figma UI를 구성합니다.

Figma UI를 사용하면 디자인 요소에 액세스하고, 새로 만들고, 조정할 수 있습니다.

• 왼쪽 사이드바를 통해 파일에 포함된 레이어, 에셋 및 페이지에 액세스할 수 있습니다. 이것을 레이어 패널이라고 부릅니다. 레이어 패널 탐색에 대해 자세히 알아보세요.
• 오른쪽 사이드바에서는 디자인의 속성과 프로토타입 설정을 보거나 조정할 수 있습니다.

이 문서에서는 오른쪽 사이드바를 둘러보도록 하겠습니다.

오른쪽 사이드바에서 액세스할 수 있는 항목은 파일에 대한 권한과 시트 유형에 따라 달라집니다.

편집 권한으로 오른쪽 사이드바 사용

디자인

디자인 탭에서는 디자인 내 객체의 속성을 확인, 추가, 제거 또는 변경할 수 있습니다.

캔버스에서 아무것도 선택하지 않은 경우, 디자인 탭에서 다음 작업을 수행할 수 있습니다.

• 파일에 로컬인 스타일과 변수에 액세스
• 캔버스의 배경색 업데이트
• 전체 페이지 내보내기

레이어를 선택하면 다양한 설정에 액세스하여 레이어를 편집할 수 있습니다. 선택한 레이어에 따라 사용할 수 있는 설정이 달라집니다.

• 정렬 및 분포
• 프레임 크기 및 방향 
• 위치(X와 Y)
• 치수 및 회전(너비와 높이)
• 모서리 반경
• 제약조건 
• 레이아웃 그리드
• 컴포넌트 속성
• 인스턴스
• 오토레이아웃
• 레이어(블렌드 모드)
• 텍스트 
• 채우기 
• 선
• 효과 
• 내보내기 설정 

프로토타입

프로토타입 탭을 사용하여 프로토타입 만들기를 시작합니다.

시작할 개체를 선택합니다. 그런 다음 프로토타입 탭에서 할 작업:

1. 흐름 시작점 추가
   흐름은 프로토타입을 구성하는 연결된 프레임의 네트워크를 통해 사용자가 이동하는 경로입니다. 이동 경로의 첫 번째 프레임을 선택하려면 시작점을 추가합니다.
2. 상호작용추가
   Interaction Details(상호작용 세부 정보) 모달을 열어 상호작용의 트리거, 액션, 애니메이션을 정의할 수 있습니다.
3. 스크롤 동작정의
   프로토타입이 스크롤에 어떻게 반응하는지 선택합니다.
4. 프로토타입 설정 보기
   프로토타입의 장치와 배경을 조정할 수 있습니다.

Figma 프로토타입 제작에 대해 자세히 알아보기 →

Dev Mode 들어가기

Dev Mode는 Figma에서 개발자 전용으로 제작된 공간입니다. Dev Mode에는 디자인을 이해하고 이를 코드로 변환하는 데 필요한 디자인 사양과 관련 정보가 표시됩니다.

Dev Mode를 사용하여 수행할 수 있는 작업:

• 디자인 컴포넌트에서 속성, 값 및 코드를 확인하고 복사합니다.
• 프레임 버전을 비교하여 마지막으로 파일을 본 이후 변경된 사항을 확인합니다.
• 중요한 레이어 정보를 드러내는 간단한 상호작용으로 디자인 파일을 검사하고 탐색합니다.
• 섹션 상태를 통해 개발 준비가 된 디자인을 빠르게 찾습니다.
• 개발자 중심의 통합(예: Jira, Storybook, GitHub)으로 워크플로를 간소화합니다.
• 컴포넌트에 관련 링크 및 개발자 리소스를 추가합니다.

Dev Mode는 도구 모음의 토글을 통해 액세스할 수 있습니다. Dev Mode에 들어가면 오른쪽 사이드바를 포함한 인터페이스에 개발자 중심 기능이 표시됩니다.

Dev Mode 사용 방법 알아보기 ->

보기 전용 액세스 권한으로 오른쪽 사이드바 사용

뷰어 및 뷰어 제한 사용자는 디자인 협업, 디자인 속성 보기, 기본 코드 복사 및 에셋 내보내기를 수행할 수 있습니다.

뷰어 액세스 권한은 디자인을 편집할 필요가 없는 사용자나 디자인에 액세스해야 하지만 전체 Dev Mode 기능이 필요하지 않은 개발자에게 적합합니다.

댓글

오른쪽 사이드바에서 댓글을 선택하여 새 댓글을 추가하거나 기존 댓글을 확인합니다. 댓글을 사용하여 피드백을 추가하거나 응답하고, 협업하고, 더 빠르게 반복 수정할 수 있으며, 이 모든 것이 원본 디자인 파일에서 가능합니다.

댓글 탭에서 파일에 있는 모든 기존 댓글을 볼 수 있습니다. 또는 파일 내에서 특정 댓글 또는 댓글 세트를 찾습니다.

• 특정 댓글을 찾으려면 검색 필드에 키워드를 입력합니다.
• 필터를 사용하여 댓글이 게시된 시점별로 보거나 아직 읽지 않은 댓글만 볼 수 있습니다. 여기에서는 특정 댓글 세트만 보도록 필터링할 수 있습니다.

설정을 클릭하여 파일에서 아이콘을 숨기거나 댓글 알림을 관리합니다.

Figma Design 파일에 댓글을 추가하는 방법을 배우기 → 또는 댓글을 보고 관리하는 방법을 배우기 →

속성

오른쪽 사이드바의 속성 탭을 사용하면 캔버스의 특정 레이어를 검사할 수 있습니다.

시작하려면 캔버스에서 레이어를 선택합니다. 캔버스 자체에서 요소를 선택하거나 왼쪽 사이드바의 레이어 패널에서 요소를 선택하여 이 작업을 수행할 수 있습니다. 모양, 텍스트, 그룹, 프레임 등 모든 유형의 레이어를 선택할 수 있습니다.

속성 아래에는 선택한 레이어의 이름과 레이아웃 및 색상 등 레이어의 세부 정보가 표시됩니다.

캔버스의 레이어를 마우스 오른쪽 버튼으로 클릭하여 수행 가능한 작업:

• 레이어 복사
• 코드(CSS, iOS 또는 Android), SVG, PNG로 복사/붙여넣기, 링크 복사 또는 속성 복사
• 선택한 레이어 내에서 다른 레이어 선택

개체 사이의 거리를 측정하고 싶으신가요? 키보드 바로가기를 사용하여 간격 및 패딩 정보에 빠르게 액세스할 수 있습니다.  측정 가이드라인을 추가하는 방법 알아보기 →

내보내기

보기 전용 액세스 권한을 사용하면 Figma에서 다양한 파일 형식과 크기 조정으로 디자인을 내보낼 수 있습니다. 내보내기 기능을 이용하면 다른 사람과 콘텐츠를 공유하고, 도구 간에 콘텐츠를 이동하고, Figma 외부에서 디자인 사본을 저장할 수 있습니다.

Figma에서 콘텐츠를 내보내는 방법 알아보기 →