story.to.design

Storybook 转 Figma。
从代码自动生成并同步完整的 Figma 组件。
3 步连接你的 Storybook 与 Figma。
100+ 组件需在 Figma 中创建？数千种变体需维护？story.to.design 为你自动完成。

连接你的 Storybook、Backlight 或 Histoire
选择组件和变体
在 Figma 中生成组件

让 Figma 与 Storybook 实时同步，无需任何维护。
想要一键更新数百个变体的最新更改？story.to.design 可将 Storybook 的所有代码更新同步至 Figma。

快速更新：当 Storybook 中代码变更时即时通知，并一键更新 Figma 设计。
视觉审查：在将更新从 Storybook 同步至 Figma 前进行可视化预览，确保设计与代码始终保持一致。

用户喜爱的功能：

生成带自动布局的高质量 Figma 层：story.to.design 在可能的情况下自动生成高保真度的 Figma 层，支持自动布局。
导入嵌套组件：story.to.design 自动识别并链接嵌套组件，让你的 UI 套件更加完整。
增强 Figma 的开发模式：story.to.design 为设计中使用的组件提供完整代码片段，包含所有属性与特性，便于应用开发。
模拟状态：自动模拟组件的伪状态，如悬停、点击、激活和聚焦。
多品牌支持：story.to.design 支持 Storybook “全局”设置以选择主题。可将多个品牌作为不同变体、组件或分属不同 Figma 文件导入。
响应式组件：story.to.design 可捕获不同视口下的组件，断点也可自定义。
本地模式快速迭代：通过本地模式连接本地 Storybook，实现组件的快速迭代。
兼容任意故事框架：HTML/CSS、React、Vue、Angular、Svelte、Stencil、Lit……只要拥有故事，即可使用。