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
We have now created a component, let’s rename it. Double click on the name of the New Component and type Post.
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.
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.
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
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
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,
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.
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
When the Style option changes, we want to modify the color of the card’s background and header text.
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.
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.
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.