Figma Dev mode & VSCode

Figma Dev Mode

Figma Dev Mode

• Figma Web - App - VSCode 연동 가능
• VSCode Extension으로 Figma 프로젝트 View, Export, Code generate 가능
• Figma App에서는 Flutter Code까지 생성해주는데, VSCode 안에서는 아직 noop

Generate Code in Figma App

Figma APP(아마 웹도 될 것 같습니다)에서 Dev Mode를 켠 후, 원하는 컴포넌트와 프레임워크/OS를 선택.

컴포넌트에 따라 코드를 자동으로 생성됨.

Export SVG file in VSCode

VSCode에서 Figma Extension 추가한 뒤, Setting을 통해 SVG 파일 추출 경로를 지정.

Figma Extension에서 Asset에 대해 다운로드 버튼을 누르면 path가 뜨고, enter를 누르면 해당 경로에 svg 파일 생성.

Ref.

• Figma Dev Mode에 대한 소개
• VSCode에서 Figma Dev Mode 사용하기