Learn how to build a simple card animation in Framer X (envoy.design)
5 years ago from Jon Rundle, Product Designer @ Envoy
5 years ago from Jon Rundle, Product Designer @ Envoy
This gets me thinking: is there any way to view different states in Framer X besides in the previewer?
What you've built here is essentially two different states of the card component, but one you can lay out on the canvas, and the other you can only see/manipulate through looking at a preview and then changing code. Seems kind of cumbersome, no?
It's definitely less redundant than having to copy over entire artboards as you would do in Sketch, but then again it seems that for the onClick state you lose the entire point of a design tool: being able to manipulate the components visually. That's too bad.
There is another way you could do this. You can build custom components in Framer X that you can toggle states on/off with. For example there's some good iOS status bars available in the Framer store and you'll see how those have these different states you can toggle on and off.
Essentially the same thing could have been done with what I have here this was meant more to show the micro-interaction of changing the state through animation but if you wanted that kind of control in the canvas and be able to use it on different artboards more statically that would be possible too. It's a bit of a different workflow but would definitely make sense based on what needs you had for your designs. I can see either one being useful for their own reasons. Hope that makes sense :)
Gotcha. Thank you for the answer. I'll have to play around with that :)
Nice! :) Did you have previous experience with Framer? or first time diving into Framer X?
Yeah I had used the original framer basically since the beginning when it first came out and was code only. The jump to Framer X was definitely quite a different one so I would say you don't need to have previous Framer knowledge to be able to jump into Framer X. Most of it was a re-learning experience for me.
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now