Practical ways to overcome seven common Figma design issues caused by Auto Layout, constraints, groups, frames, components, and duplicates.
Danny Sapio shares a few best practices on using Figma for max efficiency: make components, use Auto Layout and don’t use groups, apply consistent spacing and styles, keep files organized and archive old designs, learn shortcuts, leverage community files, and present your work smoothly and cleanly.
Never noticed this before, but it’s such a nice touch! 👏
Shoutout to @figma for determining the background color of a shape and automatically setting the text color as black or white depending on contrast ratios to ensure accessibility. pic.twitter.com/ST1vTpf1Dc
— Emma Bostian (@EmmaBostian) July 21, 2022
Joey Banks is back with five advanced Figma tips — renaming layers in bulk, selecting all objects based on a specific property, Spacebar’s superpower, private components, and using descriptions to improve search.
Cool tip on adjusting mixed values like object size or Auto Layout padding.
I never knew you could adjust mixed values in Figma like this pic.twitter.com/8bmMRJb0iT
— Joey 🙃 (@mrhammn) June 30, 2022
A nice trick from Gleb on how to create a transparent fill that supports a background blur effect.
Epic @figma tip I learned from @edpratti (Material You file)
— Gleb Sabirzyanov ❤️ (@gleb_sexy) June 1, 2022
Transparent fill that supports background blur effect! 🤯🔥
1. Create a white fill
2. Change the fill blend mode to Darken/Multiply
3. Optional: create a style “Transparent”
1% or 0.01% opacity trick is dead! 💀 pic.twitter.com/U63DVuvTNQ
A cool and creative way to use a component as a light controller.
Having a light controller for illustration, just because #figma pic.twitter.com/5LJFHbCBR0
— Papa Drag n' Drop (@kennethmahakim) April 21, 2022
Always love the events where Figma brings different Figmates for rapid-fire tips! “Whether you’re new to Figma or a pro yourself, tune in to get an inside look on how the teams who build Figma use Figma.”
Super useful tip from Miguel — use Option‑W/A/S/D shortcuts (which you may know from gaming) to align elements or points in vector networks. The latter is going to be a massive time-saver for me!
Option (alt) + W,A,S,D (⬆️,⬅️,⬇️,➡️) align shortcuts in @figma can be used when editing vector paths / points. https://t.co/YvRDIZNMlB pic.twitter.com/giLDWMj30x
— miggi from figgi (@miggi) February 11, 2022
A collection of tips to help improve your design workflow in Figma.
The design team at Medium shares a few of their favorite Figma tips.
Zander shows a few copy-paste features that Figma released back in October.
✂️ 3 super @figmadesign copy & paste updates #ux #ui #figma #memorisely pic.twitter.com/tL13o58dG0
— Zander Whitehurst ⚡️ (@zander_supafast) January 21, 2022
Ana Boyer shares four tips for illustrating in Figma.
🧵Some fun Figma illustration things I learned from our DA team the other day:
— Ana Boyer (@_AnaBoyer) December 17, 2021
Slides from Marshall Bock’s internal presentation at Google with Figma tips and tricks. I also highly recommend podcast Design Details which Marshall co-hosts with Brian Lovin.
Bonnie Kate Wolf suggests using Unicode emojis in front of the variant name for a quick preview.
This is an amazing @figmadesign hack from @mattmatize for naming arrow variants. Add the unicode emoji in front of the variant name so folks can quickly see what they are going to be placing without reading. pic.twitter.com/JNEb3tdaGQ
— Bonnie Kate Werewolf (@bonniekatewolf) October 8, 2021
As always, Rogie’s tweets gather a lot of fantastic replies.
What's a recent @figmadesign trick/tip you've found out that you share with everyone?
— ˗ˏˋrawr-gieˎˊ (@rogie) October 13, 2021
Patrick Banta compiled a list of design system resources recommended during Schema.
If anyone wanted all of the links to the tips shared out during @figmadesign #Schema2021 yesterday, I've compiled the list below - hopefully I didn't miss anything! 🧵
— Patrick Banta (@pbanta) October 8, 2021
Nadia Sotnikova on how to edit layers in bulk to ensure consistent naming in the design system.
Search for “Resource Use” in Quick Action (⌘/) menu to show the status of resources in your file.
Struggling with performance in @figmadesign?
— Denislav Jeliazkov (@DenisJeliazkov) September 24, 2021
By hitting CMD + / and searching for "Resource Use" you can see what is the status of resources in your Figma file. pic.twitter.com/zd7xzeweLU
Zander posts short and fun Instagram videos about using Figma.