Design Folders

In your projects, you’ll find different types of design files: mock data, components, pages, and prototypes. Let’s explore what these are, how they work, and how to use them effectively.

​

Mock Data

A mock data file contains the data used across your pages and components. We keep this data separate from other files to create a more maintainable and scalable codebase. This separation provides benefits during code export and integration. When you need to update content, you can simply modify the mock data file. Here’s an example:

​

Components

Components are the building blocks of design—reusable pieces that make up pages and products. We start with components to ensure modularity, reusability, and scalability. Each component serves a specific purpose, making code management easier and reducing duplication while maintaining consistency. Common components include sidebars, headers, hero sections, charts, and info cards, etc. Here are some examples:

​

Pages

Pages are the main sections of your application that import components to create your product’s visuals. Examples include dashboard pages, user pages, analytics pages, settings pages, etc. You can create different page variations by specifying existing component names or using prompts. While you can delete pages you don’t plan to use, note that this action cannot be undone. You can interact with pages and imported items, though full functionality is available only in prototypes.

​

Prototypes

Prototypes let you connect multiple pages and focus on complete user flows. They incorporate your project’s mock data, components, and pages. You can share prototypes with others for feedback by clicking “Open in a new tab”. You can create multiple prototypes using the same components and pages from your project. If you need a prototype, simply ask AI in the chat. For example, you can build your landing page, internal dashboard, and main product in the same project by creating three different prototypes, all using the same component library.