From the author of the new EightShapes Specs documentation plugin: ​“This post describes how the plugin works, what it outputs, how teams adjust and style based on their preferences, and a bit of the background of how I got here. As you read, keep in mind: the plugin is great for specs but also proved unexpectedly useful for designers to audit in-progress Figma work for quality and completeness and critique their component with teammates.”

Google’s Material Design team introduced Relay, a new process to transform Figma components into Android UI code. Designers can now use the Relay for Figma plugin to document and package UI component designs that can be sent directly to the developer. No more tedious design specs or back and forth to ensure details are right in implemented code.

A new plugin from Figma Developer Advocate Jake Albaugh for inspecting component properties as they would look in code. It currently supports the definition and instance code for Angular, React, Vue, and Web Components.

Mizko with a new video comparing the design hand-off process using Figma vs Zeplin.

Christine Vallaure highlights some of Figma’s features and possibilities to help you build a design that aligns with code as much as needed and improve your teamwork.

I’m not familiar with the Specify app, but this use case is something I’ve been thinking of automating myself. Happy to see that there is an existing solution! As Sun Tzu once said, ​“If you wait by the river long enough, the Figma tools and plugins you need will float by.”

A short overview of the most important parts of Figma for developers.

“We’re excited to talk about yet another awesome new feature: Component properties. Join us as product manager Jacob Miller and designer advocate Chad Bergman share more on how you can reduce variant explosion in your design systems and improve developer handoff.”

Ridd warns that using component properties introduces a new type of responsibility for designers and explores what the most effective handoff deliverable actually looks like.

Four templates that may help ease the pain of the design handoff process — a table of contents, detailed specs, mockups, and flow templates.

New Storybook plugin for Figma that lets you connect variants to stories.

Figma Designer Advocate Luis Ouriach talks to the UX Lead at Wix​.com Domas Markevičius about how they embed a culture of collaboration and communication between designers and developers.

The team at Awwwards explains how Tilda differs from other website builders and why it’s the best tool for web designers who work on Figma and want to create professional websites without writing code.

“AWS Amplify announces AWS Amplify Studio, a visual development environment that offers frontend developers new features to accelerate UI development with minimal coding, while integrating Amplify’s powerful backend configuration and management capabilities. Amplify Studio automatically translates designs made in Figma to human-readable React UI component code.”

While this approach feels backwards, I think it’s an interesting idea to explore for the developer handoff. Auto Layout is quite close to Flexbox, so creating a universal utility wrapper shouldn’t be hard.

Josh Cusick shares how the Design Systems team at Microsoft built, maintained, and set up for people to contribute the Figma UI kit for Teams Component Libraries (TCL). He covers structuring pages, naming things, aligning with code, design tokens, and version control.

Ridd shares his approach to organizing files in Figma.

Great article by Christine Vallaure on improving accessibility by using relative font sizes in CSS, and how to work around pixel-based sizes in Figma. While I always use a combination of rem and em units, I wasn’t familiar with the 62.5% CSS hack or that units can be switched during hand-off in Zeplin. Very cool!

Google’s Material Design is teaming up with Figma to bring great UI from design to code: ​“Our design to code workflow allows teams to create UI components in Figma and export them in a portable container we call a UI Package. These Packages can be directly used in Jetpack Compose projects for Android applications, can be edited in Figma, and can be directly updated in code with good developer ergonomics for component reuse and change management.” Don’t miss the video from Android Developer Summit with a new workflow.

Joey Banks with an excellent suggestion on how to bring designers and engineers closer.