Skip to content

Help make the extensions Marketplace better for everyone. Take this survey!

| Marketplace
Sign in
Visual Studio Code>Snippets>Figma for VS CodeNew to Visual Studio Code? Get it now.
Figma for VS Code

Figma for VS Code

Figma

figma.com
|
476,821 installs
| (46) | Free
Bring Figma into the text editor. Inspect designs, receive notifications, and get code suggestions.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Streamline your design to code workflow with Figma for VS Code

Figma for VS Code lets you navigate and inspect design files, collaborate with designers, track changes, and speed up implementation - all without leaving your text editor. Improve developer productivity by eliminating the context switching and busy work needed to turn designs into code.

What can you do with Figma for VS Code?

See and respond to comments and activity in real time

No longer worry about missing notifications in Figma. With Figma for VS Code, open live design files in the sidebar and collaborate in real time.

  • Receive and respond to new comments and activity within Figma files
  • Discuss layouts with designers using cursor chat

image

Get code suggestions based on designs

Stay in the flow and more productive than ever before with autocompletions based on the designs you’re actively working in.

  • Select a layer on your design and the properties will appear as code suggestions while you type
  • Download assets to your repo with a single click

image

Link code files to design components

Help your whole team move faster by keeping your design system and codebase in sync. Quickly navigate and document your codebase in relation to design files and no longer worry about finding existing implementations of components.

  • Add and review dev resource links to easily reference documentation

image

Troubleshooting

Have questions or want more information? Visit our Help Center for full details.

Share feedback and bugs

We’d love your help in improving Figma for VS Code! If you have any feedback or encounter any issues, contact support@figma.com.

A note about the beta + legal fine print

Figma for VS Code is available now in beta and free for everyone throughout 2023. The experience is subject to change throughout this period.

By installing this extension, you agree to our Terms of Service and Privacy Policy which apply to your use of Figma for VS Code in beta, notwithstanding any other agreement you may have with Figma. Of note, Figma may immediately and without notice remove, change, or update the functionality of this extension for any reason and at any time. Users must have an active Figma account in order to use this extension.

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft