Learn to navigate your workspace

Learn how to work with your workspace

Let's talk about your Prototyper workspace! This guide will help you understand how to make the most out of your workspace, from adding team members to storing prototypes and referencing code. Plus, we'll explore the built-in React playground that makes prototyping even more efficient.

Adding Team Members

Collaboration is key to successful prototyping. To add team members to your workspace:

  1. Navigate to the Organization section in the sidebar.
  2. Click on Invite Members.
  3. Enter the email addresses of your team members and send the invitations.

Once your team members accept the invitations, they will have access to the workspace and can start collaborating on prototypes.

Storing Prototypes

Your workspace allows you to store and manage all your prototypes in one place. Here's how to get started:

  1. Go to the Prototypes section in the sidebar.
  2. Click on Create New Prototype.
  3. Create a design using a prompt or image
  4. iterate
  5. Press the 'Save' button in the top menu bar
  6. Leave notes for team members or change the title.

Referencing Code

Prototyper makes it easy to reference code snippets and documentation directly within your workspace. This is particularly useful for developers who need to keep track of code changes and updates. To reference code:

  1. Open a prototype or project.
  2. Click on the Code tab.
  3. See your code

This feature ensures that all your code is easily accessible and well-documented.

React Playground

One of the standout features of Prototyper is the built-in React playground. This allows you to test and iterate on your React components in real-time. To use the React playground:

  1. Open a prototype.
  2. Click on the React Playground tab.
  3. Start coding your React components and see the changes live.

The React playground is perfect for experimenting with new ideas and quickly prototyping interactive elements.