Attention!
Figma is now integrated with VS Code
As a designer who likes to develop my own designs, this collaboration has definitely been an unexpected but a welcome surprise.
In this blog post, I'll share some interesting features which I liked and found useful while developing the designs.
Feature 1: Notifications
This ensures that we can stay up-to-date especially when we're collaborating with others to see their comments as and when they come without having to switch the window.
Feature 2: Downloading assets
Select the frame which contains an image, go to Assets tab, select your desired format (png, jpg, svg), and click export.
A prompt will appear at the top asking you to specify the path where you'd like to save your asset. Enter your desired location (both absolute and relative paths work) and click enter.
Feature 3: Dev resources
If a designer has linked external sources for the developer to refer while writing code, we'll see it under this tab.
Feature 4: REM
Yes, you heard it right ! No longer converting pixel values to rems and ems manually. This plug-in can now do that for us.
Simply, click inspect settings icon and select rem.
Feature 5: Suggestive code
With a layer selected in Figma, when writing code, VS Code editor will auto-suggest and take values from selected Figma layer. With a press of a Tab, we can write code faster than ever.
That's it for this blog. Hope you enjoyed it.
Top comments (0)