↵

Auto Layout for Sketch(animaapp.github.io)

over 6 years ago from Travis Arnold, Designer/Developer at Planning Center

  • Misha Goncharov, over 6 years ago

    Well, not sure that it's appropriate to say, but what is the problem the plugin helps to solve? I mean you can do pretty much everything you show on gifs with native Sketch features.

    The real problem is with real-world mockups. Say, for example, you have a list with cells of dynamic height. You change the width of the screen → the width of the cells also changes as well as their heights. And now there are some holes around each of them. Make them stick together and float depending on the screen size (not only change their sizes accordingly) — this is the real auto layout, I bet.

    2 points
    • Andy MerskinAndy Merskin, over 6 years ago

      It's a tough problem. On the one hand, a lot of designers aren't given enough time to consider every state before they have to deliver, so those states/cases haven't been considered. On the other hand, our design tools simply don't have full layout engines in them, which is why quite a few designers I know (incl. myself) advocate for designing in code. The time commitment necessary to mock something up may be a bit higher, but the outcomes are:

      1. Layout-related states and issues are mostly solved, since you can swap the layout's content in a pinch and see how it behaves, e.g. when you make a title really, really long.
      2. Developers can use that code and tweak it from there, boosting their workflow and time to deliver.
      3. The design you've made is as close to real as possible (perhaps it is real!)
      0 points
    • Or Arbel, over 6 years ago

      Native Sketch group resizing works only inside groups, not on artboard-level layers :)

      0 points
    • Andu PotoracAndu Potorac, over 6 years ago

      Misha, well that's precisely what you can do with Auto Layout. Here you go: https://widgetic.com/assets/widgets/demo/Sketch/Grid%20Auto%20Layout.sketch.

      You use Sketch's export features to design assets. You use AutoLayout to design the screens at 1x for the different sizes (320, 375, 414). Here you set the constraints and you share those with your developers.

      Why is this useful? They have the same options in Xcode so they can use your logic to create a pixel perfect design. If instead they would work on a 3X exported design it will never be right.

      0 points
    • Andu PotoracAndu Potorac, over 6 years ago

      Forgot to mention - drag the corners of the artboards in the sketch file I sent. You'll understand.

      0 points