Figma for VS Code
🚧 Dev Mode is currently in open beta
Beta features can change during the beta period. You may experience bugs or performance issues during this time. Learn more about beta features →
Before you Start
Who can use this feature
Supported on any team or plan
Anyone with can view access can view Figma design files in VS Code.
You’ll need to install VS Code to use the Figma for VS Code extension.
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
You can install the Figma for VS Code extension from Visual Studio’s Marketplace. You’ll be prompted to sign in to your Figma account when you first open the extension in VS Code.
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
- Set CSS as your preferred language in Code settings or the Code section of the Inspect panel.
- Click on a top-level frame.
- In the Inspect panel, click Options next to the layer name.
- Select Open in VS Code.
From VS Code
- Open VS Code.
- Click Figma in the activity bar, or find Figma for VS Code from your list of extensions.
- 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.
- 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.
- 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.
- 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.
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
- While in VS Code, Press Shift Command P to Show and Run Commands.
- Select Figma: Log out from the list of options in the search bar.