10 Pro Tips for Using Figma in Your Workflow
If you are using Figma for website or app design, logos, or other digital projects, it’s likely you are always looking for ways to get faster and more efficient.
Because this tool is so robust and allows for collaboration, sharing, and reuse of components and parts, it can really help boost your workflows.
Here are 10 pro tips for using Figma to create faster and smarter design workflows.
2 Million+ Figma Graphic Templates & More With Unlimited Downloads
Download thousands of Figma graphic templates, UI kits, and web templates with an Envato Elements membership. It starts at $16 per month, and gives you unlimited access to a growing library of over 2,000,000 Figma templates, design assets, graphics, themes, photos, and more.
1. Add a Cover Photo to Your Figma File
This might be the easiest workflow level-up on the list: Add a cover photo to your Figma file. This simple trick will help you stay organized and visually see projects more quickly.
This cover photo or thumbnail will show what the file is for quick recognition for everyone on your team. You can use any frame and it sets the expectation of what’s in the file, rather than the default board which doesn’t provide a lot of visual information.
As a general rule, the size of the thumbnail or cover image is 1600 x 960. There’s also an option to use the plugin/file cover preset from the Figma Community frame templates in the right sidebar.
2. Create Styles for Everything
You can create styles in Figma that are part of the palette for the design and make it easier to do consistent work throughout the file.
You’ll want to create styles for components such as text, effects, strokes, and color. The reason for this is simple: If you change your mind about a hue or button size or stroke outline, you can change everything at once using style branding.
Bonus workflow booster: Styles can also help ensure that your team and project stay on brand.
3. Use Simple Math
Stop resizing elements manually and guessing about size. Use the Math option in the inspector and do it more precisely. Plus, you’ll save time!
4. Use Base Component Sets
By using base components, you’ll essentially create styles for user interface elements and design pieces that can be adjusted together.
It starts by creating a base component for all variants of the same element with all of the options you might need. Think of a button, for example, you’d want to have options for different colors, with or without icons, hover states, etc.
The benefit here is that when you push a change to any base component, it will apply to all variants as well. (So it works a lot like a style but can include more options.)
5. Reset the Default Nudge to Your Grid
Do you like the default nudge in Figma? Or do you find yourself using it and then adjusting some more?
You can actually change that default to match your grid or common values.
The Figma default is 10 pixels. A lot of people prefer 8- or 12-pixel nudges.
Change in by going to Menu, then Preferences, then Nudge Amount. Then use it with a keyboard shortcut of Shift + Directional Arrow.
6. Try Pixel Perfect Scaling
Digital design has made some of us quite attached to pixel perfection. That can also create a workflow logjam.
7. Use Auto Layout for Everything
Auto layout doesn’t make you lazy. It makes your workflow smarter.
Figma auto layout works on new or empty frames, frames with existing content, components and component sets, and groups or other selections of layers and/or objects.
The primary benefit of auto layout is it helps you design more consistently. Auto layout can also help you design with better scalability in mind.
8. Include User Flow Diagrams
If you want others to be able to understand your design and functionality, flow diagrams are vital. They become more important as design files grow or your team expands.
To ensure that the right interactions happen, create a connector that goes between design screens with a notation. (You can also copy and paste.)
Your project collaborators will thank you.
9. Organize Everything
Figma project files can get large and there can be a lot of screens and information to sort through. This makes organization key so that you and your team don’t get lost in all of the design elements.
Consider organizing files so that all of the main components are on their own page in the design file, outside of the main design. That way you can always go back to this “original source” for components or styles and make universal design changes.
Carry that consistency through with page headers for elements so that everything is designed and organized in a neat package. Your design files should look as good as the design itself!
10. Use Master Components and Component-Based Templates
Components are the backbone of working on design projects in Figma. You’ll want to create master components that can be repeated across multiple screens. (No more reinventing the wheel here!)
You can level up your workflow by placing the most-used master components outside of the work area in the file for easy drag and drop throughout the design.
Then you want to create component-based templates that you can also reuse throughout for expedited workflows. This can be really helpful for repeated components such as blog posts or other card-type elements.
Conclusion
Do you have other pro Figma tips that should be on this list? Let us know on social media. Feel free to tag @carriecousins and @designshack on Twitter.