Skip to main content

Reusing Artboards

In this tutorial, we will learn how to reuse your Artboards in two ways:

  1. Referencing the Artboard
  2. Creating components

Referencing an Artboard​

Referencing an Artboard is useful when you have a visual element that repeats on multiple Artboards, and this element is always the same, such as headers, sidebars, and footers.

In our example, we will reuse this sidebar. Click on the Copy button below, and paste the Artboard into your Builder.

Start by creating a new Artboard, double-clicking the Builder background and selecting Artboard from the menu that opens.

Next, draw a Block to be the sidebar. Select it and:

  1. In Children Mode, set it to reference.
  2. In Children Reference, which appears when Children Mode is set to reference, in Component select data2-core-primitives@Artboard, and in Reference select the sidebar Artboard.

Any changes in the sidebar Artboard will be reflected in the blocks that reference this Artboard.

Creating Components​

Components are another way to reuse your elements, however, components have configurable parameters, that is, unlike the reference which is an exact copy of the Artboard, the component is not.

As an example, we will build a component that is a button. Copy and paste the Artboard below into your Builder.

Select the created Artboard and:

  1. Enable the Component Class parameter.
  2. Give a name to your component, such as Button.
  3. Click on Create Component.

And just like that your component was created, let's use this component in the Artboard that references the Sidebar, for that:

  1. Draw two blocks.
  2. Select both by clicking on one, holding SHIFT, and clicking the other.
  3. At the top of the Inspector, click on the control that is written data2-core-primitives@Block to change the component type. Search for your new component and select it.
  4. Both blocks should have changed in appearance, and now they are identical to the button's Artboard.
  5. Make visual adjustments, such as removing the Fill from the blocks, adjusting the size, etc.

Now we will make the button text a configurable parameter.

  1. Select the button's Artboard.
  2. In the Component Class control, click on Add Prop.
  3. In the added card, under Prop, type label, keep the type as String, and in Mock, type Button Text.
  4. Select the Block inside the Artboard that has the Text parameter filled.
  5. Change the type of Text by clicking on the button with f() and in the menu that opens, click on Context Reference.
  6. Click on the control to navigate and configure the Reference.
  7. Write or select label in the reference.

Notice that the text in the button Block is no longer Button Label, but rather Button Text, which was the parameter set up in the Mock. This behavior makes it easier to develop components and only occurs in the Artboard that is used as a component, i.e., other blocks, like the two Buttons in the Artboard with the sidebar, will not show the value of the Mock.

To put different texts on each of the created buttons:

  1. Select the Button, click on the Block title at the beginning of the inspector to close the Block parameters, and only the Button parameters should be visible.
  2. In the Label parameter, write whatever you want, such as Confirm.
  3. Do the same for the other Button, where we will write Cancel instead of Confirm.

Components x Artboard Reference​

As we could see in the examples, the main difference between reusing Artboards through components or references is the possibility of using parameters, which are accessible within the Artboard that is a component through the Context Reference (a component of the type data2-core-types@Reference). In both cases, components and references, changes in the "original" Artboard affect all Blocks of that component type and blocks that reference that Artboard.

There are other differences that we will explore in other tutorials.

Final result​

The final result, that is, the Artboard with a sidebar, the Artboard that is a button component, and the Artboard that references the sidebar and has 2 buttons, is available below and can be copied and pasted into your Builder!