11

Do any design tools tackle DOM-style or iOS style block elements / gravity / stacking?

over 1 year ago from

I wish I could see what one of my designs looked like it if I removed one thing on the screen and, like would happen in HTML, everything that was below that thing moved up, or, in a TableView, the next tableview elements moved up. There are so many combinations of states that are possible. It feels like a big hole in our design tools that we have to point/click/drag elements around on screen to explore any of these states.

Do any tools talk about this yet?

I love using Sketch, and seeing Symbols in Figma, Sketch, etc, have greatly improved my workflow. I can imagine most of these things in my head between going from Sketch to Xcode or HTML, but it would be great to be able to be confident about these in-betweens at design time.

10 comments

  • Sebastian Scheerer, over 1 year ago

    There is Antetype, a tool that never got much traction but is highly underrated.

    You can basically stack elements and define how the children should flow within. It pretty much works like html & css and supports overrides for every parameter.

    I just wish it had a bigger team a more ambitious release cycle. I never got why other tools don’t put it more at their core since it makes exact positioning and simulating the end result much more easy.

    3 points
  • Mattan IngramMattan Ingram, over 1 year ago

    The only one I know of is Webflow, and that's because it actually is creating HTML and CSS, not exactly drawing vectors like most design tools.

    You get an Adobe style interface, but it is controlling and creating CSS.

    Another option is to use a plugin like Autolayout for Sketch which isn't as fully functional as what you get out of CSS, but does the basic stacking and aligning vertically or horizontally.

    2 points
  • Colm TuiteColm Tuite, over 1 year ago

    Have you checked out these new tools?

    Modulz

    Compositor

    Interplay

    All three of these new design tools will be launching in 2018 and all three do exactly what you're asking.

    0 points
  • Or Arbel, over 1 year ago

    This will do what you described: https://medium.com/sketch-app-sources/auto-layout-introducing-stacks-flexbox-for-sketch-c8a11422c7b5

    0 points
  • Roland IllésRoland Illés, over 1 year ago

    Adobe XD does something like this.

    0 points
  • Kilian Valkhof, over 1 year ago

    I wrote about design tools with a layout engine on my blog. In short:

    0 points
  • Darin Dimitroff, over 1 year ago

    I think you're going to love Webflow (heads up: I work there).

    It combines the ease of use of standard design tools like Sketch, Figma and XD with the box model, document flow and basically almost everything HTML and CSS have to offer. The mental model of building interfaces in Webflow is literally addictive, even if you don't want to build and publish a website. I know a bunch of people who design interfaces in Webflow and take screenshots to avoid using Sketch/Figma/XD.

    Another huge thing is responsiveness. I wouldn't say any other design tool comes with real responsive workflows.

    0 points