Tweets
Calculator
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
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!”
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
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.
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
How Spotify and Encore use the new variables
“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
Switch designs from light to dark mode
Zander Whitehurst shows how to switch color modes with new variables, supafast!
Switch designs from light to dark mode in @figma, supafast! ⚡️ pic.twitter.com/fZ2P0VK38h
— Zander Whitehurst (@zander_supafast) June 21, 2023
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.
Today's an exciting day for anyone using design tokens! With today's Figma release there's going to be native tokens in the form of 🌶️ Variables! Now… will Tokens Studio support this? Hell yes! We just released 1.37 of Tokens Studio for Figma with support for Variables! pic.twitter.com/SK11FT3spI
— Jan Six (@six7) June 21, 2023
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.)
🛠 Plugins to help you along the way
— Figma (@figma) June 21, 2023
Our developer advocates @jak___e and @actuallyakbar have published a number of plugins to help you get started.
👉 Variables import/export plugin: https://t.co/HpyNOJ0JGd
👉 Styles to variables converter: https://t.co/ud7XFW2NpU pic.twitter.com/69T42lPAKM
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.”
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.
— Jacob Miller (@pwnies) June 22, 2023
I.e. you can’t apply a style to the color of an effect or a gradient stop, because how would that work if the style were composed…
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.”
Today is a big day! Dev Mode launches in @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. 🧵 pic.twitter.com/SLfxT0viyi
— Joel Miller (@joeltalksdesign) June 21, 2023
Wanna fly in Figma?
Cool way to present work on the Figma canvas without entering the presentation mode.
wanna share one rad Friday @figma tip hehe
— Klára Scholleová (@the_schollka) June 9, 2023
let's flyyy! ✈️ pic.twitter.com/6qNxXnBMK0
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.
Design Tips #4:
— Oğuz (@oguzyagizkara) June 12, 2023
The Breakdown of the Orbit App Icon 🪐
Get ready for a deep dive - this tutorial is gonna be worth it 💫 https://t.co/U20TiQnOcQ
Mouse tracking in Figma
Double Glitch pushes Figma’s prototyping limits with this cool mouse tracking effect.
Recently @zoink teased us with possible prototype update in @figma. What if I tell you even in the current state its full potential is not yet unleashed?
— Double Glitch 🇺🇦 (@double__glitch) June 14, 2023
Meet mouse tracking in Figma! It's lightweight and it's FAST.
Check the protoype to truly feel it: https://t.co/TRMfb71Org pic.twitter.com/M3TpEzjZ1V
Getting stuck when building a component set
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.
💡Figma tips: 5 places my students get stuck when building a component set in Figma..
— Molly Hellmuth (@molly_hellmuth) June 16, 2023
and how to get unstuck 👇 pic.twitter.com/mttKvfI9zH
Emojis
Not sure when this was shipped, but this is a fast way to add emojis without opening a picker!
pleasant surprise ☺️ @figma pic.twitter.com/es2TbwfzOh
— gaana! ✨ (@gaanasrini) June 16, 2023
FigJam for iPad updates
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.
FigJam for the iPad here with some hot updates 🔥 Grab your Apple pencil ✏️ and draw, diagram, and even mood board. You can get the app on the App Store: https://t.co/OLj5XHZ5Ex pic.twitter.com/XfKWuZdOti
— Mal (see u at config) (@mdeandesign) June 13, 2023
3 Spatial UI Design tips in Figma
Zander with just-in-time tips on creating a spatial UI for Vision Pro, supafast!
3 Spatial UI Design tips in Figma, Supafast! ⚡️ pic.twitter.com/hknTLEPK3e
— Zander Whitehurst (@zander_supafast) June 8, 2023
Use math inside any Figma field
Did you know that you can use math inside color values in Figma? Really cool.
Figma Tip: Use Math Inside Any Field 🧮
— Michael Yagudaev 🧑🏻💻🇨🇦 (@yagudaev) June 6, 2023
You can use +, -, *, /, ^, (, ) with a number.
Super helpful for animations. pic.twitter.com/yKgU5hIV4G
Hide help UI
This tip (and the fact that this feature exists) made me irrationally happy. Thanks, Miggi!
bruv: pic.twitter.com/1CGmBYVMlp
— miggi from figgi (@miggi) June 8, 2023
Creating Your Own Stellar Universe
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.)
Design Tips #3:
— Oğuz (@oguzyagizkara) June 5, 2023
Creating Your Own Stellar Universe 🌟
🚀 Blast off into your own galaxy with these design tips! pic.twitter.com/vjtffSJCa6
Designing for Apple Vision Pro
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”.
So you wanna learn how to design for Apple Vision Pro? 👀
— Linda Dong 🍉 (@lindadong) June 6, 2023
We just dropped 3 must-watch #WWDC23 videos that go over it all
Principles of spatial designhttps://t.co/Z6IFqBRr0j
Design for spatial interfaceshttps://t.co/0JkklnGZlF
Design for spatial inputhttps://t.co/nmrVm73xcP pic.twitter.com/rLnz2fmsQE