Skip to main content

Creating Layouts in the Drawer System

How to create any layout in three simple steps. Best practices for using our layout system.

Team avatar
Written by Team
Updated over 5 months ago

Overview

Outlining the steps to create any layout in the drawer system using a structured approach. Watch the video for a complete walkthrough.

Three Key Steps to Create Any Layout

Step 1: Identify Major Areas 0:24

  • Begin by identifying the major areas of your layout.

  • Look for sections that span the entire width or depth of the drawer.

  • These major areas must be created first before any subdivisions.

Step 2: Subdivide the Major Areas 0:51

  • Once major areas are identified, subdivide them into smaller sections.

  • Create the layout shape you desire by splitting these areas into rows and columns.

Step 3: Set Fixed Dimensions 1:12

  • By default, sections are dynamically sized. Set fixed dimensions to create spaces for specific tools or items as needed.

  • It’s best to use fixed dimensions sparingly and let the dynamic sizing do most of the work.

Example Layout 1

Example of creating a simple flatware layout.

Example Layout Creation 2:04

  • Create a new drawer by clicking 'Create Drawer'.

  • Name the drawer and set dimensions (e.g., 21 wide, 15 deep, 3 high).

  • Click 'Edit Layout' to start creating your layout.

Creating Columns and Rows 2:44

  • Create three columns for the primary areas identified.

  • Subdivide the center area into two rows.

Setting Fixed Widths 3:21

  • If sections become too small, set fixed widths or depths to adjust sizes.

  • Example: Set fixed width of 4.5 for specific sections.

Example Layout #2

Creating a more complex drawer layout

Complex Layout Example 4:56

  • For a more complex layout, create a new drawer with larger dimensions (e.g., 25.5 wide, 16.5 deep).

  • Identify and create two primary sections by cutting the drawer into two rows.

Save changes to keep the layout as designed.

  • Ensure at least one dynamic section is present in every group of rows or columns.

Layout System Overview

Sections are building blocks

Your layout uses rows and columns called "sections" that can be nested inside each other without limit.

Subdividing creates structure

Adding rows inside a column (or columns inside a row) splits that section into smaller parts.

Dynamic sizing by default

Sections automatically resize to share available space equally.

Fixed sizing is optional

You can set specific dimensions for any section, and the remaining sections will split the leftover space.

One flexible section is required

Every group of rows or columns must contain at least one section that is dynamic (not fixed-size). If you set fixed sizes for all other sections in a group, the fixed size option will be greyed out for the last section.

Key Takeaways

  1. Start with major areas - establish your primary structure first

  2. Subdivide progressively - work from large sections to smaller ones

  3. Apply fixed sizing last - let the auto-layout do the heavy lifting

  4. Trust the system - minimal manual sizing creates the best results

Link to Loom

Did this answer your question?