Component props. Config vlog. Rem units.
Sponsor
How to manage complex design system
Learn how Veeva — a leading SaaS company for the global life sciences industry, successfully creates a design system that supports UX, engineering, QA, and product teams with the help of Zeplin.
What’s New
The shared language of props
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.”
What happened at Config 2023
It was really cool to relive the conference through Charli’s vlog. I’ve been covering her work for years, and we briefly met in person at Zeplin’s after-party. Now I have a huge FOMO from missing the Design Life podcast meetup, as I headed out to the airport. (Fun fact: I discovered Femke’s work through her vlog from the first Config in 2020, and she is Charli’s co-host of the podcast.)
The making of advanced prototyping
Niko shares how advanced prototyping came from a vision in June 2022 to reality at Config 2023. The team had to ship variables, multiple actions, expressions, and conditionals simultaneously to make it happen. This release is a huge achievement and the team should be celebrated for it.
Using Figma
Figma now supports REM units: understanding the use and benefits
Christine Vallaure wrote about one of the most under-the-radar new features of the Dev Mode — units conversion. Now, you can design with pixels and then translate them to rem or other relative units in code. (Thanks for sharing the friend link with Figmalion, Christine!)
Guide: Variable mapping and design system structure
Luis Ouriach with an introduction to variables and a primer on how to structure your variable collections for single and multi-brand systems.
Scoping variables
Mark Steinruck shows how to scope variables for certain components to appear unchanged in light and dark modes.
50 resources to learn variables
Sam Gordashko collected resources on variables and advanced prototyping for the Design System University community, based on topics designers often struggle with.
Animation with variables and conditions
A new tutorial from Vijay Verma on creating an animation for a loader indicator shaped like a glass filled with liquid. The prototype uses a few variables and conditions, and he shares them in the cheat sheet in the thread.
Figma AI plugin template
Sawyer Hood, Software Engineer at Figma, built a plugin template that demonstrates streaming LLM responses inside of a plugin to get you up and running with the next AI project.
Backstage
Unleashing Creativity: A Candid Chat with Miguel A. Cardona Jr., the Multifaceted Designer, Educator, and Artist
Lilibeth Bustos Linares interviews Miguel Cardona at the SoulDoodles podcast, where they trace his inspiring journey from being an assistant professor at RIT, to leading product design at Imgix, and to joining Figma as a Designer Advocate for Education.