[Feature Request] Select by style; style flags

[RayPS]

This is the most mind blowing plugin i've ever seen. 50% of my daily Sketch workflow is to selecting layers.

I suggest to add ability to select layer by layer style

%s.fill == "#000000FF"
%s.rotation > 0
%s.borderRadius == 8
%s.opacity != 1
%s.font == "Helvetica"
%s.shadowBlur == 10
%s.blending == "overlay"
......

[leonardpauli]

Thanks @RayPS ! There is a bit of work to get in all of these datapoint, mostly because the Sketch API documentation isn't complete and changes a bit, currently I'm mostly looking at the classdump, other plugins and the docs, although I hope there is a better way. If you know one, please point me in the right direction!

Otherwise, provided an example code that returns all relevant properties from a layer reference would be very helpful!

I could make simpler support for starters, what would you use the most? Also, if fill, should I only check the first one or any match in all? Also, should it be an exact match or should you be able to use a threshold/fuzzy value? The same goes for borders and blurs.

While we're at it, any other plugins that would be of interest?

[RayPS]

After a period of thinking, these features seems handy but they will make LayerRenamer complicate and actually not a high frequency feature, I think it should become another stand-alone plugin, maybe call it sketch-select-by-properties.

[leonardpauli]

Yes indeed. Although, this is something I've wanted for a while (not that much with the find/replace function, but as a helper within other plugins). Ie. I've been working on a duplication plugin;

• cmd-alt-d to select all "similar" shapes (currently only name (ie. circle 1, circle 1 copy 2, etc), but would love similar-by-style here, in some kind of smart way)
• cmd-alt-d again will bring up a prompt with the selected items count
• change the number, and the plugin will replicate the pattern (including rotation, fills, etc), or remove items, to get to your desired count

Here, the smart "select similar layers" could be greatly used in combination with the replace tool.

Also, included with LayerRenamer, there is an "Export outline" option, that exports everything underneath the selected folder as an outline. By making it a bit smarter, it could export working Pug/HTML/JSX code (given some sort of structure/use of symbols/naming scheme), and Stylus/CSS/SCSS/StyledComponents (which requires getting information of all the styles).

What I would love to build thereafter is a better content fill plugin, so that you could connect your design / symbols directly to a production (or local) API. This would of course transfer to the JSX export, so that what you get is already "working".

Lastly, incorporating an AST to go full circle; ie. after exporting the code first time, you would be able to change it and see the changes reflect in sketch, then change inside of sketch and immediately see the changes reflected in the code/App/Phone/Browser....

Well, it's quite a project, and there are a couple similar ones. However, none is backwards compatible and provides a workflow I like, and at the same time are designer-first... and inside of Sketch itself.....

Basically, this "powerful" RegEx find/replace tool is one step closer to fusing the design workflow and programming/coding process...

[RayPS]

Damn i really need a feature to export my layer struct to Pug outline! This is a time saver because I keep writing the layer struct every time and this step should done by machine. But I can't agree with exporting CSS because we can't make it as really smart as ourself.

[leonardpauli]

Well, there is still a lot of work left to make it "good", although you can try some basic functionality already :) (it should be included in LayerRenamer, here, using SketchRunner;)

[leonardpauli]

About CSS, don't underestimate the power of computers..! :P I intend to do something similar to: Step 1: Standardise document, create variables and fix up design system

1. Figure out all commonly used (and similar) colors, gradients, borders, fills, text styles etc
2. Alert the user about suspiciously similar values (to help standardize, etc)
3. Ask user to name colors (auto-suggests text, primary, action, etc based on use and name of components used in)
4. (same as 3 but for text styles and symbol/component names, these steps are just first time and optional, to help get a better structure fast, reflects changes back to sketch document so no need to redo) 4.2. Identifies badly named layers/groups and suggests fix (ie. text layers usually gets same name as content, which isn't the class/component name you usually want in code...)
5. Identifies repetitive patterns (ie. having a button in multiple places without making it a symbol first) and provides auto-fix/auto-create and replace with symbol (while guaranteeing the same look/functionality as before + backup)
6. Identifies non-scalable components and suggests auto-fix + options (also recognises common patterns, hopefully a bit smarter than sketch defaults... later on put in some machine learning for this, maybe XD)
7. You should now have a document with great structure, order of symbols (all resizable), styleguide (colors and fonts), etc

Step 2: Export code

1. Well, choose destination and type etc... etc... ... ??. Assets export (icons as svg when possible, otherwise @3x+@2x+@1x (optionally) png, or if normal image; JPG, maybe consider auto creating icon font + tiled combined png images pack + find and export web-fonts) ??. Style Export:
2. Create the style guide variable file, one for colors, one for commonly used dimensions and breakpoints, and one for fonts (using the breakpoints/dimentions and colors file)
3. Create one file for commonly used mixins, ie. focus / hover / etc states (do this by extracting common differences amongst almost otherwise identical components)
4. Include reset file 3.2. Include common layout trix, ie. (width: 0 auto, flexbox (if permitted), etc)
5. If using stylus + pug, the stylus section in one component will look almost identical to the pug one. Comment out unnecessary selectors, but optionally keep them there for reference
6. Insert styles (using the variables or mixins) 5.1. Add in the relevant base styles 5.2 Add layout (prio: static, then relative if possible (either by just changing pos a bit relative to other, or flexbox if supported (ie. prio flexbox if React Native), or by using layout trix), otherwise absolute in container) 5.3. Add fills (use assets of possible, ie. background image, with correct fill-modes) (also, be smart, ie. a groups last/first layer, usually called "bg"/"background" should usually be though of here) 5.4. Add borders and shadows 5.5. Add text styles 5.6. Hover states, etc 5.7. Possibly figure out what can be using after/before, etc, also, for lists, detect patterns (ie. alternating row styles, etc)

I believe the style export could be made very smart. At least, it will be good enough to get something working well, and up and running, extremely fast. Then you can always successively add a comment on some component similar to eslint to detach auto gen/sync for that part, so you can write your own. For 80% of the cases, I don't think that will be needed at all. In worst case, you'll at least have a pretty good way of syncing the style guide (variables, fonts, text-styles, and assets, etc).

[leonardpauli]

(and yes, I do have some experience with auto code export systems, many which fails code quality terribly. I find Sketch's own Copy CSS useful, mainly for gradients and letter-spacings, etc, but the result is a bit ugly and not that smart. The goal here is something completely different...) :)