{"id":13752948,"url":"https://github.com/hharnisc/storybook-addon-figma","last_synced_at":"2025-10-25T04:33:14.209Z","repository":{"id":25779588,"uuid":"106185735","full_name":"hharnisc/storybook-addon-figma","owner":"hharnisc","description":"Embed Figma designs in a storybook panel","archived":false,"fork":false,"pushed_at":"2022-12-07T09:04:20.000Z","size":5090,"stargazers_count":189,"open_issues_count":14,"forks_count":19,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T03:41:32.232Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hharnisc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-10-08T15:09:05.000Z","updated_at":"2023-11-17T11:04:35.000Z","dependencies_parsed_at":"2022-07-15T14:47:13.689Z","dependency_job_id":null,"html_url":"https://github.com/hharnisc/storybook-addon-figma","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hharnisc%2Fstorybook-addon-figma","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hharnisc%2Fstorybook-addon-figma/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hharnisc%2Fstorybook-addon-figma/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hharnisc%2Fstorybook-addon-figma/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hharnisc","download_url":"https://codeload.github.com/hharnisc/storybook-addon-figma/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247535517,"owners_count":20954576,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T09:01:13.249Z","updated_at":"2025-10-25T04:33:09.179Z","avatar_url":"https://github.com/hharnisc.png","language":"JavaScript","funding_links":[],"categories":["Community Addons","七、Rest API 集成（优化描述，补充实用工具）","Rest API integrations"],"sub_categories":[],"readme":"# storybook-addon-figma\n\n![Storybook Addon For Figma](https://raw.githubusercontent.com/hharnisc/storybook-addon-figma/master/storybook-addon-figma.gif)\n\nLive Demo: https://hharnisc.github.io/storybook-addon-figma\n\n## Quickstart\n\nInstall the addon\n\n```sh\nnpm i --save-dev storybook-addon-figma\n```\n\nRegister the plugin\n\n```jsx\n// in .storybook/addons.js\nimport '@storybook/addon-actions/register'\n// register the Figma addon\nimport 'storybook-addon-figma/register'\n```\n\nLink a Figma design to your story\n\n```jsx\nimport React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { WithFigma } from 'storybook-addon-figma'\n\nstoriesOf('Button')\n  .add('With Figma', () =\u003e (\n    \u003cWithFigma\n      url={'https://www.figma.com/file/LbcvMJxDtshDmYtdyfJfkA72/Button-Primary'}\n    \u003e\n      \u003cbutton\u003eMy Button\u003c/button\u003e\n    \u003c/WithFigma\u003e\n  ))\n```\n\n\n\n## Embed a different design on each story\n\n```jsx\nimport React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport { WithFigma } from 'storybook-addon-figma'\n\nstoriesOf('Button')\n  .add('primary', () =\u003e (\n    \u003cWithFigma\n      url={'https://www.figma.com/file/LbcvMJxDtshDmYtdyfJfkA72/Button-Primary'}\n    \u003e\n      \u003cbutton\u003eMy Button\u003c/button\u003e\n    \u003c/WithFigma\u003e\n  ))\n  .add('secondary', () =\u003e (\n    \u003cWithFigma\n      url={'https://www.figma.com/file/LbcvMJxDtshDmYtdyfJfkA72/Button-Secondary'}\n    \u003e\n      \u003cbutton\u003eMy Secondary Button\u003c/button\u003e\n    \u003c/WithFigma\u003e\n  ))\n```\n\n## Or use the decorator to put the same design on each story\n\n```jsx\nimport React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport figmaDecorator from 'storybook-addon-figma'\nimport App from './components/App'\n\nstoriesOf('App')\n  .addDecorator(figmaDecorator({\n    url: 'https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File',\n  }))\n  .add('My App', () =\u003e (\n    \u003cApp /\u003e\n  ))\n```\n\n## Show Figma design in right panel\n\nIf you find that the Figma panel at the bottom is not big enough to fit your designs, it is possible to move the panel to the right of the window instead, where it is possible to give it more space. This requires the [@storybook/addons-options](https://github.com/storybooks/storybook/tree/master/addons/options) addon. Note however that it is only possible to do this for **all** stories at once, and will move all addon panels to the right. A simple setup is shown here.\n\nInstall the addon\n\n```sh\nnpm install --save-dev @storybook/addon-options\n```\n\nRegister the options addon in your `addons.js`\n\n```jsx\n// in .storybook/addons.js\nimport '@storybook/addon-actions/register'\nimport 'storybook-addon-figma/register'\n// register the options addon\nimport '@storybook/addon-options/register';\n```\n\nImport and use the `setOptions` function in your `config.js` file\n\n```jsx\n// in .storybook/config.js\nimport * as storybook from '@storybook/react';\n// import the options function\nimport { setOptions } from '@storybook/addon-options';\n\n// set option to show panel in right side\nsetOptions({\n  downPanelInRight: true,\n});\n\nstorybook.configure(() =\u003e require('./stories'), module);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhharnisc%2Fstorybook-addon-figma","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhharnisc%2Fstorybook-addon-figma","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhharnisc%2Fstorybook-addon-figma/lists"}