17

Design Systems: How do you spec out motion / interactive into a design system?

over 1 year ago from , dwellito.com

I'm working on an article and interested in learning how designers & devs use motion / interactive in their design systems (page transitions, feedback animations, focus animations, gestures, scroll, parallax, other). Specifically the tools, name conventions, translating into code, and any other part of the process.

3 comments

  • Lukas Majzlan, over 1 year ago

    I would love to read more about this!

    2 points
  • oli ingram, over 1 year ago

    Interestingly I think this is one area where there is also a lot of disparity in designer's approach and also a bit of a lack of good tools to actually include in a design system.

    I tend to use a combination of tools to translate design motion; After effects for creating complex animations or transitions. Downside being that the developer has to then translate all of it into css.

    Codepen to code css animations for small touches or hover states is really good.

    Principle is great as it feels more like a real thing, but has some rather buggy feeling nuances, and that still has to be exported as a gif or video in order to send it to someone. It would be great if it could be somehow incorporated into something like invision.

    Invision's tools are a bit lacking, although invision studio seems to have good support for creating different types of interactions I've heard it's not actually great for production work. The invision platform still relies on creating gifs and making them autohotspot to different sections which means it can always feel a bit hacky and sometimes doesn't work correctly.

    There is Framer and framer X which look cool but my .js isn't great so I was having trouble getting much out of it.

    So mostly I rely on after effects, but that means the output is always video and feels a bit disconnected from being able to trigger things by using it like in principle.

    What does everyone else use and do they agree with my comments above?

    0 points
  • Account deleted over 1 year ago

    thanks for telling what you're currently working on.

    -11 points