At a recent meetup, Developer Advocate Jake Albaugh shared the story of Figma’s SDS, a UI kit with a realistic code backing to help bridge the gap between design and development. As a reminder, the Simple Design System is available in the Libraries selector, Figma community, and GitHub.

Jake made a plugin that brings the power of CSS color-mix() into Figma. Use it to generate swatches, variable ramps, and solid or gradient fills. I highly recommend watching Jake’s video if you’re unfamiliar with this CSS notation.

Figma Developer Advocate Jake Albaugh joins a livestream on the Visual Studio Code channel to talk about Figma for VS Code extension, allowing developers to easily access and inspect designs from VS Code.

A base UI kit from Advocates Luis and Jake is available in the Figma assets panel by default. It’s backed with a fully Code Connected React codebase. See Luis’ thread on how and why it was made.

Developer Advocate Jake explains some of the reasons why product experience can be misaligned between design and development. He points out that the source of truth can vary depending on the scenario, from the design system to the code in production to the design files. To find the truth, we have to ask a few questions: ​“What do we want?”, ​“What do we have?” and ​“What is the difference?”

Code Connect delivers code from your design system to Dev Mode, helping developers build with consistency and speed. In this session, Jake Albaugh, Figma Developer Advocate, shares an overview of Code Connect and some tips on how to get started.

Developer Advocate Jake shows Jason Lengstorf how to bring your code into Figma with Code Connect.

Jason Lengstorf from Learn with Jason talks to Figma Developer Advocate Jake Albaugh about how Dev Mode improves the design handoff and how the Figma plugins API enables more powerful customization.

A new code plugin from Jake, Figma Developer Advocate: ​“This plugin allows you to write and generate code snippets for Figma nodes, which are rendered in the Inspect Panel in Dev Mode. You can make these code snippets dynamic, by referring to parameters provided by the plugin. Doing this for your component library will bring accurate code snippets to any project that incorporates your design system.”

Jake goes into the relationship between design and development in product creation and illustrates it using a quadrant model, dividing the process into four key areas: product design, design patterns, product development, and development patterns. Successful collaboration requires trust and a deep understanding of each other’s perspectives.

Fantastic post by Developer Advocate Jake Albaugh on how component properties can be translated and aligned between design files and coding frameworks to help designers and developers work better together. ​“Implementing components as a designer in Figma differs from implementing as a developer in a codebase. When you optimize for the developer or designer experience with a component, it is tailor-fit for that specific purpose — even if it shares a name with a component in another environment.”

Developer Advocates Jake and Akbar made a couple of sample plugins for importing/​exporting variables and converting existing color styles to variables. (Also, Ryhan provides an interesting insight into how Figma migrated from color styles to variables in their internal design system.)

An in-depth session with practical perspectives on how designers and developers can leverage brand new Figma capabilities to unlock tighter collaboration with one another, prepared by four Figmates — Developer Advocate Jake Albaugh, Group Product Manager Avantika Gomes, Designer Advocate Lauren Andres, and Software Engineer Jenny Lea.