Hey everyone 
We’re so excited about all the new prototyping features in Sketch 100, and we can’t wait to help you make the most of them.
Whether you’re wondering what you can do with our prototyping tools or you already have a document you want to take to the next level, we’re here to give you a hand. Simply, ask us a question or send us a sample document.
1. Ask a question
Ask away, whatever’s on your mind, let us know! From the basics on how to create a hover interaction to advanced components like multi-level menus or a scrolling sidebars that show or hide on click. We’d love to hear what you want to create.
You can post your question here or send it our way to productsupport@sketch.com
2. Send us a sample document
If you have a prototype you want to level up, send us a sample file at productsupport@sketch.com and let us know what you want to build — we’ll get going and share a proposal with you.
Looking for inspiration?
Check out these videos to discover what you can do with our prototyping tools right now 
Hover, press and toggle interactions
Scrollable areas
9 Likes
Hi Jorge, I am loving the new prototype functions. I have been playing around with it and have a few questions:
- Can we use protype tools at symbol level, ie can we link button states at symbol level to include hover and pressed states so we have them set up at the point we insert the master button symbol ?
- Can we affect other symbol states with another symbol state ?
example: I have an ecommerce project, Can i create a button with default, hover and pressed states (the pressed state would include a text change (“add to cart” → “added to cart”) This would be a change to the button state which should persist after the user has moused away from the button. Could this also link to a cart icon which would now show a “1” in the cart icon?
1 Like
Hey @marktmcewan !
Thanks so much for sharing this use case! And I’m also super glad to read that you’ve been using the new prototype features!
First the answers to your questions:
Can we use prototype tools at symbol level?
Yes, this can be done and is actually a super efficient way to create reusable interactive components. For this use case, I created a button with hover and toggle interactions. I created an extra symbol to handle the toggle so I can set instances with the default style or the hover style, whichever is needed (you can skip the symbol and use plain layers, but then the instances can only be used with the initial state, since the toggle will always be hidden on canvas)
Can we affect other symbol states with another symbol state ?
Well, strictly speaking this is not possible, but you can get the desired effect in this case with an overlay.
I created a mockup with the screenshot you shared and made a video, I hope it’s useful and I’d love to hear your thoughts about it.
Video link: CleanShot 2024-06-24 at 10.54.11
I’m also attaching a sample Sketch document so you can give it a try.
Thanks again for sharing! 
Toggle and overlay.sketch (4.7 MB)
3 Likes
Thank you Jorge. Greart answer and great video explaining it. I have grabbed your file and will replicate your logic into my project.
1 Like
Thank you for sharing this use case Mark! I’m very glad to read that it was useful. Let us know if we can help with anything else
Cheers!
1 Like
