Tweets
Inheriting color overrides
An interesting challenge from Miguel Solorio — how to make nested icons in a component inherit color overrides when switching between outline and solid styles without having to outline the strokes? Two solutions that surfaced in comments are using a mask or a union.
👀🔎 Have been trying to figure out how to make nested icons in @figma components inherit color overrides when switching between outline and solid styles without having to outline the strokes. Does anyone know of any ✨ magic ✨ to make that happen? My research tells me no... pic.twitter.com/aamVgToJgQ
— Miguel Solorio (@miguelsolorio_) August 2, 2023
Start using Dev Mode
Molly shares her 3 favorite tips from the Config talk “Designer and developer workflows unlocked using Dev Mode” — using “Compare changes” (my favorite as well, and the first thing I showed my team!), testing components in the Playground, and switching between the design and Dev Mode by pressing the Shift‑D shortcut.
💡 Start using Figma's new dev mode with these 3 tips!
— Molly Hellmuth (@molly_hellmuth) July 28, 2023
Config's deep dive on dev mode with @Avantika789, @laurenbandres, @jennylea_, and Jake Albaugh is CHALK FULL of amazing tips!
Keep reading for my favorite 3.. pic.twitter.com/xf8dM6nYfb
Animation with variables and conditions
A new tutorial from Vijay Verma on creating an animation for a loader indicator shaped like a glass filled with liquid. The prototype uses a few variables and conditions, and he shares them in the cheat sheet in the thread.
Another quick @figma tutorial to create this animation using variable and conditions 🥤. Small video to create this included. And get the code cheatsheet shared below. ✨ pic.twitter.com/VSiyS9jLSu
— vijay verma (@realvjy) July 19, 2023
Scoping variables
Mark Steinruck shows how to scope variables for certain components to appear unchanged in light and dark modes.
Here’s a short video explaining how I’m using @figma variables and scoping to have certain components with a dark background appear unchanged in light and dark modes. #figma #variables #scoping pic.twitter.com/jXd2UL0rgV
— Mark Steinruck (@msteinruck) July 17, 2023
The making of advanced prototyping
Niko shares how advanced prototyping came from a vision in June 2022 to reality at Config 2023. The team had to ship variables, multiple actions, expressions, and conditionals simultaneously to make it happen. This release is a huge achievement and the team should be celebrated for it.
With @figma's #Config2023 being a few weeks in the past, I wanted to share a thing I'm proud of: The way we talked about our Config launch a year ago super closely maps to how we actually ended up talking about it at Config. pic.twitter.com/i24dV5X8vp
— Niko (@nikolasklein) July 22, 2023
Convert to 3D plugin sneak peek
A preview of the new ray tracer plugin currently in development by Yi Shen. Some of the examples are pretty wild!
Testing @pissang1 Figma to 3D Plugin✨
— Davo (@pixelbeat) July 11, 2023
I'm absolutely impressed by his work.
Just a handful of levers to pull and I have a pretty solid 3D render from my Figma asset.
It's a ray tracer running on Figma. pic.twitter.com/vKOv82vTK1
Glossy icon
One more tutorial from Fons! This one is on how to create a glossy app icon.
New tutorial! ✨
— Fons Mans (@FonsMans) July 14, 2023
Learn how to create a glossy icon in @figma, in just a few easy steps.
Ready? Let's dive in 👇#sponsored pic.twitter.com/M4BLJSAtCE
Ultra gradient
Fons Mans shows how to create a dreamy multi-color gradient with Figma without relying on any plugins.
New tutorial! ✨
— Fons Mans (@FonsMans) September 13, 2022
Learn how to create an 'ultra gradient' with @figma, without using any plugins!
Let's get started 👇 pic.twitter.com/5eMYoPJc3z
How to start using Figma variables
Molly Hellmuth asked 5 of her go-to design system people — Luis Ouriach, Nathan Curtis, Lewis Healey, Dan Mall, and Maria Christopher — for advice on how to start using Figma variables. My heart goes to Luis’ advice to start in a spreadsheet before jumping to Figma (but that’s also my answer to any life question).
I asked 5 of my go-to design system people for advice on how to start using Figma variables..@danmall @nathanacurtis @mariachrstphr @Lewishealey @disco_lu
— Molly Hellmuth (@molly_hellmuth) July 13, 2023
..and, wow! There are SO many golden nuggets in these answers.. pic.twitter.com/01JZECxVCb
Figma & AR
After playing with visionOS SDK, Alex Widua built a little iOS app that takes Figma frames and places them in augmented reality. “Figma plugin talks to an iOS app via WebSockets. All Figma frames are loaded as AR reference images which makes them detectable by ARKit. […] Once detected, a high-res version is loaded, mapped onto a plane, and stored as a reference for future updates.”
Prototyped a little app that allows you to take frames from @figma and 'pull them into space'.
— Alex Widua (@alexwidua) July 4, 2023
The frames stay linked to the canvas and update on any changes pic.twitter.com/GWT1PYlrVC
Shortcuts
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
Swap variant instances between modes
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
Functional loader
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
Naming toggle switch tokens
Continuing with taxonomy, check out this discussion about naming tokens for a toggle switch UI element. Don’t miss the insight from Ryhan on how Figma approached this in their UI2 design system.
Today's naming challenge 🎯 https://t.co/BKztou1KYp
— luis. (@disco_lu) July 4, 2023
Designing responsive card grids
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
Min/max sizing
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
Games made in Figma
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
Figoos
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
Figma needs more flowers
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
Dashboard for customizing avatar
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