---
title: Export to Figma
description: Apply a tweakcn theme to the shadcncraft Figma UI kit so designs match your code.
url: https://tweakcn.thally.app/guides/export-to-figma
---

# Export to Figma

Apply a tweakcn theme to the shadcncraft Figma UI kit so designs match your code.

**Export to Figma** connects tweakcn to [shadcncraft](https://shadcraft.com),
a paid Figma UI kit for shadcn/ui. The shadcncraft Figma plugin applies your
tweakcn theme to the kit components. tweakcn does not make a Figma file by
itself.

![Export to Figma dialog for tweakcn and shadcncraft](/images/figma-dialog.png)

## Before you begin

- A Figma account.
- A shadcncraft license. The dialog shows the current price.
- A finished theme in the editor. [Save it](/sharing/save-and-share) first, so
  you can open it again.

#### Open the dialog

In the tweakcn header, select **Export to Figma**.

#### Get the kit

Select **Buy now** to buy shadcncraft, or **Preview Blocks** to see the kit in
Figma first. Download the kit and open it in Figma.

#### Open the plugin

In Figma, run the shadcncraft plugin.

#### Apply your theme

Use the plugin to import your tweakcn theme. The plugin updates the kit
components with your colors, radius, and fonts.

> **Not tested in these docs:**
The plugin steps come from the tweakcn dialog. These docs did not test the
paid kit. See the shadcncraft documentation for the current plugin steps.

## Without a paid kit

To use the colors in any Figma file, open **Code**, select hex as the color
format, and copy the values into Figma color styles.