All You Have to Know About Frames in Figma
Figma frames are one of many principal property for design. They function containers for all of your design components.
Make the perfect of them with this 7-point guidelines for frames in Figma!
What’s a Body in Figma?
Figma frames are basically the containers in your design.
In Photoshop, we all know them as Artboards. That is the canvas the place you’ll place all the weather of your design. In contrast to Photoshop, Figma affords a spread of interactive and structure instruments for a clean design course of.
Earlier than we even start designing we should resolve the place is our design going to dwell. Is it going to be for internet, cell, pill, to view on-line or for obtain? One of many coolest issues about Figma frames is that they arrive with preset machine and display measurement so that you can work with.
Now that you recognize what’s a body in Figma, let’s discover their potential.
Your 7-Level Guidelines for Frames in Figma
Are you getting began with Figma or wish to return to fundamentals? Take notes from this easy-to-follow guidelines to make the perfect of Figma frames in your designs:
Create Figma Frames
As talked about earlier, earlier than designing comes selecting our format.
So as to add frames to your canvas you possibly can click on on “A” or “F” keys, or go straight to the body software within the toolbar:
You may click on and drag within the canvas to create a body with customized dimensions. Or you possibly can choose from the preset machine templates on the appropriate facet menu.
Select from telephone, pill, desktop, watch, paper and even social media templates.
Further Features
On high of assigning format to your design, frames in Figma can combine different features. A few of these further functionalities embrace:
- Structure Grids: these assist align components to your body.
- Auto Structure: in a nutshell, it helps you keep components aligned whilst you hold including and shifting issues round in your design. Be taught extra in our easy-to-follow video tutorial.
- Constraints: outline how objets behave when resizing your body.
- Prototyping: add interactivity between frames.
Body Interactions
Altering measurement and scale of frames is very easy. Listed below are 4 methods you are able to do that:
- Manually drag the body by clicking any nook and drag it to resize.
- Simply change the body preset. Click on on the body and go to the appropriate sidebar. Change from telephone to pill or to desktop in a single click on.
- Regulate properties on the appropriate sidebar. Enter the brand new numbers for hight (H) and width (W). You may click on on the hyperlink button to constraint resizing.
Nest Frames
If you might want to mix frames to construct a extra advanced interface, right here’s the place nesting turns out to be useful. This course of lets you create frames inside frames.
For instance, when you’re designing a cell app, you possibly can create a navigation body for the menu choices and a separate chat body to incorporate particular components. Then, you possibly can add every of this frames to a High-level body in a Telephone preset format.
Right here’s the way it may appear to be:
You may resize your body to suit its youngster objets. Go to the top-right nook of the Properties Panel. Click on on the Resize to suit button.
High-Degree Frames
Some individuals say that in Figma there aren’t any high stage frames, however that’s not true.
Following up on nesting frames in Figma, let’s take a more in-depth have a look at High-level frames. This is able to be your grasp body, the one which nests all the opposite frames.
Figma Group vs Body
This is likely one of the massive debates amongst Figma customers. When to make use of Figma group vs body? They’re each containers in your design objects, however every one maintain distinctive properties.
Teams assist you to mix a number of objects collectively. By choosing objects and urgent: ⌘ + G (Mac) or Ctrl + G (Win), you possibly can create a group. It’s a time saver when you might want to resize of reposition a number of components at a time.
- Professional: if you resize a bunch, many of the components will scale and resize.
- Con: you possibly can’t apply constraints to you objets. Which means that results, strokes, and sort sizes is not going to scale in your group. On this case, you must go for a body as an alternative.
Now let’s speak about frames on this context. We’ve seen that frames are the muse of our design and in contrast to teams, they provide nesting potentialities inside frames.
- Professionals: not like teams, frames will be resized independently from their contents. As we’ve seen above, you may as well add constraints to design components inside a body, use structure grids and prototyping features.
- Con: there aren’t any actual cons for frames, since they’re a vital software in Figma. However when you simply want to mix objects, then a group generally is a higher resolution for you.
You’re free to go for each, if you want. They can be utilized collectively to provide you a greater design expertise.
Figma Frames vs Sections
Frames and sections could appear to be the identical factor, however there are key variations.
Let’s undergo a few of these variations:
- Constraints: With frames you possibly can add Constraints to every of your components. This fashion, if you resize your body, all components will align to the constraints you assigned.
- Nesting: frames will be nested into larger frames.
- Resizing: with sections you possibly can double click on the corners and get your part resized to the unique format. With frames you possibly can’t to this.
- Prepared for Dev: a helpful characteristic on sections is you can mark a bit as “Prepared for Builders” on the highest left facet, subsequent to the part title. That is actually helpful for Developer Mode in your dev crew to search out sections simply.
Lengthy story brief, Figma frames are perfect for designing layouts, whereas sections are excellent for shows and developer handoff.
Begin Experimenting With Figma Frames!
We’ve explored a number of the key instruments and tips to be a Figma body knowledgeable. It’s time to place every part you realized to the take a look at! Discover how your course of simplifies much more with these easy tips.
Hold upgrading your Figma skillset with these useful tutorials:
