@component-controls/figma-embed

Embed figma files in your documentation

Usage no npm install needed!

<script type="module">
  import componentControlsFigmaEmbed from 'https://cdn.skypack.dev/@component-controls/figma-embed';
</script>

README

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