nowfound

Dev tools · September 28, 2022

story.to.design

Keep your Figma components up to date with code

story.to.design launched on September 28, 2022 with 250 votes, #93 of 3,464 launches that month and more than 95% of that year's launches. The site was still online in September 2026, 4 years on.

In plain words

story.to.design is a Figma plugin that syncs Storybook components into Figma, keeping design files aligned with code. It works across any framework and automatically creates component variants with documentation. The plugin includes simulated interactive states like hover, focus, tap, and active, allowing designers to see how components behave in different scenarios without manual recreation.

written from the facts on this page · September 2026

From the sources

story.to.design is a Figma plugin that imports or updates components from your Storybook to Figma. - Works with any framework - Create variants and documentation - Simulated states (hover, focus, tap, active) ‏‏‎ ‎ Learn more 👉 https://story.to.design

Generate and sync full Figma components from Storybook, Backlight or Histoire. Storybook to Figma. Histoire to Figma.

100+ components to create in Figma? Thousands of variants to maintain? story.to.design does it for you. Get notified any time the code changes in Storybook and update your Figma designs in a click. Review updates visually before bringing them from Storybook to Figma, for design and code that's always aligned. “We want to align design and code and story.to.design looked like the perfect tool for us to use from the ground up.” “I’m blown away... Exactly what I and many on my team have been looking for.” “My team believes our code is the source-of-truth and that story.to.design can help our design process to realize this.” “The workflow is interesting, especially for teams with no designers or…from story.to.design

Does a similar job

all alternatives →
  • Figma Stories2020 · figma.com · ▲91

    Share your Figma creations as a story

  • Design System Automation by Anima2023 · animaapp.com · ▲199

    Bring your code into Figma

  • html.to.design2022 · figma.com · ▲513

    Convert any website into fully editable Figma designs

  • Figma 3.02018 · figma.com · ▲462

    Styles, prototyping and design at scale

  • Figflow2024 · figflow.io · ▲158

    Translate designs into user stories

  • html.to.design 2.02023 · figma.com · ▲300

    Convert any website into fully editable Figma designs

More dev tools this month

the category →
  • /dev/null▲482

    a social network for devs

    Dev tools · 3d ago · dev-null.sh

  • open-source IDE for thoughtful software design. Contribute to devdotfast/whiteboard development by creating an account on GitHub.

    Dev tools · 27d ago · github.com

  • Contribute to reladraw/reladraw development by creating an account on GitHub.

    Dev tools · 25d ago · github.com

  • OpenBot▲362

    Grok Bot alternative: free, local, open-source, multiplayer

    Dev tools · 23d ago · openbot.run

  • Talanoa▲346

    Hi HN, I’m a fullstack developer, and honestly, I’ve lost count of how many side projects I’ve worked on over the years. But one idea kept coming back to me: a different kind of email client. It first came to me in 2014: “What if we could handle emails more like conversations?” Every year, I’d revisit this concept in my “Build Notes.” Ten years later, no one had built exactly what I had in mind — so I finally decided to do it myself. That’s how Talanoa was born. I wanted something focused on people, not timelines. I was tired of marking messages as unread just to remember to reply later, or…

    Dev tools · 20d ago · talanoa.email

  • CoreSpeed▲332

    One MCP for everything your agents need: apps, memory, tools

    Dev tools · 28d ago · corespeed.io

Source: Product Hunt launch ↗

Launched alongside, September 2022

the whole month →
  • IM

    Life & fun · 2022 · dogbunnypuzzle.com

  • A couple of years ago, I had an interesting idea. What if there was a marketplace where all the underlying tech was open-source? The order management system, the storefront, customer support, etc. The marketplace would simply connect to the seller’s infra instead of locking them in. If, for some reason, the seller is removed from the marketplace, their software stays with them and they can continue accepting orders directly. This model can be used to disrupt any marketplace from AirBNB to UberEats: building tech for home renters and restaurants and later, leveraging that to build a competing…

    Dev tools · 2022 · openship.org

  • Polywork▲1,214

    Discover opportunities to collaborate

    Life & fun · 2022

  • xTiles▲1,036

    Organize your ideas & projects visually

    Work · 2022 · xtiles.app

  • Arcade 2.0▲1,026

    The easiest way to showcase your product

    Life & fun · 2022 · arcade.software

  • Maven▲978

    100+ live courses taught by experts, education reimagined

    Life & fun · 2022 · maven.com