Nudging - Enhancement proposal

[RaphyRaph]

it would be more useful to have a plugin that behaves like so:

• set a preferred spacing (4pts, for instance)
• run plugin once, set spacing to 0
• run plugin again, if all spacing is 0, bump up to 4, otherwise go back to 0
• if all spacing is 4, bump up to 8, otherwise, bump back down to smallest multiple of 4 available
• etc...

if you have 4 plugins, one that increments up and one that increments down vertically and horizontally, and a way to set the increment yourself, you can have a very flexible and fast way to set spacings

[aaronmw]

I agree. Increment / decrement spacing would be handy. As it stands, this plugin is already very similar to "Arrange > Make Grid..." and setting the spacings to 0

[pberrecloth]

So... a plugin that behaves a little like NudgeIt, but for spacing between elements?

[aaronmw]

Yeah, exactly; select some stuff, then increment / decrement the space between objects either horizontally or vertically. That'd be kind of life-changing, I think.

[RaphyRaph]

YAS! +1 w00p w00p

[pberrecloth]

Nice. I like this idea. Will have a think about doing this over the next few weeks.

[jordaniusrex]

If the increments are just multiples, wouldn't this behavior just replicate custom nudge values?

When I'm working on a design, I'll often have a set of commonly used spacing values (e.g. 0, 8, 16, 32, 48, 64, 96, and 128) that relate to the baseline grid. I use Butter to quickly space objects according to a specific value.

Being able to increment/decrement through only that set of spacings instead of needing to type in a value explicitly would be amazing.

[pberrecloth]

I agree - this is how I work too. We will look at putting this option in the next version. @jordaniusrex

[ShaneNZ]

Explicit values rather than multiples is needed, I think - @jordaniusrex nailed it. Be nice to notify what spacing has been applied too, maybe non-modal in a similar way that MacOS notifies you with the volume controls but centered on Sketch?

[ShaneNZ]

And while I'm wishing for stretch goal ponies, doing an approximate match on current spacing to the defined intervals would be awesome. So if I've roughly spaced out my objects to be 32px apart, it would "snap" them to 32px. I'm thinking calculating the average of the current spacing between all selected objects, match that to the closest defined interval and set to that.

Thinking about it, that would make "adding" a new object to a stack of equally spaced objects really fast; the fully consistent average of all the other objects would effectively force the spacing onto the new object, if that makes sense.

[pberrecloth]

Thanks @ShaneNZ for your comments. I agree that matching spacing based on a typographic scale could be nifty. I think that might even be a new plugin idea... Perhaps we need to think about how splitting "Butter" and "Spacer" out into separate projects. Thoughts?

[RaphyRaph]

It's the opposite of separating them: the idea is to have one plugin that seamlessly transitions between 0px butting and spacing.

[ShaneNZ]

I agree; I see spacing and butting as part of the same thing - I use them interchangeably depending on the design assets/context. Using multiples of 4/8/whatever, or having a list of intervals is equivalent to spacing with a manual value as currently implemented; it's just way more convenient than always typing the same 3 or 4 values in each time you want to space objects.

…

On 10 September 2017 at 02:01, Raphael Guilleminot ***@***.*** > wrote: It's the opposite of separating them: the idea is to have one plugin that seamlessly transitions between 0px butting and spacing. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACaFVvKRoqF3cZlexF6vssOQZEO8T4ZRks5sgpo-gaJpZM4K96F2> .

[DWilliames]

Great insights everyone.

@jordaniusrex @RaphyRaph @aaronmw I'd love to understand how you'd all imagine the best implementation for custom increments would work for you?

Would you expect to be able to increment/decrement via keyboard shortcuts, a persistent interface, or by selecting the plugin from the menu bar?

And assuming we made it easy to increment/decrement spacing between objects — would you only need it to happen horizontally/vertically; or specifically from the top/bottom/left/right?

[RaphyRaph]

Ok I created a quick prototype to explain this properly. I hope it makes sense. I added the commands as buttons on the canvas for illustration purposes only. They would most likely be accessed by keyboard shortcuts. @DWilliames @pberrecloth .

