Web Development: Create a Shopping Cart Design with Figma Auto Layout

Create a Shopping Cart Design with Figma Auto Layout

Final product image — What You'll Be Creating

The following steps will teach you about auto layout in Figma, taking a closer look at the new auto layout features while we design a shopping cart UI.

What You Will Learn in this Figma Tutorial:

What is Auto Layout
How to create a notification icon using Figma’s Auto Layout feature
How to create a buttons using Figma’s Auto Layout feature
How to nest Auto Layouts in Figma
How to create a horizontal Auto Layout in Figma
How to create a vertical Auto Layout in Figma

For more inspiration on how to adjust or improve your final eCommerce cart 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!

1. What is Figma Auto Layout?

Auto Layout is a Figma features that allows you to apply dynamic frames that adjust to their contents. You can use this feature to create buttons that resize according to their text, create lists or columns of elements that can be easily rearranged, or you can even nest auto layout frames inside other auto layout frames.

Thanks to newly added features Auto Layout is an even more powerful Figma tool. Check out this quick video explanation to see what Auto Layout is all about:

In this practical tutorial we will use the following eCommerce cart design to practice using these new features.

2. How to Create a Notification Icon Using Figma’s Auto Layout

Step 1

Let’s start with a very basic example. Pick the Type tool (T) from your toolbar, and type in “5”.

