오른쪽 사이드바에서 레이어 속성 디자인, 프로토타입 제작, 탐색하기
이 문서는 이전 Figma UI와 새로운 Figma UI에서 모두 확인할 수 있습니다. 페이지 왼쪽 하단의 토글을 사용하여 현재 UI를 선택하세요. UI3 알아보기: Figma의 새 디자인 →
시작하기 전에
이 기능을 사용할 수 있는 사용자
모든 요금제에서 사용 가능
속성 패널에서 레이어와 프로토타입을 조정하려면 파일 편집 가능
권한이 필요합니다.
댓글을 달고 파일 및 레이어 속성을 탐색하고 속성 패널에서 레이어를 내보내려면 파일 열람 가능
권한이 필요합니다.
Figma Design에서 파일은 캔버스에서 분리된 세 가지 주요 인터페이스 요소를 포함합니다.
이 문서에서는 속성 패널을 살펴보겠습니다.
파일 액세스 권한에 따라 속성 패널이 변경되는 방식
속성 패널은 파일 액세스 권한 수준과 시트 유형에 따라 다른 기능을 제공합니다.
편집 액세스 권한으로 속성 패널 사용
파일 편집 액세스 권한이 있는 경우 속성 패널에서 두 개의 탭을 사용할 수 있습니다. 바로 디자인 및 프로토타입입니다.
팁: 속성 패널에 레이블을 추가하여 각 속성이 수행하는 작업을 더 명확하게 할 수 있습니다. 레이블을 활성화하려면 속성 패널에서 100% 확대/축소 비율 옆에 있는 드롭다운 메뉴를 클릭하고 Property labels(속성 레이블)을 선택합니다.
디자인
디자인 탭에서는 디자인 내 개체의 속성을 보고, 추가하고, 제거하거나 변경할 수 있습니다.
캔버스에서 아무것도 선택하지 않은 경우, 디자인 탭에서 다음 작업을 수행할 수 있습니다.
- 파일에 로컬인 스타일과 변수에 액세스
- 캔버스의 배경색 업데이트
- 전체 페이지 내보내기
레이어를 선택하면 레이어를 편집하기 위한 다양한 속성 컨트롤에 액세스할 수 있습니다. 예를 들어,
프로토타입
프로토타입 탭을 사용하여 프로토타입 만들기를 시작하세요. 시작할 개체를 선택한 다음 할 일:
- 흐름 시작점 추가: 흐름은 프로토타입을 구성하는 연결된 프레임의 네트워크를 통해 사용자가 이동하는 경로입니다. 이동 경로의 첫 번째 프레임을 선택하려면 시작점을 추가합니다.
- 상호 작용 추가: 상호 작용의 트리거, 액션 및 애니메이션을 정의할 수 있는 상호 작용 세부 정보 모달을 엽니다.
- 스크롤 동작 정의: 프로토타입이 스크롤에 어떻게 반응하는지 선택합니다.
- 프로토타입 설정 보기: 프로토타입의 장치와 배경을 조정할 수 있습니다.
팁: 프로토타입 탭을 선택한 다음 개체 간 연결을 클릭하고 드래그하여 캔버스에 직접 상호 작용을 추가할 수도 있습니다.
보기 전용 액세스 권한으로 속성 패널 사용
파일에 대한 열람 가능 액세스 권한이 있거나 유료 플랜에서 뷰어 시트를 보유한 사용자는 속성 패널에 Comment(댓글) 및 Properties(속성)라는 두 개의 탭이 있습니다.
보기 전용 액세스 권한은 디자인을 편집할 필요가 없는 사용자나 디자인에 액세스해야 하지만 전체 Dev Mode 기능이 필요하지 않은 개발자에게 적합합니다. 파일 액세스 권한을 가진 사용자는 디자인을 공동으로 작업하고, 디자인 속성을 보고, 기본 코드를 복사하고, 에셋을 내보낼 수 있습니다.
댓글
오른쪽 사이드바에서 댓글을 선택하여 새 댓글을 추가하거나 기존 댓글을 확인합니다. 댓글을 사용하여 피드백을 추가하거나 응답하고, 협업하고, 더 빠르게 반복 수정할 수 있으며, 이 모든 것이 원본 디자인 파일에서 가능합니다.
댓글 탭에서 파일에 있는 모든 기존 댓글을 볼 수 있습니다. 또는 파일 내에서 특정 댓글 또는 댓글 세트를 찾습니다.
- 특정 댓글을 찾으려면 검색 필드에 키워드를 입력합니다.
- 필터를 사용하여 댓글이 게시된 시점별로 보거나 아직 읽지 않은 댓글만 볼 수 있습니다. 여기에서는 특정 댓글 세트만 보도록 필터링할 수 있습니다.
Figma Design 파일에 comment를 추가하는 방법 또는 댓글을 보고 관리하는 방법에 대해 자세히 알아보세요.
속성
오른쪽 사이드바의 속성 탭을 사용하면 캔버스의 특정 레이어를 검사하고 디자인을 내보낼 수 있습니다.
시작하려면 캔버스에서 레이어를 선택합니다. 캔버스 자체에서 요소를 선택하거나 왼쪽 사이드바의 레이어 패널에서 요소를 선택하여 이 작업을 수행할 수 있습니다. 모양, 텍스트, 그룹, 프레임 등 모든 유형의 레이어를 선택할 수 있습니다.
속성 아래에는 선택한 레이어의 이름과 레이아웃 및 색상 등 레이어의 세부 정보가 표시됩니다.
캔버스의 레이어를 마우스 오른쪽 버튼으로 클릭하여 수행 가능한 작업:
- 레이어 복사
- 코드(CSS, iOS 또는 Android), SVG, PNG로 복사/붙여넣기, 링크 복사 또는 속성 복사
- 선택한 레이어 내에서 다른 레이어 선택
개체 사이의 거리를 측정하고 싶으신가요? 키보드 바로가기를 사용하여 간격 및 패딩 정보에 빠르게 액세스할 수 있습니다. 측정 가이드라인을 추가하는 방법 알아보기 →
속성 탭 하단에서 내보내기 구성을 추가하여 다양한 파일 형식과 크기로 디자인을 내보낼 수 있습니다. 내보내기 기능을 이용하면 다른 사람과 콘텐츠를 공유하고, 도구 간에 콘텐츠를 이동하고, Figma 외부에서 디자인 사본을 저장할 수 있습니다. Figma에서 콘텐츠를 내보내는 방법 알아보기 →
시작하기 전에
이 기능을 사용할 수 있는 사용자
모든 팀 또는 요금제의 사용자.
파일 편집 가능
액세스 권한이 있는 사용자는 오른쪽 사이드바에서 레이어와 프로토타입을 조정할 수 있습니다.
파일 열람 가능
액세스 권한이 있는 사용자는 오른쪽 사이드바에서 댓글을 달고, 파일 및 레이어 속성을 탐색하고, 레이어를 내보낼 수 있습니다.
Figma Design에 있을 때, 캔버스 양쪽에 사이드바가 보입니다. 도구 모음과 함께, 이러한 사이드바는 Figma UI를 구성합니다.
Figma UI를 사용하면 디자인 요소에 액세스하고, 새로 만들고, 조정할 수 있습니다.
- 왼쪽 사이드바를 통해 파일에 포함된 레이어, 에셋 및 페이지에 액세스할 수 있습니다. 이것을 레이어 패널이라고 부릅니다. 레이어 패널 탐색에 대해 자세히 알아보세요.
- 오른쪽 사이드바에서는 디자인의 속성과 프로토타입 설정을 보거나 조정할 수 있습니다.
이 문서에서는 오른쪽 사이드바를 둘러보도록 하겠습니다.
오른쪽 사이드바에서 액세스할 수 있는 항목은 파일에 대한 권한과 시트 유형에 따라 달라집니다.
편집 권한으로 오른쪽 사이드바 사용
디자인
디자인 탭에서는 디자인 내 객체의 속성을 확인, 추가, 제거 또는 변경할 수 있습니다.
캔버스에서 아무것도 선택하지 않은 경우, 디자인 탭에서 다음 작업을 수행할 수 있습니다.
- 파일에 로컬인 스타일과 변수에 액세스
- 캔버스의 배경색 업데이트
- 전체 페이지 내보내기
레이어를 선택하면 다양한 설정에 액세스하여 레이어를 편집할 수 있습니다. 선택한 레이어에 따라 사용할 수 있는 설정이 달라집니다.
- 정렬 및 분포
- 프레임 크기 및 방향
- 위치(X와 Y)
- 치수 및 회전(너비와 높이)
- 모서리 반경
- 제약조건
- 레이아웃 그리드
- 구성 요소 속성
- 인스턴스
- 자동 레이아웃
- 레이어(블렌드 모드)
- 텍스트
- 채우기
- 선
- 효과
- 내보내기 설정
프로토타입
프로토타입 탭을 사용하여 프로토타입 만들기를 시작합니다.
시작할 개체를 선택합니다. 그런 다음 프로토타입 탭에서 할 작업:
-
흐름 시작점 추가
흐름은 프로토타입을 구성하는 연결된 프레임의 네트워크를 통해 사용자가 이동하는 경로입니다. 이동 경로의 첫 번째 프레임을 선택하려면 시작점을 추가합니다. -
상호작용추가
Interaction Details(상호작용 세부 정보) 모달을 열어 상호작용의 트리거, 액션, 애니메이션을 정의할 수 있습니다. -
스크롤 동작정의
프로토타입이 스크롤에 어떻게 반응하는지 선택합니다. -
프로토타입 설정 보기
프로토타입의 장치와 배경을 조정할 수 있습니다.
팁: 프로토타입 탭을 선택한 다음 개체 간 연결을 클릭하고 드래그하여 캔버스에 직접 상호 작용을 추가할 수도 있습니다.
Dev Mode 들어가기
Dev Mode는 Figma에서 개발자 전용으로 제작된 공간입니다. Dev Mode에는 디자인을 이해하고 이를 코드로 변환하는 데 필요한 디자인 사양과 관련 정보가 표시됩니다.
Dev Mode를 사용하여 수행할 수 있는 작업:
- 디자인 컴포넌트에서 속성, 값 및 코드를 확인하고 복사합니다.
- 프레임 버전을 비교하여 마지막으로 파일을 본 이후 변경된 사항을 확인합니다.
- 중요한 레이어 정보를 드러내는 간단한 상호 작용으로 디자인 파일을 검사하고 탐색합니다.
- 섹션 상태를 통해 개발 준비가 된 디자인을 빠르게 찾습니다.
- 개발자 중심의 통합(예: Jira, Storybook, GitHub)으로 워크플로를 간소화합니다.
- 컴포넌트에 관련 링크 및 개발자 리소스를 추가합니다.
Dev Mode는 도구 모음의 토글을 통해 액세스할 수 있습니다. Dev Mode에 들어가면 오른쪽 사이드바를 포함한 인터페이스에 개발자 중심 기능이 표시됩니다.
보기 전용 액세스 권한으로 오른쪽 사이드바 사용
뷰어 및 뷰어 제한 사용자는 디자인 협업, 디자인 속성 보기, 기본 코드 복사 및 에셋 내보내기를 수행할 수 있습니다.
뷰어 액세스 권한은 디자인을 편집할 필요가 없는 사용자나 디자인에 액세스해야 하지만 전체 Dev Mode 기능이 필요하지 않은 개발자에게 적합합니다.
댓글
오른쪽 사이드바에서 댓글을 선택하여 새 댓글을 추가하거나 기존 댓글을 확인합니다. 댓글을 사용하여 피드백을 추가하거나 응답하고, 협업하고, 더 빠르게 반복 수정할 수 있으며, 이 모든 것이 원본 디자인 파일에서 가능합니다.
댓글 탭에서 파일에 있는 모든 기존 댓글을 볼 수 있습니다. 또는 파일 내에서 특정 댓글 또는 댓글 세트를 찾습니다.
- 특정 댓글을 찾으려면 검색 필드에 키워드를 입력합니다.
- 필터를 사용하여 댓글이 게시된 시점별로 보거나 아직 읽지 않은 댓글만 볼 수 있습니다. 여기에서는 특정 댓글 세트만 보도록 필터링할 수 있습니다.
설정을 클릭하여 파일에서 아이콘을 숨기거나 댓글 알림을 관리합니다.
Figma Design 파일에 댓글을 추가하는 방법을 배우기 → 또는 댓글을 보고 관리하는 방법을 배우기 →
속성
오른쪽 사이드바의 속성 탭을 사용하면 캔버스의 특정 레이어를 검사할 수 있습니다.
시작하려면 캔버스에서 레이어를 선택합니다. 캔버스 자체에서 요소를 선택하거나 왼쪽 사이드바의 레이어 패널에서 요소를 선택하여 이 작업을 수행할 수 있습니다. 모양, 텍스트, 그룹, 프레임 등 모든 유형의 레이어를 선택할 수 있습니다.
속성 아래에는 선택한 레이어의 이름과 레이아웃 및 색상 등 레이어의 세부 정보가 표시됩니다.
캔버스의 레이어를 마우스 오른쪽 버튼으로 클릭하여 수행 가능한 작업:
- 레이어 복사
- 코드(CSS, iOS 또는 Android), SVG, PNG로 복사/붙여넣기, 링크 복사 또는 속성 복사
- 선택한 레이어 내에서 다른 레이어 선택
내보내기
보기 전용 액세스 권한을 사용하면 Figma에서 다양한 파일 형식과 크기 조정으로 디자인을 내보낼 수 있습니다. 내보내기 기능을 이용하면 다른 사람과 콘텐츠를 공유하고, 도구 간에 콘텐츠를 이동하고, Figma 외부에서 디자인 사본을 저장할 수 있습니다.