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
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.
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
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.
Dylan’s recap of all the updates from the keynote, in a brand-new blog. ​“Our vision is to build a new kind of design tool — one that is designed for the entire product development team. Today’s launches reimagine how design and development come together in Figma. I’m excited to introduce three ways we’re doing this: making developers feel at home in Figma with Dev Mode, connecting design to the language of code with variables, and putting a step in between a 2D design and a shipped product with advanced prototyping.”
If you have time for only one thing this week, this should be it. First, Figma CEO Dylan Field introduces new features — variables, auto layout updates, and advanced prototyping. Then, CTO Kris Rasmussen talks about rethinking product building from the ground up and how the new Dev Mode is bringing design and engineering closer together. In the end, Dylan talks about file browser refresh, font previews, and what AI could look like in Figma — wrapping things up by announcing the acquisition of Diagram.
I watched every Config keynote over the years, and this year’s announcements were the most anticipated and ambitious ever. It’s incredible to see how Figma is growing in depth and breadth at the same time, now providing incredibly advanced tools while covering an entire product-building process from brainstorming to design to development. Exciting time to be a maker.