Rogie demonstrates a few recent improvements to the Inspect tab.

Whoa! I don’t use Abstract anymore, and it seems like this plugin requires access to a feature that wasn’t widely rolled out yet, but this is exciting. Abstract’s branch-based workflow is one of the rare features I see people genuinely miss when switching to Figma.

Export Figma styles and custom tokens to Style Dictionary JSON or sync to GitHub. I’ve been thinking of building a plugin for this before, so looking forward to trying it on one of the projects.

A few quality-of-life improvements to components, team libraries, and the Inspect tab.

The Inspect panel was also updated this week to make translating design to code easier. Now it provides extra details like documentation, parent component, and animation behaviors. Watch a quick demo by Rogie.

This issue is rich in code generation tools! A new plugin transforming design components into React, Vue, or HTML components. The author provides some context and explains how it works in the article ​“Introducing Figma to React”.

“There are tons of tools and platforms available that ease out the design handoff. To maintain a smooth design handoff, both designers and developers must take place into the process. Here are some tips for the designers and developers on how to improve the design handoff.”

“Figma-Low-Code is an open-source project that enables the direct inclusion of Figma designs in Vue applications. By ensuring that the Figma design stays the single source of truth, this approach reduces the need for design hand-offs and front-end code significantly.”

Two features announced on the Config Europe are already live! New Instance Swap menu and updated Inspect tab help both designers and developers navigate large, complex libraries in Figma.

Somehow I missed this article earlier this year, but it’s a good resource for creating an automated process to keep design tokens of the design tool in sync with the code behind it. They achieve this by setting up a Node.js server that generates Sass and Tailwind files with all the variables from the Figma API.

A solid guide to Figma for developers from Smashing Magazine. It’s focused on navigating the app, measuring dimensions, exploring styles, exporting assets, getting CSS from the Code panel, and other parts of the developer handoff.

Tim Benniks looks at how Figma, Zeplin, VS Code, and Storybook can work together to provide a much better experience for developers.

Femke shows her engineering handoff process at Uber Eats. Among other things, she adds a Handoff page to her files, breaks it down into work streams, uses templates to show flow statuses, and adds notes to document changes and implementation details.

In Issue #16, I shared the article ​“Worry less about spacing in Figma”. In the new article, Lennon Cheng continues on the idea and shows to introduce spacers into the development handoff process.

Automate the process of annotating your designs for a smooth and effective developer handoff.

Cool integration with a no-code app. ​”Bubble offers a powerful point-and-click web editor and cloud hosting platform that allows users to build fully customizable web applications and workflows.”

The team at Evil Martians shares how designers and engineers can speak the same language by using dynamic components built with Auto Layout. The article presents multiple techniques with good animated examples.

Zeplin redesigned their Figma plugin, improving export experience and solving some of the performance issues.

Helena Jaramillo from Coda and Silvia Tueros-Cossio from Stash share how they convinced their developers to join them in Figma and what that collaboration looks like.

Generate layers from your layout grids so you can export images or prepare diagrams to supplement your design systems documentation.