The Figma for VS Code extension lets you navigate and inspect design files, collaborate with designers, track changes, and speed up design implementation—all without leaving your development environment. Use the Figma for VS Code extension to:

• See and respond to comments and activity in real time
• Get code suggestions based on designs
• Link code files to design components

Open Figma designs in VS Code

There are a couple of ways to open a design file through the VS Code extension:

From Dev Mode

1. Set CSS as your preferred language in Code settings or the Code section of the Inspect panel.
2. Click on a top-level frame.
3. In the Inspect panel, click Options next to the layer name.
4. Select Open in VS Code.

From VS Code

1. Open VS Code.
2. Click Figma in the activity bar, or find Figma for VS Code from your list of extensions.
3. In the primary sidebar under Files, click on the design you want to open.

Inspect Figma designs in VS Code

Figma for VS Code extends the functionality of Dev Mode’s inspection features and brings design files right to your text editor. In the Figma for VS Code Inspect panel, you can:

• A

  See which designs are ready for development

  Click Layers in the toolbar to view sections marked as Ready for development.

  Navigate designs in Dev Mode →

• B

  Easily navigate frames and layers

  Click on the selected layer’s name in the toolbar to view and select its nested layers.

• C

  View code snippets

  View code snippets and relevant information like modes and styles in the Code tab.

  Choose your preferred language and unit for code snippets in the top-right of the Inspect toolbar.

  Code snippets in Dev Mode →

• D

  Access Dev resources

  Access relevant development links in the Dev resources tab. Click Add Dev resources to add a link to a code file or dev resource.

  If a link has a matching implementation in your current codebase, it opens the file in VS Code instead of the browser.

  Link Dev resources to layers in Dev Mode →

• E

  View component properties

  If you have a component selected, you can view its properties in the Component tab.

• F

  View which sections are ready for development

  Download and export assets for a selected layer in the Assets tab.

  Learn more about exporting selections from Figma →

Auto-complete code suggestions

The Figma for VS Code extension provides auto-complete suggestions based on the selected layer. This is helpful if you’re building components that don’t have an existing implementation in your codebase.

View comment notifications

You can view comment notifications in real time under Notifications in the primary sidebar. Click on a notification to view and add a comment to the design through VS Code.

Guide to comments in Figma →

Log out of Figma for VS Code

1. While in VS Code, Press Shift Command P to Show and Run Commands.
2. Select Figma: Log out from the list of options in the search bar.