Components are the UI elements that can be used repeatedly in the design. You can use components to reduce the cost and boost efficiency.

1. Name and Manage Components

1.1 Component Panel

The fastest method to access components in the file is via the Component panel. Here is how to do it:

• Click the Component in the left side panel.
• You can also use the shortcut keys: Alt+2

1.2 Structure of Component Panel

On the Component panel, you can access components below:

• Local component: The components you create in the current file.
• Used component: The components from other libraries used in the current file.
• Enabled library: The resource libraries enabled in a team or an organization.

Each section of the Component panel has a title. Pixso will display all the enabled libraries and name these sections after their file names. You can fold these titles to reduce the occupied space, or you can unfold them to view components in these file.

View Components in Resource Library

The components are arranged by this order: File > Page > Frame. You can use the arrow on the left side to unfold the file path and view components in each frame. They are sorted by the initials instead of their order in the original file.

1.3 Associated Components

Pixso defines the relationship between components by:

• Name: For instance, Pixso will put the Design/Component/Activation, Design/Component/Hover and Design/Component/Forbidden together.
• Settings in the original file: For instance, Pixso takes all components in a frame as related components.

1.4 Manage Components on the Canvas

Note: The component group can only contain components, thus you can not add text, descriptions, frames into it, or group the variants.

When you turn components into variants, Pixso will apply the layout and spacing of the current canvas to the variants in the component group. That's why it is recommended to arrange these values in advance to avoid repeat work.

By default, component variants have the purple virtual line stroke and no filling. You can readjust them to fit your brand and design system.

2. Create Reusable Components

You can create components from any object or layer. Components can be as simple as a shape, a button or text. They can also be complex as a card and a menu.

Note: When you create components and build your design system, you’ll find some similar but slightly different components. In this case, you can create the component variant to manage them. It will simplify your component library and enable everyone to find what they need easily.

2.1 Create Individual Component

There are several ways to create individual components:

1. Select the layer you want to create as the component.

2. Choose the way you like to do it

• Create components in the toolbar.
• Right click your selection and choose Create component.
• Use shortcut keys: Ctrl+ Alt+K

3. Pixso will then nest the layer into a special component frame. You can tell the component in the layer panel via the purple icon.

4. On the right side panel, add the description for collaborators. Then the collaborator and developer can check it in the Inspect panel.

2.2 Create Components in Batches

By default, the Create component option means creating individual components. However, Pixso supports creating components in batches. You can choose the things below to create components:

• Objects and layers in the frame
• Objects and layers in the group
• Single layer like the path and vector grid
• Layers in the Boolean operation

Note: If you choose multiple layers that are not mentioned above, Pixso will create components for every single layer.

Here are how to create components in batches.

1. Choose the layer you want to create as components.
2. Click the drop-down button beside the Component option.
3. Choose Create multiple components.
4. Pixso will create a component for every single frame, group, Boolean operation or path.

3. Create Component Instances

Components are resusable UI elements in design. The main component defines element properties, and the instance is the copy of component you can reuse in design. There are several ways to create instances. Which method to use depends on whether your components are published to cloud or to the local.

3.1 Create Instance from Component Panel

You can search for components from the Component panel on the left side. Meanwhile, you can also open other libraries on this panel.

1. Click Component on the left side panel.

2. Locate the component you want to use:

• View local components created in the current file.
• Select components in the enabled library( you need to enable team resource library in advance).
• View personal local components and any component used in the current file.
• Search components from libraries you have access permission, including files in the team and enterprise resource library, or files you have only viewer permission.

3. Select the component and drag it to the canvas to create the instance for it.

3.2 Create Instance by Copy

If you design in the same file, then you can copy a component to create the instance. There are several ways to do it:

1. Use shortcut keys:

macOS: ⌘ Command+D

Windows: Ctrl+D

2. Drag to copy. Press ⌥ Option(Mac) or Alt(Windows) and drag the component to create the instance. Please note that you need to release the mouse before releasing the key, or Pixso will move the component instead of copying it.

3. Copy and paste. Use shortcut keys to copy the component and paste it as an instance.

macOS: ⌘ Command -C and ⌘ Command-V

Windows: Ctrl+C and Ctrl+V

3.3 Replace Instance

Components enable you to create and reuse design elements for accelerating the process and keeping uniformity. When building the interface, we always switch between the instances of components like icons, buttons and cards.

You can search for the component from the current file or enabled team resource libraries and replace it.

After selecting the instance, access the Instance menu from the right side panel. Then, select related components to replace your current selection.

3.4 Overwrite Instance

Components enable you to create and reuse design elements. When using component instances, you can adjust the size, color, font, text and other styles. After that, the adjusted styles won't update at the same time as the main component.

Note: The location of sublayer in an instance can not be adjusted.

4. Detach Instance from Component

You can detach any instance from its main component.

1. From instance menu

• Select the instance you want to detach.
• Click the Instance menu on the right side panel.
• Click Detach from main component.

2. From right-click menu

• Right click the instance on canvas or Layer panel.
• Choose Detach components among all options.

3. Use shortcut keys

You can also detach instances quickly by shortcut keys.

macOS: ⌥ Option +⌘ Command +B

Windows: Ctrl+B

