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

Francesco Bertocci
Apr 30, 2018 · 2 min read
“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&Prototype

Design and prototyping tools and create user experiences…

Design&Prototype

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.

Francesco Bertocci

Written by

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

Design&Prototype

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.