This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Marc Krenn
Posted Aug 02 - Read on Facebook

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

################
Original post:

Feature request/proposal: Layer presets

Wouldn't it be cool if we could define complex layer style presets and 'load' them whenever needed?

http://share.framerjs.com/coubggnwppbv/

12 Comments

Marc Krenn

Here's what presets look like. I've put them in an external file so there's less clutter in my main file.

Mike Johnson

Nice! I just did the something similar with text styles for Andreas' TextLayers

Mike Johnson

Definitely would be useful to be able to define these across prototypes, maybe similar to snippets...

Ben Rodenhäuser

This seems super-useful. I think the presets should live in dedicated files called Framer Style Sheets. :-)

Marie Lu Vinh

Couldn't that be controlled in CSS ? Or if framer studio plans to support LESS or SASS, I guess it could be usefull

Marc Krenn

(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?

Chris Camargo

I don't think I fully understand the problem this is solving. Is this something you can't do with layer.style?

Marc Krenn

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

Presets don't.

#################

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.

Kevyn Arnott

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/

Marc Krenn

Thanks for sharing your approach with us, Kevyn!

Brad Ryan

Marc Krenn Has there been any updates to layer presets? How fragile is this approach?

Marc Krenn

Hey Brad,

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.

Read the entire post on Facebook