Tweets
10 things I learned while adding variables to my Figma design system
Molly Hellmuth with tips on the best ways to name, organize, use, and theme color variables.
💡 10 things I learned while adding variables to my Figma design system
— Molly Hellmuth (@molly_hellmuth) September 20, 2023
Like the best ways to name, organize, use, and theme colors.. without getting overly complicated!
Some were easy, some took days of testing and re-testing... 👇 pic.twitter.com/KPJnG5gIs7
Helpful gradient tips
A few good tips on adjusting the color hue, opacity, and evenly distributing color handles.
Here are some helpful gradient tips for @Figma:
— Joshua Guo (@jgspace_design) September 6, 2023
- Scroll: Adjust the color hue.
- Option / Alt + Scroll: Adjust the opacity.
- Double-click handle: Evenly distribute the color handles. pic.twitter.com/N8gI79r8ho
Switch between pixels and rem units in Dev Mode
Molly with step-by-step instructions for using rem units in your text properties. The developers on your team will be grateful for using the same units as they do when it comes to the handoff time!
💡 Figma tip: Switch between PIXEL and REM units in dev mode!
— Molly Hellmuth (@molly_hellmuth) September 8, 2023
Why does it matter?
✅ Helps you understand scale and sizes
✅ Smoothens collab with your dev team
✅ Brings flexibility & precision to your design workflow
Keep reading for step-by-step instructions.. pic.twitter.com/d4QDHUDctb
Swap libraries and variable modes
Luis shows that if your styles have multi-mode variables as their values, Swap Libraries still works for managing theme swapping in a multi-brand setup.
Did you know that you can still use swap libraries to manage theme swapping in Figma AND use variables with multiple modes?
— luis. (@disco_lu) September 8, 2023
If your styles have multi-mode variables as their value, swap libraries still works 🪄 pic.twitter.com/tQhnxQL981
Bento plugin
That’s what I love about this community so much. Fons Mans shared an idea for the plugin, Rogie stepped in and offered to build it, and three days later they already had some WIP. Don’t know if I need this plugin yet, but seeing this collaboration makes me so happy.
Figma plugin idea: Generate Bento
— Fons Mans (@FonsMans) August 24, 2023
Select artboards, hit generate and get a beautiful slide using the selected frames as blocks and the document colors as backgrounds ✨
Community Libraries beta rolling out
I shared this beta’s release notes in the previous issue, but it didn’t show up in my account yet. Cool to see some folks are already trying it out. As Adham Dannaway pointed out, this release is bringing us “one step closer to a shared global design system”. Can’t wait!
Really cool seeing @figma Community Libraries beta rolling out!
— Jordan Hughes (@jordanphughes) August 31, 2023
1. Hit option⌥ + 3 to open libraries
2. Add a bunch of incredible community libraries
3. They'll appear in your assets panel like magic 🪄 pic.twitter.com/RnFaES7gAE
Getting Figma files dev ready
This is a short but comprehensive checklist. Worth reviewing before sharing your next file!
It’s handoff day! 🎉
— Noelle (@hellohinoelle) August 31, 2023
How I get my Figma files dev ready:
- Make a separate handoff page
- Label and organize flows
- Include states and edge cases
- Make sure all styles are linked
- Document components
- Leave relevant annotations
- Embed a handoff Loom to file
Designing a production-ready Figma UI kit
Hamish O’Neill is working on a new Figma UI kit and shares some of the advanced features included in his library. Love seeing a strong focus on accessibility, customizability, and theming!
Over the last few months, I’ve been toiling away on a passion project 🤓
— Hamish O'Neill (@hamishoneill) August 28, 2023
Something I feel will set a new standard for what a production-ready Figma UI kit is. The below thread details some of the advanced features you won’t find together in any other library 🚀 pic.twitter.com/KKiUpLufLe
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