> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.knapsack.cloud/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.knapsack.cloud/_mcp/server.

# Design Sources

## Overview

To get started, visit Design Sources located under the Design section. There you'll find the design source file manager. From here you can add a new design source by selecting the New Design Source button at the top.

![Design source file manager](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/67f4a698d81b340f922c5330cca944b0fcba25d74edd584b0c3650fc3374623c/docs/assets/images/88cbff58-figma-wrwscvse3png.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260724T211318Z&X-Amz-Expires=604800&X-Amz-Signature=7bd5fee167241d2b77161bc4a61722cdb51727f24da57eb73a6bcb4e178d6e86&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)

In the Add Design Source modal, enter a valid Figma file URL for the desired file.

If you are not logged in at this point, you will be prompted to sign in to your Figma account.

The file will begin pre-caching and may take a moment before it is ready to add.

![figma.png](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/edf7b26553c7b6b04d4fa2f59250ede898738f609477e4c0f2519a0a0801d26b/docs/assets/images/6332e00b-figma-cdrkjf6fd7png.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260724T211318Z&X-Amz-Expires=604800&X-Amz-Signature=63bfbeb9fdfe5552a3d0ca7c5fc332ec23d5fe47c514ee61a9409cd99909ab94&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)

To add a design source, you must be at least a **Contributor** and have **view access** to the Figma file, or access via a **share link** for the design source.

## File management

![Design source file management](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/ea4c160e137198d3c4145fd51db9aca18d83d2c1898ff4725606245813f62a20/docs/assets/images/7e328f68-figma-jjpswtqgb4png.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260724T211318Z&X-Amz-Expires=604800&X-Amz-Signature=348c47c05ee8f60e2c4151943cb1aa05d496eb7a5df375a30c3249818d0ce87f&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)

If everything worked as planned, your new file will appear in the list of design sources. From here you can view the file in Figma, update to the latest version, or delete the file from the workspace.

In order to manage the design source you'll need to have the access to the Figma workspace for that file.

A new version of a Figma file is available 30 minutes after inactivity or after a user has created a new version manually.

Learn more about how Figma handles versioning [here](https://help.figma.com/hc/en-us/articles/360038006754-View-a-file-s-version-history)

## Pattern Page

With our file added we can begin using our Figma designs within the Knapsack documentation. The first place we'll explore is the pattern page.

Create a new pattern or visit an existing pattern page and add a new tab and select Design Source.

![figma.png](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/ac3e57b072d532c66d65e0164c2571c467360975d05eadae013f7e4af0b7be21/docs/assets/images/4a35df57-figma-uk56tt3cpng.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260724T211318Z&X-Amz-Expires=604800&X-Amz-Signature=2e11354cfdfc1da1258a41889aa285b1d9c0277cb426807ba0c340ffe8230fdf&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)

This will open the Design Source Component modal where can see all of our component designs imported from Figma.

![Component selection modal](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/e3bff70180da3081c7646bbcd833a6ba7d6225a8f8092dd8998ec74feeb1e4a3/docs/assets/images/d4d39923-figma-qh5rwp-rgfpng.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260724T211318Z&X-Amz-Expires=604800&X-Amz-Signature=1ad13eee8145397a87617dd71e78f83f6c57f6b87b8bc1e669ed1e835b310ac9&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)

Once we've selected the desired component and saved the selection, our component variants and component properties are added to the pattern.

![figma.png](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/11c5494ddac6909b05fcc47a613a466fb66abf0d007abfdc24c4e0d98dc0073f/docs/assets/images/f8480560-figma-vuh54zydrbpng.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260724T211318Z&X-Amz-Expires=604800&X-Amz-Signature=e9e8bb66e176b0b1cd37db863c45bcd3a66150e3e27a92f4a4bbac7657f44f40&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)

Figma uses names prefixed with either a `.` or `_` to designate private components in the Figma file. These files are not published to the component library and therefore not imported with the Figma design source.

If you'd like to integrate these components into Knapsack, you'll need to remove the `.` or `_` prefix from the component name in Figma.

## Account Management

If you need to remove your Figma login or update your user information, visit the profile settings page where you will find the Connected Accounts section for managing your Figma user login.

![](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/aa69024143cd76aafb8b148094af32bd419e3cc23bca5b1533c17b930efda7fd/docs/assets/images/9fcd2055-figma-f-hbafzqj8png.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260724T211318Z&X-Amz-Expires=604800&X-Amz-Signature=6ec5923e8632782ad2b2afa1c91c51ee2638262c4b8adb58680b7afd759622b1&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)