Dev Mode에서 디자인 탐색 – Figma Learn - 도움말 센터

🚧 Dev Mode가 베타 버전으로 출시되었습니다.

Figma의 Dev Mode는 개발자가 디자인을 코드로 변환하는 데 필요한 모든 것을 제공합니다. 1월 31일부터 Dev Mode에 액세스하려면 유료 시트가 필요합니다.

Dev Mode의 베타 종료가 무엇을 의미하는지 알아보기 →

시작하기 전에

이 기능을 사용할 수 있는 사용자

프로페셔널, 오거니제이션, 엔터프라이즈 요금제의 풀 디자인 시트에 포함되어 있습니다.

Dev Mode 기능은 Dev Mode 액세스 권한이 있는 모든 사람이 사용할 수 있습니다.

Dev Mode를 활성화하면 Figma Design 파일의 인터페이스가 변경됩니다. Dev Mode에서는 왼쪽 사이드바를 통해 손쉽게 디자인 간을 탐색하고 개발 준비가 완료된 섹션을 식별할 수 있습니다.

A
검색
Search(검색) 필드를 사용하여 특정 컴포넌트를 찾습니다. Figma는 현재 파일과 액세스 권한이 있는 모든 라이브러리에서 개체를 찾습니다.
1. 왼쪽 사이드바를 클릭하거나 다음 키보드 바로가기를 사용하여 검색 창을 엽니다.
  - Mac:Command f
  - Windows:Ctrl f
2. 찾으려는 텍스트나 레이어 이름을 입력합니다. 입력하는 대로 검색 결과가 자동으로 채워집니다.
  - 현재 페이지별로 결과를 표시하거나 모든 페이지의 결과를 볼 수 있습니다.
  - Settings(설정)를 클릭하여 텍스트, 프레임, 모양 등과 같은 레이어 유형에 대한 검색 필터를 추가합니다.
  - 및 를 사용하여 결과를 살펴봅니다.
  - Settings(설정) 메뉴에서 Other(기타)를 사용하여 위젯 또는 슬라이스 이름과 같은 다른 모든 항목을 검색합니다.
3. 결과를 클릭하면 캔버스의 레이어로 이동합니다.
4. 탐색 패널로 돌아가려면 또는 Esc를 클릭합니다.
B
페이지

Dev Mode 아이콘은 Ready for dev(개발 준비 완료)로 표시된 섹션이 포함된 페이지를 나타냅니다. ready(준비됨)로 표시된 섹션은 Dev Mode 탐색 패널의 Ready for development(개발 준비 완료)에 표시됩니다.
C
Ready for development(개발 준비 완료)로 표시된 섹션

Dev Mode 아이콘은 Ready for dev(개발 준비 완료)로 표시된 섹션이 포함된 페이지를 나타냅니다. ready(준비됨)로 표시된 섹션은 Dev Mode 탐색 패널의 Ready for development(개발 준비 완료)에 표시됩니다.
D
레이어

Dev Mode 아이콘은 Ready for dev(개발 준비 완료)로 표시된 섹션이 포함된 페이지를 나타냅니다. ready(준비됨)로 표시된 섹션은 Dev Mode 탐색 패널의 Ready for development(개발 준비 완료)에 표시됩니다.

커서를 캔버스의 레이어 위로 가져가면 크기, 패딩, 간격 등 레이아웃에 대한 자세한 정보가 표시됩니다.

최상위 프레임을 선택한 경우 왼쪽 및 오른쪽 화살표 키를 사용하거나 화면의 화살표를 클릭하여 페이지의 각 프레임 사이를 이동할 수 있습니다.

···

검색

페이지

Ready for development(개발 준비 완료)로 표시된 섹션

레이어