How to Work with Auto Layouts, Components, and Dynamic Content in Figma

How to Work with Auto Layouts, Components, and Dynamic Content in Figma

Final product image
What You’ll Be Creating

Figma can save you a lot of time as a UI designer. In this practical tutorial you will learn how to save time and effort by working with auto layouts and components in Figma. As a bonus extra we’ll also use dynamic content by populating a lot of the repeated data straight from a Google Sheet.

What You Will Learn in This Figma Tutorial

  • How to create a button in Figma
  • How to use Figma auto layouts
  • How to create and use Figma components
  • How to create nested frames in Figma
  • How to use the Google Sheets Sync plugin for dynamic content in Figma
  • How to place images in Figma

For more inspiration on how to adjust or improve your final UI design you can find plenty of resources on Envato Elements. Elements is home to thousands of UI and UX kits, compatible with your favorite design tools (including Figma) for one single subscription price!

What You Will Need

You will need the following resources in order to complete this Figma tutorial (but feel free to use your own alternatives if you prefer):

  • Model in a fashionable T-shirt and denim shorts photo
  • Country style fashion and accessories photo
  • Model in stylish clothes and accessories photo

1. Auto Layouts and Components in Figma

Introduction to Figma Auto Layouts

Web interfaces are fluid. With Figma auto layout you can create dynamic frames that expand or compress whenever you change the content within them. Thanks to Auto Layout, buttons resize according to their text and lists automatically rearrange as you move or remove elements within an auto layout frame. Auto layout frames can be nested inside other auto layout frames making it a lot easier to edit complex design elements.

You can easily apply Auto Layout to selected elements using the Shift – A keyboard shortcut, or by going to Object > Add Auto Layout in the Options menu. Elements inside an Auto Layout frame are stacked next to each other, vertically or horizontally. Once created, Auto Layout frames can be easily edited. You can adjust the horizontal and vertical padding or the padding between elements, apply a fill and stroke, or adjust the corner radius.

In the following steps you will learn how to easily work with Figma Auto Layouts and how much of a time saver it can be.

auto layout figma

Introduction to Figma Components

Similarly to Symbols in Sketch or Components in Adobe XD, Figma components are design elements that can be reused across your designs.

Any object, group or layer can be turned into a component. You can easily create a new component using the Control – Alt – K keyboard shortcut or the Create Component button from the toolbar, or by going to Object > Create Component in the Options menu. Once created, the first component is the Main Component. Further copies of the main component are called Instances. Component instances update whenever you edit the Main Component. To access all components go to the Assets panel.

In this tutorial we’ll use the following iPad fashion app design to demonstrate how to create and use Figma components.

component figma

2. How to Create a Button Using Figma Auto Layout

Step 1

Let’s start with a basic example where you can use the Figma Auto Layout feature.

Pick the Type tool (T) from your toolbar, and type in “Women”. Use the Roboto font, set the style to Light and the size to 12.

text tool

Step 2

Make sure that your text stays selected and press Shift-A to place your text inside a new layer with Auto Layout added. Have a look inside the Design panel at the Auto Layout settings and lower the Horizontal Padding to 8.

Move down to the Fill section, add a new one and set the color to #FF5F5F.

auto layout fill

Step 3

