Have ideas to improve npm?Join in the discussion! »

    @component-controls/figma-embed
    TypeScript icon, indicating that this package has built-in type declarations

    3.14.6 • Public • Published

    Table of contents

    In action

    Example site

    Overview

    This addon contains a FigmaEmbedBlock that you can integrate into any page, as well as a standalone FigmaPage

    Getting Started

    Install

    yarn add @component-controls/figma-plugin --dev

    Add to a document

    The figma file will be assigned to all the stories in the current document

    in mystory.stories.tsx

    import { Document } from '@component-controls/core';
    
    export default {
      title: 'MyStory',
      plugins: {
        figma: [
          'https://www.figma.com/file/vgf0guEmC5IKtjHJKkRVSr/Button?node-id=0%3A1',
        ],
      },
    } as Document;
    
    

    Add to a story

    The figma file will be assigned only to a specific story. This allows multiple stories in the document to have different figma files associated with them.

    in mystory.stories.tsx

    import React from 'react';
    import { Document, Example, ControlTypes } from '@component-controls/core';
    import { Button, ButtonProps } from './Button';
    
    export default {
      title: 'MyStory',
    } as Document;
    
    export const story: Example<ButtonProps> = () => <Button>click me</Button>;
    
    story.design = plugins: {
      figma: [
        'https://www.figma.com/file/vgf0guEmC5IKtjHJKkRVSr/Button?node-id=0%3A1',
      ],
    };
    

    Insert into an MDX document

    in mystory.mdx

    ---
    title: MyStory
    ---
    import { FigmaEmbedBlock } from '@component-controls/figma-plugin';
    
    <FigmaEmbedBlock
      items={[
        {
          url:
            'https://www.figma.com/file/hS1sLjYq49vjnKXhwGgHwg/Navigation-UI-design-components-Community?node-id=1%3A2309',
        },
        {
          url:
            'https://www.figma.com/file/LtgbR2mbVPbQTNDfDQxbKL/Atanas-Stoyanov-s-Team-Colors?node-id=0%3A1',
        },
      ]}
    />
    

    Configure props globally

    You can globally change the iframe options for the FigmaEmbedBlock component

    in .config/runtime.tsx

    import { RuntimeConfiguration } from "@component-controls/core";
    
    const config: RuntimeConfiguration = {
      ...
      components: {
        figma: {
          width: '200'
        }
      },
    };
    
    export default config;
    

    API

    FigmaEmbedBlock

    FigmaEmbedBlock source code

    properties

    Name Type Description
    items (string | { [key: string]: any; url: string; })[]
    title string optional section title for the block.
    description string optional markdown description.
    id string optional id to be used for the block if no id is provided, one will be calculated automatically from the title.
    collapsible boolean if false, will nothave a collapsible frame.
    data-testid string testing id
    plain boolean inner container variant or plain
    sx ThemeUIStyleObject
    ref ((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>
    name string

    Install

    npm i @component-controls/figma-embed

    DownloadsWeekly Downloads

    133

    Version

    3.14.6

    License

    MIT

    Unpacked Size

    242 kB

    Total Files

    21

    Last publish

    Collaborators

    • avatar