Tweets

Variables and Design Tokens

Good thread by W3C’s Design Tokens Community Group on Figma variables, and how they differ from the spec. Great to see that Figma is actively collaborating with the community group on adding modes to the specification, and already built sample plugins for importing and exporting DTCG-compliant JSON files. (BTW, if you ever wondered what the variables icon was based on — now you know.)

How to get started with color variables

Luis shares good tips and thoughts on using, naming, and organizing color variables, as well as setting up modes for themes. Additionally, he summed up all of the above into a Variable starter kit on the Figma Community.

Leading through uncertainty: A design-led company

Great summary of Brian Chesky’s conversation with Dylan Field on approaching everything at Airbnb through a design lens.

Config brand

Damien Correll, Creative Director at Figma, shares some thoughts on the Config brand. Creating an identity for a brief event is an interesting challenge, and Figma’s brand studio does an incredible job every time. The pictograms were my favorite part — they are in lively motion on the screen but feel monumental IRL as wooden cutouts or a statue at Moscone, almost at odds with the temporal nature of the brand.

Rich text component descriptions

Small improvement, but I know it will make many people excited!

A change to the core text layout engine

Lauren Budorick explains how the new text truncation works: ​“Now, whenever we can, we figure out at line layout time whether the next line will fit. If it won’t, we’ll override our line breaking engine to say that, if this is the last line before truncation, every glyph pair is breakable.” She also points to where the new ​“Max lines” truncation feature can be found.

Genius by Diagram

The first-ever demo of a new plugin by Diagram. Can’t wait for it to become a part of the editor!

Stopwatch

And here is a fully functional stopwatch demo as well.

Calculator

Miguel Solorio already built a simple, functioning calculator with advanced prototypes and variables.

DVD Video animation

One of the fun test files that Figma engineer Willy Wu used for testing advanced prototyping. ​“With stuff like this, we’re entering Turing-complete territory… it’s only a matter of time before someone gets Doom running in Figma!”

Flappy Bird

A fully working version of Flappy Bird made with physics-based movement, pseudo-randomized pipe placement, and scoring. Made by Dave Williames using 46 variables.

How Spotify and Encore use the new variables

“159 variables across 13 modes, totaling 1,843 values” — cheers to the Figma API!

Switch designs from light to dark mode

Zander Whitehurst shows how to switch color modes with new variables, supafast!

Tokens Studio and Variables

I was wondering what variables mean for Tokens Studio. Turns out the new version 1.37 already supports them, and the founder is very excited: “…this removes the need for the plugin to do all the heavy lifting itself. Applying design tokens should not be a plugin’s job, and I’m looking forward to Figma supporting even more token types and values!” Jan also answers some questions in this short video.

Plugins to help with Variables

Developer Advocates Jake and Akbar made a couple of sample plugins for importing/​exporting variables and converting existing color styles to variables. (Also, Ryhan provides an interesting insight into how Figma migrated from color styles to variables in their internal design system.)

Styles vs. Variables

Confused by how variables are different from styles? Design Systems Product Manager Jacob Miller explains: ​“Styles can contain multiple fills as well as blend modes, and that restricts their use case for design-code alignment and where we can apply them. […] Variables are a single value. They’re more atomic. This means we will be able to use color variables anywhere you see a hex code.” This is my favorite way to think about it: ​“One way to think of it is a style is a CSS class (a group of values), whereas a variable is like a CSS variable.” 

How Dev Mode was built

An insightful thread about Dev Mode from Joel Miller, a Product Designer on Dev Tools at Figma: ​“It’s the culmination of an ~18-month journey, filled with countless riffs, prototypes, reviews, PRDs, and PM mocks. Here’s my story of how we got here.”

Wanna fly in Figma?

Cool way to present work on the Figma canvas without entering the presentation mode.

The Breakdown of the Orbit App Icon

Oğuz wrote a step-by-step tutorial on creating a beautiful app icon from scratch in Figma.

Mouse tracking in Figma

Double Glitch pushes Figma’s prototyping limits with this cool mouse tracking effect.

Features

Topics

Design Tools

Figmalion

Issues:
202
Links:
3,671