How to Control Text Box Borders in Figma with Auto Layout Dividers

When designing frames and tables, we need to be able to control the design of the text dividers. However, the Auto Layout feature only provides one option out-of-the-box: showing all four text dividers in the design. In this blog post, I will show you how to maintain Auto Layout flexibility, while controlling the appearance of text box borders. This way, you can design tabs, tables and anything else with the Auto Layout features.

A Quick Intro to Auto Layout

Auto Layout is a smart feature for frames, components and objects. Auto Layout’s unique properties enable controlling and designing objects inside frames. This enables design flexibility and provides more capabilities.

Auto Layout Properties

Auto Layout contains four different properties that help control and design the frames.

1. Direction controls the horizontal/vertical direction of your designs.

2. Spacing defines the space between objects and elements.

3. Padding controls the white space surrounding the elements and objects, and their alignment. You can set a single value for all elements, or change them for different directions: between top and bottom, and left and right.

The alignment option enables controlling the alignment of the child objects.

One of the advantages of Auto Layout is that the alignment option controls all elements simultaneously. This is unlike the regular frame that controls each element separately.

After you finish setting the child frame alignment, you can determine the distribution between objects inside the frame:

• Packed — grouping objects
• Space between — defines the space between ungrouped objects

4. Resizing controls the dimensions of the objects in the Auto Layout.

There are three formats:

• Fixed width and height — setting Auto Layout to “Fixed width or height” will preserve the values of the frame and the size will not respond to changes.
• Hug Content — setting to Hug Content will resize the frame according to the child objects dimensions under that frame.
• Fill Container — setting to Fill Container will stretch the width and height of the parent frame.

Now that we’ve finished reviewing Auto Layout, it’s time to see how we can control each divider separately.

How to Control Text Box Dividers with Auto Layout

Let’s get started :
Text below, here is a video of how it works:

1. Add a text layer:

2. Add an Auto Layout by clicking on Shift > A.

3. In The ‘Auto Layout’ dialog, align the text to the center. Then, change the padding to 16px on the left and right, so we have the same spacing on both sides. Feel free to add any values that you want.

4. Change the Auto Layout name to ‘Text Input’.

5. Draw a line.

6. Add an Auto Layout by clicking on Shift > A.

Now, we will start creating the dividers.

7. Let’s start with the bottom line, In the Auto Layout dialog, change the padding to 0 and place the line on the bottom.

8. Change the name of the frame to ‘Bottom Line’.

9. Select both Auto Layouts and add another Auto Layout
by clicking shift > A.

10. Change the vertical spacing to 0.

Now, we need to change some values in the resizing dialog, to connect between the text input definition and the bottom line definition.

11. Select the text input frame and change the width to Fill Container.

12. Select the bottom line frame and change the width to Fill Container (again).

13. Select the child line of the “Bottom Line” frame.

Change it to Fill Container as well.

14. Draw another horizontal line, add Auto Layout, set the padding to 0 and align the frame to the top — center. (don’t forget to rename the frame to “Top Line”).

15. Select the top line and the text layouts and add another Auto Layout.

15. Select the main frame and the top horizontal line and add another Auto Layout by clicking on Shift > A.

16. Reduce the vertical spacing between items.

17. Draw a vertical line, add Auto Layout, set the padding to 0 and align the line to left-center.

Don’t forget to rename the frame “Left V Line”.

18. Select the main frame and the left vertical line and add another Auto Layout by clicking on Shift > A.

19. Reduce the horizontal spacing between items to 0.

20. Draw another vertical line, add Auto Layout, set the padding to 0 and align the line to the right-center. Don’t forget to rename the frame “Right V Line”.

18. Select the main frame and the right vertical line and add another Auto Layout by clicking on Shift > A.

21. Reduce the horizontal spacing between items to 0.

Now, we are moving to the resizing part.

22. Select the text Auto Layout and change the width to “Fill container”.

23. Select the bottom line‘s Auto layout and change the width to “Fill container”.

Then select the line element under Auto Layout and change the width to “Fill container” as well.

By setting the line object to “Fill container”, the line adopts the values of the Auto Layout text.

24. Repeat this step for the top line.

25. As for the vertical lines, add the same parameters but set the “Fill container” for height and not width.

The text input should look like this:

You can select any color you like for the text, lines and the main frame.

You can add different values for the main Auto Layout, like alignment and padding.

You did it! You now have a text box with borders you can control. Let’s see how we can implement it in a few examples.

Border Control Examples

We’ll start with creating the top row of a table.

First, duplicate the “Main Text input” frame.

Select all frames and add an Auto Layout by clicking on Shift > A. Then reduce the spacing between the items to 0.

It should look like this:

You can now duplicate the rows and build an entire table. You have full control over the appearance of borders of each text box.

We can hide some lines, for purposes like tabs, vertical dividers, etc.

That’s it! You can now control the appearance of your frames by changing the text size, giving you all the flexibility you need.