검사 가이드
Figma의 새로운 디자인인 UI3를 사용하는 경우 이 문서의 일부가 현재 제품에 있는 내용과 일치하지 않을 수 있습니다. 업데이트하는 동안 기다려 주셔서 감사합니다. Figma의 새 디자인에 대해 자세히 알아보기 →
디자인을 검사하면 개발자나 다른 이해관계자가 디자인의 구조와 속성을 이해하고 더 쉽게 코드로 변환할 수 있습니다.
디자인 파일을 검사하는 방법은 요금제 유형, 시트 유형, 파일 권한에 따라 다릅니다. 아래 도구를 사용하면 검사하려는 파일에 대한 개인 액세스를 기반으로 일반적인 검사 작업(내보내기, 측정, 코드 생성, 어노테이션 보기, 개발용 플러그인 사용)을 수행하는 방법을 알아볼 수 있습니다.
어떤 파일 액세스를 갖고 있든 한 가지의 검사 환경은 사용할 수 있습니다.
먼저, 파일 상단에서 Dev Mode로 전환하거나 키보드 단축키 Shift D를 사용하여 검사 중인 파일에서 Dev Mode에 액세스할 수 있는지 확인합니다. Dev Mode에 액세스할 수 없는 경우에는 디자인 모드에서 검사하게 됩니다. 편집 가능 또는 열람 가능 액세스가 있는지 선택하여 검사 방법을 확인할 수 있습니다.
Dev Mode가 없고 보기 전용 액세스만 있습니다.
Dev Mode 액세스가 필요할까요? 스타터 요금제를 사용 중이라면 유료 요금제로 업그레이드하거나 유료 팀으로 파일을 이동해야 합니다. 유료 요금제를 사용 중이라면 풀 또는 데브 시트가 필요합니다.
거리 측정
개체가 프레임, 그룹 또는 컴포넌트 내에 중첩되어 있는 경우에도 개체 간의 거리를 측정할 수 있습니다.
- 캔버스에서 첫 번째 개체를 선택합니다.
- 다음 수식 키를 길게 누릅니다.
- Mac: ⌥ Option
- Windows: Alt
- 두 번째 개체 위로 마우스를 가져갑니다.
Figma는 두 개체 사이의 빨간색 선과 가로 및 세로 측정값을 표시합니다.
팁: 측정하는 데 어려움이 있으신가요? 개체 간 거리 측정 가이드를 확인해 보세요.
코드 생성
CSS, iOS 또는 Android용으로 자동 생성된 코드 스니펫을 복사할 수 있습니다.
- 캔버스에서 개체를 선택합니다.
- 개체를 마우스 오른쪽 버튼으로 클릭하고 복사/붙여넣기 > 코드로 복사를 선택합니다.
- 필요에 맞는 코드 옵션을 선택합니다.
속성 보기
속성 탭에서는 캔버스에 있는 개체의 속성 목록을 볼 수 있습니다. 레이아웃, 색상, 타이포그래피, 텍스트 문자열, 컴포넌트 속성, 스타일 및 변수와 같은 속성이 여기에 포함됩니다. 개체의 속성을 보려면 다음 단계를 따르세요.
- 캔버스에서 개체를 선택합니다.
- 오른쪽 사이드바에서 속성 탭을 클릭합니다.
내보내기
- 내보낼 레이어를 선택합니다. 현재 페이지의 전체 캔버스를 내보내려면 캔버스에 있는 모든 개체를 선택 해제하세요.
- 내보내기 탭에서 더하기 기호를 클릭하여 내보내기 구성을 추가합니다. 선택한 항목에 내보내기 구성을 필요한 만큼 추가할 수 있습니다.
- 내보내기 설정을 구성합니다. Figma의 내보내기 형식 및 설정에 대해 자세히 알아보기 →
- 필요한 경우 미리 보기를 클릭하여 에셋이 어떻게 표시되는지 확인합니다. 여러 개체를 선택한 경우에는 미리 보기 설정이 표시되지 않습니다.
- 내보내기를 클릭합니다.
팁: 내보내기에 대해 자세히 알아보고 싶으세요? Figma에서 내보내기 전체 가이드를 확인해 보세요.
댓글 보기 또는 추가
댓글은 디자이너와 개발자가 디자인의 특정 부분에 주의를 기울여 협업할 수 있게 도와줍니다. 댓글을 남겨 디자인의 각 부분이 어떻게 작동해야 하는지에 대한 자세한 컨텍스트를 공유할 수 있습니다.
- 도구 모음에서 을 클릭 하거나 을 눌러 C 주석 모드로 들어갑니다. 커서가 다음으로 바뀝니다..
- 댓글을 달 위치를 선택합니다.
- 캔버스에서 댓글을 고정할 위치를 클릭합니다.
- 또는 커서를 클릭하고 끌어서 댓글을 달 영역을 선택합니다.
- 필드에 메시지를 입력합니다. @를 입력하여 동료나 공동작업자를 언급합니다.
- 메시지를 보내려면 클릭하세요.
플러그인 사용
파일에서 플러그인을 사용하려면 편집 가능 액세스가 필요합니다.
Dev Mode가 없고 편집 가능 액세스만 있습니다.
Dev Mode 액세스가 필요할까요? 스타터 요금제를 사용 중이라면 유료 요금제로 업그레이드하거나 유료 팀으로 파일을 이동해야 합니다. 유료 요금제를 사용 중이라면 풀 또는 데브 시트가 필요합니다.
편집 가능 액세스가 있으면 디자인 모드 내에서 직접 검사 도구를 사용할 수 있습니다.
거리 측정
개체가 프레임, 그룹 또는 컴포넌트 내에 중첩되어 있는 경우에도 개체 간의 거리를 측정할 수 있습니다.
- 캔버스에서 첫 번째 개체를 선택합니다.
- 다음 수식 키를 길게 누릅니다.
- Mac: ⌥ Option
- Windows: Alt
- 두 번째 개체 위로 마우스를 가져갑니다.
Figma는 두 개체 사이의 빨간색 선과 가로 및 세로 측정값을 표시합니다.
팁: 측정하는 데 어려움이 있으신가요? 개체 간 거리 측정 가이드를 확인해 보세요.
코드 생성
CSS, iOS 또는 Android용으로 자동 생성된 코드 스니펫을 복사할 수 있습니다.
- 캔버스에서 개체를 선택합니다.
- 개체를 마우스 오른쪽 버튼으로 클릭하고 복사/붙여넣기 > 코드로 복사를 선택합니다.
- 필요에 맞는 코드 옵션을 선택합니다.
속성 보기
디자인 탭에서는 캔버스에 있는 개체의 속성 목록을 볼 수 있습니다. 레이아웃, 색상, 타이포그래피, 텍스트 문자열, 컴포넌트 속성, 스타일 및 변수와 같은 속성이 여기에 포함됩니다. 개체의 속성을 보려면 다음 단계를 따르세요.
- 캔버스에서 개체를 선택합니다.
- 오른쪽 사이드바의 디자인 탭에서 검사하려는 속성이 있는 섹션으로 스크롤합니다.
내보내기
- 내보낼 레이어를 선택합니다. 현재 페이지의 전체 캔버스를 내보내려면 캔버스에 있는 모든 개체를 선택 해제하세요.
- 디자인 탭에서 더하기 기호를 클릭하여 내보내기 구성을 추가합니다. 선택한 항목에 내보내기 구성을 필요한 만큼 추가할 수 있습니다.
- 내보내기 설정을 구성합니다. Figma의 내보내기 형식 및 설정에 대해 자세히 알아보기 →
- 필요한 경우 미리 보기를 클릭하여 에셋이 어떻게 표시되는지 확인합니다. 여러 개체를 선택한 경우에는 미리 보기 설정이 표시되지 않습니다.
- 내보내기를 클릭합니다.
팁: 내보내기에 대해 자세히 알아보고 싶으세요? Figma에서 내보내기 전체 가이드를 확인해 보세요.
댓글 보기 또는 추가
댓글은 디자이너와 개발자가 디자인의 특정 부분에 주의를 기울여 협업할 수 있게 도와줍니다. 댓글을 남겨 디자인의 각 부분이 어떻게 작동해야 하는지에 대한 자세한 컨텍스트를 공유할 수 있습니다.
- 도구 모음에서 을 클릭 하거나 을 눌러 C 주석 모드로 들어갑니다. 커서가 다음으로 바뀝니다..
- 댓글을 달 위치를 선택합니다.
- 캔버스에서 댓글을 고정할 위치를 클릭합니다.
- 또는 커서를 클릭하고 끌어서 댓글을 달 영역을 선택합니다.
- 필드에 메시지를 입력합니다. @를 입력하여 동료나 공동작업자를 언급합니다.
- 메시지를 보내려면 클릭하세요.
플러그인 사용
커뮤니티에서 플러그인을 실행하거나 Figma 또는 FigJam 파일에서 직접 실행할 수 있습니다.
- 도구 모음에서 리소스를 클릭합니다.
- 플러그인 탭에서 최근 사용했거나 저장한 플러그인을 선택하거나, 커뮤니티에서 플러그인을 검색합니다.
- 플러그인을 클릭하면 해당 플러그인의 세부 정보를 볼 수 있습니다.
- 실행을 클릭하여 현재 파일에서 플러그인을 실행합니다.
Dev Mode가 있습니다.
디자인을 검사하려면 Dev Mode 토글을 선택하거나 키보드 단축키 Shift D를 사용하여 Dev Mode로 들어간 후, 다음과 같은 검사 도구를 사용할 수 있습니다.
거리 측정
개체가 프레임, 그룹 또는 컴포넌트 내에 중첩되어 있는 경우에도 개체 간의 거리를 측정할 수 있습니다. Dev Mode의 캔버스에서 부모 레이어 또는 자식 레이어를 선택합니다. 주변 레이어 위로 마우스를 가져가면 Figma가 두 개체 사이의 패딩 값 또는 거리를 표시합니다. 특정 개체 간의 거리를 측정할 수도 있습니다.
- 캔버스에서 첫 번째 개체를 선택합니다.
- 다음 수식 키를 길게 누릅니다.
- Mac: ⌥ Option
- Windows: Alt
- 두 번째 개체 위로 마우스를 가져갑니다.
Figma는 두 개체 사이의 빨간색 선과 가로 및 세로 측정값을 표시합니다.
코드 생성
Dev Mode에서 캔버스의 아무 개체나 클릭하여 검사 패널의 코드 섹션을 채웁니다. 선택한 항목에 따라 타이포그래피 미리보기 또는 박스 모델이 표시되고 해당 개체에 대해 자동 생성된 코드 스니펫이 표시됩니다.
언어 및 단위 선택을 변경하거나 코드 생성 플러그인을 사용하려면:
- 코드 섹션의 오른쪽 상단에 있는 드롭다운에서 언어 또는 플러그인을 선택합니다.
- 필요한 경우 검사 설정을 클릭하고 드롭다운에서 단위를 선택합니다.
참고: 파일에서 복사 및 공유가 비활성화된 경우, 코드 섹션과 같은 일부 Dev Mode 기능이 검사 패널에 표시되지 않습니다.
속성 보기
Dev Mode에서는 캔버스에 있는 개체의 속성 목록을 검사 탭에서 확인할 수 있습니다. 레이아웃, 색상, 타이포그래피, 텍스트 문자열, 컴포넌트 속성, 스타일 및 변수와 같은 속성이 여기에 포함됩니다. 개체의 속성을 보려면 다음 단계를 따르세요.
- Dev Mode에서 캔버스의 개체를 선택합니다.
- 오른쪽 사이드바의 검사 탭에서 검사하려는 속성이 있는 섹션으로 스크롤합니다.
팁: 컴포넌트 또는 인스턴스를 선택하면 컴포넌트 미리보기, 기본 컴포넌트에 대한 링크, 관련 문서 및 개발 리소스에 대한 링크가 표시됩니다. 컴포넌트 인스턴스가 선택되면 검사 패널에 컴포넌트 플레이그라운드가 표시됩니다. 플레이그라운드를 사용하여 실제 디자인을 변경하지 않고 컴포넌트의 다양한 속성을 실험해 보세요.
변수 탐색
Dev Mode에는 디자인을 검사할 때 변수로 작업하는 방법이 몇 가지 포함되어 있습니다.
- 변수에 대한 세부 정보 보기(값과 모드 포함) 모드를 바꿀 수 있으며, 값에 별칭을 사용하는 경우 변수의 원시 값까지 전체 별칭 체인이 적용됩니다.
- 디자인에서 원시 값이 기존 변수와 하나 이상 일치하는 경우, 해당 값에 대한 제안 변수를 가져옵니다.
- 현재 파일에 생성된 변수 컬렉션에 액세스하고 모든 변수와 모드를 테이블에서 확인합니다.
자세한 내용은 Dev Mode의 변수를 참조하세요.
에셋 내보내기 또는 다운로드
Dev Mode는 아이콘을 자동으로 감지하여 개발자에게 다운로드 가능한 에셋으로 제공합니다. 내보내기 설정 위의 검사 탭에서 이러한 에셋을 확인할 수 있습니다. 항목 위에 마우스를 올려놓고 파일 유형을 선택한 후 다운로드 아이콘을 클릭하세요.
사용자 정의 내보내기를 설정하려면 다음 단계에 따르세요.
- Dev Mode에서 내보낼 레이어를 선택합니다.
- 검사 탭에서 더하기 기호를 클릭하여 내보내기 구성을 추가합니다. 선택한 항목에 내보내기 구성을 필요한 만큼 추가할 수 있습니다.
- 내보내기 설정을 구성합니다. Figma의 내보내기 형식 및 설정에 대해 자세히 알아보기 →
- 필요한 경우 미리 보기를 클릭하여 에셋이 어떻게 표시되는지 확인합니다. 여러 개체를 선택한 경우 미리 보기 설정이 표시되지 않습니다.
- 내보내기를 클릭합니다.
주석 보기 또는 추가
디자이너는 어노테이션을 사용하여 디자인의 주요 세부 정보를 개발자에게 직접 전달할 수 있습니다. 중요한 속성 강조 표시하기, 간격 및 크기를 측정값으로 시각화하기, 텍스트 메모로 컨텍스트 공유하기 등이 여기에 포함됩니다.
Dev Mode에서는 주석이 캔버스에 녹색 점으로 표시됩니다. 어노테이션을 클릭하여 내용을 표시합니다.
참고: 파일에 어노테이션을 추가하려면 풀 시트 및 편집 가능 액세스가 필요합니다.
디자인에 어노테이션을 추가하려면 다음 안내를 따르세요.
- 도구 모음 오른쪽 상단에서 Dev Mode 토글을 클릭하거나 키보드 단축키 Shift D를 사용합니다.
- 도구 모음에서 어노테이션을 클릭하거나 키보드 단축키 Shift T를 사용합니다.
- 어노테이션을 달려는 레이어를 선택합니다.
- 텍스트 필드에 메모를 작성하거나 + Property(+ 속성)를 클릭하여 목록에서 속성을 선택합니다. 어노테이션에 일반 텍스트와 속성을 모두 포함할 수 있습니다.
디자인에 측정값을 추가하려면 다음 안내를 따르세요.
- 도구 모음에서 측정을 클릭하거나 키보드 단축키 Shift M을 사용합니다.
- 측정을 시작할 위치에 대한 옵션을 보려면 레이어 위에 마우스를 올려 놓습니다.
- 시작점에서 측정을 끝낼 레이어까지 클릭하고 드래그합니다.
- 디자인을 가리지 않도록 측정값을 클릭하여 드래그합니다.
플러그인 사용
Dev Mode의 플러그인 탭에는 최근 사용한 플러그인과 Figma 커뮤니티에서 추천하는 플러그인이 표시됩니다.
변경 사항 비교
프레임이나 컴포넌트가 마지막으로 본 이후 업데이트된 경우 버전 기록을 비교할 수 있습니다. 이 기능은 최신 업데이트를 추적하고 프로덕션 코드를 정확하게 유지하는 데 도움이 됩니다.
또한 분리된 컴포넌트나 디자인 재정의가 있는 인스턴스를 기준 컴포넌트와 비교할 수 있습니다.
- 최상위 프레임이나 컴포넌트를 선택합니다.
- 오른쪽 사이드바의 검사 탭에서 변경사항 비교를 클릭합니다.
팁: Shift 키를 누른 채 캔버스에서 두 컴포넌트를 클릭하여 선택하면 서로 비교할 수 있습니다.