Speaking of Molly, only 2 weeks left to enroll in the upcoming cohort of her 5‑week Design System Bootcamp. I rarely recommend paid content, but have full confidence in her course as one of the most featured authors in this newsletter and creator of the popular UI Prep design system. Figmalion readers can save $100 with a coupon code FIGMALION100.

Molly Hellmuth shares a few tips from her recent talk ​“Design System Traps & Pitfalls” at Smashing Conference. Here are the five ways to de-risk variable adoption for your design system — create a map for your token structure, start using variables with numbers only, use variables and color styles together, stress-test new features, and roll out changes gradually.

Something must be (hovering) in the air, as Ridd also shared his thoughts on selecting a color for the hover state with the right amount of saturation.

An interesting idea on using a composite style with an alpha channel for a hover state instead of creating variables for every variant. Won’t work in every case, but it was interesting to learn that the same overlay approach is used in Material 2.

I shared the teaser in issue #132, but last week Builder​.io introduced Visual Copilot, ​“a completely reimagined version of the Builder Figma-to-code plugin that will save developers 50–80% of the time they spend turning Figma designs into clean code.” The major difference between Visual Copilot and previous design-to-code tools is a specialized AI model that was trained to solve this problem. The features include one-click conversion, automatic responsiveness, extensive framework and library support, customizable code structures, and easy integration with the existing codebase.

One of the most exciting parts of this announcement is still in private beta and targeted at teams with well-maintained design systems. This feature in Visual Copilot uses AI to map reusable components in your Figma file to those in your code repository and generates code using your existing components when you have them. This could be genuinely useful to get the first rough version ready in no time.

A big update to one of the most helpful plugins. Design Lint can now automatically fix missing fill, text, stroke, and effect styles using styles found in your designs. It will make type suggestions (!) if a text layer is close to an existing type style. Import your styles by running Design Lint in a design system file, then the plugin will use these styles to make suggestions (stored only on your computer). You also can now create and apply styles in bulk directly from the plugin.

I’m still waiting for access to GPT‑4 Vision, but examples like this make me so excited about possible use cases! Imagine using LLM for a heuristic evaluation or pairing design and sketching sessions.

“Demystify the synergy between Figma Variables, Figma Styles, and Tokens Studio — a trio of ways composed to develop your design token workflow.”

Alright, so in the last issue, I wrote that ​“plugins for code generation in Dev Mode using GPT‑4 might provide an even better result.” It didn’t take long for a better example! Ben shows a new feature in Sidekick AI (using GPT‑4) for dropping a link to a frame in a Figma file to improve the code generation and even fix visual bugs. This looks freaking amazing.

Dan Mall is a designer, author, speaker, entrepreneur, and one of the most prolific educators in the design systems space. In this Shortcut profile, he distills his experience into ten pieces of advice for tackling complex tasks, preventing burnout, and fostering continuous learning.

New in-product workflows for requesting and approving plugins and widgets within Figma on the Organization and Enterprise plans. 

You can now opt out of beta AI features, so your data will not be sent to Figma’s third-party AI vendor. ​“Figma’s agreement with OpenAI provides that data is not to be used for model training. Data inputted into AI features is sent to OpenAI for processing and generating AI output. Data is temporarily retained in OpenAI’s environment to provide the services, however it is not used for model training.”

New ways to manipulate colors and glyphs in Figma, coming directly from the team. #18: Two new blend modes that are most applicable to designing for iOS, as explained by Rogie — plus darker (linear burn) and plus lighter (linear dodge). Now we can do a classic dodge and burn! #19: Scrubbable inputs in color pickers. Use your mouse to drag or ​“scrub” individual fields to get precise control over your colors. #20: Alpha values in color inputs will be applied to the color’s opacity. #21: When outlining a stroke within a text node, the text is now converted into a group of vector nodes, one per text glyph.

Roman Shamin and Evil Martians keep building amazing tools for working with colors. Harmony is a beautiful color palette built with a primary focus on visual contrast and accessibility. It provides an equal contrast within lightness levels and consistent chroma (thanks OkLCH!), mirrored contrast pairs for light and dark modes, P3 gamut support, and Figma variables support. A great example of how a modern color palette should be built. Make sure to read Roman’s thread with all the nitty-gritty details of building this palette.

“In this livestream Hanju Kim and Marvin Messenzehl from RTL+ dive into the file to understand the intricacies of designing for a wide array of platforms while maintaining impeccable structure and facilitating seamless collaboration.”

“To replace one icon with another, press and hold Command-Option while dragging a component onto an existing component in your document.”

This result is based on an exported PNG, so plugins for code generation in Dev Mode using GPT‑4 might provide an even better result.

Dylan Field, founder and CEO of Figma, looks at the relationship between designers, developers, and AI, in conversation with a16z’s David George. In the process, he also demoes Jambot, their new AI widget for FigJam. Love this quote from Dylan: ​“It [AI] will lower the floor for who’s able to participate in the design process, but also raise the ceiling of what you can actually do.”

Luis with an interesting approach to documenting use cases or ​“intentions” of specific color levels in a palette. The color scales documentation from Radix recommended in the comments is also a fantastic resource. See also Luis’ Documentation template for colors in the Community.

Molly Hellmuth with tips on the best ways to name, organize, use, and theme color variables.