Pixso: UI/UX design and prototyping tool that supports real-time collaboration

Pixso is an online design platform specializing in UI/UX design, prototyping and team collaboration. Users can use it via browser or download the client, covering Windows, macOS and mobile devices. It supports real-time multiplayer collaboration, where team members can be invited via a link to synchronize editing of design details such as font size, borders, and colors.Pixso offers features such as automated layouts, component variants, and more to streamline the high-fidelity design process. It also supports interaction design and prototype playback to help teams preview product results. The platform integrates the entire process from brainstorming to design delivery for product managers, designers, and developers. pixso offers a free version that allows users to create projects and invite teams to collaborate, and is currently headquartered in Shenzhen, China, where it will be founded in 2021.

Function List

• Real-time collaborative design: Supports multiple people editing design files at the same time, synchronizing details in real time.
• Automatic Layout and Component Variants: Provides the ability to intelligently adjust layouts and manage components in bulk.
• Interaction design and prototype playback: Support for adding page interactions to simulate the final form of the product.
• Design Delivery: Streamline the development process by exporting cutouts, design annotations, and code with a single click.
• digital whiteboard: Provides unlimited canvas to support brainstorming, flowcharting and team co-creation.
• AI-assisted design: Generate images, dialog boxes, mind maps, etc. to enhance design efficiency.
• File Import and Export: Supports importing and exporting files from Figma, Sketch, and Adobe XD.
• Resource Library & Templates: Provides an online resource community containing ready-made templates and design assets.

Using Help

Installation and Usage

Pixso is available for both online use and client download. The online version requires no installation, just visit https://pixso.cn/If you have a browser, you can log in with your browser. Chrome, Edge and other major browsers are supported. The client version supports Windows, macOS and mobile devices (iOS and Android). The download process is as follows:

1. interviews https://pixso.net/ The download page of the
2. Select the appropriate operating system (Windows or macOS) or mobile device (iOS or Android).
3. Click the "Free Download" button to download the installer.
4. Once the installation is complete, register or log in to your Pixso account to start creating your project.
   If you encounter problems with the download or installation, you can contact the support team via the top feedback channel on the official website on weekdays from 9:00-18:00.

Functional operation flow

1. Real-time collaborative design

The core feature of Pixso is multi-person real-time collaboration. Users can create a project and then invite team members to join via a link. Operation steps:

• Log in to Pixso, click on "New Project" and select the type of design (e.g. UI design or prototype).
• In the program interface, click the "Share" button in the upper right corner to generate an invitation link.
• Send the link to team members, who can join the program directly after clicking on the link.
• During the design process, team members can edit at the same time, and changes (e.g., adjusting colors, borders) are synchronized in real time.
• Use the comment feature to add feedback by clicking on elements on the canvas for easy communication.

2. Automatic layout and component variants

Auto Layout allows the design to adapt to content changes and is suitable for quickly adjusting the interface. Method of operation:

• In the Design screen, select the frame (Frame) that needs to be adjusted.
• Enable the Auto Layout option to set spacing, padding or alignment.
• After adjusting the content, the frame is automatically adapted to keep the layout consistent.
  Component variants are used to manage similar elements (e.g. different states of a button). Creation Steps:
• Select the element and click "Create Component".
• In the Components panel, add variants (e.g. Default and Hover states).
• Quickly apply different styles by switching between variants.

3. Interaction design and prototype playback

Pixso supports adding interactive effects to simulate the real product experience. Operation flow:

• In the design interface, select the elements (such as buttons or pages) to be interacted with.
• Click on the "Prototype" mode to add interaction actions (e.g. click to jump, swipe toggle).
• Set up animation effects (such as smooth transitions or custom jogging curves).
• Click the "Play" button to preview the interaction and check the user experience.
• Once completed, share the prototype link and the team can view it in their browser.

4. Design delivery

Pixso simplifies the design-to-development delivery process. Operational steps:

• Once you have completed your design, click on the "Export" button and select the elements you want to export.
• Select an export format (e.g. PNG, SVG) or generate design annotations.
• Click Generate Code to view CSS or other code snippets.
• Share the delivery link and developers can view the markup and code directly in their browser.

5. Digital whiteboards

Digital whiteboards are good for brainstorming and process planning. Usage:

• Select "Whiteboard" mode in Pixso to access the infinite canvas.
• Use built-in tools (e.g., text boxes, graphs, connecting lines) to draw flowcharts or mind maps.
• Invite team members to join and edit content in real time.
• Draw vector graphics with the Smart Pen tool, which automatically optimizes lines.

6. AI-assisted design

Pixso's AI feature generates design elements. Procedure:

• In the Design screen, open the AI Tools panel.
• Select the generation type (e.g., image, dialog box, flowchart).
• Enter a description (e.g. "Generate a login page button") and AI will automatically generate the corresponding element.
• Drag the generated element to the canvas to adjust the style or position.

7. Import and export of documents

Pixso supports compatibility with other design tools. Import process:

• Click the "Import" button and select Figma, Sketch or Adobe XD file.
• After the file is uploaded, it is automatically converted to Pixso format, preserving layers and styles.
  Export Process:
• Select the design file or element to be exported.
• Select the target format (e.g. Sketch or Adobe XD) and click "Export".

8. Repositories and templates

Pixso provides an online resource community with templates and design assets. Usage:

• From the Pixso main screen, go to the "Resources" page.
• Browse categories (e.g., UI packages, icon libraries).
• Select the template and click "Use" to apply it directly to the project.
• Customize the template content and start designing quickly.

application scenario

1. Team UI/UX Design
   Product teams use Pixso for interface design and prototyping. Designers create high-fidelity interfaces, product managers check the user experience through prototype playback, and development teams get direct access to cutouts and code to speed up the development process.
2. telecommunication
   Distributed teams synchronize editing of design files across geographies with Pixso's real-time collaboration features. Members can join in at any time and discuss details through the commenting feature, improving communication efficiency.
3. Brainstorming and planning
   Product managers use digital whiteboards to organize brainstorms and map user journeys or flowcharts. Team members participate in real time to record ideas and quickly formulate designs.
4. Rapid Prototyping
   Startup teams use Pixso to quickly prototype interactions and show them to investors or users for testing. Prototypes support animations and interactions that simulate real product experiences.

QA

1. Is Pixso free?
   Yes, Pixso offers a free version that allows users to create projects and invite teams to collaborate. Some premium features may require a paid subscription.
2. What platforms does Pixso support?
   Pixso supports online use (browser) and client (Windows, macOS, iOS, Android). The online version does not require installation, and the client needs to be downloaded from the official website.
3. How do I import a Figma file?
   In the main interface of Pixso, click "Import", select Figma file, and then it will be converted to Pixso format automatically after uploading, preserving layers and styles.
4. How do I contact the support team?
   Submit an issue through the feedback channel at the top of the website on weekdays from 9:00-18:00 and the team will respond quickly.