49

Design Tools: When do we get stateful components?

over 4 years ago from , UX Designer at milkmonkey

This is one the most important things missing in most design tools.

Sometimes you just want to show some simple interactions on one page. In pretty much all leading tools, you then need to duplicate the artboards multiple times to show each state. Then connect these artboards in prototyping.

Chaos and redundancy ensues.

It would be so much easier to access different states of one component/symbol.

test

48 comments

  • Zack Brown, over 4 years ago

    Haiku has stateful components, and they're probably the most powerful ones out there today — but also likely the most technical. For example:

    Haiku States

    Rather than "artboards as states," Haiku handles states like React — as data. When you snap your Haiku component into a codebase, the very same State you used when you were designing is now a Prop that the developer can trigger from live data & code.

    https://www.haiku.ai

    11 points
  • Jonathan ShariatJonathan Shariat, over 4 years ago

    My opinion is design & code need to be the same. Code needs to be abstracted so that designers are defining visuals, interactions, and copy then the code is connected in the background.

    Designers need to be BUILDING out the front end and tools should make it so you can focus on the design and not the code side.

    6 points
    • Juan Maguid, over 4 years ago

      I totally agree with you, it's something that has been itching in my brain for a while now. Thanks for putting it out so nicely, I'll def take your words and "copy+paste" into developing Sketch2React.io to be even better…

      1 point
    • Hamish TaplinHamish Taplin, over 4 years ago

      Although this sounds great and one day might be possible, the problem with abstractions is that they are often the wrong one. A great deal of assumption has to go into an abstraction and often you find out further down the line that those decisions are wrong and then change them and the abstraction becomes leaky and will eventually fall apart. It will take a huge paradigm shift, possibly involving AI or something to make this viable imo.

      Furthermore, f/e code often contains small decisions around accessibility and performance, etc that has to be decoupled from the design or it starts to restrict it (perhaps rightly in most cases?).

      I think the happy medium for now is that stuff like Framer X can possibly produce not-quite-production code (getting closer to it) so that designing, iterating and testing with users can suffer less friction. Designers can become better versed with their medium and the gap between "design" and "code" becomes smaller.

      0 points
  • Dave HawkinsDave Hawkins, over 4 years ago

    Upvote x1,000,000

    paging @figma listen to the man!

    6 points
  • Or Arbel, over 4 years ago

    You can do that in Sketch with Timeline for Sketch

    No need to create multiple artboards. It has states and transitions and clickable prototyping.

    Here is a video that shows how to make a simple UI Switch: https://www.youtube.com/watch?v=BlX3jMPe0WA

    5 points
  • Jared CJared C, over 4 years ago

    Def not a visual design tool, but this is something Axure excels at. Quite clunky until you get used to its quirks though.

    4 points
  • Eden Vidal, over 4 years ago

    We are doing it (for the web) in https://relate.app. Relate will have states behavior in the 1st release so that you can interact it down the road too.

    4 points
  • Aaron SagrayAaron Sagray, over 4 years ago

    UXPin is doing some interesting work here. Then there's the old standby – Axure, which has had this for years.

    3 points
    • Andrzej TAndrzej T, over 4 years ago

      exactly, there are tools to make mockups and there are tools for making UI, you can't get everything in one piece. Axure is the basis for prototyping

      0 points
  • Account deleted over 4 years ago

    Axure has been doing this for years.

    3 points
    • Andree Huk, over 4 years ago

      haha, yes but somehow Axure does not make people get excited. for

      0 points
    • Andree Huk, over 4 years ago

      Indeed, but somehow Axure does not manage to capture the crowds attention apparently. The UI refresh of Axure has been taking ages. It also felt kinda slow pre-version 7/8.

      The great thing about Axure is that it also adds variables, logic, calc etc.

      Although there are so many applications right now, most only do a fraction of what Axure can do. But, Framer has react under the hood which might really give them the upper hand.

      blended.io

      -1 points
  • Larry Brown, over 4 years ago

    This is now really easy to do using React in Framer X.

    It's still early days but I'm sure in the future they'll allow people to manage simple states via the UI so you don't have to write code if you don't want to or you don't know how to do it.

    3 points
  • Nick Dominguez, over 4 years ago

    This is something I hope Figma is working on or at least thinking about implementing in the future.

    2 points
  • Steve O'ConnorSteve O'Connor, over 4 years ago

    Have you looked at other tools beyond XD/Invision, etc.?

    You can do this in Axure, Proto.io, and a few others already. They can be more difficult to produce high fidelity prototypes - and responsive design is a no-no - but Axure especially is great for quick, interactive wireframing.

    1 point
    • Tom ReinertTom Reinert, over 4 years ago

      Sure, I tried all the tools ;)

      But then again we face the reality that there are certain industry standards (sketch, figma, etc). And I somehow hope that they all will abandon the paradigm of linking whole artboards, which in my opinion is not suited for most product design work.

      There will always be tools that do that one thing right. My point is that I think that stateful components should be a fundamental feature, just as drawing rectangles or entering type.

      0 points
      • Steve O'ConnorSteve O'Connor, over 4 years ago

        Ah, good to hear :)

        It is difficult to not use industry standard tools, although it seems that the industry is much more interested in shiny, high fidelity designs at the moment, so that's what the tools give them.

        I agree that stateful components (like Axure's dynamic panels) and also conditional and math logic, should be essential features.

        0 points
      • Chris Aalid, over 4 years ago

        Axure is more widely used than people think -- despite it not getting a lot of attention regularly like Sketch, InVision, Framer, etc. Definitely a powerful tool.

        2 points
      • Andree Huk, over 4 years ago

        Holy, we do so much agree on this. But it's important to realise that most digital design work is low key, eg. landing pages, content sites, etc

        IOHO the real cool stuff and serious challenges happen around custom software solutions, and for these linking artboards just does not work indeed.

        Agree on the point of fundamentals made above.

        blended.io

        0 points
  • Mak Akhtar, over 4 years ago

    UXPin just launched States as a feature. Read all about it here: https://www.uxpin.com/studio/blog/united-states-animation/

    0 points
  • Hamish TaplinHamish Taplin, over 4 years ago

    I think not only state but a layout model that mimics (or is built on) the same layout model that the platform you are designing for uses. An obvious example being HTML/CSS and the box model, etc. with breakpoints.

    0 points
  • Nelson Abalos JrNelson Abalos Jr, over 4 years ago

    With Webflow interactions and animations, you don't just prototype, you are actually making real code without coding.

    https://webflow.com/interactions-animations

    0 points
  • Dan WilkinsonDan Wilkinson, over 4 years ago

    I think once Figma has this feature, I'll make the switch :)

    0 points
  • Andrew C, over 4 years ago

    I honestly have no idea what I'd do with stateful components or why this is important for other designers.

    Usually state within designs is conveyed by showing the contrast between states. Before and after side by side. A rollover would be nice in prototyping but I can't see much else to do with it. What am I missing?

    0 points
    • Jed Lehmann, over 4 years ago

      Accordians, tabs, dropdowns, sliders, hover states, overlays. I could go on and on. Stateful components in Figma would be an absolute game changer for me. No contest the single thing that makes me go to HTML/CSS so early in the design process is for stateful components.

      3 points
      • Andrew C, over 4 years ago

        Is it mostly a convenience when demonstrating a prototype? (you don't have to have entire screens just for a hover state)

        1 point
        • Jed Lehmann, over 4 years ago

          For me it's more than just a convenience. Without it, my prototypes feel like toys.

          I design web apps, and when prototyping, I want to show multi-page/element flows, with conditionals depending on user input (for example). Simulating a choice a user has made is a nightmare which includes entire screens for each option. So it quickly gets out of hand.

          And before you say "do it in code", I do. I do it in code because I don't have a GUI tool that can do the job, which is a real shame. That's why these design tools are like toys for the kind of work I do. Useful for playing with UI ideas, but very lacking when it comes to interaction.

          0 points
          • Andrew C, over 4 years ago

            Sure, but this is still an illustration of how it improves prototyping. Unless you're coding it yourself on the front-end (which I assume you are based on your post here) there's a huge risk in a messier handoff via hidden transitions or states. You'd still need a Zeplin or equivalent.

            I'm not finding as much delight in this focus for design tools as others seem to be — so I'm just asking to see what the big use cases are I might be missing out on.

            1 point
            • Jed Lehmann, over 4 years ago

              How is "just" improving prototyping not helpful? For me, everytime I send a Figma prototype to a client, it needs to be accompanied with many sentences like "in the real app, this would behave like this...". Because the prototype itself cannot do the job. This increases cognitive processing for viewers of the prototype, and makes it harder to get everyone on the same page. A picture tells a thousand words, but in this case, we have to rely on the thousand words.

              If you don't see a use case for stateful components, then perhaps you aren't designing interfaces with multiple options for interaction on each interface, and with the need to communicate it's behaviour to various stakeholders, not just front end devs. That's fine if you're not, but my use-case absolutely calls for stateful components, and is in fact the only feature that I really miss in Figma.

              It's not about delight for me, it's about communicating the expectations of an interface/workflow to stakeholders/the team.

              0 points
              • Andrew C, over 4 years ago

                My goal here wasn't to upset you.

                It's clear we just have different team dynamics at work—you need better prototyping to get buy-in whereas I don't. It's just not a painkiller for my squads I think.

                0 points
                • Jed Lehmann, over 4 years ago

                  Yep, you nailed it – we just have different needs. My need for buy-in is a good way of putting it.

                  BTW you didn't upset me at all. Hope I didn't piss you off either.

                  Have a good one mate.

                  0 points
          • Hamish TaplinHamish Taplin, over 4 years ago

            Agree 100%. I'm currently designing/prototyping a visual query-builder thing (if statements and shit) and traditional prototyping tools make anything other than high-level "do you know where to click" type tests pretty impossible.

            To really test things with users I need to write code—luckily our app is built in React and I can do so fairly easily but it still takes time and I am fortunate that my experience as a developer helps me understand the problem better and be able to prototype a real UI quickly, using state and all the great stuff React brings.

            1 point
        • Hamish TaplinHamish Taplin, over 4 years ago

          I think it depends. Are you drawing pictures of websites/apps for stakeholder approval and then handoff to devs or are you prototyping/testing/iterating more complicated apps for testing with users? If the former it's not so important.

          0 points
          • Andrew C, over 4 years ago

            We do 10 to 1. Designers are expected to do 10 low fidelity ideas for a design problem. As we converge down the process we build out real prototypes. This helps to include engineering in the design and research process. We test these prototypes with users. Then we converge more from what we've learned. Stakeholders are a part of the process the entire way. We don't pitch.

            For us I can't imagine the horror of handing engineers an invision prototype full of hidden nuance and expecting them to build. When we speak about details with devs not even a coded prototype beats a flat component library where you can see and scrutinize elements side by side. Sounds like this feature is to build prototypes quicker and with higher fidelity—useful, just not a huge pain for me.

            1 point
    • Tom ReinertTom Reinert, over 4 years ago

      It's important because that's how digital products behave. You have elements that can take various states. A website is not an array of artboards, but ONE interactive page.

      Also, I'm talking primarily about prototyping. I think it's very important to present your work as a prototype, and producing them by duplicating and linking 10+ artboards for a single interaction is not they way it should work.

      2 points
      • Andrew C, over 4 years ago

        I think my confusion is — you're almost certainly going to need to illustrate the different states side by side at some point. "This is initial, this is hover, this is active, etc" is a convo you'd have to have with a front-end dev. You may even want to red-line a component (like an accordion) to demonstrate and spec things out to be more precise.

        Makes sense that it helps ease the burden on throwing a prototype together. I'd been reading and hearing people speak about stateful components and I couldn't understand why there was such a high demand (I still don't see it as anything more than a nice to have). But I get the prototyping thing — thanks.

        0 points
        • Jed Lehmann, over 4 years ago

          You certainly do not need to illustrate different states side-by-side. You only do this because of a limitation of your tools. If you can do hover states and other interactions in the prototype, why would you need to show it side-by-side?

          Keep in mind that many designers are also doing their own front-end dev (like me). So I want to show a prototype to my team/client that has some form of reality before I spend the time to code it.

          I can live without stateful components for web design (for the most part), but for web-app design it's a whole other matter.

          0 points
  • Chris Cubellis, over 4 years ago

    Isn't this essentially how sketch components work? I use states in em all of the time

    0 points
  • Parker Hutchinson, over 4 years ago

    Phase is doing this. I have access to the alpha app now. It allows you to create state changes visually. Its very much so in alpha though and probably wont be out until early 2019.

    -1 points