Prototyping Tools

Prototyping Tools

Prototyping tools allow for better communication between a designer and a developer or stake holders. With a prototype you can better explain how a design comes together as a whole as well as how interactions will look like in the final product. It also comes in handy for when you'd like to experiment with different elements. And as Tom & David Kelley said “If a picture is worth 1000 words, a prototype is worth 1000 meetings.”

Prototyping with Code

We have an entire section about this subject but sometimes using code for prototyping can lead you to better results in your prototypes. Tools like SwiftUI or Framer are really good options.

ProtoPie

ProtoPie is a very powerful tool, you can even connect hardware and do IoT tests with it. It has integrations with Sketch, Figma as well as Adobe Xd and the community is growing really fast. If you would like to learn more, we did a course about it where you can learn more tips and tricks.

Principle

Principle is one of the most complete prototyping tools; its UI is very similar to a design tool with a mix of After effects. Something interesting in Principle is that you can export the final prototype as a native Mac App or video mp4 among other options and of course, you can customize the timing and animation curves. If you want to learn more, we created a course where we teach how to use this tool.

Flinto

Flinto is another popular prototyping tool, it has integrations with Figma and Sketch. It is easy to edit or draw new shapes and you can also animate vector curves.

Kite Compositor

Kite Compositor is a very interesting tool. It lets you generate native core animation code. It also has integrations for Sketch and Adobe Xd.

After Effects

After Effects is a versatile tool and one of the pioneer tools in motion graphics and VFX; in the past years, AE started being a more prominent tool for UI design. If you know how to use it, you can create unique prototypes. If you want to take your skills to the next level, at D+C, we have a course on how you can create prototypes in AE.

Origami Studio

Facebook launched Origami Studio 3 and it has big improvements. Now it has integrations with Figma and Sketch, you can share your prototypes easily between devices. You can also give it access to your photo library, haptic feedback and GPS data. Origami Studio was inspired by Apple’s Quartz Composer, a tool that is famously used to prototype Facebook Paper.

Figma

Figma is one of the most powerful design tools. Besides its many distinctive features, you can also prototype your designs. It is convenient, and it doesn't rely on any third-party apps so that you can update your designs without the hassle of updating your prototype.

Framer

Framer enables you to create interactive prototypes that you can share easily. With Framer, you also have access to thousands of packages that includes buttons, animations, sounds and much more.

InVision

No list about prototyping tools is complete without mentioning InVision. Invision is a simple to learn tool with a variety of features and with seamless integration to Sketch.

Creating animations with Principle

For this exercise we will use Figma and Principle. So let’s open our Figma file and you will find the UI that we will use for this example.

Then, go to Principle and over there, let's go to the tab bar. Click on import, select the Figma Tab and hit on Import Page.

Now, open the Drivers bar which is at the top of the UI, so we can preview the Timeline of the position.

Next, let's enable the horizontal scroll for the cards and reduce the area of action. Defining the area of action will give us a clear idea of the limits of the scroll zone.

Now, we will select the cards so we can add drivers to them.

Make sure to select the scale property because we will modify it.

Select the bullet points at the bottom of the UI and reduce their opacity to 50%.

In drivers, let's add some keyframes for each one of the cards and change the values for scale and opacity for each of the cards. So, for the first card let's change its scale from 1 to 1.1 and at the same time change the opacity of the first bullet point from 50% to 100%. We will repeat the same process for the rest of the cards and the bullet points respectively.

These are the parameters for each one of the cards: for card 1 bullet point → 200, for card 2 bullet point → 0, for card 3 bullet point → 200 and for card 4 bullet point → 400.

Now let's test the animation, over here make sure that every time you scroll from one card to another, the bullet points on the bottom also change respectively.

One quick tip: In the area of action you will notice a sort of ruler that shows the starting and end points of the assets. We will see in the preview that the first and last card are too close to the edge. One solution for this issue is to extend the room for these cards.

Make sure to follow the same process for both cards.

Conclusion

Prototyping tools are an amazing way to collaborate with your team and with clients. To select the best tool, you've to keep in mind factors such as cost, ease of use as well as features. Make sure to choose the one that fits your needs the best.