Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Imagining a Fluid Future for Design Tools

Imagining a Fluid Future for Design Tools

Modern design tools are great, but their efforts to reflect the responsive reality of web design have been lacking. Too often, they’re stuck in static design thinking, or adaptive layouts like mobile, tablet, and desktop.

The rise of design systems has helped, allowing for easy preview of responsive patterns. But our design tools aren’t yet equipped to allow designers to move easily from design to code.
Where are the tools that allow for truly fluid layouts? What would they even look like?

In this talk, Jason will look at how our design processes have changed, how design tools should integrate with design systems, and how close we can get to an ideal fluid design tool today.

Jason Grigsby

October 10, 2022
Tweet

More Decks by Jason Grigsby

Other Decks in Technology

Transcript

  1. Old Web Development Process Planning Static Wireframes Static Mockups HTML,

    CSS and JS Launch Design Development Hando There are still design decisions in here
  2. Old Web Development Process Planning Static Wireframes Static Mockups HTML,

    CSS and JS Launch Design Development Hando There are still design decisions in here There are development decisions in here
  3. Well-considered design system components Multiple use cases Variations Interaction and

    behavior Animation Responsive Di erent types of input Accessibility Performance Consistency Documentation
  4. Designers o en maintain their own system Duplicate design system

    work to support design tool need Challenging for implementors when designs don’t match DS components Can’t take full advantage of thought put into design system components Can create confusion about which is the source of truth
  5. Issues with Code Generated by Design Tools Fixed width. Isn't

    responsive. Fails to use your design system conventions and tooling. Lacks design tokens or subcomponents. Specific to one use case. Is it the best code on which to standardize?
  6. Design tools o en treat static mockups as the source

    of truth instead of the web-based design system.
  7. Need help clouding your fours? Squiddly-doo! Captured for youpro Need

    help clouding your fours? Squiddly-doo! Captured for youpro
  8. Design tool must haves Full responsive support Treats design system

    as the source of truth Import design system components and create variants Design from scratch when existing components won't do Feel like a true design tool
  9. Design tool should likely haves Built on the web Easy

    to update with new versions of design system Override design system component behavior when necessary Ability to prototype interactions by linking screens Accessibility testing and feedback
  10. Design tool nice-to haves Integration with design system documentation Collaboration

    features Tools for developers to inspect designs Animation support
  11. Design tool must haves Full responsive support Treats design system

    as the source of truth Import design system components and create variants Design from scratch when existing components won't do Feel like a true design tool
  12. Design tool should likely haves Built on the web Easy

    to update with new versions of design system Override design system component behavior Ability to prototype interactions by linking screens Accessibility testing and feedback
  13. Design tool nice-to haves Integration with design system documentation Collaboration

    features Tools for developers to inspect designs Animation support
  14. Maybe it’s not HTML mockups that make this work… Discovery

    Prototype Sketching Extract Components Design System
  15. Perhaps we can improve this process… Planning Static Wireframes Static

    Mockups HTML, CSS and JS Launch Design Development Hando
  16. And most of all, our clients who entrust us to

    work on their design systems with them. Without these opportunities, we wouldn’t have anything to share in articles or in presentations like this. Thank You!