시작하기 전에

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

모든 유료 요금제에서 사용 가능

풀 디자인 시트 또는 개발 모드 시트 필요

개발자는 Figma for VS Code 확장 프로그램을 사용해 VS Code에사 바로 디자인을 간편하게 사용하고 조사할 수 있습니다. 디자인 파일을 탐색 및 조사하고, 다른 디자이너들과 협업하고, 변경사항을 추적하고, 디자인 구현 속도를 높이세요. 이 모든 작업을 개발 환경에서 그대로 진행할 수 있습니다.

Figma for VS Code 확장 프로그램을 사용해 다음 작업을 할 수 있습니다.

• 실시간으로 코멘트 및 활동을 확인하고 응답
• 디자인에 기반한 코드 제안 확인
• 코드 파일을 디자인 구성요소와 연결

VS Code에서 Figma 디자인 열기

VS Code 확장 프로그램을 통해 여러 가지 방법으로 디자인 파일을 열 수 있습니다.

개발 모드

1. 코드 설정이나 조사 패널의 코드 섹션에서 CSS를 기본 언어로 설정합니다.
2. 최상위 프레임을 클릭합니다.
3. 검사 패널에서 레이어 이름 옆의 옵션을 클릭합니다.
4. VS Code에서 열기를 선택합니다.

VS Code

1. VS Code를 엽니다.
2. 활동 표시줄에서 Figma를 클릭하거나 확장 프로그램 목록에서 Figma for VS Code를 찾습니다.
3. 파일 아래의 기본 사이드바에서 열고자 하는 디자인을 클릭합니다.

VS Code에서 Figma 디자인을 조사합니다.

VS Code에서 디자인 파일 탐색

Figma for VS Code는 개발 모드의 조사 기능을 확장해주며 텍스트 에디터에 디자인 파일을 바로 불러올 수 있습니다. VS Code에서 디자인 파일을 선택하면 파일의 프레임이 섹션, 상태(개발 준비 완료 등), 페이지 기준으로 그룹화되어 표시됩니다. 프레임에 상위 섹션이 없거나 할당된 상태가 없으면 표시되지 않습니다.

프레임 조사

프레임 그리드에서 프레임을 선택하고 포커스 뷰를 통해 개별 프레임을 확인하세요. 프레임을 검색하고 결과를 필터링하여 원하는 프레임을 빠르게 찾을 수 있습니다.

개발 준비 완료 상태의 디자인 보기

툴바에서 레이어를 클릭하여 ‘개발 준비 완료’라고 표시된 섹션을 확인합니다.

코드 스니펫 보기

코드 탭에서 코드 스니펫과 함께 모드 및 스타일과 같은 관련 정보를 확인하세요.

조사 툴바의 오른쪽 상단에서 코드 스니펫의 기본 언어와 단위를 선택할 수 있습니다.

개발 리소스 사용

개발 리소스 탭에서 관련 개발 링크를 확인하세요. 개발 리소스 추가를 클릭하여 코드 파일이나 개발 리소스 링크를 추가하세요.

링크에 현재 코드베이스와 일치하는 구현이 포함되어 있는 경우 브라우저 대신 VS Code에서 파일이 열립니다.

개발 모드에서 개발 리소스를 레이어에 연결 →

구성요소 속성 보기

구성요소가 선택되어 있으면 구성요소 탭에서 구성요소의 속성을 볼 수 있습니다.

자산 내보내기

자산 탭에서 선택한 레이어의 자산을 다운로드하여 내보내세요.

Figma에서 선택 항목을 내보내는 방법에 관해 자세히 알아보기 →

자동으로 완성되는 코드 제안

Figma for VS Code 확장 프로그램은 선택한 레이어에 따라 자동으로 완성되는 제안 기능을 제공합니다. 이 기능은 코드베이스에 기존 구현이 없는 구성요소를 개발할 때 유용합니다.

코멘트 알림 보기

기본 사이드바의 알림에서 코멘트 알림을 실시간으로 확인할 수 있습니다. 알림을 클릭하여 VS Code를 통해 디자인을 확인하고 코멘트를 추가하세요.

Figma 코멘트 가이드 →

VS Code에서 플러그인 실행

코드 에디터에서 나가지 않고도 타사 도구 및 맞춤설정 코드를 활용할 수 있습니다.  VS Code에서 비공개 플러그인이 작동하도록 하는 방법을 알아볼 수 있는 문서 확인 →

Figma for VS Code 로그아웃

1. VS Code에서 Shift Command P를 눌러 명령어를 표시하고 실행합니다.
2. 검색창의 옵션 목록에서 Figma: 로그아웃을 선택합니다.