https://www.dropbox.com/s/o21jukqmtnl1ddg/butter%20increment.mov?dl=0

[DWilliames]

Awesome @RaphyRaph. Love it! Am currently looking into to do something similar to this.
Just curious — so for changing spacing horizontally, would you expect it to stay fixed from the left, and vertically from the top?
Would you want the ability to make it fixed from the right/bottom when spacing horizontally/vertically?

[RaphyRaph]

For right to left languages like Hebrew and Arabic, it's probably useful.
-Edit, closed the issue by mistake-

[ShaneNZ]

That prototype is mouth wateringly good :) Some ideas for the plugin menu and overall flow/interaction ideas:

The Increase/Decrease commands would apply the interval steps as set below. At least initially maybe the interval spacing is always done from the top left corner?

"Set Interval..." sets the interval(s) to use. Simple mockups - the dialog would probably need a bit of help text or something - but I see it as something like this...

Entering a single value would make the interval commands operate as @RaphyRaph originally suggested.

Entering a comma delimited list would setup the intervals as listed for cycling through, as @jordaniusrex originally suggested. If the selected items are at the max spacing, then I would expect the plugin to not increment the spacing any further.

[ShaneNZ]

OK, writing the previous post has given me another interaction idea that would avoid needing 16 menu items to handle from top/from left/from right/from bottom: apply the spacing with two interactions. Flow would be:

1. Select a bunch of objects
2. Selecting "Interval Up" would not move any objects, but set the "vertical anchor object" (the vertically highest one in this example)
3. a) Selecting "Interval Up" again would butt the objects.
4. b) Selecting "Interval Down" would apply the "next" interval. In the list in the settings box above, if they're already at 32px then it would space them 48px apart down from the top object. If I had selected "Interval Up" twice, then "Interval Down" I'd end up with the objects spaced 1px apart.

Without changing the object selection:

4. Selecting "Interval Right" would not move any objects, but set the "horizontal anchor object" (the right-most one)
5. a) Selecting "Interval Right" again would butt the objects.
6. b) Selecting "Interval Left" would apply the "next" interval. In the list in the settings box above, if they're already at 32px then it would space them 48px apart down from the top object. If I had selected "Interval Right" twice, then "Interval Down" I'd end up with the objects spaced 1px apart.

I could then be working from the top right edges, increasing and decreasing the spacing horizontally and vertically for sorting out a grid of spacings. Changing or clearing the the selection would clear the anchor object(s). Or just working horizontally or vertically to get the spacing I want in one axis from either direction.

