Played with this for all of 1 minute and it already looks awesome.
Don't be surprised if the guys at Craft/InVision call soon offering big wads of cash (c;
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.
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:
- 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.
- Developers can use that code and tweak it from there, boosting their workflow and time to deliver.
- The design you've made is as close to real as possible (perhaps it is real!)
3) It's real.
Native Sketch group resizing works only inside groups, not on artboard-level layers :)
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.
Forgot to mention - drag the corners of the artboards in the sketch file I sent. You'll understand.
This is amazing! I only wish I could pin multiple selected elements. I know each would have a different value, but maybe you could just make the little pin corners available, and if you were to edit the actual number then they ALL move to that place.
Now we're talking. Thanks for making this plugin Anima team!
This pushes me another step closer to ditching Adobe Illustrator—if only Sketch had a proper Direct Selection tool, and not the joke they implemented a few months ago. That alone will convert me.
I never noticed how much I use direct selection until I tried switching to Sketch.
I find sketch's selection tool much easier to use that Illustrators direct selection. What problem do you have with it?
Earlier this year, I created a couple rough videos demonstrating how much faster Illustrator's design workflow is for doing quick resizes of rectangles, lines, etc. while retaining path positions while those are part of the selection (this would apply to text paths too).
Videos to show the difference (before Sketch improved Vector editing):
- Illustrator's direct selection: View video
- Sketch's object resizing workflow: View video - you may notice that I have to reposition everything all over again once I get things resized. I already did this before I decided to resize the layout. I don't want to do it again. :( This is why Illustrator's solution is so fantastic.
What you can do now, but is cumbersome:
- Select anchor points across different groups of objects by 1) ⌘+Drag to select the objects, 2) press "Enter", 3) select the anchor points, 4) drag or move accordingly. Let's say you made a mistake, you have to repeat all 4 steps.
- In Illustrator: Press "A" for Direct Select, drag-select points, move them. Much easier, and saves hours of time cumulatively.
What you can't do at all in Sketch:
- Select anchor points and text objects / symbols / other objects. The use case here is to move text and other objects in conjunction with your shapes.
It's hard to explain how many different smaller use cases come out of this, but the most common one is to resize a layout or a piece of a layout for another breakpoint. This has largely been solved by plugins like this (Anima's) and Sketch's group resizing feature. But there's quite a bit of setup to do with these upfront, where a simple selecting a few anchor points w/ prepositioned objects is far quicker for one-off designs.
YUSSS!!! Ok Sketch, time to do this for real, feature-ize it!
Make the screenshots bigger!
Maybe here they are bigger? https://medium.com/sketch-app-sources/introducing-auto-layout-for-sketch-24e7b5d068f9#.2jwfu9vs9
I can't even see what are you clicking on in those gifs. I'd like to see the UI in more detail.
Ahhh thanks for the feedback I'll try next time :)
In the meantime here are big screenshots:
Woohoo! Figma constraints in Sketch!
um. Wow. this is insanely useful.