Design system components in practice

Small beats comprehensive

A design system in a mockup tool is not a library, and treating it like one is what kills the effort. A library implies a publishing step, a versioning scheme and someone whose job is maintenance. A mockup needs a handful of decisions you apply the same way on every screen, so two frames built a week apart still read as the same product.

Small beats comprehensive for a specific reason. Every part you standardize is a part you have to keep correct, and a system with thirty of them drifts in a way a system with seven never does, because the drift happens in the parts nobody was watching.

Canvasola gives you a narrow set by design. The palette exposes 56 buttons covering 58 component kinds, and the library panel holds seven insertable reusable components. A narrow set is worth planning around rather than resenting, because it is one you can hold in your head.

• A system is a set of decisions you repeat, not a library you publish
• Every standardized part is one more thing to keep correct
• Seven parts hold their shape where thirty drift
• Plan around the narrow set the tool gives you

Note: A component library you cannot extend is not the same as having no system. It changes what the system is: a reference frame, a spacing scale, seven components and a written list.

Start from what repeats

The method for finding your components is to inventory what repeats rather than to imagine a library. Go through the screens you have drawn and write down every block that appears more than once. A row of people with avatars and names. A label above a field. A card holding a number and a caption. The list is short, and it is the real answer.

Count the occurrences, because a block that appears twice deserves a decision while a block that appears nine times deserves a component. Then look for the variations inside each repeat. A list row with a leading icon and one without are the same row with a switch, and a two-line row is the same row at a different height.

• Inventory the blocks that appear more than once
• Count them: twice deserves a decision, nine deserves a component
• A variant is the same component with a switch, not a second component
• Look for repeats that cross screen boundaries

The seven components that cover most screens

The seven insertable components are Stat card, List row, Form field, Call to action, Empty state, Nav header and Tab footer. Between them they cover the shapes that turn up on most screens: a figure with its caption, a repeated entry, an input with a label, the main action and the two navigation bars.

Each of them is a container you fill rather than a shape you redraw. A List row arrives with an icon slot, a text area and a trailing slot, so a copy becomes a list entry with different content and every entry keeps the same height. That consistency is why copying beats rebuilding.

Use them in the obvious places and resist tuning them per screen. A Nav header belongs on every screen of the flow and a Tab footer on every tab. When the seventh screen arrives and its header is identical to the first six, the product reads as designed rather than assembled.

• Stat card: a figure with its caption
• List row: one repeated entry, copied
• Form field: a label, an input and its hint
• Call to action, Empty state, Nav header and Tab footer
• Duplicate a component rather than rebuild it

Note: Canvasola gives you no way to add a component of your own, so the seven are the whole library. A pattern that is not among them is a variation of one of them, made by copying and editing.

Treat every other kind as a variation

The palette is wide. Its 56 buttons cover 58 component kinds, including Chart, Sparkline, Donut, Gauge, Table, Timeline, Bottom sheet, Dialog, Banner, Skeleton, QR code, Signature, Terminal, Log and Code. Treating every kind as a separate decision is how a mockup ends up with a Chart in one place and a Donut in another.

The way to use the width is to pick one kind for each job. A comparison over time is a Chart or a Sparkline, never both. A single share of a whole is a Donut or a Gauge, and one is enough. Each of those is a decision worth writing down, because the second screen will tempt you to switch.

Group the remaining kinds by the role they play rather than by their name. Containers hold children: group, container, card, nav bar, tab bar, form, bottom sheet, dialog and banner. Controls collect an answer: Input, Search, Checkbox, Toggle, Switch, Radio, Slider, Rating, Stepper and Segmented. The grouping tells you which a screen needs at all.

• One kind per job, so a value is never shown two ways
• Containers hold children, controls collect answers
• The maximum nesting depth in the editor is 8
• Record the choice so the second screen matches the first

Note: The nesting limit is worth respecting early, because a card inside a row inside a section inside a page is already four levels deep before anything else is added. The mockup system guide covers the other decisions a system needs besides components.

Lock the system with themes and align tools

