idered / vscode-extension-figma Goto Github PK

View Code? Open in Web Editor NEW

66.0 6.0 12.0 59 KB

Figma extension for VS Code

Home Page: https://marketplace.visualstudio.com/items?itemName=idered.figma

License: MIT License

TypeScript 99.39% JavaScript 0.61%

vscode-extension-figma's Introduction

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

vscode-extension-figma's People

Contributors

Stargazers

Watchers

Forkers

otissv x78w hysteve serafdossantos naftalimurgor linrstudio boy12371 gordonrudman flashdick5 hirajanwin aguiar-tiago buphnezz

vscode-extension-figma's Issues

integration issues

Hi
Below steps for setting up extension :-

Install extension from vs code marketplace
Add Personal Access token (Figma)
Add figma team
Take team id from url add it to extension setup next step
Select project
Select design
extension version: 0.1.1 & 0.1.0
VS code version: 1.47.0 & 1.46.1
v1.25.1 not support

After setting up extension, we can see our design's files in vscode
Issues :

Page preview failed:
On going to preview page, it shows figma login page but for login it's login button is not working.
Not visible CSS:
On exploring files, under style, there is no css code.
Team or project selection:
After some days when we again selecting team/project, it doesn't works.
We can't reset this plugin
Please let us know why we are facing above issues ASAP.

Figma extension is useful tools among developers. But the extension does not offer open Figma files from local storage. it shoud be act like Figma website. We cannot delete a Figma file located in Figma server. Please fix those issues.

Fails to select files

After choosing the right file to open (via Figma: Select File command) I have a small notification of "Loading project files..."

After a while, I get this error:

And this line in the VSCode logs:

Any idea how to fix that? It seems that the loading files operation blocks the extension host

Looking for projects...

Hello,
After adding token and team, I'm pressing select file, choosing team, then loading projects popup show up, and then nothing happen :D I dont see any list of my team projects and can't workaround with that.

Unable to login

After successfully opening a project, on an attempt to view the component, Figma asks for a login. On trying to login nothing happens further. This is after having checked for problems / output.

Unable to preview code of design and style

I am amazed to see this amazing project on the VS Code marketplace as an alternative to Adobe DSP manager. But the issue is that there is no enough documentation to show how to work with the extension on VS Code. I am only able to preview the design but not the codes. I look forward to feedback on this. Once again thank you for a great job done.

MSVS 2019 Compatibility

I am running MSVS 2019 Community. I attempted to run your installer but it fails. It apparently was made for MSVS 2017. Do you have plans to implement 2019 support? I have a project in MSVS which I am hoping to utilize with some FIGMA content.

The install log is attached

dd_VSIXInstaller_20190814160636_0a8c.log

However, on all my team projects, it crashes. I succeeded to open only a really small file I did, otherwise it didn't work.

Is there any limit about it?