Quick Start Guide

Get started with MagicPath in minutes.

Create your first project

Click the "New file" button in the sidebar to create your first project. You'll be taken to the canvas where you can start creating.

Creating a new file in MagicPath — Click 'New file' to create your first project

Describe what you want

Use natural language to describe what you want to create - from simple components to complete pages. For example: "A sign in card with regular email, google and github" or "A landing page for a SaaS product"

Creating a component with a text prompt — Type what you want to create and watch the AI generate it

Refine and iterate

Continue the conversation to refine your design, change styles, add features, or modify behavior. You can edit with AI through chat or manually like you would in a regular Figma file. The AI will understand your requests and update your design accordingly.

Editing a component with AI and manual controls — Refine your component with AI chat or visual editing tools

Export your code

When you're satisfied with your design, export the production-ready React code to use in your projects.

Exporting component code — Click the Code tab and download your production-ready React code

Next Your First Design