Tweets
Copy-pasting variable collections
According to Corey Lee, the copy-pasting of collections is coming soon!
Have you ever wanted to copy/paste variable collections between files including alias and collection dependencies? It's coming...#figmaplugin #figma pic.twitter.com/qRC9XkK6xB
— Corey Lee (@factorzero) August 9, 2023
P3 in CSS and Figma
Andrey Sitnik (author of PostCSS and Autoprefixer, used on pretty much every website) goes a little deeper into platform-independent (CSS) vs. platform-specific (Figma, Photoshop) implementation of P3. He also added “Figma P3 hex” as one of the accepted formats to OkLCH Color Picker, which makes using Figma values in OkLCH much easier.
Figma has added P3 support, but there is a tricky.
— @sitnik_en@mastodon.social (@sitnikcode) August 8, 2023
↓ A little thread about:
— Why do you need P3 colors?
— An in-depth review of Figma’s P3 implementation
— How to design apps with P3 colors
— Why you need https://t.co/o86BbxR7Td to bring P3 colors to CSS pic.twitter.com/9IASqGf5AS
Hex colors in design tools
The introduction of wide gamut Display P3 colors to the design tools “broke” the familiar hex notation that all of them have been relying on. The transition to modern notations will be painful and take time. I share some context in this thread, but the main takeaway is to NOT use the #RRGGBB values for hand-off or external tools when working with P3 colors.
The newly introduced Display P3 support in @figma is a good opportunity to talk about use of the hex format for colors in design tools. The #RRGGBB format comes from CSS and is limited to sRGB. Using it for P3 colors creates a few problems. 🌈🧵 pic.twitter.com/Eqqq7VClyz
— Eugene Fedorenko (@efedorenko) August 7, 2023
Smooth repositioning
Honestly, speed it up a bit and this little delightful animation is a keeper!
For my first #MakerWeek @figma, we were challenged to represent our value of "Play!" So, we decided to smoothly reposition nodes on tidy up, align, and auto layout. Check it out! pic.twitter.com/7QSkAmfkKe
— Carlos C (@carlosconley_) August 11, 2023
Welcome to Maker Week
Last week Figma had their version of a company hackathon, Maker Week. I love everything about this — from dope branding to the inclusion of all teams. In this thread, they go through some of the past projects, but for the last 3 years, I’ve been collecting a (much longer!) list of my own. (Two years later, I’m still jealous of this keyboard by Robert Bye.)
Welcome to #MakerWeek!
— Figma (@figma) August 7, 2023
It’s our version of a hackathon, celebrated by the whole company.
Better yet: A lot of our product updates have come from Maker Week Projects.
Some of our past favorites projects 👇 pic.twitter.com/HalsPV3HIS
Quickly add color variables
Christine Vallaure reminds us of using Selection Colors for applying variables to multiple objects.
Tip: Quickly add #figma color variables. Don't select each element individually -make a bulk selection and jump to "Selection colors" at the end of your properties panel. Easy and efficient! This way, you ensure you don't miss any elements and can even out slight color imbalances pic.twitter.com/NZsHU9a16A
— Christine Vallaure (@moonlearning) July 31, 2023
A Step-by-Step Guide to Creating Responsive Grids
Ozan Öztaskiran shows how to create responsive grids in 5 simple steps.
❖ Creating Responsive Grids
— Ozan Öztaskiran (@ozanoz) July 31, 2023
A Step-by-Step Guide
Responsive grids can make your life a lot easier as a designer if you want your content to be flexible.
Here's how it's done in 5 simple steps ↓
🧵 pic.twitter.com/Z48ub7fOq3
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