As a shortcut key example, I use control/option/arrow keys for Butt Selection Up/Down/Left/Right. If I transferred those keys to the "Interval Up/down/left/right" then for me, this setup would mean double tapping c-o-any arrow key would replicate Butt Selection [direction] - nice and quick. Tapping up then down would increment the current spacing of objects from the top, tapping down twice then up would start me cycling through my spacing list (or applying 4px then 8px then 12px etc if I've got a single number in the interval setting). I think this would be a very fast and flexible way of spacing things out; of course if I tried it for real I'd probably find it's no good :)

[pberrecloth]

Hi @ShaneNZ, thanks for the ideas. Here's a clip of how @DWilliames has implemented a toolbar in the inspector. This can handle butting, spacing and setting a spacing value.

https://drive.google.com/file/d/0BymIo-FpB7BTWXVXT2VISXAtams/view?usp=sharing

The buttons will space using the previous value in the field. But to butt to 0 you can Option+Click and there will be no spacing applied (you'll see the arrows become solid when the key is pressed).

Considerations...

I think this works nicely so far. Although it cannot 'nudge' using intervals yet (unless you hold shift and use the arrow keys to -/+ by 10). A side note on this is that it could perhaps inherit the nudging value set in Sketch Preferences.

[pberrecloth]

Could simply take the nudging value from here. Then at least you get small and big nudging when pressing Shift+Up/Down in the spacing field.

[RaphyRaph]

@pberrecloth The video is cool, but I think it's really crucial to be able to increment and decrement the spacing with keyboard shortcuts. That's where the real time saver lies. Can we have access to a preview to try it out?

[DWilliames]

Hey all!! @RaphyRaph @pberrecloth @ShaneNZ @jordaniusrex

I've been hard at work trying out some new things for the next version of Butter, taking into account all your inputs mentioned above and would love your thoughts if this is on the right track.

Please put up with my little spiel as I walk you through it in this video:
http://dw.md/UcdesA

Just a note: all the features I mention will be able to be mapped to keyboard shortcuts.

[RaphyRaph]

🔥🔥🔥 BEAUTIFUL!! SHIIIIIIP IIIIIIIT!

[ShaneNZ]

That is a thing of wondrous beauty! I agree with @RaphyRaph - ship ship ship! 🥇

[pberrecloth]

Amazing work @DWilliames!! You've totally pushed our vision into new places! Can we talk about how best to release this?

[RaphyRaph]

@DWilliames any news on releasing this? We need it soooooo!

[DWilliames]

@RaphyRaph When I get home tonight I'll upload a build for everyone to beta test, and be able to start using. Sorry for the delay.

[DWilliames]

Hey all — please try the beta version of what I demoed in the video here: http://dw.md/k9dE1w
Please let me know of any bugs.

[RaphyRaph]

4 pieces of feedback:

• I would love to have shortcuts for incrementing/decrementing in each direction. Setting the butt direction feels convoluted, because I have to update the direction everytime I want to butt vertically or horizontally... you rarely butt from the bottom or the right. I always butt from left or top, and direct access for that would be great.
• it feels like there's a slight delay when incrementing/decrementing (300-500ms delay) - is the code not very efficient?
• I can't see the icons in the UI
  
• layer re-ordering is reversed
  

[ShaneNZ]

• I can't see the icons on the UI panel either
• the spacing field gets updated with the amount of spacing that has been
  applied to move an object? 121 isn't one of my spacing numbers, but was
  displayed when I hit the shortcut for "Butt up", with a single object out
  of three that wasn't aligned. It would have been moved about 121 pixels to
  align, so I assume that's what the number is
  
• I butt from bottom fairly frequently, from the right less so but still
  reasonably often (I guess I work my designs differently than @RaphyRaph :)
  From using what you've done, I think I still think that repeated pressing
  of the butt up/down/left/right should increment the spacing. As you've
  built in the concept of a "butter group", I feel like it should integrate
  with that ie. if you're already a "butter group left" at the third
  interval, then hitting "butt left" would move you to the fourth interval. I
  only think that I think that because it removes the ability to go from a
  right butted group to a left butted group - you'd have to cycle "down"
  through the intervals before it switched direction. Possibly too
  complicated to handle
• I feel that the intervals thing I suggested and that you've implemented
  works pretty well. Nice that you also order the random screwball values I
  chucked in there to see what happens, including negative ones :)
• absolutely loving the "butt members of a group" behaviour

[RaphyRaph]

also lol "butt direction"

[ShaneNZ]

I know - I had many weird unintended mental images while writing that comment. 😂

…

On 17 October 2017 at 00:49, Raphael Guilleminot ***@***.***> wrote: also lol "butt direction" — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACaFVphu0L2qV2XBTH5xO7jB6p-RmgyGks5ss0LLgaJpZM4K96F2> .

[pberrecloth]

Won't work in Sketch 47.1: "Restart butter" keeps popping up :-(

[ShaneNZ]

Had an initial problem with that; I had to remove butter completely from the plugins folder, stop sketch, restart it and then install butter again. Then it worked. And odd, I thought I'd added that here...

…

On 20 October 2017 at 06:06, Peter Berrecloth ***@***.***> wrote: Won't work in Sketch 47.1: "Restart butter" keeps popping up :-( — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACaFVgELdKBocAtOePpdGfGJHZqZPTYfks5st4GjgaJpZM4K96F2> .

[pberrecloth]

Sadly it still happens for me even when replicating your steps. Pop-up appears persistently when trying to make any selection on the artboard.

[ShaneNZ]

Noticed another small thing; when adding/sizing an artboard, the inspector panel is present when it probably shouldn't be.