> ## Documentation Index
> Fetch the complete documentation index at: https://docs.onspace.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Figma to OnSpace 

> Figma to full-stack app.

The Figma to OnSpace AI integration represents a revolutionary approach to transforming static designs into functional, full-stack applications. This seamless workflow eliminates the traditional gap between design and development, enabling designers to create production-ready apps without writing code.

### **Product Architecture**

```
Figma → OnSpace AI → Production App
```

<img className="block dark:block" src="https://mintcdn.com/soulzaiinc/DP_um_9EGfdPiKQZ/images/figma-onspace.png?fit=max&auto=format&n=DP_um_9EGfdPiKQZ&q=85&s=90b2d4d6ecdd6d1b73064a018b894427" alt="Hero Dark" title={true} style={{ width:"100%" }} width="1280" height="720" data-path="images/figma-onspace.png" />

This integration chain provides:

* **Design Export**: Direct conversion from Figma to structured code
* **AI Enhancement**: Intelligent transformation of static designs into dynamic applications
* **Full-Stack Capabilities**: Backend integration, database connections, and deployment
* **Real-time Iteration**: Live preview and instant updates

## **Getting Started: From Figma to Live Application**

### **Step 1: Prepare Your Figma Project**

First, you'll need to share your Figma project publicly:

1. **Navigate to your Figma project**

<img className="block dark:block" src="https://mintcdn.com/soulzaiinc/DP_um_9EGfdPiKQZ/images/figma-1-1.png?fit=max&auto=format&n=DP_um_9EGfdPiKQZ&q=85&s=6e914ecd3bbdb7a467d6720872bda4fc" alt="Hero Dark" title={true} style={{ width:"100%" }} width="1918" height="1079" data-path="images/figma-1-1.png" />

2. **Click the "Share" button** located in the top right corner of your Figma interface
3. **In the sharing popup window, click "Copy Link"** (top right of the popup)

<img className="block dark:block" src="https://mintcdn.com/soulzaiinc/DP_um_9EGfdPiKQZ/images/figma-1-2.png?fit=max&auto=format&n=DP_um_9EGfdPiKQZ&q=85&s=8370819c75c8fef2da51b9df720eeec0" alt="Hero Dark" title={true} style={{ width:"100%" }} width="1065" height="647" data-path="images/figma-1-2.png" />

**Important**: Ensure that access permissions are set to **"Anyone can view"** - this allows OnSpace AI to access your design

### **Step 2: Access OnSpace AI**

Visit [**OnSpace.ai**](http://OnSpace.ai) and select your project type:

* **For Mobile Applications:** [Click the mobile project](https://onspace.ai/ai-app-builder)
* **For Website Projects:** [Click the website project](https://onspace.ai/ai-website-builder)

### **Step 3: Import Your Design**

<img className="block dark:block" src="https://mintcdn.com/soulzaiinc/DP_um_9EGfdPiKQZ/images/figma-3-1.jpg?fit=max&auto=format&n=DP_um_9EGfdPiKQZ&q=85&s=b9d67bc1a0cde857908d66d4624ffec2" alt="Hero Dark" title={true} style={{ width:"100%" }} width="2874" height="1322" data-path="images/figma-3-1.jpg" />

1. **Locate the Figma import option** - Click the **Figma button** under the chat creation area

<img className="block dark:block" src="https://mintcdn.com/soulzaiinc/DP_um_9EGfdPiKQZ/images/figma-3-2.jpg?fit=max&auto=format&n=DP_um_9EGfdPiKQZ&q=85&s=afca44e56ca41f78d64ebc81e298b240" alt="Hero Dark" title={true} style={{ width:"100%" }} width="1880" height="968" data-path="images/figma-3-2.jpg" />

2. **Paste your Figma project URL** into the provided field

<img className="block dark:block" src="https://mintcdn.com/soulzaiinc/DP_um_9EGfdPiKQZ/images/figma-3-4.jpg?fit=max&auto=format&n=DP_um_9EGfdPiKQZ&q=85&s=0786c556a39948e5f5230127a7a21351" alt="Hero Dark" title={true} style={{ width:"100%" }} width="1786" height="920" data-path="images/figma-3-4.jpg" />

**Note**: If your Import button appears grayed out or unclickable, this indicates that you have pasted an **invalid Figma URL**.
3\. **Click the "Import" button** to begin the process

<img className="block dark:block" src="https://mintcdn.com/soulzaiinc/DP_um_9EGfdPiKQZ/images/figma-3-3.jpg?fit=max&auto=format&n=DP_um_9EGfdPiKQZ&q=85&s=52156f3d21cf489f3f8a5b671eba4b93" alt="Hero Dark" title={true} style={{ width:"100%" }} width="2868" height="1410" data-path="images/figma-3-3.jpg" />

### **Step 4: AI Processing**

Once you've imported your design, OnSpace AI will:

* **Fetch your Figma project** automatically
* **Analyze your design components** and layouts
* **Begin the transformation process** into a functional application

## **What Happens Next?**

OnSpace AI will intelligently convert your static Figma design into:

* Interactive UI components
* Responsive layouts
* Functional application logic
* Clean, production-ready code