Design&Prototype
Published in

Design&Prototype

Sketch: “Adaptable” Bottom and Top-Right Pinned Menus using Anima App

“Adaptable” bottom aligned menus (Left) and Top-Right aligned menu with Anima App

At the moment the only way in Sketch to make an “adaptable” Bottom and Top-Right Pinned Menu using Anima App is to “hack it”. (If you landed here it’s probably because you tried it before and didn’t really work fo you… It was a problem for me too, hence this hack 🤪)

Get the sample file or read below:

  1. Apply a 180 degree rotation (Transform) to the stack
Apply a 180 degree rotation

AND to the actions/elements in the stack (Visually it will look the same as your original menu.)

2) Make sure to pin your stacks (bottom or top right)

Pin your stack or symbol (bottom like above, or top right)

Now when you hide an element within the stack the other will collapse correctly and adjust accordingly.

It works with normal stacks and with stacks inside symbols. Same hack for right aligned menus.

Tricky but does the job! :)

👉 Here you can download a sample file.

Let me know if you have any questions, follow the Design&Prototype Marketplace for tips, tutorials, UIKits and more.

Ciao!
Francesco

--

--

Design and prototyping tools and create user experiences for Mobile, Desktop, Wearables and beyond! I started this group to meet other prototyping enthusiasts and learn from each other.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Francesco Bertocci

Francesco Bertocci

Design Advocate & Ambassador at Sketch / Product/UX/UI Designer, Prototyper & Founder of Free&Willing https://FreeAndWilling.com/fbmore