5

Is box model necessary for design tools and design spec handoff?

over 1 year ago from , Running a small studio

Our team is working at improvement of Design/Engineering collaboration. Engineering is keen on box-model based design tools (like Webflow) to make spec inspection of web projects more easily, but these are not a lot of choices. Most of them are actually WYSIWYG tools, and not convenient especially for projects with dashboard, visualization, data table, etc.

Do you think it will be convenient for you to create web projects and to deliver spec to engineering? Have you ever heard about similar request from your team?

Thanks DN and designers

9 comments

  • Mattan IngramMattan Ingram, over 1 year ago

    100% yes, and not building design tools on HTML/CSS is the biggest mistake all the UI design tools have made (except Framer who are built on HTML and CSS).

    This is why you STILL can't have a button that resizes based on its content and padding in Figma or Sketch without using shitty plugins. This is why you STILL can't have real responsive design mocks as you change artboards.

    I have been bringing this up with the developers of these tools and in discussions about the future of design tools like a broken record for the past year. I keep getting pushback with arguments like "That might be good for web design, but what about for native app prototyping?" or "Won't I lose the freedom of putting things anywhere I want if I have to stick to the box model?" and it just strikes me as a lack of understanding of how CSS works and what the goal of these tools are.

    It works great for app design because you aren't trying to output production code, just something that behaves more like the real deal. HTML and CSS provide more basic interactions that exist on both web and native than any custom rendering engine. Also you are not stuck in the box model because CSS has position: absolute so you can just hit a toggle and move an element anywhere you want. Want it to stick to the screen, use position: fixed, want it to be in the flow but stick when it hits the edge of a scroll use position: sticky. All of this can be represented in UI, and all of it is more functional and performant than anything Sketch or Figma or Studio can offer right now.

    I love Figma, I use it every day, but they done messed up when they chose to build their own rendering engine. Modulz, Hadron, Framer, and others will surpass Figma and Sketch in the next couple of years due to this.

    1 point
    • Marc EdwardsMarc Edwards, over 1 year ago

      not building design tools on HTML/CSS is the biggest mistake all the UI design tools have made

      I see value in having tools that are HTML/CSS based for working on web projects, but I think the pushback you’ve been getting is valid. Not everything is a website or HTML/CSS based, and using web tech for a design tool has many drawbacks that are difficult or impossible to overcome.

      Performance, colour management, rendering accuracy, rendering abilities, and many other things make building a design tool on web tech bad if you’re trying to create something that can be used on a wide range of projects. Depending on the goals of the tool, those may or may not be dealbreakers, but it’s important to understand that web tech has some very hard limits when it comes to handling large design projects.

      Even seemingly small things like mouse cursor accuracy is worse in web based design tools — mouse coordinates are returned as whole numbers in points on a Retina Mac, so only every second pixel of the display can be known for interactions. Native apps don’t have that issue. It also means missing out on lots of important OS features that are free for native apps, like spell check, text transformations, and better clipboard support (allowing for copy and paste of vector and other data types between apps). The performance aspect really can not be overstated, too. I haven’t used an HTML/CSS based design tool with respectable performance yet.

      4 points
      • Mattan IngramMattan Ingram, over 1 year ago

        First off let me say I always appreciate your replies since you actually know your shit on a conceptual and technical level, however I think you put too much weight behind certain issues that are simply not as big of a deal in my experience in practice.

        Even seemingly small things like mouse cursor accuracy is worse in web based design tools — mouse coordinates are returned as whole numbers in points on a Retina Mac, so only every second pixel of the display can be known for interactions.

        I don't see how this will impact UI design, most of the time changes are not at the sub-pixel level and are manually input into property fields, and you can just zoom in to get more detail.

        It also means missing out on lots of important OS features that are free for native apps, like spell check, text transformations, and better clipboard support (allowing for copy and paste of vector and other data types between apps)

        Yet many of these things still don't exist in decent forms in native tools and DO exist better than many people realize in web tools.

        The performance aspect really can not be overstated, too. I haven’t used an HTML/CSS based design tool with respectable performance yet.

        This really depends on what you are talking about. Zooming in and out on a bunch of artboards will be less performant, and thus why HTML/CSS tools tend to focus on just one "page" or artboard at a time, but actual prototypes will be SIGNIFICANTLY more performant than Figma or Sketch prototypes which are essentially just moving big images around.

        None of the things you bring up here seem like insurmountable or significant impediments to an HTML/CSS based UI tool being much superior to any of the tools we have today for interface design.

        Developer handoff from existing tools is a nightmare. Try explaining a responsive vw or % based grid with content-order rearrangement at different screen sizes using Sketch or Figma to a developer. Zeplin does not make it magically decent. You have to manually explain and document the CSS for the developers. Heck I can't even recreate my design system CSS box shadows in Figma because they don't have shadow spread. I can't make a button component with a centered text and icon! I should not have to rely on freaking plugins for that.

        1 point
        • Marc EdwardsMarc Edwards, over 1 year ago

          First off let me say I always appreciate your replies since you actually know your shit on a conceptual and technical level, however I think you put too much weight behind certain issues that are simply not as big of a deal in my experience in practice.

          Thank you for the kind words. I also appreciate pushback where needed, and I welcome learning new things.

          In my defence, I did say “depending on the goals of the tool, those may or may not be dealbreakers”. I think there’s room for design tools built on web tech, especially when the desired result is a web-based tech stack. I do think that’s more of a niche than a generalised software design tool though.

          I don't see how this will impact UI design, most of the time changes are not at the sub-pixel level and are manually input into property fields, and you can just zoom in to get more detail.

          I wasn’t aware of the mouse coordinates issue until another designer was wondering why he couldn’t use the eyedropper to sample a 1px thick line — the cursor was jumping over the line. Yep, zooming in helps, but I think having half the mouse cursor accuracy is a negative for web tech based design tools.

          There’s 100s of small things like that. Electron apps can not have custom keyboard shorcuts on macOS (the kind you define in System Preferences). Everything has to be contained within one window with no floating panels. They can’t use the built-in NSDocument tab and tab overview feature. Drag and drop is far worse. Clipboard support is far worse, and missing lots of features. There’s no access to document auto-save or versions. There’s no way to support wide gamut colours, or high bit colour depth. macOS provides good mechanisms to make undo support easier. Those are just things I can think of now. The list is astonishingly huge, and many more wouldn’t be apparent until the project is underway.

          It’s definitely a trade-off.

          None of the things you bring up here seem like insurmountable or significant impediments to an HTML/CSS based UI tool being much superior to any of the tools we have today for interface design.

          I’m all for people trying! There’s some new tools you’re proabbly aware of that are giving it a shot. My issue has always been that for web projects, I’ve usually just written code. I think that means web tech based tooling is in a strange place — they often require a lot of knownledge of CSS to be useful and used the right way, but those who have a firm grasp of CSS can often be more comfortable directly writing CSS. I suspect there is value in web tech based design tooling, but it’ll be niche. It’ll only be for when the final product is web based, and for people who already have a pretty good understanding of HTML/CSS/JS.

          Developer handoff from existing tools is a nightmare. Try explaining a responsive vw or % based grid with content-order rearrangement at different screen sizes using Sketch or Figma to a developer.

          I agree. I currently just write the HTML/CSS in a text editor for those. I’d like visual tools to help, but I haven’t yet seen something I’d prefer over writing code.

          I can't make a button component with a centered text and icon! I should not have to rely on freaking plugins for that.

          Yeah, that’s a great example of something that is very difficult in current tools.

          1 point
        • Marc EdwardsMarc Edwards, over 1 year ago

          Having said all that, I think there are good hybrid approaches to the problem. :D

          1 point
  • Andrew C, over 1 year ago

    We just have padding and margin rules for our design layouts and that translates in to Zeplin pretty well. That being said there are... human error factors that can creep in to this, though. But we're using he box model anyway.

    0 points
  • Hangyás Gergely, over 1 year ago

    We have only used Webflow for generic landing pages, creating more complex UIs seems to be pretty cumbersome to work with...

    I am a big fan of Sketch + Zeplin combination where designers can design in a proper desktop tool and devs get implementation ready mockups, inspector and downloadable assets.

    0 points
  • Hardi KHardi K, over 1 year ago

    I'm the supporting designer for several product teams, ~20 developers total and Figma works well for us. I can do constraint-based component-driven design, and they get a rough approximation from Figma's code preview tool. Everything ambiguous is solved through communication, either with Figma comments or face-to-face.

    https://www.figma.com/blog/guide-to-developer-handoff-in-figma/

    0 points
    • Mattan IngramMattan Ingram, over 1 year ago

      The code preview tool is pretty awful, and it should not require a whole other process of communication to convey layout and CSS.

      It works because we have never been given something better, so we forced ourselves to adjust. If more designers understood CSS fluently, there would be a far bigger push for design tools that work more like webflow (but with fewer limitations).

      What if I want constraints based on percent, or vh or vw units, or even ch units? None of that can be cleanly conveyed in any of these design tools now, yet there is nothing fundamentally impossible about doing so except that these tools are build on custom renderers and not on HTML and CSS.

      0 points