Tweets

Prototyping with variables

Ridd shares a few repeatable steps to start prototyping with variables — creating the variable you need, assigning the variable to the UI, testing the connection, and setting up your triggers.

Translating brand palette to variables

I rely on Luis for thought-provoking organization and design systems insights. In this thread, he discusses a way to translate brand colors into primitive and semantic color scales. At work, I use two design systems — one made by a smaller team where the same designers control the brand, design system, and product, and another from a larger organization with these are separate functions. I can see how his approach of explicitly using brand colors in primitives can work well in larger orgs.

5 tips to make sure variables don’t break your design system

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.

Cohesive hover states

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.

Hover overlay

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.

Requesting a plugin approval from admins

Organizations can require approval for using plugins and widgets, and now Akbar shows a new way to request it straight from the plugin’s popup. They’ve also made it easier for admins to review the requests. (If you’re a plugin author, consider specifying networkAccess in the manifest.)

GPT-4V as a product design partner

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.

How do you update components using variables?

Ridd is back with a video and a thread on choosing the right variable types for updating the state of components.

Word highlighting with Auto Layout

A smart way to utilize line-wrapping in Auto Layout to achieve word highlighting effect.

Implementing UI with Figma + GPT-4V

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.

iPhone 15 device frames and frame presets

New frame presets and device frames for iPhone 15, 15 Plus, 15 Pro, and 15 Pro Max. Moreover, Keeyen created vector iPhones for prototyping and shared them with the community.

Copy as PNG

“Copy as PNG” is a lifesaver. I even use it when moving mockups to FigJam for presentation to keep things simple.

Replacing icons

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

Creating tab interactions with Variables

Molly shows how to add real interactions to your prototypes. Variables make this slide show really easy to make.

GPT-4 Vision to convert Figma designs into React

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.

Variables and Styles

Luis is rethinking the relationship between variables and styles. The future typography tokens are a great example, but even today this applies to styles with more complicated color fills. TL;DR: ​“Create variables in a private space, feed them into styles, and publish only styles to consumers.”

Documenting color “intentions”

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.

10 things I learned while adding variables to my Figma design system

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

Helpful gradient tips

A few good tips on adjusting the color hue, opacity, and evenly distributing color handles.

Switch between pixels and rem units in Dev Mode

Molly with step-by-step instructions for using rem units in your text properties. The developers on your team will be grateful for using the same units as they do when it comes to the handoff time!

Features

Topics

Design Tools

Figmalion

Issues:
193
Links:
3,553