5. Edit Main Component

Any instance you create links to the main component. When you adjust the main component, Pixso will apply your changes to all instances linked to it.

If the main component and instances are in the same file, Pixso will apply the changes instantly. If components have already been published to the resource library, you need to publish them via Component panel so as to check the update in subscribe files.

5.1 Update Component

If you want to revise your design, you can only edit the main component in the original file.

• Unpublished component: Pixso will automatically apply any change you make on the main component to local instances in the file.
• Published component: When the main component and instances are in the same file, the changes will be applied instantly. If you want to apply these changes to instances in other files, you need to publish these changes to the resource library.

5.2 Search for the Main Component

1. Select an instance in the current file.
2. Click the Design option on the right side panel.
3. Click Jump to main component under the Instance section.
4. Choose the main component and do as you want.

Note: Pixso will provide an option for you to return to the instance.

6. Create and Use Variant

When you create components and build your design systems, you’ll find some similar but slightly different components. For instance, you may have multiple button components, each of which has the different status, size and brightness. That’s what variants can do for you. The component variants enable you to put similar components into the same container so that you can find them more easily.

Note: You are not suggested to group different icons using variants. If you have the same icons with different sizes or interactions, then Pixso will recommend you to group them as the component set.

Generally, we call similar components variants. And the container that you put variants together is called component set or component variants.

6.1 Create New Variant

Note: Pixso put variants in an individual frame called component set. The component set can only contain components. Click Create component option in the toolbar or you can use shortcut keys to create a component quickly.

• macOS: ⌥ Option ⌘ Command+K
• Windows: Ctrl+ Alt+K

Here is how to create a new variant:

1. Select a component.

2. Click the + sign beside the Variant option on the right side panel.

3. Pixso will perform operations below:

• Add the same components with the same properties.
• Take 2 components as variants and add them into a component set.

4. You can change these variants visually based on design needs.

Note: By default, component variants have purple dotted lines and no fill by default. You can adjust them to better fit your brand or design system.

6.2 Group Components into Variants

Note: When you add the instance containing variants into the file, Pixso will import all variants from its variant group, which may influence your operation.

If you already have a component library in Pixso, you can group your components as variants. Here are the steps:

• Rename your components and separate them with a slash /.
• Put your components onto the canvas.
• Create your components as variants.
• Name the property of your component.

6.3 Add More Variants to Component Set

Use any method below to add variants to your component set.

• Select the component set, you'll see a + sign. Please note that only when you have at least 1 variants can you see the sign.

• In the Variant section, click New variant.
• Drag other components to the component set so that you can add them as variants.

Note: The current variants won’t be rearranged when dragging other components.

When you add instances that contain variants to the file, Pixso will import every variant of that component set. Thus, importing a large component set will influence the speed and performance of Pixso.

6.4 Configure Variant

1. Select the instance.
2. Check the name of component set on the right side panel, and below that you can configure properties and values.

6.5 Switch Between Instances

When using variants, you can also replace instances like that of common components.

The most effective method to do it is using the Instance menu, which allows you to search components from the current file or any enabled libraries to replace.

1. Select the instance to replace.
2. Click the component name on the right side panel.
3. Select another component to replace the previous selection via the Instance menu.

6.6 Manage Variants

When you add new variants to components, Pixso will add these variants to the component set by default, and the spacing between them is the same. If the components are in another layout before being put into the set, Pixso will retain the original properties of the set.

• Select a variant and move it to the new coordinate in the component set. Pixso allows you to put the variant at any place in the set, including the top of other variants.
• Adjust the size of your component set on the right side panel. You can also do it on the canvas, which is the same as that of regular frames.
• Besides, you can adjust the horizontal spacing between variants via the value on the right side panel.

6.7 Variant Property and Property Value

You can define variant properties and property values based on your needs. You can even map the properties and values of variants to code components in the design system.

Property: You can take it as the feature of variants. For instance, the button component can have properties like type, size, state and something like that.

Property value: For instance, the state property can have values like default, hover, pressed and disabled.

All variants in the component set own same properties and values. However, each individual variant must be the unique value of the combination of the attribute and value permutations.

6.8 Name Property

1. Select a component set.
2. Check the current property name on the right side panel.
3. Click to edit property name.
4. Click the blank space to complete the operation.
5. Repeat this operation to other properties.

6.9 Layer Name and Grammar

Naming is an important aspect of creating and managing variants. Unlike other layer names that you can set as you like, variants in the component set have its exclusive naming rules. The name should contain details about variants’ properties and values. When you double click on the Layer panel to rename variants, you can see these details.

Here are the rules: Property 1 = Value, Property 2 = Value, Property 3 = Value. For instance, Color = White, Shape = Square, Shadow = Yes.

6.10 Publish Updated Component to Team Library

If you make changes to published styles or components, then these changes can only be applied to instances of the current file. If you want to sync these changes to the team, then you need to publish updates.

Pixso will show a blue point on the Component panel to let you know whether there are any changes that need to be published.

1. Click the Component panel on the left side to open the team resource library.
2. Check the list, in which the styles and components that are added, revised or deleted are displayed.
3. Add the related description.
4. Click Publish button and then Pixso will notify you whether your changes have been published.