• Figma Embed Examples

    This demonstrates how to embed Figma designs directly in your chalk content.

    Simple Figma Embed

    You can embed a Figma design by simply pasting the URL:

    Figma Embed with Description and Caption

    You can also add descriptions and captions to your Figma embeds:

    Example design from the Chalk Images Figma file
    This embed demonstrates how Figma designs can be automatically imported and optimized as images in your chalk content.

    Figma Embed with Custom Metadata

    You can include custom metadata for organization and tracking:

    Design system component example
    This shows how metadata can be used to track design information and project details alongside the embedded Figma design.

    How It Works

    When you use a Figma URL in a chalk embed block:

    1. URL Parsing: The system extracts the file ID and node ID from the Figma URL
    2. API Fetching: Uses the Figma REST API to download the image (requires FIGMA_ACCESS_TOKEN)
    3. Caching: Downloaded images are cached locally to avoid repeated API calls
    4. Optimization: The Figma image goes through the same optimization pipeline as regular images
    5. Rate Limiting: Built-in rate limiting respects Figma’s API limits

    Setup Requirements

    To use Figma embeds, you need:

    • A Figma access token set as the FIGMA_ACCESS_TOKEN environment variable
    • The Figma file must be publicly accessible or you must have access with your token
    • The URL must include a node-id parameter pointing to a specific node

    Supported URL Formats

    The following Figma URL formats are supported:

    • https://www.figma.com/design/FILE_ID/NAME?node-id=NODE_ID
    • https://www.figma.com/file/FILE_ID/NAME?node-id=NODE_ID
    • https://figma.com/design/FILE_ID/NAME?node-id=NODE_ID

    Additional URL parameters (like t= for tokens) are preserved but not required.