7

What is the tool to create an interactive style guide?

over 3 years ago from , UI/UX Designer @ Äventyret

Hi! I'm looking for a way to create an interface style guide (Design System), so developers can test hover states and other interactions but also inspect sizes etc.

Basically like Zeplin, but that can handle different states on buttons for example. Is there one? Preferably that it syncs with Sketch. I could code it, but it's just too much work and hard to keep consistent with my Sketch files.

Any help appreciated! Erik

6 comments

  • Caleb WilsonCaleb Wilson, over 3 years ago

    https://storybook.js.org/

    5 points
    • S B, over 3 years ago

      Storybook +1.

      If you're looking for a tool that's not code first then you're not building a design system. You don't want devs 'inspecting' things to get the right size.. you want components that are ready to go with 0 handoff.

      1 point
      • Erik Fanki, over 3 years ago

        You're splitting hairs now, but sure. I want a tool that enable developers to build a "design system", based on my (a designers) specifications. The problem with tools like Invision and Zeplin, is that even though I can kinda create components, I can't exemplify transition or different states in an easy way. Storybook looks good, but it's aimed towards developers. I need a tool before that in a workflow. I've used CodePen to do this, but then the structure is all up to me to build. And there is no versioning, access control etc.

        0 points
  • Mark VogelaarMark Vogelaar, over 3 years ago

    Perhaps Zeroheights? But as in Zeplin you need to upload different states separately.

    3 points
  • Taylor PalmerTaylor Palmer, over 3 years ago

    My team uses Zeroheight, but there are a few more listed at uxtools.co/tools/design-systems

    0 points