Tweets

One more tutorial from Fons! This one is on how to create a glossy app icon.

Fons Mans shows how to create a dreamy multi-color gradient with Figma without relying on any plugins.

Molly Hellmuth asked 5 of her go-to design system people — Luis Ouriach, Nathan Curtis, Lewis Healey, Dan Mall, and Maria Christopher — for advice on how to start using Figma variables. My heart goes to Luis’ advice to start in a spreadsheet before jumping to Figma (but that’s also my answer to any life question).

After playing with visionOS SDK, Alex Widua built a little iOS app that takes Figma frames and places them in augmented reality. ​“Figma plugin talks to an iOS app via WebSockets. All Figma frames are loaded as AR reference images which makes them detectable by ARKit. […] Once detected, a high-res version is loaded, mapped onto a plane, and stored as a reference for future updates.”

Designer Advocate Mal shares a few handy shortcuts that are worth memorizing — quick actions search, hide the layers panel, insert components, and zoom to selection.

MDS experiments with swapping variant instances between modes using boolean variables, and Johan Netzler suggests an alternative solution.

Vijay Verma with a quick video tutorial on how to create a functional loader with variables and conditions.

Continuing with taxonomy, check out this discussion about naming tokens for a toggle switch UI element. Don’t miss the insight from Ryhan on how Figma approached this in their UI2 design system.

Zander is showing how to quickly create a responsive card grid.

Molly Hellmuth shares five updates you can make with the new min/​max sizing and auto layout wrap that will make a big difference in your designs. Tip #5 on having text grow in both directions is my favorite!

Great roundup of 7 games made with variables and advanced prototyping. Quite impressive to see how far designers have pushed new features just a week after they were announced.

Vijay is building a game using variables with new advanced prototyping features and explains how it works along the way.

Anthony DiSpezio shares a community file and a quick tutorial for creating a cute blooming flower effect.

Vijay Verma won’t miss a chance to build something fun with a new Figma feature. Here, he made a fun personalized avatars constructor using different combinations of components and variables.

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

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.

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

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.

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

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.