Figma x VS Code
Features
Styles listing and copying CSS
Listing layer tree and preview of top level layers
Requirements
To use this extension, you need two things:
- Figma Personal Access Token
- Team ID
Figma Personal Access Token
- Go to Account Settings in Figma application
- Click on
Create a new personal access token
- Name your token
- Copy new token
- In VS Code open commands menu and execute
Figma: Connect
command - Paste your figma token and press enter
Team
You must be a part of any team to be able to browse and select files. To get your team id:
- Go to Figma web application
- Click on any team in the sidebar
- Copy id from url:
https://www.figma.com/files/team/ID/Eyedea
- In VS Code open commands menu and execute
Figma: Add Team
command - Type in your team name
- Paste team id and press enter
- You're now able to select any team file using
Figma: Select File
from command palette.
Limitations
Browsing files works only for teams. You can't browse your drafts. In future, there will be support for adding single files by id.
Roadmap
- [Commands] Add single file by id
- [Tree View] Copy css of selected layer
- [Tree View] Import images from figma to workspace
- [Tree View] Copy layer text
- [Tree View] Icon for each type of layer(group, frame, text, rectangle, etc.)
- [Preview] Better embed something like Zeplin - select layer by click, see css of selected layer
Release Notes
0.1.0
Initial release:
- Connecting with figma
- Adding teams
- Loading a figma design
- Loading design styles
- Loading design layers
- Preview of top level frames