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

What is Framer? Join the Community
Return to index
Christophe Stoll
Posted Jan 31 - Read on Facebook

Here's a probably naive question: assume you have several Sketch Layer groups representing visual states of a UI Element. What's best practice to turn this alive with Framer? Manually (that's what I did so far)? Or is there an elegant way/trick to use Framer states?

12 Comments

Peter Hilgersom

Im wondering this to. For instance the state of a button when its active or inactive. Im doing it in a very annoying way now. I now have 2 layers and I add one state to each with opacity. then I just cycle states on BOTH layers to hide/show each. Very stupid really

Joshua Tucker

I suppose it depends on what is part of the visual change? Opacity, stroke, a whole different color? Usually for things that have visual states, I design the fully visual state, put it into Framer, and then create the others in code. Or if I wish to keep the other layers and add the states required to each one.

For your example Peter Hilgersom, say I had a button that dealt with opacity states. I would add two states to just that one layer - one for the higher opacity and another for the lower instead of switching between two elements.

Christophe Stoll

What i mean is: the full picture changes per state, not just singular properties I can tweak within Framer.

Joshua Tucker

Christophe Stoll Sorry if I still misunderstand you. You're saying that you're talking about pressing a button and the screen changes to the next page or something to that effect?

Christophe Stoll

Not the screen changes, the button ( = a sketch layer) I just clicked and the picture for the button post-click is another sketch layer.

Joshua Tucker

Gotcha. I still think states is the way to go. Depending on your hiearchy, you may need to declare multiple states because it will have one for the superLayer, say, or another for its subLayer. If you can post your project (Share), that might help a lot too.

Christophe Stoll

Thanks Joshua! Since i'm the person looking for help here, I will do all to make this easier :) Can't show the actual prototype though, will recreate it and share …

Joshua Tucker

Understandable – sorry I am not able to decipher what you're asking. I'm learning too :). But yeah, if you can, that would help.

Christophe Stoll
Joshua Tucker

Christophe Stoll You can use states – here's how it could be done http://share.framerjs.com/xbgfndul97c4/. Note that I, for the sake of time, created all the layers that you showed in code instead of Sketch. Nonetheless, the approach would still be the same. I tried my best to separate each section with a significant dash / comment indent. Does this help your situation at all?

Christophe Stoll

thanks Joshua! yeah, it totally helps. so you're basically using states to toggle opacity (apart from doing all the other things in a more elegant way :) — I was aiming for something like this: A sketch layer group "field" has two children layer groups "inactive" and "active". I was hoping to then be able to add "inactive" and "active" states to the "field" object to toggle between "field"'s states. you see what I mean? but I understand this is just not how framer states work. I will go the way you propose! thanks again.

Joshua Tucker

Christophe Stoll Cool! I see what you mean now – basically being able to set a state for the superLayer and have it toggle its children layers. Makes sense, yeah. As of right now, the approach I showed you I think is the way to go, unless someone else has better insight on that. But yeah, states are super, super helpful. Once you figure out how to use them effectively they really improve the overall flow.

Keep up the good work. As always, we love to see great work so keep us updated, and don't hesitate to pop in and ask questions. Soon you'll be able to come back and assist the next round of incomers :).

Read the entire post on Facebook