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

# Figma integration

> Import your Figma designs into HypeFrame. Authorize Figma login and bring your frame URLs to generate code automatically.

## What you can do with Figma

Once you've authorized Figma, you can:

* **Import designs** - Share Figma frame URLs to import your designs
* **Generate code** - HypeFrame automatically creates code pages that match your designs
* **Iterate quickly** - Make changes in Figma and bring them into HypeFrame easily
* **Maintain design consistency** - Keep your code aligned with your design system

## Getting started

<Steps>
  <Step title="Authorize Figma login">
    In your HypeFrame dashboard, look for the Figma integration option. Click "Connect Figma" or "Authorize Figma" to begin.

    You'll be redirected to Figma to sign in and authorize HypeFrame to access your designs.
  </Step>

  <Step title="Sign in to Figma">
    If you're not already logged in, sign in to your Figma account. If you don't
    have a Figma account, you'll need to create one at
    [figma.com](https://figma.com).
  </Step>

  <Step title="Approve access">
    Review the permissions HypeFrame is requesting and click "Allow" or
    "Authorize" to approve the connection.

    <Info>
      HypeFrame only needs access to view your designs. It won't modify or delete
      anything in your Figma files.
    </Info>
  </Step>

  <Step title="Get your frame URL">
    Once authorized, go to your Figma file and select the frame you want to
    import. Click the "Share" button and copy the frame URL.
  </Step>

  <Step title="Import to HypeFrame">
    In HypeFrame, paste the Figma frame URL and ask HypeFrame to create a code page based on that design. HypeFrame will analyze the design and generate matching code.
  </Step>
</Steps>

## Using Figma designs in HypeFrame

After authorizing Figma, you can import designs using frame URLs:

### Import a design

> "Create a page from this Figma design: \[paste your frame URL]"

HypeFrame will analyze the design and generate code that matches the layout, components, and styling.

### Update from Figma

> "Update this page to match the latest version of this Figma frame: \[paste updated frame URL]"

If you've made changes in Figma, you can update your code to match.

### Import multiple frames

> "Import these Figma frames and create pages for each: \[list of frame URLs]"

You can import multiple designs at once to build out your application.

## Getting frame URLs from Figma

To get a frame URL from Figma:

1. Open your Figma file
2. Select the frame you want to import
3. Click the "Share" button in the top right
4. Make sure the frame is set to "Anyone with the link can view" (or appropriate permissions)
5. Copy the link
6. Paste it into HypeFrame

<Tip>
  Make sure your Figma file has the right sharing permissions. If the link is
  private, HypeFrame won't be able to access it.
</Tip>

<Info>
  HypeFrame creates code that closely matches your Figma designs, but you may
  need to make adjustments for interactivity, responsiveness, or functionality
  that goes beyond the static design.
</Info>

## What HypeFrame generates

When you import a Figma frame, HypeFrame creates:

* **Layout structure** - React-based code with Tailwind CSS that matches your design's layout
* **Styling** - Colors, fonts, spacing, and visual styles from your design using Tailwind
* **Components** - Reusable React components based on Figma components
* **Responsive structure** - Code that works across different screen sizes

You can then enhance the generated code with functionality, interactions, and features.

## Troubleshooting

### Authorization issues

If you can't authorize Figma:

* Make sure you're logged into the correct Figma account
* Check that you've approved HypeFrame's access
* Try disconnecting and re-authorizing

### Frame URL not working

If HypeFrame can't access your frame:

* Verify the frame URL is correct and complete
* Check that the Figma file has appropriate sharing permissions
* Make sure the frame exists and is accessible
* Ensure you're still authorized to access the file

### Design not matching

If the generated code doesn't match your design:

* Check that you're using the correct frame URL
* Verify the frame is the latest version
* Some complex Figma features may not translate directly—you may need to adjust manually

<Warning>
  Very complex Figma designs with advanced features, animations, or plugins may
  require manual adjustments after import.
</Warning>

## Need help?

<Info>
  Having trouble with Figma integration? Questions about importing designs?
  Reach out at [contact@hypeframe.ai](mailto:contact@hypeframe.ai) for
  assistance.
</Info>