Sometimes organizing your workflow is as important as your work itself. Having a disorganized space within your tools and workflow can make your performance drop much more than you think. That is why it is key to maintain an organized workspace, and Figma is the design tool that has the best features to do so. In this blog, we will provide some resourceful tips on how to achieve a perfect workflow organization with Figma.
As a designer, how you organize and present your work can make or break your ability to map towards broader goals, remain on the same page, and even know where to find the latest version of a design. It is also the key to alignment, not only within your team but also with your partners. While we all strive for a well-organized structure to match our pixel-perfect designs, it can be tough to figure out where to start, how to maintain your system, and what works best for your team.
8 Figma Tips for Workflow Organization
In this section, we will cover some of the most recommended practices for Figma to achieve an organized workflow and thus achieve better results and higher quality in your work performance.
1. Addition of a Cover Photo to your Figma File
When managing various projects and Figma files at the same time, it can be frustrating finding the project we are looking for. Creating a cover photo is a simple and elegant solution to make projects instantly recognizable at a glance.
To add one, all you have to do is create a page in the document, draw out a frame for the cover image, then fill it with some design goodness like a logo or something to help you and your teammates recognize the project, and finally right-click on the frame and select “set as thumbnail”. As simple as that.
2. Organization of Variant Sets with Auto Layout
Did you know you can organize your variants in an auto layout? To do so, tap on the frame of a variant set and press SHIFT + A. With auto-layout, organizing and re-ordering components can be done in a snap.
3. Use Base Components for Variant Sets
If you have a large set of variants for buttons, input fields, and so on, it will cost you tons of precious time if you decide down the line that an 8px radius looks better than 12px or if you need to make any other adjustments. By using base components for your variant sets you can make one adjustment to your base and it will push the changes to all of the variant instances.
To do this, you have to create a base component with all of the elements needed in the different variations for default, icon left, icon right, hover, active, error, and so on. Then it is as simple as hiding elements that are not needed in different variants. Base components themselves do not need to be part of your component set and can be placed nearby on the same page or frame.
4. Use Styles
Think of styles like components for colors, text, effects, and strokes. When you design using styles and decide you want to test different variations of colors, stroke thickness, font styles, and so on, one quick change and the design will auto-magically update all instances where that style is referenced. Although it can be tempting to use the eyedropper and just fill in colors where we need them, it is more recommendable to design with this best practice as much as you can. Styles will save headaches down the line and allow you to make updates on the fly.
5. Create Flow Diagrams from your Screens
As your design files grow, things can quickly get confusing for outsiders like clients and collaborators who may not be in the weeds day to day like we are. To help communicate the flow from screen to screen, you should use a not-so-well-known trick, which is the following. You can simply copy and paste a connector, or another flow element, from FigJam into a Figma file and it will retain all of its functionality.
6. Use of Constraints
If you want to keep a frame organized and adaptable, use constraints to tell Figma how objects should respond as you resize their Frames. Constraints help to control how designs look across different screen sizes and devices and save you from needing to make adjustments every time you need to resize a frame.
7. Create Templates for Components
The idea of templates is a pretty straightforward concept. Here is how it works. Suppose that you have a blog post component, which has a picture and some text. Well, you could just place that component 10 times on every artboard that needs a list of blogs or you can also create another component that has the blog component nested 10 times inside of it.
You can then drop this template into the design file, and if it is needed to add content or make adjustments to the space between the components, then you will only need to adjust it on your main component.
8. Organization of Components
There is nothing worse than opening someone’s design file and realizing there is no way to make edits to the main components without right-clicking and selecting “go to the main component” because they are not organized away from the designs. This lack of organization is sure to backfire at some point, so it is recommendable to move all main components on their page or own section of the design file away from your work. This makes it easy to update components and spot inconsistencies. It can be even better when designers organize their components with page headers for buttons, color styles, inputs, and so on
Bottom Line
If you intend to simply do better in your designs and you do not know what is going wrong, it is possible that you are not failing in terms of ideas but maybe that you just are disorganized, which makes you unable to focus primarily on your job. Following this Figma guideline, you will most definitely sort that problem out.
