storybook-addon-figma 具有擴展的淺色和深色主題

快速入門

安裝擴充功能

npm i --save-dev @ecomponent/storybook-addon-figma-extended

註冊外掛程式

// in .storybook/addons.js
import '@storybook/addon-actions/register'
// register the Figma addon
import '@ecomponent/storybook-addon-figma-extended/register'

將 Figma 設計連結到你的 Story

import React from 'react'
import { storiesOf } from '@storybook/react'
import { WithFigma } from 'storybook-addon-figma'

storiesOf('Button')
  .addDecorator(figmaLightDecorator({
    urllight: 'https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FLtDkaiW5hZhZhZbKEkPyZ9Pk%2FTesting-1%3Fnode-id%3D425%253A552',
    allowFullScreen: true
  }))
  .addDecorator(figmaDarkDecorator({
    urldark: 'https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File',
    allowFullScreen: true
  }))
  .add('With Figma', () => (
      <button>My Button</button>
  ))

在右側面板中顯示 Figma 設計

如果你發現底部的 Figma 面板不夠大以容納你的設計，可以將面板移動到視窗的右側，這樣可以提供更大的空間。這需要 @storybook/addons-options 擴充功能。但請注意，這只能一次性對所有 Story 執行，並將所有擴充功能面板移動到右側。這裡顯示一個簡單的設定。

安裝擴充功能

npm install --save-dev @storybook/addon-options

在你的 addons.js 中註冊 options 擴充功能

// in .storybook/addons.js
import '@storybook/addon-actions/register'
import '@ecomponent/storybook-addon-figma-extended/register'
// register the options addon
import '@storybook/addon-options/register';

在你的 config.js 檔案中匯入並使用 setOptions 函式

// in .storybook/config.js
import * as storybook from '@storybook/react';
// import the options function
import { setOptions } from '@storybook/addon-options';

// set option to show panel in right side
setOptions({
  downPanelInRight: true,
});

storybook.configure(() => require('./stories'), module);