Tweets

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.

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

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

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

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

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

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

Molly Hellmuth points to five places where her students often get stuck when building component sets in Figma. Matching names of the layers across variants, ordering and grouping properties, rearranging a component set for the most common variant, and breaking down large component sets are all great tips for getting unstuck.

Not sure when this was shipped, but this is a fast way to add emojis without opening a picker!

Mal shows hot updates to the new FigJam app for the iPad! It got the new native toolbar with a fresh look and feel. The app was optimized for Apple Pencil, and now it supports a responsive experience for multitasking.

Zander with just-in-time tips on creating a spatial UI for Vision Pro, supafast!

Did you know that you can use math inside color values in Figma? Really cool.

This tip (and the fact that this feature exists) made me irrationally happy. Thanks, Miggi!

Oğuz with a design tip on using Randomiser and Select Random Layers plugins to create a realistic image of the universe, like in his example. (The look resembles the cool new Reflect app landing he worked on recently.)

Landa Dong, Design Evangelist at Apple, recommends three must-watch videos from WWDC23 on designing for Apple Vision Pro — ​“Principles of spatial design”, ​“Design for spatial interfaces”, and ​“Design for spatial input”.

Jan Mraz with a short video showing a few Auto Layout tips. I keep forgetting that the canvas stacking option exists! No more weird hacks with rotating a container 180°.

Scott Belsky, Chief Product Officer of Adobe, on a new superpower feature launched today in beta: ​“Powered by Firefly, our generative AI family of models, Photoshop now lets you summon new objects and augment creations layer by layer.” This is incredible, and I’m very bullish on Adobe’s vision for integrating generative AI into creator tools.

Jan Toman gathered the best practices for creating solid button components.

A solid list of new recommendations from the ADPList.

Great tip on using Figma object alignment shortcuts with MX Master mouse. I tried this mouse a few years ago and went back to Magic Mouse because of its amazing scrolling, but might give it another try just because of shortcuts!