Blog

An environment friendly Figma file group is essential for sustaining productiveness and collaboration. Undecided set up Figma recordsdata? This tutorial is right here to assist!

Have you ever ever created a file titled “App-layout-v1-final-final-final”? There’s no disgrace in it, we’ve all been there! That mentioned, having properly organized Figma recordsdata may very well be a recreation changer for you. 

Based on Figma, the best way you construction and current your work might be key for everybody concerned to remain on the identical web page because the mission evolves. 

This tutorial is created particularly (however not completely) for freelance designers working alone. So we’ll give attention to the underside rows of this organizational circulation chart: Initiatives and Recordsdata.

Ideas for organizing tasks and recordsdata in Figma. Picture supply: Figma

Let’s go over 5 suggestions and tips you possibly can simply apply in your tasks. The goal is to make your life simpler by organizing every mission and holding monitor of each particular side of it. 

Have in mind Figma file group ought to be just right for you and your design course of. 

5 Ideas and Methods for Organizing Your Figma Initiatives Like a Professional

We’ll begin from the overall view on Recents web page in Figma. Then we’ll transfer all the best way into suggestions for the inner construction really helpful inside every particular person mission. 

The following tips are merely options. There a thousand variations of Figma file group. However for steering, listed here are three group approaches shared by Figma:

1. By product floor: that is steered for net apps or merchandise. For instance, should you’re constructing an e-commerce web site, you’ll have Initiatives like Account, Cart, Homepage, and Product listings.
2. By function or manufacturing state: this method is nice for groups to see what’s “stay” and what isn’t. 
3. By stage of design course of: that is greatest for groups like businesses so everyone seems to be aligned on the method stage. This could embody Initiatives for WIP, Evaluation, Improvement and Shipped.

A few of this options differ with the Figma model you’re working with (free or paid). 

This tutorial is targeted on what’s obtainable if you work with Figma within the fundamental and free model.

1. Create Clear File Names

Creating clear and efficient file names can prevent and your group hours. When naming your recordsdata, attempt to be as descriptive as doable together with the file’s content material and objective. 

It’s also really helpful to create a naming format for use constantly. For instance, it may be “ProjectName_Section”. Make this a repeatable and stablished settlement between you and your collaborators. 

Right here’s a chart that exhibits the hierarchy and construction {that a} Figma file identify can observe: 

Select a Clear File Title. Picture supply: Figma

2. Add a File Cowl for Every Venture

A File Cowl in Figma is just about a visible abstract of what’s inside a Figma file. It’s good for visible scanning by means of your tasks. You possibly can shortly inform the mission, stage and who’s engaged on it.

It’s a fantastic trick to shortly establish and differentiate Figma recordsdata. And the perfect half: it’s very easy to create. I’ll present you ways. 

Begin by making a Web page titled Cowl and press F.

Then click on on the suitable facet panel on Figma Neighborhood after which click on on Plugin / file cowl. 

You’ll get a 1920 x 960 body. You’re going to right-click on it and choose Set as thumbnail.

Right here’s the principle data your file cowl should function:

• Standing
• File identify
• Venture description 
• Staff
• Visible components

Undecided design yours? Discover a great deal of Figma file cowl designs in Figma Neighborhood for inspiration. Mine appears to be like one thing like this:

And also you’re all set! Do that with all of your Figma recordsdata and discover issues quicker! 

3. Assume About Web page Construction

Now let’s go inside Figma recordsdata. Interested by web page construction can completely save your life as every mission evolves and extra tasks come alongside. Your web page construction for environment friendly Figma file group might embody:

• Figma recordsdata cowl (just like the one I simply confirmed you create)
• Visible analysis: add all of the screenshots and concepts you discover in a single place
• Person analysis: you might take a look at out and hold monitor of person flows with out messing up your design
• Design system: that is like your treasure field the place you retain all of your design components
• Prepared for assessment: right here’s the design prepared to indicate your shopper earlier than transferring on
• Prepared for growth: right here’s the place every thing accredited by the shopper rests and it’s prepared in your growth group to work on

For instance, it may be a fundamental two-page construction just like the one featured on this Grocery E-Commerce Web site Template:

Or it may be extra particular if the mission is extra advanced or considers extra points. You possibly can even add emojis for visible steering.

Create dividing strains to visually separate pages. 

Right here’s a extra particular web page construction steered by Figma: 

As talked about on the very starting, Figma file group ought to work in your and your group. Create the pages you want primarily based on the necessities of every mission..

4. Dedicate Some Time to Naming Layers

As designers, I feel it is a follow most of us have ignored since Photoshop occasions. Naming your layers in a constant and easy-to-understand means can prevent (and others) time (and perhaps tears) sooner or later. 

Don’t go, hold studying. I promise you this simply takes just a few seconds! Right here’s a great diagram instance created by Figma to present you an concept:

As an alternative of getting a generic Body 25, vector, picture layers, give them some love. Make them a bit extra particular.

As you possibly can see on this instance, the Neighborhood Card follows a fundamental layer hierarchy. Every layer merely named after its perform.

5. The Perfect Body Group 

This step is saved for the final, because it’s helpful as soon as the mission is prepared for growth.

This Figma file group for frames can create center floor for you and your creating group. 

It could guarantee your design concepts are successfully translated into code. So use this Figma file group tip in your “Prepared for growth” web page. 

The very best method is to think about this construction by circulation and by platform. For instance, I created a fundamental Login cellular circulation utilizing the E-commerce Cell App template as a base. Following an organized body construction can appear to be this:

Don’t stress out. Fortunately there’s a great soul within the Figma neighborhood who created a file construction information for us.

On this instance, every body exhibits a unique stage of the Login circulation. The primary body will present Login display. Then Password crammed and final Electronic mail crammed. 

That is simply and instance of how one can put together for the right handoff course of in your growth group. 

The Greatest Figma Templates to Optimize Your Design Work

Now you have got some actionable suggestions and tips on set up Figma recordsdata. To make your life even simpler, you can begin working with Figma templates.

Envato Parts provides a broad number of Figma templates together with flowcharts, wireframes, cellular app templates, net templates, and extra to assist improve your design tasks.

Begin making use of all this Figma file group suggestions and tips with Figma templates from Envato Parts!

Extra Figma Assets and Tutorials

Need to be taught extra about Figma? Dive into one (or extra) of the Figma tutorials and assets obtainable on Envato Tuts+: