Skip to main content
Connect your Figma account to Kasava to import design files, extract design tokens from Figma Variables, and use your design system in AI-powered code generation.

​
Overview

The Figma integration enables:
  • Import design files - Import Figma files with metadata extraction (pages, frames, components)
  • Extract design tokens - Pull colors, typography, and spacing from Figma Variables
  • Export tokens - Export as CSS Variables, Tailwind Config, or Style Dictionary format
  • Frame export - Export frames as images for use in Plans and code generation
  • Code generation - Use design tokens in V0 and AI Builder prototypes

​
Connecting Figma

1

Navigate to Settings

Click your profile menu and select Settings, or go to Settings > Integrations from the sidebar.
2

Find Figma

Scroll to the Design section and locate the Figma integration card.
3

Click Connect

Click the Connect button to start the OAuth flow.Figma integration card with Connect button
4

Authorize Access

You’ll be redirected to Figma’s authorization page. Grant Kasava access to your Figma files.Figma authorization page
5

Complete Setup

After authorization, you’ll be redirected back to Kasava. The integration card will show a green “Connected” status.
Kasava uses OAuth 2.0 with PKCE for secure authentication. Your Figma credentials are never stored - only OAuth tokens.

​
Importing Figma Files

Once connected, you can import Figma files to extract design metadata and tokens.

​
From the Plan Editor

1

Open a Plan

Navigate to any Plan in your product.
2

Use /design command

In the Plan editor, type /design or select Design from the insert menu.
3

Paste Figma URL

Enter your Figma file URL in the format https://www.figma.com/file/...
4

Choose import options

  • Extract Design Tokens - Enable to pull colors, typography, and spacing from Figma Variables Import Figma dialog with options
5

Import

Click Import File to import the design.

​
From Prototypes Dashboard

You can also import Figma files when creating prototypes:
  1. Navigate to Prototypes in the sidebar
  2. Click the Figma button in the quick actions bar
  3. Enter the Figma file URL
  4. Click Import & Open Builder

​
Design Tokens

Kasava extracts design tokens from Figma Variables, giving you a bridge from design to code.

​
What Gets Extracted

Token TypeDescriptionExample
ColorsColor variables from Figmaprimary: #0066FF
TypographyFont families, sizes, weightsheading-lg: 24px/1.2
SpacingPadding and margin valuesspace-4: 16px

​
Viewing Design Tokens

After importing a file with token extraction enabled:
  1. Go to Settings > Integrations
  2. Click Manage on the Figma integration
  3. Find your imported file in the list
  4. Click to open the Design Token Viewer
Design Token Viewer showing color swatches The viewer shows:
  • Token categories organized by type
  • Color swatches with hex values
  • Support for multiple modes (e.g., light/dark themes)

​
Exporting Design Tokens

Export your design tokens in multiple formats for use in your codebase:
FormatDescriptionUse Case
CSS VariablesCSS custom propertiesDirect use in stylesheets
Tailwind ConfigTailwind CSS theme extensionTailwind CSS projects
Style DictionaryTool-agnostic JSON formatDesign system tooling
To export:
  1. Open the Design Token Viewer
  2. Scroll to the Export Formats section
  3. Click the Copy button to copy to clipboard
  4. Or click Download to save as a file
Use CSS Variables for quick integration, or Style Dictionary for more complex design system tooling.

​
Using Tokens in Code Generation

When you generate prototypes with V0 or AI Builder, Kasava can automatically apply your design tokens:
  1. Import a Figma file with token extraction
  2. When generating a prototype, your tokens are available to the AI
  3. Generated code will reference your design system colors, typography, and spacing
This ensures prototypes match your design system from the start.

​
Managing the Integration

Click Manage on the Figma integration card to:
  • View connection status and connected user
  • See the team/workspace name
  • View last sync timestamp
  • Browse imported files
  • Disconnect the integration

​
Imported Files

The management dialog shows all imported Figma files with:
  • File name
  • Page count
  • Frame count
  • Component count
  • Link to open in Figma
Figma manage dialog showing imported files

​
Disconnecting Figma

1

Go to Settings

Navigate to Settings > Integrations
2

Click Manage

Click Manage on the Figma integration card
3

Disconnect

Scroll to the Danger Zone section and click Disconnect
4

Confirm

Confirm the disconnection. This removes access to all imported files and tokens.
Disconnecting Figma removes access to all imported design files and extracted tokens. Any prototypes using those tokens will no longer have access to the design system data.

​
Troubleshooting

Check that:
  1. Your Figma account is connected in Settings
  2. The Figma file URL is complete and valid
  3. You have view access to the Figma file
  4. The file uses Figma Variables for tokens (not just styles)
Design tokens are extracted from Figma Variables, not legacy Styles. Ensure your Figma file uses the Variables feature for colors, typography, and spacing.
Try clearing your browser cookies for figma.com and attempt the connection again. Ensure pop-ups are not blocked.
OAuth tokens expire periodically. Click Connect again to re-authorize the integration.

​
Permissions

Kasava requests the following Figma permissions:
PermissionPurpose
Read filesAccess file metadata, pages, frames, and components
Read variablesExtract design tokens from Figma Variables
Kasava does not modify your Figma files - access is read-only.

Prototypes

Import Figma designs to create prototypes

Plans

Embed Figma designs in Plan documents

Integrations Overview

View all available integrations