Tweets
Maintain the hierarchy of the elements
A good-to-remember shortcut! Hold the Spacebar while dragging elements to maintain the hierarchy of the elements.
Here's a small but truly useful tip for @figma that you may not know:
— Joshua Guo (@jgspace_design) August 24, 2023
Holding the spacebar while dragging elements will maintain the hierarchy of the elements.
The demo below shows that elements are not dragged out of the parent frame. pic.twitter.com/GNZBNyOxp1
Optical balance with optional icons
Somewhat related to the previous article, Ridd looked for a way to account for optical balance when icons are hidden from a button. Jordan suggested a smart solution of wrapping the label in an Auto Layout with an additional smaller padding that adds up with and without the icon.
More Figma nerdery...
— Ridd 🤿 (@ridd_design) August 22, 2023
I want to account for optical balance when icons are hidden from my button (so ideally you'd have less padding when an icon is present)
Anyone have a better solution than wrapping icons in a smaller frame and attaching the boolean there? pic.twitter.com/wxTMQQ64n5
Nintendo Switch
Vijay Verma made a photo-realistic illustration of the Nintendo Switch console with 150+ primitive shapes, inner shadows, and gradients.
Spent some time over the weekend creating one of my fav console nintendo switch in @figma 🎮. Creating these products with primitive shapes, inner shadows and gradients is a lot of fun ✨ pic.twitter.com/PyX1nynj3O
— vijay verma (@realvjy) August 15, 2023
5 color best practices
Molly shares the best practices for working with color that she learned from the Adobe Spectrum design system.
💡 Figma tip: 5 color best practices I'm stealing from Adobe Spectrum while I update my design system to include variables ✨🎨
— Molly Hellmuth (@molly_hellmuth) August 11, 2023
Keep reading for tips & examples.. pic.twitter.com/rVMX1Zp6oJ
What makes a shadow look realistic?
Dan Hollick explains the science behind making realistic shadows and recommends the Beautiful Shadows plugin that takes care of this for you.
What makes a shadow look realistic?
— Dan Hollick 🇿🇦 (@DanHollick) August 9, 2023
Well, there are essentially two parts to a shadow: the fully occluded part (Umbra), and the partially occluded part (Penumbra).
Ideally, you need at least two layers of drop shadow to mimic these. pic.twitter.com/fJ7NgiMJKg
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