Create a Component

Build a reusable component out of layers.

Save time by creating a personal library of custom components like the iOS and Android component layers built into Origami Studio.

In this tutorial we’ll create a Layer Component, manage component properties and add it to the Layer Library. We’ll cover sharing components in the Create a System tutorial.

Download the tutorial start file to follow along as we rebuild this prototype.

Creating a Component

Let’s begin by converting the Post Group into a Layer Component. Select the Post Group layer in the layer list, right click and select Create Component from the menu.

Alternatively use the Component top menu item to Create Component or Control + Command + G
Alternatively use the Component top menu item to Create Component or Control + Command + G

We have now created a component, let’s rename it. Double click on the name of the New Component and type Post.

Creating Inputs

Layer components can contain both layers and patches, these patches can control layer properties. We can control properties from outside of a Layer component, like the ones already displayed in the layer inspector. This is called publishing a port.

One way to create an input port is from within the component. Enter the component by selecting the component in the layer list and double clicking on the component’s icon, or right clicking and selecting Enter Component from the menu.

Alternatively select the Layer component and press Option + Down to enter and Option + Up to exit.
Alternatively select the Layer component and press Option + Down to enter and Option + Up to exit.

When a component is created, it’s contained within a Group. Here you’ll also notice some commonly used input ports (Enable, Position and Anchor) have been already published and linked to this container Group.

Publishing ports

Now we’re going to publish some other layer properties along side these, allowing us to customize this Post component from it parent level.

Inside the Header Group select the Profile layer in the layer list, next move to the Layer inspector and hover over the Image label until a blue plus appears, then click on the Image property. This will add a layer property patch called Profile Image to the patch editor which we will publish next.

Next, select the Profile Image patch’s input port, click Patch in the top menu and select Publish Port P.

A purple provider patch has been added to the Patch Editor and named after the layer property, which in this case is Image. Let’s rename this patch it to make it clearer what this image will be used for. Select the published patch and use the key to rename, clear the text and type Profile Photo.

Alternatively, double click on the patch title to rename the patch.
Alternatively, double click on the patch title to rename the patch.

Now let’s exit the component to see this renamed port displayed on the parent level. Exiting will navigate us back up through the document, do this by clicking on the menu icon in the breadcrumb navigation in the top left of the patch editor, or using the shortcut .

Now we’re at the parent level, we can select the Post component in the layer list where we’ll see our Profile Photo input that has now been published on the Layer Inspector.

Publishing other layer properties

Let’s re-enter the component and publish a few more properties. Repeat the process of publishing a layer property for the Name and Date text layers, then and the Background Image layer.

Rename the published ports to Name, Date and Background.

Modifying Component Properties

Exit the Component and return to the top level of the document by clicking the menu icon in the top left corner of the patch editor or pressing .

Select the Post component, the ports we just published, Name, Date and Background are displayed in the layer inspector as editable properties. Try editing one by typing your own name into the Name property and seeing the component update in the Viewer.

We can modify the Component’s port details via the Component Info popover. To open the popover, right click on the component in the layer list and select Component Info from the menu or use the keyboard shortcut I.

You’ll see all the inputs and outputs for this component are listed on the left hand side. From here we can add and remove ports, rename them, change their type and organize them into categories on the layer inspector.

Currently the Name and Date text layers are in a category called Typography, as they were published from the Text port on the Text layer which is in a Typography category. Let’s tidy up the component’s inputs by putting all of the ports that make up the Header section into one category.

Select the Profile Photo input port and set the Category property to Header. Follow the same steps for the Name and Date inputs. Now on the layer inspector there is a new category section which contains these properties.

We can also rearrange the ports. Let’s put the Profile Photo port at the bottom of the header category. Do this by clicking and dragging the Profile Photo port below the Name and Date ports.

Creating an Enum

We’re going to add one more input to our component to select the color scheme of the post. We will do this from the Component Info popover rather than going inside the component.

To add a new input port, select Add Input at the bottom of the input list and select the Blank Port option from the menu.

Rename the port by clicking the default name value input and replacing the text with Style.

The Type property is set to Number by default. This determines the input type in the layer inspector and the format of the data passed into the component. The other input types were set automatically when we published the inputs, for example Profile Photo was set to Type: Image and Name was set to Type: Text.

An enum will show a dropdown input in the inspector that allows us to specify a few set values. Inside the component, the enum will output an index which we can use to add logic and state to the component.

Let’s change the Style input to an Enum input type by selecting the Type drop down list and change the value to Enum.

To add options to this Enum input, click the + icon inside the port settings panel. Let’s add an option and name it Light, add one more option and call it Dark.

In the layer inspector there is now a new Style input with a dropdown list containing our two options.

Connecting a new input to layer properties

Now we need to go inside of the component and link this Style enum port to our layer properties. Re-enter the component by right clicking on it in the layer list and selecting Enter Component.

or by pressing Option + down
or by pressing Option + down

There is now a new published input patch inside the component, named Style. This will pass an index number representing the selected option from the drop down list, starting with an index of 0 for the first option. As we only have two options, Light and Dark, the index value will either be 0 or 1.

When the Style option changes, we want to modify the color of the card’s background and header text.

The background color can be set on the Post Group layer. Select this Group from the layer list, find the Background property from the layer inspector and add it to the Patch Editor.

Select the input port on the Background color patch and insert an Option Picker patch, using the o key. By selecting the input port on the patch first, the Option Picker will be set to the correct data type of color and the first value will be set to the layer property’s current value.

Let’s leave the second color option as black for our Dark style. Connect the output from the Style input patch to the Option input on the Option Picker.

Let’s repeat this process for the color property on the Name and Date text layers. Change the second color option on this Option Picker to white.

We only have two style options, so let’s change each Option Picker to have two inputs instead of three. Right-click on the first Option Picker select Number of Inputs from the menu and change the value to 2. Repeat this for the other Option Picker

Exit the component to test this new style input. Select the Post component in the layer list and change the Style option to see our color scheme change.

Reusing Components

Once we’re finished with our component, we can to add it to the Patch Library to easily reuse it. Select the Post component in the Layer List, click Component in the top menu and select Add to User Library.

To add the component in a new document, start a new document by selecting File and clicking New.

To add the component from the Layer Library to our new document, click the + icon in the top right of the window to open the Layer Library and type Post to search for the component we just added. Press Enter to place an instance of this component into the document.

Wrapping Up

Layer Components are just one example of components you can create in Origami, you can also add patch components to your library the same way. For more information on Patch Components, see the Components page.

If you’re looking for ways to share layer and patch components with others, there’s more information on the Components page or learn how to Create a System.

Next Up

Create a System

Distribute a library of components with your team.