Support multiple fill types

[Stivenskyrah]

Plugin worjs amazingly well for colour palletes, would be great if it automatically linked up the "Document colours" pallette and the "Document Gradients" pallette for import and export.

[marcopellegrini-vodeclic]

Hi, still not support the document gradients palette?

[alandickinson]

I've extended this plugin to support gradients. @andrewfiorillo, let me know if you want me to submit a PR. If this plugin isn't actively maintained anymore I'm also happy to create a new repo for it.

[andrewfiorillo]

It is still maintained. How have you implemented gradients support? Is it in the same palette file? And if so, how do you handle a palette file that contains gradients you want to import, but colors you do not want imported? I was considering making a dialog which allows you to select which you'd like to import/export. I'd like to add support for the other fill types as well, so I want the solution to be scalable.

[alandickinson]

@andrewfiorillo Awesome! Right now I've built the quickest solution, which was to add menu options. It looks for a 'gradients' node in the palette file. So you can load gradients from a combined colors/gradients palette, but this doesn't support saving out combined palettes. The gradients are defined by N number of colors (in hex right now, but could easily support rgba). A dialog would definitely make this better. Happy to offer help if you're looking for it.

[marcopellegrini-vodeclic]

great guys: I'm looking forward to see the update of gradients available

[andrewfiorillo]

I made some wires of the flow and dialogs I was imagining for supporting multiple fill types:

Loading Palettes

To load a palette, you run the plugin command, choose a file with the filepicker, and then are presented with the below dialog. You can choose which fill types you'd like to load, so you only load what you need. Fill types not present in the palette file are not selectable. You must also specify whether you want to load them into the Global or Document section of the color picker (applies to all fill types).

Saving Palettes

Saving palettes is similar to above, but essentially reverse. When you run the command you are presented with the below dialog. You specify if you are saving presets from the Global or Document sections, and choose which fill types you want included in the palette. Only fill types with presets available are selectable. Clicking Save opens the save dialog to choose the save location.

This all necessitates a new file format, but backwards compatibility can still be maintained to open old files. I'd like to keep the file format JSON, but the only part I'm unsure of how to handle there is pattern fills, since they are images. Perhaps base64 encode them? In any case, the system could be built to scale to all of the fill types, and release each when they are supported. Since gradients are frequently requested, it seems reasonable to tackle that next.

[marcopellegrini-vodeclic]

@andrewfiorillo this workflow corresponds almost to the expected designer's user experience. I would only simplify the "fill types" section interface by just having 2 types: colors, gradients.

[alandickinson]

Thanks for the details and wires. This is great! It’s super clear. I do think it would be reasonable to just have one checkbox for all gradients, like Marco suggests. I’m not sure supporting import by each type justifies all the added checkboxes that brings :) And FWIW, Sketch also lumps all of the saved gradient types together in the global & document dropdowns instead of separating them by type. But maybe there’s a good use case for this that I’m totally missing!

The only other thing I would suggest is adding some help text on the “Load palette” window to set expectations:

1. Some extra text to indicate that the current behavior of the palette removes any existing saved colors. This could potentially be a user preference down the road?
2. Some extra text or a tooltip to explain how global colors differ from local colors could help ensure people get their intended result.

Here’s one way this might look:

Also, are you sure Noise Fills can have saved presets? It’s unclear to me from the Sketch docs (I only looked briefly), but I don’t see the Doc/Global dropdowns in the app.

Base64 sounds reasonable for the pattern fills, but we could also do some investigating of other plugins to see how they’re handling bitmap data.

[andrewfiorillo]

@alandickinson these are some great additions. I think think you are both right that combining gradients makes sense. I don't actually see presets for for noise either, so that would make just 3 fill types.

The copy explaining Global vs Document presets is helpful. As for a tooltip explaining the load functionality, I think that could be a decent immediate solution. But what I would really like to do is add another button in the modal to "Append", so you have the option to do either. Alternatively, in the short term we could simply make the load functionality only append, and replacing could be done by first clearing.

Anyway, we should figure out how to break this work down into individual parts. I think this has definitely expanded beyond the scope of what this issue was created to address.

[alandickinson]

@andrewfiorillo Yes it has :) Having the load dialog always append for now seems like a good approach, and I agree that the better long-term solution is to provide the option. I've sent you an email to see if we can work out a plan.

[andrewfiorillo]

As of this morning, support for multiple fill types, including gradients and pattern fills, has been implemented. Closing this ticket.