⚠️ This project is no longer actively maintained

Whilst some of the functinality may continue to work on versions earlier than Sketch v53; I am no longer spending my time actively working on this project. Thanks for all the support of those that have been using Paddy!

For a deeper understanding of why I have stopped working on it; find out more here.

It seems that the Sketch team are looking into building this functionality natively 🎉; in the meantime, Anima have released an update that has a lot of the same functionatlity as Paddy 2; check it out here.

Paddy 2 – Beta

I've began completely rewriting the Paddy Sketch plugin in a way that means I can do a lot more with it.

I have a lot planned for what I want to do with this next version; one of the key things is to make it a lot more stable.

Treat this as the 'Beta program' for Paddy. If you are up for it; play around with it, and let me know what is working and what isn't.

As you can see via the 'Todo list', not everything has been implemented yet – so bare with me, as I slowly implement it all. I'm trying to lock down the core things now (Padding / Spacing / Alignment); and then I'll move onto the complexities of symbols / nested symbols.

Getting started

Warning: Please use the Beta version at your own risk. I don't want be responsible for possibly 'ruining' your very important Sketch document 😜

This will be installed separately to 'Paddy', called 'Paddy2'; eventually I'll make it the same thing once it is ready.

Testing:

• Disable Paddy 1: Make sure 'Paddy' isn't enabled
• Disable Anima Toolkit: Make sure 'Anima Toolkit' is not enabled; right now for some reason, they don't seem to play nice together — in some cases :/
• Restart sketch: this is very important. Every time you re-enable 'Paddy 2', if it's not working, try restarting Sketch.

🙌 Bugs: Please report any issues that you find. Keep in mind, not everything has been implemented yet; see the 'Todo list' below. So only report on stuff not working if it has a 'tick' already against it.

💡 Feature requests: Got any other ideas you want to be on Paddy's roadmap; please submit them as an 'Issue', and I'll add them to this list.

Key differences

Check out the video overview:

Compared to 'Paddy 1' there are a few key differences that have been built so far:

• Setting the properties via the layer name is optional – you can now set them via the inspector panel too.
• A lot faster. In my couple of tests I benchmarked; this came out at being around 30x faster; and in some cases as much as 200x faster!!
• This approach will allow for 'Nested symbols'. Although, it's not currently enabled in the beta, it is something I think I've managed to crack

When will is come out of beta?

Once I can pretty much get feature parity with Paddy 1, and I know what I have implemented is stable, I will release it. With the plan of fast follow-on release for features like nested symbols.

I will not aim to get everything in the following Todo list complete before shipping; some are stretch goals.

Todo list

Automatic re-layout

• Re-layout ancestors after moving a layer
• Re-layout ancestors and children after re-sizing a group
• Re-layout ancestors after changing Text layer value
• Re-layout layers after changing symbol overrides
• Don't re-layout after selection changes from 'un-doing' (e.g. CMD + Z)
• Re-layout after deselecting everything; as a 'catch-all' if it hasn't already been layed out
• Make sure 'Moving' a layer works with AnimaToolkit installed — it looks like this will not be possible unfortunately
• Update after a 'un-grouping' a group
• Make sure using keyboard shortcut to move a layer in the layer list (e.g to back) works. At the moment, it thinks the layer was deleted
• Have some better logic for how a group should re-position after; inserting layer, resizing layer, moving layer etc.
• Make sure 'selection changed' works for Sketch 49 and Sketch 50
• Re-layout after changing text alignment from 'fixed' to 'auto'
• Add option to re-layout manually – e.g. re-layout selected layers

Spacing / Stacking

• Read properties from layer name
• Save Stack properties to the layer – so it doesn't have to be read from the layer name
• Vertical Stacking
• Horizontal Stacking
• Infer stacking properties from layers when they are turned into a 'stack group'
• Collapse hidden views – will ignore layers that are hidden
• Re-layout after hiding a layout; if 'collapsing' is turned on
• Re-layout after duplicating via CMD + D
• Re-layout after deleting layer
• Re-layout after deleting layers in Sketch v50 (seems to work in previous versions)
• Re-layout after pasting a new layer into a Stack group
• Pixel fit the spacing – based on the user's preferences
• STRETCH: Allow multiple spacing values – e.g. (10 20) would alternate spacing 10 and 20 pixels
• STRETCH: After resizing a Stack group, resize the children to respect the new size, and the spacing. This is a really tricky one! But would be a huge time saver!!!
• After resizing a group to infer new size, make sure that it does not infer a new size on Symbol Instances
• Allow an option for 'stretching' – see #5
• Read 'stretching' properties from the layer list names
• Allow an Artboard to be a Stack Group
• Keyboard shortcut to make a Stack Group – 'Control + Alt + Command + p'
• Custom alert to enter Stack spacing after using the keyboard shortcut

User interface

• Show a view in the inspector when eligible to create a stack group
• Show UI in the inspector to manipulate the stack vie properties
• Show option to 'remove' the stack group from within the inspector
• Change the icon of the 'Stack group' in the layer list to make it stand out
• Update the icon to have the alignment directions etc. darker rather than white
• Update the 'Stack group' icon, to something better
• Re-layout the layers after changing the spacing/orientation from within the inspector UI
• Better placement within the inspector?
• Show a custom icon for vertical/horizontal stretching

Alignment

• Read properties from layer name
• Save alignment properties to layer data – so it doesn't have to be read from the layer name
• Allow multiple alignment values
• Pixel fit the alignment – based on the user's preferences
• If there's a 'locked' layer, use it as an anchor point for laying out / aligning the layers
• If there's not a 'locked' layer Anchor the laying out based on the selected layer – unless CMD or ALT are held down

User interface

• Show an 'Alignments' view within the inspector for all groups
• Allow only one vertical alignment, and one horizontal alignment from within the UI
• Re-layout the layers as soon as the alignment value is changed from the Inspector
• Custom icon for each 'alignment group' within the layer list
• Handle setting Alignment to more than one group at once
• Hide vertical/horizontal alignment, based on if the group is stacked; and which direction it is stacked
• Better placement within the inspector?

Padding

• Read padding from layer name
• Save padding to layer data – so it doesn't have to be read from the layer name
• Shape layers as 'background' layer
• Ignore layers beginning with '-'
• Allow multiple layers to have padding
• Symbol instances as 'background' layer
• STRETCH: Adjust sibling layers to match the correct size after resizing the padding layer directly!! (This is a big one! Tricky to do; but a real new timesaver.)
• Re-layout layer after inserting a layer
• Allow undefined padding for specific edges – e.g. 'x'
• Allow a 'group' to have padding – so that it can be used for a detached symbol instance that has padding
• Keyboard shortcut to add Padding to a layer – 'Control + Alt + p' or 'Shit + Alt + p' to imply padding
• Custom alert to enter padding values after using the keyboard shortcut
• Custom icon in layer list for symbol instance that has padding
• Custom icon in the layer list for a group that has padding
• Allow an Artboard to have Padding

User interface

• Show padding values within the inspector
• Show a custom icon for a 'background' layer with padding within the layer list
• Re-layout the layers after changing the padding properties from within the Inspector
• Add a button to 'add' padding to a layer from within the inspector
• Infer the padding properties when 'adding' padding – at the moment, will work after 'CMD/ALT' clicking '+' to add padding
• Having a button to remove Padding
• Have a toggle to turn padding on/off
• Toggle the number of input fields; from 4 to 2 to 1. (By clicking on the input field labels, like on the colour picker RGB/HSV)
• Have a hover effect to highlight the input fields; to indicate clicking on them may do something
• Better placement within the inspector?
• Infer current padding when CMD/ALT + clicking the '+' to add Padding
• Allow setting Padding on multiple layers at once
• Better handling of setting specifc Padding values on multiple layers at once

Advanced sizing

• Min / max width
• Min / max height

User interface

• Have a 'settings' button in the inspector when a layer has 'padding' to get to the 'advanced settings'
• Show UI to set min / max height / width
• Re-layout after changing the 'advanced sizing'

Ignoring

• Read 'ignore' layer from the '-' prefix on a layer name
• Save the 'ignore' layer to the layer data
• Add an option to ignore – autosizing symbol instances (that have padding within their master)

User interface

• Show 'ignore layer' in the Inspector
• Set the 'ignore layer' value on the selected layers when changing in the inspector
• Show an extra checkbox to not auto-update symbol instances
• Add a custom icon if the layer should be ignored

User settings

• Turn auto-updating layout on/off
• Show/hide the views in the inspector
• Turn 'nested symbol' support on/off
• Feedback / submit bug button
• Button to donate via PayPal
• Option to show custom icons in layer list or not
• Update icon for detailed custom icons
• Option to always include the properties in the layer name / or not
• Default padding – to be used when the padding is not inferred
• Add option to re-organise layer list based on layers within stack group

Installing / Updating

• Alert to restart Sketch after installing a new version of the plugin
• Alert to possibly turn off AnimaToolkit?
• Custom icon for the alerts
• After asking to restart Sketch – re-open the same documents again
• Auto disable Paddy 1 when installing Paddy 2 beta

Symbols

TODO: Update the todo list here

• After detaching group, re-layout the detached group
• Fix 'trailing' layers, after detaching from symbol
• Check if a symbol has Padding within it
• Check if a symbol has Stack groups within it
• Figure out when a layer in a Symbol master has changed, and all of its instances may need resizing
• Allow an instance to not be auto-resized even though its Master may have padding
• Update all instance sizing, and re-layout its ancestors after the Symbol Master updates
• Only update the instances once the user has deselected everything
• Include the 'background' colour of the symbol after 'detaching'
• After 'detaching', make 'hidden' nested symbols ignored
• Make sure it works with local Libraries
• Make sure it works with remote Libraries
• Cache auto-resize for symbol instances with the same overrides
• After changing properties within a symbol; remove the size cache, and resize all instance
• After changing properties within a symbol; remove the size cache for any symbol master an instance of it may appear in
• Handle detaching symbols, that have a symbol instance with padding applied to it (perhaps allow Groups to have padding?)
• Update all instances after 'update from library' command is run

Nested symbols

TODO: Update the todo list here – a lot to do

• Only override the visual look of a symbol instance, if the master has Stack Groups within it

Migration

• Command to convert 'Anima Stack groups' to 'Paddy' stack groups?
• Command to detach all symbols recursively for exporting to Zeplin etc. – possibly; this may not be necessary

Other

• Documentation for everything!
• A demo video of the key changes
• Create a 'Paddy' logo/icon
• Cache 'PaddingLayers' and 'StackGroups' to be more performant