Monday, December 28, 2020

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.

what is auto layout

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.

auto layout 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).

type tool

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.

add auto layout

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.

add fill and stroke

Step 4

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

notification icon auto layout

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.

type tool

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.

auto layout figma

Step 3

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

corner radius

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.

auto layoyt icon

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.

auto layoyt spacing between items

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.

type tool

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.

auto layout size

Step 8

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

auto layout fill

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.

type tool

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.

auto layout

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.

auto layout button

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.

auto layout horizontal

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.

rectangle tool

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.

figma text

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.

auto layout button

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.

vertical auto layout

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.

ellipse tool figma

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.

plus minus figma

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.

group figma

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.

nested auto layout

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.

auto layout space between

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.

figma create component

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.

assets component instance

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.

multiply component

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.

vertical auto layout

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.

figma place image

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.

auto layout duplicate item

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.

auto layout move item

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.

figma auto layout resizing

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.

shopping cart design figma auto layout

Want to learn more?

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


No comments:

Post a Comment