Figma for VS Code: Now get styles listing and copying CSS & listing layer tree and a preview of top-level layers

Introduction 💌

Many people use Figma for designing and need to copy the styles to VS Code from there or just see the styles in VS Code to code their websites like the way they designed it. Hence, it's a great pain to work with both on a single monitor. But VS Code being the most powerful code editors, it can handle it all.

Solution 😉

There's an extension in VS Code: Figma by Kasper Mikiewicz. This is the goto solution for this. I have been using it for the past few days and it is damn amazing.

Installation ✔

First of all, there are some requirements, let's fulfill them. By the way, the same you will find on the extension page in VS Code, but these are more elaborate.

Requirements

1. Figma Personal Access Token
2. Team ID

If you don't know how to get them here's how:

1. Go to Account Settings in Figma.
2. Click on Create a new personal access token.
3. Name your token and copy it.
4. In VS Code open the commands by using Ctrl + Shift + P menu and execute Figma: Connect.
5. Paste your Figma token and press enter.

Team

You must be a part of any team to be able to browse and select files or you can create your own team. To get your team id:

1. Go to Figma and click on any team in the sidebar
2. Copy id from URL: https://www.figma.com/files/team/ID/example. But for this, you will have to open it in the browser.
3. In VS Code open the commands menu by using Ctrl + Shift + P and execute Figma: Add Team command
4. Type in your team name
5. Paste team id and press enter
6. You're now able to select any team file using Figma: Select File from the command palette.

Limitations 😢

Browsing files works only for teams. You can't browse your drafts. But they say that in the future there will be support for adding single files by id.
Also, it is in the preview version. With the release version of 0.1.0 at the time of writing this article.

Conclusion

This extension has helped me save my time and will definitely help you integrate your Figma designs into code with great ease and saving a lot of time.

Comments

[Blaqmac]

Thanks for this article, please I need more light on this project. I have been struggling to link my Figma file with VS Code. Now I have succeeded but still can't see the code as illustrated on the preview image above.