UPDATE: You can do pretty much the same with using layer.props! Thanks Andreas for pointing this out.https://www.facebook.com/groups/framerjs/permalink/810536505740089/?comment_id=810926565701083&reply_comment_id=810999649027108&comment_tracking=%7B%22tn%22%3A%22R1%22%7D
Feature request/proposal: Layer presets
Wouldn't it be cool if we could define complex layer style presets and 'load' them whenever needed?
Here's what presets look like. I've put them in an external file so there's less clutter in my main file.
Nice! I just did the something similar with text styles for Andreas' TextLayers
Definitely would be useful to be able to define these across prototypes, maybe similar to snippets...
This seems super-useful. I think the presets should live in dedicated files called Framer Style Sheets. :-)
Couldn't that be controlled in CSS ? Or if framer studio plans to support LESS or SASS, I guess it could be usefull
(Caution: Shameless selfpromotion ahead! :D )
Some chaps like Stan, Jordan and Ben over at the Framer Slack channel quite like(d) this idea, just sayin'.
I'm wondering what you guys think about this idea, Jorn?
I don't think I fully understand the problem this is solving. Is this something you can't do with layer.style?
Hey Chris, I think there are two main differences to using the 'layer.style'-method:
1. Most importantly, 'layer.style' only supports CSS- and NOT Framer-native-properties like 'width', 'height', 'backgroundColor', ' borderRadius', you name it. Presets support both.
(btw with a bit of work, presets could even support features like 'states')
2. The 'layer.style'-method requires the creation of an unwanted, new layer:
buttonTemplate = new Layer_____visible: false # we don't want this to be seen, right?_____style:__________color: "black"__________#etc.
button = new Layer_____style: buttonTemplate.style # reassign style to another layer
In short: "Presets" are a lot closer to the logic of copying a layer than it is to 'layer.style'-method.
Hope that makes sense.
Another approach, which allows you handle non-CSS/Properties. is to define a function that return a layer with all the presets baked in. Then you declare instances of it. It's a bit heavier of an implementation, but you can do some really cool things with it, and you end up declaring presets with the same syntax as Framer layer. http://share.framerjs.com/xnr5byq4i55t/
Thanks for sharing your approach with us, Kevyn!
Marc Krenn Has there been any updates to layer presets? How fragile is this approach?
nope, there were no updates. Not sure about how fragile it is, but you have to keep in mind that this approach was super hacky and just downright terrible :D
However, Andrea's proposal of using layer.props for presets isn't perfect either - as you can see in the enclosed screenshot - but it's what I'd recommend for now.
Maybe I'll find some time at the end of August to give this problem another shot. I'll keep you updated.