Use the Montserrat font for this piece of text, set the style to Bold and the size to 12, check the Text Align Center button (Control-Alt-T), and change the color to white (#FFFFFF).

Step 2

With this text selected, simply press the Shift-A keyboard shortcut to add Auto Layout.

Let’s focus on the Auto Layout section from the right sidebar to adjust the settings, and set the Padding Around Items to 8.

Step 3

Make sure that your auto layout stays selected and keep focusing on the right sidebar.

First, click the Fill section to add a fill color and set it to #FF4200, and then click the Stroke section to add a stroke. Set its color to white, increase the weight to 2 and set the alignment to Outside.

Move to the top of the right sidebar and set the Corner Radius to 10.

Step 4

This is your basic Auto Layout and whenever you change the text, the frame dynamically resizes to accommodate the new content.

3. How to Create Buttons Using Auto Layout in Figma

Step 1

Select the Type tool (T) from your toolbar, and type in “Checkout with”.

Use the Montserrat font, set the style to Bold and the size to 16, change the color to #283D81 and don’t forget to align the text to center.

Step 2

Add Auto Layout (Shift-A) for your new piece of text and focus on the right sidebar.

Set the Spacing Between Items to 10 and then click the Alignment and Padding button.

Set the left & right padding to 110 and the top & bottom padding to 18. Make sure that you keep the Distribution set to Packed and then use the interactive grid (the three blue columns) to set the alignment to Center.

Step 3

Add a Fill for your new auto layout and set its color to white, and then increase the Corner Radius to 10.

Step 4

Download a Paypal logo inside your document. Feel free to use another one if you can’t get this one.

Select your logo and simply drag it on top of your white button to add it inside the Auto Layout.

Step 5

Now, as you can see, thanks to that Spacing Between Items value, the space between the text and logo from your Auto Layout is set to 10.

Step 6

Reselect the Type tool (T) from your toolbar, and this time type in “Checkout”.

Use the Montserrat font, set the style to Bold and the size to 16, change the color to white and don’t forget to align the text to center.

Step 7

Add Auto Layout (Shift-A) for your new piece of text and this time, let’s adjust the size of the Auto Layout frame manually.

Hold down the Alt key and drag the left/right edge of the frame to increase the Width to 345, and then drag the top/bottom edge of the frame to increase the Height to 58.

Once you’re done, move to the right sidebar and set the alignment to Center to move your text in the center of the auto layout frame.

Step 8

Add a Fill for this auto layout and set its color to #00DE81, and then increase the Corner Radius to 10.

4. How to Nest Auto Layouts in a Horizontal Auto Layout

Step 1

Select the Type tool (T) from your toolbar, and type in “VOUCHER CODE”.

Use the Montserrat font, set the style to SemiBold and the size to 12, change the color to white and don’t forget to align the text to center.

Add Auto Layout (Shift-A) for this new piece of text and focus on the right sidebar. Set the left & right padding to 10 and the top & bottom padding to 8. Keep the Distribution set to Packed and set the alignment to Center.

Add a Stroke for this new auto layout, set its color to white, increase the weight to 2 and set the alignment to Inside.

Step 2

Select the text inside your newest auto layout to lower its Opacity to 50%, and then move your Auto Layout to the left and align it with the other buttons.

Step 3

Let’s add a copy of this latest auto layout and place it as shown in the first image.

Select this new auto layout and focus on the right sidebar. Remove the Stroke, add a Fill and change its color to #FF4200.

Select the text from this new auto layout and get back to the right sidebar. Increase the Opacity back to 100%, change the font style to Bold and increase the font size to 14.

Step 4

Select these two Auto Layouts and press Shift-A to nest them inside another Auto Layout. Figma automatically sets the direction to Horizontal.

Having these two buttons inside an auto layout you can easily change their order. You can click and drag elements or you can press the left/right arrow keys to move a selected item in that direction.

5. How to Nest Shapes, Groups and Auto Layouts

Step 1

Now, let’s create a more complex Auto Layout. Select the Rectangle Tool (R), hold down the Shift key and create a 70 px square.

Change the Fill color of this shape to #210F33 and set the Corner Radius to 5.

Step 2

Select the Type tool (T) from your toolbar, and type in “Item”.

Use the Montserrat font, set the style to SemiBold and the size to 14, change the color to #210F33 and don’t forget to check the Auto Height button. Having this button selected you are making sure that the Width of the text container will not change. When you add more text only the height of the text container will adjust automatically to fit the new content. Get back to this text container and, hover over the right edge and increase the width to 104.

Duplicate this piece of text and select the copy. Replace the existing text with "Code #123456", change the color to #9C9C9F, lower the font size to 8 and set the font style to Bold.

Step 3

Select the Type tool (T) from your toolbar, and type in “Item”.

Use the Montserrat font, set the style to Bold and the size to 14, change the color to #FF4200 and don’t forget to align the text to center.

Add Auto Layout (Shift-A) for this new piece of text and focus on the right sidebar. Set the left & right padding to 10 and the top & bottom padding to 5. Keep the Distribution set to Packed and set the alignment to Center.

Add a Fill for this auto layout and set its color to white, and then add a Stroke. Set its color to #FF4200, increase the weight to 2 and set the alignment to Inside. Also, set the Corner Radius to 15.

Step 4

Select the two pieces of text along with the auto layout highlighted in the following image and nest them inside a new Auto Layout (Shift-A).

Figma will automatically set the orientation of this new Auto Layout to Vertical. Set the Spacing Between Items to 6.5 and the Padding Around Items to 0, and keep the Alignment set to Top Left.

Step 5

Pick the Ellipse Tool (O) from your toolbar and create a 26 px circle.

Remove the Fill color of this new shape and add a Stroke. Set its color to #210F33, increase the weight to 2 and change the alignment to Inside.

Hold down the Alt key and the Shift key and drag a copy of this circle to the right, as shown in the second image.

Step 6

Focus on your two circles and pick the Rectangle Tool (R). Create a 12 x 2 px shape and place it as shown in the first image. Set the Fill color to #210F33 and the Corner Radius to 1.

Duplicate this shape (Control-C > Control-V) and place it as shown in the second image. Add a copy of this second shape in the same location, and then rotate it 90 degrees.

Step 7

Select the Type tool (T) from your toolbar, and type in “1”.

Use the Roboto font, set the style to Bold and the size to 14, change the color to #210F33 and don’t forget to align the text to center.

Select this new piece of text along with the plus and minus buttos and press Control-G to Group them.

Step 8

Select your rounded square along with the group and the auto layout highlighted in the following image and nest them inside a new Auto Layout (Shift-A).

Add a Fill for this auto layout and set its color to #FAFAFA.

Step 9

Keep focusing on this auto layout, increase the width of the frame to 345 and focus on the right sidebar.

Set the Padding Around Items to 20 and then click the Alignment and Padding button. Set the Distribution to Space Between and then use the interactive grid to set the alignment to Center.

Step 10

With this auto layout still selected, focus on the toolbar and click the Create Component button to save your auto layout as a component. Move this main component outside the frame.

5. How to Create a Vertical Auto Layout

Step 1

Focus on the left sidebar and you can find your component inside the Assets panel.

Drag an instance of this component inside your design.

Step 2

You can easily adjust the text inside your component instance and thanks to Auto Layout the frames will adjust to their content.

Add another two instances of your component and adjust the text as shown below.

Step 3

Select your three component instances and add a new Auto Layout (Shift-A).

Figma will automatically set the orientation of this new Auto Layout to Vertical. Set the Spacing Between Items to 10 and keep the Padding Around Items set to 0.

Step 4

Using the Place Image command you can easily inser photos inside the rounded squares from your auto layout elements. Simly select the shape and go to Place Image (Control-Shift-K) in your toolbar.

Step 5

Finally, you should know that you can easily duplicate an item from an Auto Layout frame.

Select the item from your auto layout, press Control-C to copy it and then Control-V to paste the copy. It’s that easy.

As with the horizontal auto layout you easily change the order of items. You can click and drag items or you can press the up/down arrow keys to move a selected item in that direction.

6. Resizing Figma Auto Layouts

Having an auto layout selected, you also get access to the Resizing options in the right sidebar. These settings establish how your auto layout frame should adjust its size when you choose to edit the content inside it. Using the two drop down menus, you can vertical or the horizontal resizing behaviour.

We’ll use this auto layout and the nested auto layout as an example. First, select the main auto layout and select Fixed width for the horizontal resizing and Hug contents for the vertical resizing, and then select the nested auto layout and set the same resizing settings.

Now, double click the title from the nested auto layout frame to add a second line of text. You will notice that the width of the nested auto layout frame does not change as the height of the nested auto layout and main auto layout adjusts to fit the new line of text.

Congratulations! You’re Done!

Here is how your shopping cart design should look. 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 create your own shopping cart design using these techniques. You can find some great sources of inspiration at Envato Elements, with interesting solutions to improve your ecommerce cart design.