> 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.

# Figma Component Block

## Figma Component

The Figma Component Block allows you to showcase all the variants of a single component. This block is perfect for displaying different states, sizes, and configurations of a component, providing a comprehensive view of its design possibilities directly within your documentation.

![Design source component block](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/2dd2938eca22c6a858c3f432448f90db689b6f0e1a18106d7735a0079c3a9bcf/docs/assets/images/f4d4e581-figma-pjcgdb1hfqpng.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=20260724T211224Z&X-Amz-Expires=604800&X-Amz-Signature=5b8b30f606fe01160bf2fe33b0506ff17267d47b5be874858a79ca57fa8bab93&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)