Top 5 features from the latest Figma + VS Code integration

kajal singh — Mon, 03 Jul 2023 06:35:12 +0000

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.