Figma for Design – Part 3: Figma Tips for Your Next Project
- 5 Best Practices for Using Figma
- 9 Quick Figma Tips You Can Apply
- 1) Make Easy Progress Rings Using the Arc Tool
- 2) Resize with Ease Using the Scale Tool
- 3) Automatically Adjust Height Lines
- 4) Move and Collapse Layers
- 5) Preview Elements in Outline Mode
- 6) Duplicate Your Last Action
- 7) Resize Components While Ignoring Constraints
- 8) Bulk Spacing
- 9) Rename Many Layers Simultaneously
- Bonus Tip: Make Use of Keyboard Shortcuts
- Implement Figma Tips and Best Practices to Design Faster
In Part 2 – Figma vs. Other Tools, we saw how Figma provides a great balance between features, usability, and performance compared to tools like Sketch and Adobe XD. You can use Figma for designing websites, building prototypes, creating 3D images, storyboarding, and more—all while seamlessly collaborating with your team. If you're a web or UI/UX designer who wants to start using Figma, you'll find it easy to use, as Figma features use the same building blocks. These Figma tips and best practices will help you make the most of this rich, collaborative design tool.
5 Best Practices for Using Figma
Do you want to start off strong with Figma? In that case, here are 5 best practices to keep in mind. The following Figma tips will help you use the tool effectively and increase your design productivity.
1) Use Workspaces
Workspaces is a Figma feature that you use to group members within your organization, making it easy for them to find content. Workspaces consist of both admins and end users.
- Admins can determine workspace memberships and review roles.
- End users can see different workspace groupings and identify the content that's relevant to them.
2) Name, Clean, and Frame Your Design Assets
Naming each of your layers makes your project easy to navigate, especially if you're handing it off to another designer.
Delete unused styles, frames, and layers, and set all your layers to “auto-height” and “auto-width” instead of fixed to export a clean and clutter-free document.
Another best practice for organized designs is to use frames. Combine multiple related layers into manageable frames. You can also use frames to define the resizing behavior of child elements, apply styles, and control the frame size.
3) Make Your Designs Responsive
Using frames is also one of the ways to create more responsive designs, as frames support Figma's auto layout feature. Auto layout is a design feature in Figma that you can add to components and frames so they can shrink or fill to fit as your content changes or your design evolves.
Another way to build a responsive design is to include breakpoints. You can also use constraints to build responsive designs. Figma is great with responsive constraints. Stretch your layouts to see how they will appear in different screen sizes.
4) Create Reusable Components to Save Time
Components keep you from recreating common design elements every time you start a new project and ensure design consistency.
You can create components from your designed layouts or objects. The main component versions live within a separate file called a library to prevent interference. To use a component, make a copy of it (instance). You can't edit a copy of a component, so everyone on the team receives an identical copy.
5) Set the Base Unit to 8px
The continuously increasing screen sizes and pixel densities make asset generation much harder. Using the 8 px grid system to space and size your design elements makes scaling easier and more consistent, as all size changes will be by 8. Using Figma's 8pt grid system makes your design space and dimensions similar to what they would be during coding.
9 Quick Figma Tips You Can Apply
Figma can speed up and streamline your design workflow, but only if you know the right tips and tricks to use.
Here are 9 time-saving Figma tips to apply…
1) Make Easy Progress Rings Using the Arc Tool
The bar graph arch tool makes a minimalist arc, which saves you time. You can make easy progress rings by dragging the tip of the arc.
2) Resize with Ease Using the Scale Tool
Scaling may be challenging when you think about dealing with broken designs and having to make adjustments. You can use the scale tool to design pixels with perfect proportions that don't need rework. Select what you want to resize, press the letter K on your keyboard, and drag.
3) Automatically Adjust Height Lines
Sometimes, your height lines are all messed up, and you don't have a specific number in mind. You can type “auto” into the line height field or delete the existing number to space out your lines automatically.
4) Move and Collapse Layers
You can easily move layers forward or backward using the function “CMD/Ctrl + [ or ]”. If you want to collapse your layers, use “Option + L or Alt + L”.
5) Preview Elements in Outline Mode
Outline mode ensures that the structure and components of your design are correct. It also gives you the perfect view when you want to see how precise your layout and element placements are.
6) Duplicate Your Last Action
When you need to redo an image, object, frame, or anything else you've created, you can use “CMD+D”.
7) Resize Components While Ignoring Constraints
Resizing components can be stressful if elements keep expanding or collapsing while you're trying to resize. Hold the CMD key while dragging the edge of the frame to change frame dimensions without interfering with the inside elements.
8) Bulk Spacing
Aligning and spacing a bunch of objects can be time-consuming. Figma's Smart selection & tidy up features can help you space with ease. With Figma, you can auto-arrange, bulk space, and reorder similar elements.
To bulk edit:
- Select similar objects
- Select the list/grid icon
- Drag spacing in the direction you like
To change object placement:
- Select similar objects
- Select the dot in a single object
- Drag and drop it into your preferred location
9) Rename Many Layers Simultaneously
A defined naming structure and hierarchy keep your files well organized. You can use Figma's Rename layers model to rename layers in bulk. Some of the changes you can make include giving similar names to layers, including a number suffix or prefix, as well as renaming only part of the layer's name.
Bonus Tip: Make Use of Keyboard Shortcuts
You can make just about any change you want on Figma using a keyboard shortcut. In fact, you can learn a new keyboard shortcut daily by hitting “?” near the bottom right of your browser.
Implement Figma Tips and Best Practices to Design Faster
Less time and effort designing your projects equals faster business processes and higher returns.
Some of the best Figma tips and practices include creating defined workspaces, organizing your designs, creating responsive designs, using components, and setting the base unit to 8px. Duplicating, resizing, spacing, previewing, and other Figma tips and tricks make you work much faster. You'll discover loads of tips and tricks for faster design as you continue to use the tool.
If you need help using Figma for web design or to create marketing assets for your business, Viral Solutions is here to help. Experts at our full-service marketing agency have heaps of experience in using UI/UX design tools like Figma. Request a consultation with us today to learn how we can help your business grow.
At Viral Solutions we are committed to seeing YOU succeed. It is our goal to grow your business with proven digital marketing strategies that will help your business for the long haul.
Stay Up To Speed in the Ever Changing World of Marketing!
Sign-up today for FREE, monthly marketing tips, loopholes, and news to EXPLODE your Return on Investment!
Share your knowledge and gain exposure by becoming a guest author on our blog! Learn how to write for us.
