A solid round-up of recommendations from Pedro Morais on organizing Figma mockups and communicating important details to your team.
Developer Advocate Jake and Designer Advocate Lauren have an insightful conversation about strengthening relationships between designers and developers. I love Jake’s point that trust is essential and we don’t need to understand every part of each other’s work to collaborate effectively. (Let’s hope Figma Detached is a new series, as I want more!)
sat down with my pal @laurenbandres at @figma to talk about how we strengthen relationships between designers and developers! pic.twitter.com/eESfusGfqc— jake (@jak___e) April 6, 2023
Tru Narla, Software Engineer at Discord, shares some quality tips on using Figma as a developer — Inspect panel, copying code snippets, and exporting full-sized assets.
Psst... developers, want to become @figma pros??? Well here's some tips and tricks to make working in Figma a LOT easier! pic.twitter.com/1nRR1bFgf4— mewtru •ᴗ• (@trunarla) April 5, 2023
FTE is an open-source tool for creating an automatic communication channel between design decisions (represented as design tokens) and code. The main objective of the tool is to simplify the standardization and update of these decisions throughout all the digital products sharing a Design System. Its creator Daniel Casado shows how to install, configure, and use the FTE to transform design tokens (either as Figma styles or from Token Studio) into CSS styles.
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.
Most times we're too busy looking at Figma as a designer. Ever wondered how Figma works with View-only access?— manocado 🥑 (@onowomano) June 18, 2022
This thread is mostly for Devs, or anybody else that uses Figma without Edit access 🙃
“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.
By now you’ve probably seen a few of these before/after screenshots like the one below:— Ridd 🏛 (@Ridderingand) May 31, 2022
Pretty incredible, right?
Yes, BUT... pic.twitter.com/wE1HVHY2yI
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.
Today's whacky idea…— Joe Bell (@joebell_) November 19, 2021
What if UI Designers and UI Engineers spoke the same language?@Figma Auto Layout === <AutoLayout /> pic.twitter.com/8zFJnNU6WI
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.