Import Components from Storybook

Storybook 6 & lower

If you have a Storybook version 6 or lower we recommend that you import the your components by navigating to the root folder of your storybook and use Locofy CLI. Alternatively you will need to update your storybook and documentation to Storybook 7 or greater to use the direct Storybook import.

Storybook 7+

How to import components from a Public Storybook

1. Create a new project in Locofy Lightning.
2. In the connect your components library select Import from Storybook.
3. Click continue and select the Public Storybook tab.
4. Paste your Public Storybook URL in the input box and click Continue.
5. The locofy plugin will connect the Storybook components and will automatically map its components to the Figma components. You can also manually map the components accordingly.

How to import components from a Private Storybook

1. Create a new project in Locofy Lightning.
2. In the connect your components library select Import from Storybook.
3. Click continue and select the Private Storybook tab.
4. Get the Locofy Addon

• Install the Locofy Addon to Storybook

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

yarn add -D @locofy/storybook-addon

• Add the addon @locofy/storybook-addon to the module.exports in the file called .storybook/main.js
  Sample: module.exports = { addons: ['@locofy/storybook-addon'] }

• Paste token
  Create a .env file at the root folder and paste the token copied from the Locofy Plugin STORYBOOK_LOCOFY_TOKEN=""

• Build Storybook

npm run build-storybook

yarn build-storybook

• Sync to Locofy

npx locofy sync

yarn locofy sync

• Serve Storybook locally

npx serve storybook-static

yarn serve storybook-static

5. Click on the Locofy Addon, select the components you want to import and sync your selected components to Locofy plugin. See the Bring your Storybook components to Locofy (opens in a new tab) documentation for more info.
6. After following the above steps and clicking on I have completed all these, the locofy plugin will connect the Storybook components and will automatically map its components to the Figma components. You can also manually map the components accordingly.