What if? Variables for theming. Geist.
Sponsor
UX Tools reviews Figma Dev Mode vs Zeplin
Dev Mode will require a paid seat in 2024. UX Tools, the creators of the annual survey, compares Figma Dev Mode vs Zeplin.
App Updates
Updated Corner Radius UI
Updated corner radius UI makes it easier to bind a variable to each individual corner.
Workspace-level public link settings
“Org Admins on the Enterprise plan can set a public link sharing policy for Design and FigJam files at the workspace level. This allows customers to have different policies for different workspaces, thereby unlocking user testing and external collaboration in some areas of the business without sacrificing security in other areas.”
What’s New
Figma × Adobe – What if…
Figma collaborated with Adobe on a video exploring some of the ideas for the post-acquisition future — Firefly in FigJam and Figma, linked assets between Figma and Creative Suit, multiplayer in Adobe apps, Figma prototypes + After Effects, shared design systems, and more. For more ideas, see threads from Noah Levin, Tom Lowry, Sho Kuwamoto, and Luis.
I’m a generalist and occasionally do different kinds of design work, so having a tighter integration between Figma and Adobe apps would be pretty neat. Adobe Fonts would be my #1, but I wish I could reuse a color palette and assets from Figma while working on my book layout in InDesign. While designing a photo-heavy website, I went back and forth between Figma and Lightroom experimenting with post-processing. The new Photoshop on the web also makes so much sense as a native integration. Count me in as a Figma × Adobe optimist.
Transition animations: a practical guide
A great practical guide showcases the principles of transition animation with examples that are basic, compact, and can be used immediately by anyone in their design process. These insights are not rules set in stone, but rather guiding considerations for new product creation.
How Figma’s data science and user research teams weave together insights that count
Figma Data Scientist and Researcher paired quantitative and qualitative learnings to reveal a complete picture of how notifications work, and how users interact with them. “At the end of the process, they found where the biggest opportunity lay for improvement: Most users weren’t receiving notifications at all. To improve communication and collaboration, it would be a matter of creating new alert types and rethinking who received notifications (and when).”
Variables
Variables for theming
Designer Advocate Anthony DiSpezio recommends the best approach for defining variables for theming: primitive variable → semantic variable → semantic style. The core advice is to keep using styles: “Styles represent a group of properties that should be applied to a layer or part of a layer. Variables represent individual values within that style.”
(Years ago, I noticed that when Apple announces a change at WWDC it’s better to go with it even if it doesn’t make sense at the moment — they see the roadmap much further. I wonder if it’s the same case with Figma and styles. At the moment they often feel redundant, but Figma made it very clear that they’re not going anywhere — hopefully something will make it clear soon why it was worth keeping them around.)
Figma tip: Primitive variables – Descoping and unpublishing
Luis shows how to descope and unpublish primitive variables from the design system.
Tokens and variables Q&A
Designer Advocate Ana Boyer shares some common questions, answers, and resources that she came across when learning about design systems, tokens, and variables.
Tokens, variables, and styles
A new video in the Introduction to design systems course by Figma explains design tokens.
Using Figma
Unlocking Figma’s Prototyping Gems: Scroll To Animations and Anchor Points
Christine shows how to use a Scroll To action to seamlessly connect navigation on a single-page website, create horizontal scroll effects, and scroll in multiple directions.
Relative line height
Christine Vallaure with timeless advice of using percentages instead of pixels for specifying line height in Figma. There are very few cases when pixels make sense, and more often than not they cause inconvenience.
Drag a selection
Whoa, I didn’t know that selections can be moved! Great for getting to the tricky areas.
Remove image background
I dig this tip from Zander — sometimes we already have the right tools without plugins.
Office Hours: Figma license comparison
A deep dive into Figma’s various license tiers and the features/capabilities available in each.
Homework Hotline: Interactive Components in Figma
A recording of Miggi’s recent Twitch livestream on interactive components.
Resources
Atomize Design System
Couldn’t walk past a cool website with strong 90s Apple vibes! The design system offers a generous free tier for beginners and students.
Cool Thing
Design Systems Media
A curated collection of design system content, tagged with topics, speakers, and events. Now, where do I find time to go through all of this?!
Geist Font
Vercel developed a new typeface specifically designed for developers and designers. “We began by creating a monospace version that prioritized readability and seamlessly integrated into coding environments. After perfecting the monospace variant, we expanded Geist into a Sans version, adding versatility to its capabilities.” Heavily inspired by Inter, it looks great and definitely going to be very popular!