> For the complete documentation index, see [llms.txt](https://docs.blup.in/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.blup.in/~/changes/bxpytJQPpsJWb4ZdG6qm/import-from-figma.md).

# Import from Figma

Import your figma files directly in Blup.

There are some steps to bring your Figma file inside Blup.

### **Step 1: Copy the File ID from the URL**

When you open up your Figma file in a browser, you must copy the text after '.../file/' and before the next '/...'. from the file URL.

<figure><img src="https://4209426742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Me1x4TD1HxodVbK1aDe%2Fuploads%2FIIi7veC6S12dUkr5A6K4%2Ffigma_copy_file_id.png?alt=media&amp;token=99b6e77b-6ef5-40cc-9202-ca4050651601" alt="copy file id from figma file url"><figcaption><p>Copy File FiD</p></figcaption></figure>

### Step 2: Paste the File ID

Paste the file-id you got from the first step and paste it in the File ID of **Import from Figma** dialog box.

<figure><img src="https://4209426742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Me1x4TD1HxodVbK1aDe%2Fuploads%2FLFsDBiRU26BSQmLKjhar%2Ffigma_paste_file_id.png?alt=media&amp;token=bb30287c-61e6-4242-90a0-003ba8e3d291" alt="paste file-id"><figcaption><p>Paste the file-id</p></figcaption></figure>

### Step 3: Create a Token from Figma

<figure><img src="https://4209426742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Me1x4TD1HxodVbK1aDe%2Fuploads%2FAthumebK9dRcOEZbs8KU%2Ffigma_copy_token.gif?alt=media&amp;token=f2fcb7be-0f63-413f-b6f6-2b220667a81d" alt="create token from figma"><figcaption><p>Create token from figma</p></figcaption></figure>

### Step 4 Paste the copied token

Paste the copied token you got from the third step and paste it in the File ID of **Import from Figma** dialog box

<figure><img src="https://4209426742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Me1x4TD1HxodVbK1aDe%2Fuploads%2F3Cq2mn1jH1x77WZ1QyGo%2Ffigma_paste_token.png?alt=media&amp;token=ce29ecb4-08a9-4172-9229-aedb9bb98546" alt="paste the copied token"><figcaption><p>paste the copied token</p></figcaption></figure>

### Step 5: Wait & let the magic happen!

1. Click on **Import design's** Button
2. Select the frames you want to import and click on **Import**
3. And the magic happens.

<figure><img src="https://4209426742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Me1x4TD1HxodVbK1aDe%2Fuploads%2F2IPXTnSQ5pZzqu8IO65D%2Ffigma_import.gif?alt=media&amp;token=92a5c791-a1a5-446b-9455-3f8b5527c1d8" alt=""><figcaption><p>import design</p></figcaption></figure>