A game of jeopardy powered by Figma variables! Change all the questions and answers with variables and play a custom game with your team. Made by Elizabeth Lin.
Miggi covers the different ways that variables can be added when creating prototypes, and how you can use them to make them more dynamic and with fewer frames. We cover all of the currently available variable types: booleans, numbers, strings, colors, and even discuss how to bind string variables to interactive components.
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.
Throwing it back to some great shortcuts to have memorized. Starting with quick actions to search through menus, commands and plugins. Using CMD + / pic.twitter.com/2tsFXyWHqh
— Mal (@mdeandesign) July 7, 2023
MDS experiments with swapping variant instances between modes using boolean variables, and Johan Netzler suggests an alternative solution.
Swap variant instances between modes in @figma using boolean variables.
— MDS (@mds) July 3, 2023
🤔 Doing it right, or missing something? pic.twitter.com/2El1xwahVy
Vijay Verma with a quick video tutorial on how to create a functional loader with variables and conditions.
Here quick @figma tutorials on how to create a functional loader with variable and conditions 🤩. Small video tutorials added. And get the code cheatsheet and more from here ↓ pic.twitter.com/Sj2mZeHL9T
— vijay verma (@realvjy) July 7, 2023
Starting July 6th, Figma Enterprise customers have the option to host key parts of their Figma and FigJam files in the EU. This feature is designed to give Figma customers in the EU greater flexibility to meet local compliance and data privacy requirements.
“For added security, organization admins on the Enterprise plan can set an idle session timeout to log out users as soon as 12 hours after they become inactive. By default, Figma automatically logs users out when they are inactive for 21 days.”
CSS Evangelist Kevin Powell made a video walkthrough of the new Dev Mode specifically for other developers. Share it with your team!
Zander is showing how to quickly create a responsive card grid.
Designing responsive card grids in @figma, supafast! ⚡️ pic.twitter.com/4qj223lP2j
— Zander Whitehurst (@zander_supafast) June 27, 2023
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!
⭐️Figma tip: 5 easy updates you can make with figma's new min/max sizing that will make a BIG difference in your designs!
— Molly Hellmuth (@molly_hellmuth) June 30, 2023
Especially when paired with auto layout wrap.. pic.twitter.com/W1bXfMS1mH
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.
Designers are ascending into mind-blowing game devs using @figma variables.
— Ross Hatton (@RossHatton) June 28, 2023
Here are 7 unbelievable masterpieces you need to see, made entirely inside Figma (genius): pic.twitter.com/J1CQzWtNn4
Vijay is building a game using variables with new advanced prototyping features and explains how it works along the way.
With new @figma variables. We can create any number of flow using conditions on a single frame. Testing a free flow character movement. Also tried to detect object and it worked. Small demo for something big we can create. Shared some logics below 🤩 pic.twitter.com/PpBlYzTBx2
— vijay verma (@realvjy) June 26, 2023
Double Glitch made the Space Invaders game and turned Figma into a game engine.
Realistic typing is finally possible in Figma prototypes using variables.
Anthony DiSpezio shares a community file and a quick tutorial for creating a cute blooming flower effect.
Figma needs more flowers🌸🌼🌺
— Anthony DiSpezio (@adispezio) June 28, 2023
Tutorial and community file on the blooming flower effect I posted the other day. Would love to see how y'all might incorporate some of the new Config launch features!
Community file in the thread, happy to answer any qs—have fun! pic.twitter.com/WWMZqkvVJQ
While Will was working on Figma-OS, Willy Wu from Figma was also building his own version with a Figma plugin to help compile small C programs using ELVM. Don’t miss a thread on his journey.
A deep dive into variables by Thalion.
Occasionally someone builds something in Figma that just melts my brain: “Figma-OS is the first Turing-complete 8‑bit computer built using Figma prototyping tools. Figma-OS has state-of-the-art specs with 512 bits of RAM, 16 bytes program memory, 10 Hz clock speed, and a MISC instruction set of 16 OPCODEs.” See the thread from Will DePue on how it works.
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.
Okay @figma variables are very cool. With just one frame and a few different variables with smart components, I've created this dashboard for create and customize avatar 🤩. Variable list shared below. pic.twitter.com/gJonbjiP8h
— vijay verma (@realvjy) June 25, 2023
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.)
Thrilled about @Figma Variables announced at #Config2023! Figma's reach brings Design Tokens to a community larger than ever 🎉
— Design Tokens Community Group (@DesignTokens) June 28, 2023
Variables functionality isn't 1:1 with the spec, and no native support .tokens.json file import/export (yet), but they're *not* on different paths.🧵