README
Table of contents
In action
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 |