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.”

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.