![]() ![]() For example: View designs in StorybookĬlick the "Design" tab in the addon panel to view the embedded Figma design. In Storybook, add a new parameter named design to your story and paste the Figma URL. Or right click on the frame and go to "Copy/Paste as" » "Copy link". You can embed files, prototypes, components, and frames.Įmbed a file or prototype, click the "Share" button to generate a unique URL for the file then click "Copy link".Įmbed a component or frame check "Link to selected frame" in the Share dialog. In Figma, open the file you want to embed in Storybook. storybook/main.js|ts) to include the addon. Run the following command to install the addon. Alternatively, open the plugin by using the command palette (in Mac OS, use Command + /, in Windows, use Control + /), then type Storybook Connect.ĭesigns addon allows you to embed Figma files and prototypes in Storybook. ![]() Once they're connected, you'll be able to view the story by clicking the link in the sidebar. The plugin does not support linking stories to Figma layers. That means the link persists even as you push new code. In Figma, select the component, open the plugin, and paste the URL.Ĭhromatic will automatically update your linked stories to reflect the most recent Storybook published on the branch you linked. Make sure it’s on the branch you want to link. Go to a story in a Storybook published on Chromatic. Link stories to Figma components, variants, and instances. In Figma, open the command palette (in Mac OS, use Command + /, in Windows use Control + /) and type Storybook Connect to enable it.įollow the instructions to connect and authenticate with Chromatic. Go to Storybook Connect to install the plugin. It provides the index, versions, and access control that back the plugin. Install pluginīefore we begin, you must have a Storybook published to Chromatic. It’s powered by Storybook embeds and Chromatic, a publishing tool created by the Storybook team. Storybook Connect is a Figma plugin that allows you to embed component stories in Figma. There are two ways to integrate Storybook and Figma. Figmaįigma is a collaborative UI design tool that allows multiple people to work on the same design simultaneously in the browser. That helps you debug inconsistencies earlier in the design process, discover existing components to reuse, and compare designs to stories. Storybook integrates with design tools to speed up your development workflow.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |