⚠️ 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
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.
Key differences
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