Artboards are a powerful way to preview a Component in various scenarios at the same time. In this tutorial, we’ll create a responsive Button Component and use Artboards to preview it in different states. This will allow us to see how changes in layout, color, and typography react to multiple scenarios all at once, making it a great way to build a design system! But, before we get ahead of ourselves, let’s start by simply creating a Button Component.

To create a Button Component, start by inserting a Text layer from the Insert (+) menu and then from the Inspector panel, apply the Background modifier. To make our Button a bit more realistic, let’s:

To make the Button reusable, let’s turn it into a Component. This way, you’ll be able to insert Instances of your Component into Artboards with different preview settings.

To turn a layer into a Component, select it in the Layers panel or on the canvas, and click on the Create Component button in the toolbar.

Easily compare how changes in layout, color, and typography affect your design by placing Component Instances into Artboards.

Artboards are a defined area within which layers are grouped in, making it easy to design apps and app elements for different sizes. You can either add one from the Insert (+) menu or use the keyboard shortcut A.

By adding multiple Artboards to the canvas, you’ll be able to preview how your Button will look in various scenarios at the same time. Let's start by creating one Artboard.

You can insert an Instance of the Button Component from the Components section of the Insert (+) menu. Then, right-click the Button Component Instance to embed it in an Artboard.

Each Artboard has its own Preview Controls, making it easy to see how your design will respond to different user settings such as screen size, color scheme, language, and text size.

To access the Preview Controls, select the Artboard in the Layers panel or on the canvas, and from the Inspector panel, click on the Preview Button.

By default, the Artboard will use the same color scheme as your Mac. In this example, my laptop is set to Light Mode, so the Artboard reflects this setting. If you want to see how this Button would look when a user’s device is in Dark Mode, set the Appearance to Dark. As you can see in the video below, in Dark Mode, the text is displayed in white instead of black, and the System Gray we chose is darker.

To see how this Button will look when a user has the ‘Larger Text’ accessibility feature enabled and set to a Text Size of Accessibility Large, you can right-click on the Artboard to either Copy and Paste it, or simply Duplicate it, and from the Preview Controls in the Inspector panel, change the Appearance back to Light, and add the applicable Text Size.

To make it easy to keep track of each preview type, make sure you change the name of each Artboard accordingly in the Layers panel.

Next, let’s add support for an optional icon in our Button. We’ll use the Conditional layer and Properties to make the icon customizable, or to hide it entirely. Let’s start by inserting and configuring a Symbol.

With the Button Component selected, insert a Symbol layer from the Insert (+) menu, and from the Inspector panel, select the chevron.right.circle Symbol.

To arrange the Text and Image layers horizontally, select both of them in the Layers panel and right-click to embed them in an HStack. The Padding and the Background modifiers currently only apply to the Text layer, so in the Layers panel, drag them into the HStack instead.

Before we can embed the icon in a Conditional layer to conditionally show and hide the icon, we first need to create a Property with a default value that we can then bind the Conditional layer to.

In this example, let’s create a Boolean Property with a default value of False, since we’ll want all Instances of the Component to hide the icon unless otherwise specified.

To do so, select the Button Component in the Layers panel and insert a Boolean Property from the Inspector panel. We can call it icon and set the default value to False.

To make the Symbol conditionally appear, select the Image layer in the Layers panel or on the canvas, and click on the Conditional toolbar button. Then, add a Condition from the Inspector panel, specifying that the icon property must be True for it to appear.

Since we set the default value to False, the Symbol will no longer be visible.

Now, when you click on any Instance of the Button Component, you can reveal the icon by setting the icon Property to True. Let’s take a look and see what the Button will look like with and without the icon when a user’s device is set to Dark Mode.

The more Properties and Conditionals that you add to your Component, the more options you have to configure in each Artboard. As you can see, this is a great workflow for building a design system!