In case you are utilizing Figma for web site or app design, logos, or different digital tasks, it’s probably you’re at all times in search of methods to get quicker and extra environment friendly.
As a result of this instrument is so sturdy and permits for collaboration, sharing, and reuse of elements and elements, it may possibly actually assist enhance your workflows.
Listed below are 10 professional ideas for utilizing Figma to create quicker and smarter design workflows.
2 Million+ Figma Graphic Templates & Extra With Limitless Downloads
Obtain hundreds of Figma graphic templates, UI kits, and internet templates with an Envato Components membership. It begins at $16 monthly, and provides you limitless entry to a rising library of over 2,000,000 Figma templates, design belongings, graphics, themes, pictures, and extra.
1. Add a Cowl Picture to Your Figma File
https://www.youtube.com/watch?v=/77lx5dTaXS0
This is perhaps the best workflow level-up on the checklist: Add a canopy picture to your Figma file. This easy trick will enable you keep organized and visually see tasks extra rapidly.
This cowl picture or thumbnail will present what the file is for fast recognition for everybody in your group. You should use any body and it units the expectation of what’s within the file, quite than the default board which doesn’t present a variety of visible info.
As a basic rule, the dimensions of the thumbnail or cowl picture is 1600 x 960. There’s additionally an choice to make use of the plugin/file cowl preset from the Figma Neighborhood body templates in the proper sidebar.
2. Create Types for Every thing
https://www.youtube.com/watch?v=/gtQ_A3imzsg
You may create types in Figma which might be a part of the palette for the design and make it simpler to do constant work all through the file.
You’ll need to create types for elements akin to textual content, results, strokes, and shade. The rationale for that is easy: Should you change your thoughts a few hue or button dimension or stroke define, you possibly can change all the pieces directly utilizing model branding.
Bonus workflow booster: Types may assist be sure that your group and undertaking keep on model.
3. Use Easy Math
Cease resizing parts manually and guessing about dimension. Use the Math choice within the inspector and do it extra exactly. Plus, you’ll save time!
4. Use Base Element Units
https://www.youtube.com/watch?v=/4b6hBZPe-Z4
By utilizing base elements, you’ll basically create types for consumer interface parts and design items that may be adjusted collectively.
It begins by making a base part for all variants of the identical aspect with all the choices you may want. Consider a button, for instance, you’d need to have choices for various colours, with or with out icons, hover states, and so on.
The profit right here is that if you push a change to any base part, it should apply to all variants as properly. (So it really works lots like a method however can embody extra choices.)
5. Reset the Default Nudge to Your Grid
https://www.youtube.com/watch?v=/UEmSQy2GDL0
Do you just like the default nudge in Figma? Or do you end up utilizing it after which adjusting some extra?
You may truly change that default to match your grid or widespread values.
The Figma default is 10 pixels. Lots of people choose 8- or 12-pixel nudges.
Change in by going to Menu, then Preferences, then Nudge Quantity. Then use it with a keyboard shortcut of Shift + Directional Arrow.
6. Strive Pixel Good Scaling
https://www.youtube.com/watch?v=/LHY9cm_2zwU
Digital design has made a few of us fairly hooked up to pixel perfection. That may additionally create a workflow logjam.
7. Use Auto Structure for Every thing
https://www.youtube.com/watch?v=/9K3r6ApcoD8
Auto structure doesn’t make you lazy. It makes your workflow smarter.
Figma auto structure works on new or empty frames, frames with current content material, elements and part units, and teams or different alternatives of layers and/or objects.
The first good thing about auto structure is it helps you design extra constantly. Auto structure may enable you design with higher scalability in thoughts.
8. Embody Person Movement Diagrams
https://www.youtube.com/watch?v=/cvYhuowazh0
If you would like others to have the ability to perceive your design and performance, stream diagrams are very important. They grow to be extra necessary as design recordsdata develop or your group expands.
To make sure that the proper interactions occur, create a connector that goes between design screens with a notation. (You too can copy and paste.)
Your undertaking collaborators will thanks.
9. Manage Every thing
https://www.youtube.com/watch?v=/hV-do16z6SU
Figma undertaking recordsdata can get giant and there could be a variety of screens and data to kind by. This makes group key so that you simply and your group don’t get misplaced in all the design parts.
Take into account organizing recordsdata in order that all the primary elements are on their very own web page within the design file, outdoors of the principle design. That approach you possibly can at all times return to this “unique supply” for elements or types and make common design adjustments.
Carry that consistency by with web page headers for parts in order that all the pieces is designed and arranged in a neat bundle. Your design recordsdata ought to look pretty much as good because the design itself!
10. Use Grasp Parts and Element-Primarily based Templates
Parts are the spine of engaged on design tasks in Figma. You’ll need to create grasp elements that may be repeated throughout a number of screens. (No extra reinventing the wheel right here!)
You may degree up your workflow by putting the most-used grasp elements outdoors of the work space within the file for straightforward drag and drop all through the design.
Then you definately need to create component-based templates you can additionally reuse all through for expedited workflows. This may be actually useful for repeated elements akin to weblog posts or different card-type parts.
Conclusion
Do you have got different professional Figma ideas that needs to be on this checklist? Tell us on social media. Be at liberty to tag @carriecousins and @designshack on Twitter.
