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.

Jan Toman, Productboard. ​“Not sure where to start? Get your libraries off the ground by learning how to craft UI kits that designers will love using. We’ll dive into building flexible components, aligning their API with code, and dealing with changes as the design system evolves.”

“Rendition is the best way to hand off code to your developer. It’s a Figma+Github plugin that will write UI code for you from designs. Rendition speeds up the time it takes to implement designs by automating the boring parts of front-end development. It also syncs designs from code back into Figma, allowing you to easily work off of the latest designs.“

Designmodo on how to export Figma designs to websites using a no-code tool Siter​.io.

Ridd shares great tips on how to make your designs more developer-friendly.

A new app reimagining developer handoff from Figma.

Read how the Elastic UI design system powering the Elastic Stack connects their design (Figma) and code (React) libraries.

Convert Figma designs to React code (React Native and Next.js). See also a discussion on Hacker News.

“Design systems sit at the intersection of design and development. Lyft teammates Jeremy Dizon, Design Systems Product Designer, and Alex Lockwood, Design Systems Staff Engineer, will show off their design system and share how they collaborated to build it.”