Origami Studio Tutorial #7 | How To Use Masking Layers in Origami Studio – UX Hacker

Origami Studio Tutorial #7 How To Use Masking Layers UX Hacker.
#OrigamiStudio #FacebookOrigami #Tutorials

Masking in Origami is a lot like other design tools, with the added bonus of being able to use masks to create advanced interactions and animations. We are going to prototype Messenger photo radius changes, which occur on lightbox open and close. If you haven’t already, download the tutorial files.

Setting up
We have already set up Image Container to change its Scale and Position properties to turn into a lightbox on Tap. The last thing we need to do is set a change in rounded-corners on Image itself. The Image needs a Radius of 28 when within-conversation, but a Radius of 0 no Radius when expanded to a lightbox.

Preparing a mask layer
Image layers do not have a Radius property. To create a radius on the Image layer, we will need to use as layer type that does have a Radius property and use that as a mask.

Rounded Rectangle is a layer type that does have a Radius property. Click the New Layer button and type to find Rounded Rectangle. Press Return ⏎ once it appears.

source