Import Component Library

Pixso supports importing Sketch and Figma component libraries. If you have created component libraries on these 2 platforms and use those components in the design file, then you can import all of them to Pixso via the function mentioned above. Component instances contained in the imported design file can still receive updates from the library. In this way, you can switch from Sketch or Figma to Pixso seamlessly.

1. Import Sketch Resources

1.1 Entry and Preparation

1. Locate the Component Library Import option in the workspace. Click on it and you'll see a pop-up window.

2. Before getting started, please select a team to import the library. It is very important to choose the right team for resource interworking. So you need to confirm the things below:

• The component library you import can only be used in the team you choose, and you need to import the design files together with the library.
• To avoid repetition of the library, multiple branch files or multiple copies of a component library are not allowed to exist in the team at the same time. Please ensure that the component library is the version in use before importing it.
• Only the team admin can import the team library. If you find there are lacking component libraries when uploading design files, please contact the team admin.
• There is no special order for importing component libraries and design files.

1.2 Import Sketch Component Library

Team admin can upload the component library by following steps below:

1. After you see the popup window and confirm the team to import the library, click The Sketch component library option and choose the target file. You can import multiple files all at once.

2. The imported library will be published as a team resource library automatically, and it will interwork with all Sketch files containing its components in the team.

Note: When uploading a team resource library, please don't upload multiple branch files or copies in the same team. If there are same files in the team, a prompt will pop up to tell you what to do next.

1.3 Import Sketch Design Files

All editors in the team can import Sketch design files. If you aim to import Sketch component library and design files, please follow the steps below.

1. Choose The Sketch design draft option and select the file you want to import.

2. If there is an interworked Sketch library in the team, then you can open the imported design file directly and select the instance. After that, click Jump to main component to open the corresponding library (you can access the library only when you have access permission).

3. If there are any updates to the library file, a pop-up window will be displayed in the bottom right corner.

4. Click View option to check more details. Then click Update to sync the update.

2. Import Figma Resources

2.1 Preparations & Access

(1) Preparations:

• Use Google Chrome and install the browser export extension (download link).

• Click the [three-dot icon] in the upper-right corner of the browser .

Click [Browser extensions], choose [Manage extensions] and you’ll be redirected into a new page. In the new page, enable [Developer Mode] in the top right corner.

Drag the downloaded extension ZIP file into the current page.

• If you see the card shown in the image below, the installation is successful.

Note: After successful installation, you should refresh or reload the Figma file before performing the export.

2.2 Entry and Preparation

1. Locate the Component Library Import option on the top right corner in the Pixso workspace. Click on it and switch to the Figma tab. You need to download the component library and design files from Figma first.

Note: The Figma component library means the file you published as the team library on Figma. There should be cloud components and styles in this library. The design file means the one that has used team resources. If your design file contains both main components and instances, please import it to the Figma component library.

2. Please confirm the things below before importing files:

• Please select a team to import the library. It is very important to choose the right team for resource interworking.
• Only the team admin can import the team library.
• The library must contain styles. If there are no styles in the library, chances are that the imported library can not interwork with instances. Therefore, it is recommended to create a style in the component library.
• Pixso will check if your file is repetitive. If there is already the same file in the team, you'll be prompted to ignore or overwrite.

2.3 Import Figma Component Library

The team admin has the right to import component libraries. If you are the admin, please drag or click to choose the library you want to import, and follow the instructions to finish the process.

The imported library will be published as a team resource library, and it will interwork with all Figma design files containing its components in the team.

2.4 Import Figma Design File

All editors in the team can import Figma design files. If you aim to import Figma component library and design files, please follow the steps below.

1. Choose The Figma design draft option and select the file you want to import.

2. If there is an interworked Figma library in the team, then you can open the imported design file directly and select the instance. After that, click Jump to main component to open the corresponding library (you can access the library only when you have access permission).

3. If there are any updates to the library file, a pop-up window will be displayed in the bottom right corner.

4. Click View option to check more details. Then click Update to sync the update.