32

What I really want from a design tool: stateful components

5 years ago from , Nostalgia Maker

So been a lot of hype about new tools, which is great - but no prototyping tool really solves my 'state' issue.

So real world example, I'm working on a page which has 12 component in it, all which have 3 different states. To accurately prototype this for users or developers in invision say, I need to make 12 x 12 x 12 = 1728 permutations of that screen.

Framer.js is the best we've got, but its not like 'I'll just knock this up' in the same way you'd slap up a sketch document.

Page to page transitions are cool but I've honestly only had a few projects which that's an accurate reflection of how they get built. I've never had a use for transition builders - they're just not in the build budget.

Anybody got any solutions? Sketch build stateful symbols pls.

36 comments

  • Marc EdwardsMarc Edwards, 5 years ago

    I agree. States are far more important to me than animation.

    Page to page transitions are cool but I've honestly only had a few projects which that's an accurate reflection of how they get built. I've never had a use for transition builders

    Me too. I see the use, but often that level of fidelity doesn’t have much value for me — they’re only slightly better than a bunch of mockup PNGs, and nowhere near as useful as a more detailed prototype.

    7 points
    • Eliot SlevinEliot Slevin, 5 years ago

      On a scale from 0-1, whats the chance we could see prototyping tools in skala? :D

      0 points
      • Marc EdwardsMarc Edwards, 5 years ago

        0.

        But, there’s a lot of thinking behind that decision, and lots to discuss about it when the time comes.

        2 points
  • Suresh SelvarajSuresh Selvaraj, 5 years ago

    I'm making a Sketch plugin called Diya that lets you animate symbols between different states and reuse them across your prototype. You can use this for buttons, switches and other components in your UI. Here's a quick video of how it is done: https://youtu.be/n27NLZCX2Rs

    You can get the plugin here: http://diyahq.com

    6 points
    • Riho KrollRiho Kroll, 5 years ago

      This is going in a really cool direction. The only problem I have with it is that it's based on artboards, rather than states. This creates unnecessary problems like having to name your layers the same and not being able to have duplicate layer names, etc.

      What about having a list of states that you can trigger within an artboard? Something akin to http://states.design/

      3 points
      • Suresh SelvarajSuresh Selvaraj, 5 years ago

        That is a very interesting suggestion and plugin! I'll definitely look into this possibility too. Right now, the idea is to let you animate between artboards when you want the whole artboard to change, and reuse animated symbols across your prototype. But I like your idea and I'll explore this :)

        2 points
  • Mattan IngramMattan Ingram, 5 years ago

    Personally I think it's kind of hilarious how all the design tools are pushing fancy animations that I don't want in my apps over something as simple as the :hover, :focus, :active states that pretty much any button on the web needs.

    No I don't want something as bloated as Axure to solve this little problem. I want the design tools that everyone uses like Sketch and Figma and supposedly Invision Studio to build the features we actually need.

    Like how do you explain that? Animation tools are sexier and therefore will make them more money or something? I don't feel like this is a feature unique to my needs, while animations are something a much smaller set of designers need.

    4 points
    • David ThornDavid Thorn, 5 years ago

      All your comments are on point.

      There seems to be something inherently unsexy about desktop and web design work when compared to fancy animations and mobile design.

      3 points
  • Andy MerskinAndy Merskin, 5 years ago

    Yes, yes, and yes. This is what I've been dreaming of for years too. Keep an eye on Subform and Prism. They are probably closest to what you're looking for right now.

    4 points
    • Tony GinesTony Gines, 5 years ago

      Subform is looking mighty fine. Kind of a bummer that I have to pay at least $25 to kick the tires on a tool. I'm all for supporting development early, but that seems a little iffy.

      1 point
      • Andrew Washuta, 5 years ago

        I've been following Subform since the Kickstarter (I was also a backer), and trust me, they're on the right path. They're still in development, and it's just two guys working on it, day in and out, but it's worth the investment if you're interested in getting in early.

        2 points
        • C W, 5 years ago

          I'm guessing the state of Subform is still very much a beta that only two guys are working on? Aka not using it for production work, but it's fun to play with?

          0 points
        • David ThornDavid Thorn, 5 years ago

          I ran into bugs the first time I opened it, then tried to just do a lightweight mockup similar to my normal daily work, and it was a headache. Granted it was my first time, but it's been almost 6 months and I foresee maybe re-engaging in another year or so.

          1 point
    • Fredo Tan, 5 years ago

      Have a look at ProtoPie. It can do what you have been dreaming of.

      0 points
  • Jackson AlsopJackson Alsop, 5 years ago

    If you're purely looking at this from a prototyping perspective, then Axure has been doing this with dynamic panels for a long time.

    3 points
    • Ryan Cuppernull, 5 years ago

      Yeah that's what i thought, but I don't use Axure a ton so I am by no means an expert.

      I have run into the same issue with InVision needing a bunch of screens to show variations (especially when prototyping navigation) so started looking at Axure. While it is a bit clunky in some areas and I don't think I'd ever design in it, states, variable data, and live inputs sold me on using it for more complex prototyping.

      There is no direct import from Sketch (last I checked) but you can copy SVG from Sketch -> paste in Axure -> convert to Axure object (or something) and you have your design mostly perfectly pasted into Axure.

      Again, by no means an expert on it, but I was pretty impressed with it for more advanced prototyping needs.

      2 points
      • Pedro Laguna, 5 years ago

        I usually just export everything as a png and import it into Axure. Even some screengrabs when I'm in a pinch.

        1 point
  • Namık Özgür AydınNamık Özgür Aydın, 5 years ago

    We as Toolabs has just released beta of our DS-101 Component Design Studio which I think might be a solution for making stateful components.

    Here is a quick video for making a simple stateful button component :

    https://www.youtube.com/watch?v=jULS0VvZ7ek

    and link to the introduction article :

    https://medium.com/toolabs-ds-101/introducing-toolabs-ds-101-49b919a79f8d

    I will be happy if you have a look and share your comments on the solution.

    3 points
    • Eliot SlevinEliot Slevin, 5 years ago

      Wow, this is a super interesting product - signed up immediately. Will give it a real world shot this week!

      1 point
    • Pedro Laguna, 5 years ago

      Uh, this actually looks pretty good. Trying it right now.

      0 points
  • Nathan ManousosNathan Manousos, 5 years ago

    You can avoid the 12x12x12 problem by using behaviors in Flinto https://youtu.be/mMQ7itrWK8o

    1 point
  • Ezekiel BinionEzekiel Binion, 5 years ago

    Going outside of Sketch and learning just enough code to build your own prototypes is the best solution I've come across for these scenarios. There are some apps for prototyping that could handle stateful components better than Sketch, like Axure, but everything you're looking at is going to have trade-offs. Even if you're not quite ready to code your own stuff yet, something like Webflow could do the heavy lifting for you while you focus on the design. Either way, Sketch is limiting and you'll probably keep bumping up against its edges for complex/stateful prototypes.

    1 point
    • C W, 5 years ago

      I've been experimenting with Webflow for this. Not because I don't know how to code, my background is front-end, but simply because it's faster than coding anything from scratch and the translation from Figma/Sketch to Webflow is pretty straight forward. It's actually not that hard to build responsive prototypes with motion. I wouldn't consider them production ready, but it's certainly more helpful than what I get out of Invision after uploading 8727357 screens to try and accomplish what I want.

      3 points
  • Matt C, 5 years ago

    The product you're looking for is called Axure.

    1 point
    • Jan ZhengJan Zheng, 5 years ago

      haha I forgot about Axure. They're so expensive though, but that's where I got my start as a UX person. Is their product still relevant for startups and freelancers w/ a tight budget?

      3 points
    • Samantha S, 5 years ago

      it's not 'cool' enough

      0 points
    • Matt KMatt K, 5 years ago

      Came here to say exactly this - Axure is brilliant for this sort of thing.

      Axure's variables are especially powerful when combined with states. For example you can create components with logged in and logged out states and use a global variable to determine which gets shown when. So you could set the logged in variable to true when clicking a login button and the page would update to show the logged in component states. Much better than creating two different pages and transitioning between the two.

      You can also animate individual components, which Marvel and other page-based prototyping tools struggle with.

      Also Axure's had responsive components and shared libraries for years. Even though it's 'uncool' and a bit ugly I'm impressed by its power every time I use it.

      Expensive yes, but worth every penny. There's still nothing that touches it.

      0 points
      • Koos Looijesteijn, 5 years ago

        Except for handover of specs. I’d use Azure for the functional, IxD kind of protos and do the visual design in Sketch with dev handover with Zeplin

        0 points
  • Joe CJoe C, 5 years ago

    Atomic has "pages" inside a component that you can map to states, so a navigation element can change have 3 states corresponding to the active page. You can then dynamically change this based on the page of the prototype you're on, so it's pretty realistic. Atomic Components

    Aside: Atomic people, if you're reading this, the only thing that's stopping me from using your tool in production is the inability to override text in a component? I searched for hours to try to understand how this worked, or rather doesn't work. If I create a button component, how can I reuse this in my project if I can't change the button text?? I really hope I've completely missed this feature and it actually exists. (Basically, Sketch symbol overrides)

    1 point
  • Fredo Tan, 5 years ago

    ProtoPie enables you to on-screen interactions easily and offers a bunch of conditional triggers.

    https://www.protopie.io/learn/basics/#Conditional_Triggerhttps://protopie.io

    0 points
  • Valentin de Bruyn, 5 years ago

    Proto.io has had stateful components for quite a while now. Never used it to design things directly in. But quite fast to slap up a prototype with sketch imports, or pngs/jpgs if too complex for it to handle without lag.

    From what I remember, you can chose the states of the components on page load, then add interaction on hover / Click / whatever that sets different states on any component(s) on the page, or even on other pages. Might be worth the look.

    Though don't look for symbols overrides or the likes. It's not going that far.

    0 points
  • Diego Noel, 5 years ago

    Have you tried UXPin? Here's a pretty good youtube video on their States: https://www.youtube.com/watch?v=-i9XM45rUd4

    0 points
  • Dan SimDan Sim, 5 years ago

    I use origami for this. Fingers crossed the fb guys open source this one day because it's a brilliant tool.

    0 points
  • Jan ZhengJan Zheng, 5 years ago

    yea and furthermore, a prototype page should have a way to toggle states for the page, so each component can respond (e.g. Items added to shopping cart; shopping cart is updated, and the item on the shopping page indicates you have one in your cart)

    Would be great if you could toggle between states on the page rather than having to manually comp out each permutation

    I'm working on that for my own prototyping tool, but don't see Sketch/Framer/Figma do that any time soon

    0 points
    • Joe CJoe C, 5 years ago

      As I mentioned in my other comment, check out Atomic components for this!

      0 points