Prototyping with 3d Animations

Flinto
Flinto
Published in
2 min readAug 25, 2016

Flinto for Mac is one of the few UI design tools that supports 3D rotation of layers, and it enables some really cool effects. Here’s an example.

Photo flip transitoin created with 3d layers

The rotate inspector has inputs for X, Y and Z. If you think back to high school algebra, you’ll remember that the Z axis is the one that comes out towards you. If you rotate around that axis, it’s what you usually think of as rotation in a 2D graphics app.

Rotating around the X and Y axis are where things get interesting. As you adjust these values, the layers start to flip around in 3D. If you click and drag on the labels under the values, you can adjust these values in a smooth, visual way.

Adjust X, Y, and Z axis rotation in the inspector

Here’s a nice detail: You can adjust the perspective of your document. If you click in an empty area of the canvas, you’ll see the document inspector, where you can set the perspective. Default is 800pt. This value corresponds to how far the layers are from a pretend camera. Higher values look more flat, lower values show more extreme perspective.

There is a single vanishing point in each screen. That means 3D rotated layers will look slightly different as you move them around the screen. This creates a realistic 3D effect.

Maintaining support for 3D rotated layers and groups adds complexity throughout the app. How could we justify the extra work required throughout the app to build this kind of feature? I think the ultimate justification is, “It would be so awesome!” I really mean that. A lot of people dismiss the notion of doing something just because it would be awesome. Awesome things are what makes your work fun and interesting, and are often what delight customers the most.

Learn more about Flinto for Mac at our website.

--

--

Flinto
Flinto

Flinto lets designers quickly make interactive prototypes of their mobile, desktop, or web apps.