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.
Been asked a lot over the past few days about how to get started with colour variables, so here are some pointers 🖍️
— luis. (@disco_lu) June 30, 2023
Hope this is useful! pic.twitter.com/7OEpNh3v4m
Find Variables plugin by Daniel Destefanis helps you find what variables are being used in your file and easily select the layers using them.
Great video from Chad on a conversion technique I described above. Recommend watching this video before you embark on a journey to update your color system.
A few new plugins for converting styles to variables came out last week, and I’m still trying to pick a favorite. The best part of Styles to Variables Converter is that after creating variables it updates existing styles to use them, so if you delete or detach styles objects will fall back to variables. A slightly more popular Styles to Variables plugin doesn’t seem to do this yet. I also wish these plugins let me map styles to existing variables, or at least specify a target collection.
Small improvement, but I know it will make many people excited!
We need to talk about this hidden gem of an update: rich text component descriptions 😍 pic.twitter.com/V9BRHnquJv
— Kyle Hyams (@kylehyams) June 23, 2023
A refresh to the file browser, so you can spend less time searching, and more time creating. New shared projects and files tabs help you easily find files that others have shared with you. Search, Recents, and notifications now include content across your entire account.
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.
In today's @figma #Config2023 auto layout launch, we're shipping an upgrade to how you can truncate text—truncating with "Max lines" rather than a fixed height. But while we were at it, we snuck in a change to the core text layout engine where we decide exactly how to trunca…🧵
— Lauren Budorick (@lbudorick) June 21, 2023
Oh my, this one was long in the making! Font previews were first announced at Config 2020, but now they’re finally live along with other improvements to the font picker. See this feature tour from KC Oh.
The first-ever demo of a new plugin by Diagram. Can’t wait for it to become a part of the editor!
Just unveiled at #Config2023: The first-ever demo of Genius by @diagram, now part of the Figma team. pic.twitter.com/0KxQViOz64
— Figma (@figma) June 22, 2023
With the latest round of auto layout updates, learn how you can wrap objects to a new line, set minimum and maximum widths and heights, and truncate text based on a set number of lines.
And here is a fully functional stopwatch demo as well.
Figma’s new prototyping tools are blowing my mind 🤯
— Arron Hunt - UI Design (@arronhunt) June 23, 2023
I created fully functional stopwatch demo using the new #Figma variables and prototyping features. pic.twitter.com/w26DMSdADE
Miguel Solorio already built a simple, functioning calculator with advanced prototypes and variables.
🍜 Spent some time playing around with @figma's new variables in prototyping and built a simple, functioning, calculator 🤯 Took a bit of thinking but it was fun to see the possibilities #config23 #Config2023 pic.twitter.com/lcnWZPO1cp
— Miguel Solorio (@miguelsolorio_) June 22, 2023
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!”
In light of #config23, just wanted to share this fun test file I made while working on Advanced Prototyping. Stuff like this is now possible in @figma using Variables and Conditionals. pic.twitter.com/kCvUCwmOzk
— Willy Wu (@willyvvu) June 21, 2023
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.
I think I've pushed @figma's new Variables and Advanced prototyping to its limit...
— Dave Williames (@DavidWilliames) June 25, 2023
I present a fully working version of Flappy Bird!! 🔥
Featuring:
- Scoring + highscores
- Pseudo-randomised pipe placement
- Physics based movement
- Uses 46 variables#Config2023 pic.twitter.com/oUNN2pkYMF
An in-depth session with Designer Advocate Miggi, Software Engineer Ricky Rajani, and PM Garrett Miller on how to build even higher fidelity prototypes with less complexity.
Starting point for the new advanced prototyping in help articles.
Software Engineer Jon Kaplan, Product Designers Nikolas Klein and Chia Amisola, and Prototyping Product Manager Garrett Miller talk about the newly announced advanced prototyping features.
See how variables, conditional logic, and expressions can let you build more realistic prototypes with fewer frames and connections. Available on Professional plan and up. “Prior to variables, prototypes that have changing states e.g. adding items to cart, required duplicating frames and connections to mimic those flows. Now, you can set and modify variable values with prototyping actions to create dynamic prototypes with as little as a single frame and couple of interactions!”
A short video tutorial on building advanced prototypes with variables and two new prototyping actions: Set Variables and Conditional.
“159 variables across 13 modes, totaling 1,843 values” — cheers to the Figma API!
🎨 How is @spotifydesign & Encore using the new Figma Variables?
— Shaun Bent 🇸🇪 (@shaunbent) June 22, 2023
159 variables across 13 modes, totalling 1,843 values, all algorithmically generated and pushed into Figma using the REST API triggered by changes made to our code source of truth.#Config2023 @figma pic.twitter.com/52B2SxACr7