A system stays a system when the editor enforces it for you, and App Builder has two mechanisms that do that. The theme toggle switches between the light and dark token sets, and the alignment tools line components up across six positions and space three or more evenly. Between them they stop the two drifts that matter most: color and alignment.

Use the alignment tools as a rule rather than a repair. When a set of cards sits in a row, select them, align them to one position and distribute them so the gaps are equal. Ten seconds of that is the difference between a row and five separate cards.

• Toggle the theme in the toolbar and check every screen in both
• Align a group across the six positions, then distribute three or more
• Apply alignment as a rule on every screen, not as a fix
• The theme toggle also switches the HTML export

Note: The alignment row holds six positions: left, center horizontally, right, top, center vertically and bottom. The distribute buttons appear once three or more components are selected.

Name the parts so reviews are precise

Naming is what makes a system reviewable. When a block has a name, a comment can point at it, and when it does not, a comment has to describe its position in words. Name your repeated blocks for the job they do rather than the way they look, so a comment lands on the decision.

Canvasola gives you names in two places. Frames have a Name field in the inspector, and the layers panel shows the structure of a frame as an indented tree, so a group's name is what appears in that tree. A frame called Today and a group called Today row turn a review into a conversation about decisions.

Keep the vocabulary short and write it down. A dozen names covers a product, and a thirteenth usually means two existing names have drifted apart. The dashboard guide shows what a named, reused table row does, and the layout concept guide covers naming the screens. The complete guide covers where working material lives.

• Name by job rather than by appearance
• Use the frame Name field and the layers panel tree
• Keep the vocabulary to about a dozen names
• Keep the naming list next to the mockup

Note: Workspace tabs are titled automatically and cannot be renamed, so the naming happens inside the project instead, on frames and on the components listed in the layers panel.

A checklist you can reuse

• The blocks that repeat across the product are written down
• Each repeat is standardized on one of the seven library components
• Only one component kind is used per job
• A variation is a copy with a switch, not a new component
• Every screen has been checked in the light theme and the dark theme
• Groups of three or more are aligned and distributed
• Frames and groups are named for the job they do
• The naming list is short enough to be read in a minute

Common mistakes to avoid

• Standardizing everything. A rule for every shape you draw is a rule you have to remember. Standardize what repeats and let the rest vary.
• Two kinds doing the same job. A Chart on one screen and a Sparkline on the next showing the same value makes the product look like two tools. Pick one kind per job.
• Counting a variant as a new component. A list row with an icon and one without are the same component with a switch. Counting them separately grows the system.
• Checking a single theme. Surfaces and muted text behave differently in the dark set, and the drift stays invisible until somebody opens the other theme.
• Describing a block by its position. A comment about the gray box near the top cannot be acted on. Name the block, and the comment lands on the decision.

Frequently asked questions

Can I create my own reusable components in App Builder?

No. The library panel holds seven insertable components, which are Stat card, List row, Form field, Call to action, Empty state, Nav header and Tab footer, and there is no editor for adding an eighth. A pattern of your own is handled by keeping one reference copy and duplicating it.

How many components does a mockup really need?

Seven insertable components plus a handful of variations covers most products. The test is the repeat rate rather than the number, because a block that appears on three or more screens deserves a rule and one that appears once does not.

What is the difference between a component kind and a library component?

A component kind is one of the 58 entries in the palette, each with its own default size and behavior, and the palette exposes 56 buttons for them. A library component is one of the seven ready-made blocks you can insert whole. The kinds are the raw material and the seven arrive assembled.

Does the light and dark theme affect the export?

It does. The toolbar toggle switches the token set used to draw the frames and also switches the HTML export, so the file you hand over matches the appearance you reviewed. That makes it worth exporting twice when a decision depends on the theme.

How do I keep a component identical across screens?

Duplicate it rather than rebuilding it, and hold the same type sizes, gap and padding on every copy. The alignment tools help as well: align the group across the six positions, then distribute three or more of them so the space between them is identical too.

This guide is part of the design foundations collection. For the wider product tour, read the complete Canvasola guide, and keep the keyboard shortcut cheat sheet open while you work.