Keep focusing on the Design panel and set the Corner Radius of this Auto Layout frame to 15, and then select the text and change its color to white (#FFFFFF).

corner radius

This is a basic Auto Layout frame. Whenever you choose to change the text, the button dynamically resizes to accommodate the new content.

auto layout dynamic resize

Step 4

Hold down the Alt key and drag a copy of your auto layout frame to the right, as shown in the first image.

Replace “Women” with “Men” and then focus on the Design panel. From the Selection Colors section you can easily change the text color to #4B4B50 and the button color to white.

duplicate auto layout

Step 5

Focus on the Layers panel and rename your first auto layout frame “Item.Pink” and the second one “Item.White”.

Select both buttons, go to the toolbar and click the Create Multiple Components to instantly turn your buttons into Figma components.

create multiple components

3. How to Create Dynamic Lists Using Auto Layout in Figma

Step 1

Add two instances of your “Item.White” component and change the text, as shown in the first image.

Select all four buttons and add a new Auto Layout frame. This will add a new frame that encompasses your selected buttons. By default the padding settings will be set to 0 while the spacing between items will be set to 10.

auto layout horizontal

The spacing between items from an auto layout frame can be easily adjusted from the Auto Layout settings.

spacing between items

Whenever you choose to change the text inside a button, the rest of the elements from this auto layout frame will dynamically resize to accommodate the new content. Items inside an auto layout frame can be easily duplicated. Hold down the Alt key to drag a copy of a selected item from the auto layout or use the classic Control-C > Control-V keyboard shortcut to duplicate a selected item.

auto layout duplicate item

You can also change the order of elements inside an auto layout frame. You can click and drag elements, press an arrow key to move a selected item in that direction. Alternatively, you can use the arrow buttons at the top of the Design panel. Have a look inside the Layers panel and notice that when you change the position of an element on the canvas its position also changes in the Layers panel.

auto layout move item

Step 2

Drag a new instance of your “Item.White” component from the Assets panel and place it as shown in the following image.

Replace the text with “Category” and then focus on the Layers panel. Open your new component instance, double-click the name of that text and replace it with #Category. This will help you a few steps later when you will learn how to easily add dynamic content to multiple elements from your design in an instant.

rename text

Step 3

Hold down the Alt key and drag a copy of your selections to the right, as shown in the first image. Also holding down the Shift key while dragging will constrain the movement of the copy to a single direction.

Once you create the first copy, press the Control – D keyboard shortcut elven times to add eleven extra copies in a perfectly aligned row, as shown in the second image.

Select this entire row of buttons and add a new Auto Layout frame (Shift-A). Now, you might want to adjust the text inside these buttons. You could select the buttons one by one and change the text, but there’s a much faster method that you can use. Let’s move to the next steps and see how it can be done.

auto layout multiple items

Step 4

To take things to the next level and use dynamic content first you will need the Google Sheets Sync plugin. 

The Google Sheets Sync plugin will allow us to populate all our repeated component instances with unique dynamic content. Each of our product tiles will have different pricing information, a different image, and having to manually enter all that would take a lot of time! Let’s do it dynamically instead.

Go to the Figma Community page, select the Plugins tab and search for Google Sheets Sync. Install the plugin and let’s move to the next step.

plugin google sheets sync

Step 5

Open Google Sheets, create a new document and make a column with the text that you want to populate that row of buttons.

Most importantly, make sure that the header of your column is named Category. This way, your text will connect with all those component instances that have the #Category layer.

Once you enter all the text, click that Share button and copy the link of your Google sheet.

google sheet header

Step 6

Get back to your Figma file and select that row of buttons.

Right click on your selection and go to Plugins > Google Sheets Sync. Paste the Google Sheets link and click the Fetch & Sync to instantly populate your auto layout frame with all that text.

google sheet sync fetch sync

Step 7

The direction of Auto Layout frames can also be set to Vertical. This will organize the elements vertically.

auto layout vertical

Select the elements inside such an auto layout frame and use the left and right arrow keys to easily align the elements to Left, Center or Right. You can easily change the order of elements using the up and down arrow keys, or simply by dragging them.

auto layout move vertical

4. How to Create Nested Frames

Step 1

Nested frames are frames that you place inside another frame or object. These can be really useful when you want to create complex design elements that can be easily edited.

Let’s start with a simple square. Pick the Rectangle tool (R) and create a 389 px square. Hold down the Shift key while dragging to easily create a perfect square.

Fill this new shape with #C4C4C4 and set the Corner Radius to 10.

rectangle tool

Step 2

Using the same tool, create a 359 px square. Fill it with the same color, se the Corner Radius to 10 and place it as shown in the following image. Use the Control-[ keyboard shortcut to move this shape below the other one.

rectangle tool rounded corners

Step 3

Select the rounded square that lies in the back and focus on the Design panel.

Lower the Layer Opacity to 70% and then apply a Layer Blur effect and set the Blur to 50.

layer blur

Step 4

Let’s create a new auto layout frame starting from a text. Pick the Type tool (T) from your toolbar, and type in “00%”. Use the Roboto font, set the style to Bold and the size to 12.

text black

Step 5

Make sure that your text is selected and Add Auto Layout (Shift-A). Lower the Horizontal Padding to 8, set the Corner Radius to 15, change the text color to white and then add a Fill and set its color to #FF5F5F.

auto layout

Step 6

Pick the Type tool (T) from your toolbar, and type in “Name”. Use the Roboto font, set the style to Regular, the size to 12 and the color to #4B4B50.

text

Step 7

Select your auto layout frame along with the “Name” text and add a new Auto Layout (Shift-A).

Set the Vertical Padding to 10, keep the Horizontal Padding at 0 and increase the Spacing Between Elements. Add a white fill and increase the Corner Radius to 15.

auto layout

Step 8

Pick the Type tool (T) from your toolbar and add the two pieces of text shown in the following image.

To add the strikethrough effect, click that Type Details button from the text panel and check that Strikethrough button.

text

Step 9

Select the dark piece of text Add Auto Layout (Shift-A). Set the Vertical Padding to 20 and the Horizontal Padding to 16.

Add a fill and set its color to white and then go to the frame settings. Click that Independent Corners button to set specific corner radius values for each corner of the frame. Set the radius of the left corners to 25 and for the other two corners keep it at 0.

independent corners figma

Step 10

Select the white piece of text Add Auto Layout (Shift-A). Again, set the Vertical Padding to 20 and the Horizontal Padding to 16.

Add a fill and set its color to #FF5F5F and then go to the frame settings. Set the radius of the right corners to 25 and for the other two corners keep it at 0.

independent corners

Step 11

Select the two buttons, place them as shown in the first image and Group them (Control-G).

Select this group along with the auto layout frame and add a new Auto Layout (Shift-A). To prevent this frame from getting wider, check the Fixed Width button from the Auto Layout section.

auto layout fixed width

Step 12

Select the grey shapes along with the auto layout frame that lies on top and click the Create Component (Control-Alt-K) button from your toolbar.

Move to the Layers panel, open this new component and rename the text elements as shown in the following images as we are about to use again that Google Sheets Sync script to fill in with text several instances of this new component.

create component

Step 13

Select your main component and drag it outside the frame of the design, and then add three component instances as shown in the following image.

duplicate components

Step 14

Time to add some more dynamic content! Open Google Sheets, create a new document and add four columns as shown below.

For the headers remember to use the names added in the layers panel when you edited that main component

Once you’re done, click that Share button to copy the link of your Google sheet. Get back to your Figma file, right click and go to Plugins > Google Sheets Sync. Paste the Google Sheets link and click the Fetch & Sync button to instantly populate your component instances with all that text.

google sheets sync for dynamic content

Step 15

Select the Place Image tool (Control-Shift-K) from your toolbar, select the three photos and use simple clicks to place them inside the front rounded squares. This will basically replace the color fill with an image fill.

place image

Step 16

Reselect the Place Image tool (Control-Shift-K) from your toolbar, select the same photos and this time place them inside the blurred rounded rectangles.

place image blur

Step 17

Finally, as we mentioned in the introduction, component instances update whenever you edit the Main Component.

Go to the main component that lies outside your main frame, make some changes and notice the live updates.

edit component

Congratulations! You’re Done!

Here is how it should look. You are now versed in using Figma auto layouts, Figma components, and adding dynamic content thanks to the Google Sheets Sync plugin. I hope you’ve enjoyed this tutorial and can apply these techniques in your future projects. Don’t hesitate to share your final result in the comments section.

Feel free to adjust the final design and make it your own. You can find some great sources of inspiration at Envato Elements, with interesting solutions to improve your design.

auto layout component

Want to Learn More?

We have loads of tutorials on Tuts+, beginner to intermediate level, take a look!

  • Figma
    How to Create Onboard and Login Screens for a Dating App Template in Figma
    Andrei Marius
  • Figma
    How to Change Multiple Colors at the Same Time in Figma
    Adi Purdila
  • Figma
    4 Ways to Resize Elements in Figma
    Adi Purdila
  • Figma
    How to Fix Cropped Shadows or Overflowing Elements in Figma
    Adi Purdila
  • Figma
    A Quick Guide to Figma’s Image Fill Settings
    Adi Purdila
  • Figma
    New Course: Figma Grids in Under 30 Minutes
    Andrew Blackman
  • Figma
    How to Create a Frosted Glass Effect in Figma
    Adi Purdila
  • Figma
    Essential Figma Shortcuts for Working Efficiently
    Adi Purdila
  • Figma
    21+ Best Premium UI Kits for Adobe XD and Figma
    Paula Borowska
  • Figma
    20 Figma UI Kits for Designers
    Eric Karkovack

Go to Source
Author: Andrei Marius

Next PostRead more articles