Introducing Anima 3.0 — High-Fidelity Prototyping in Sketch
What is Anima v3 and what’s in it for you
🤔 It’s Hard to Communicate User Experience
Even with so many design tools out there, there is still no easy way for Sketch designers to create, share and collaborate on a real, functioning version of their design.
Product Design is more than screenshots or mockups. In today’s world company success or failure lies heavily on the user experience of their product.
“The responsibility to deliver amazing user experiences lies at the hands of designers”
The responsibility to deliver amazing user experiences lies at the hands of designers, and yet it is still very hard to create High-Fidelity user experiences without jumping through hoops (i.e using multiple design tools) or depending on developers availability.
💁♀️ Create Amazing Prototypes, Right Inside Sketch
Whether you’re designing a mobile app, a web dashboard, or a website, with Anima v3 you can finally have your team members, stakeholders, or clients, experience a real version of your design.
Why do you need High-Fidelity Prototypes?
High-Fidelity Prototypes are best for:
- Delivering experiences rather than screenshots.
- Building consensus within your team.
- Conveying innovative design ideas to stakeholders.
- Saving precious time and frustration with your developers.
What makes a Prototype High-Fidelity?
According to the Cambridge dictionary, Fidelity means “the degree to which a copy of something shows the true character of the original”. A High-Fidelity Prototype is responsive and interactive. It looks, feels and behaves like the real product.
What is the difference between a High-Fidelity Prototype and other Prototypes?
Most of the prototypes today focus on the visual aspect of the design and the flow of screens (Tappable Screenshots). While good for some use-cases, they do not convey the real experience of using the actual product.
🙋♀️ How to Build a High-Fidelity Prototype Using Sketch & Anima 3.0 ?
Step 1 - Build
The first step for building a great design is to make it consistent and predictable by using our Layout features i.e Stacks, Padding and Pins.
Now that everything is responsive and adapts itself to every possible screen out there, we can continue to set up the Flow of our prototype. Use Links, Breakpoints, and Overlays to enable users to navigate throughout the prototype.
Next thing to do is to make your layers smarter. What does that mean? good question.
Ever designed a form and wished people can actually type into it? Well, look no further. Using Smart Layers you can set a Text Layer to become a real input field, and a button to become a real Submit button. Do that and you got yourself a real, live form.
If your design contains a video then up until now you might have placed a thumbnail of that video and told people to “imagine this is a real video playing”. Those days are gone. Simply set that layer as a Video and assign a video link to it. The High-Fidelity Prototype will present a real video player right there.
There are more types of Smart Layers, you can even embed your own custom HTML/Javascript/CSS.
Step 2: Previewing
When performing the steps above, at any time you can quickly preview your prototype in your browser to make sure everything is working smoothly.
The “Preview in Browser” button is always visible for fast access.
When you click it, a Draft version of your prototype is created. Only you can view this Draft version. Even if you’ve already shared your prototype with others, you can still create as many drafts as needed before syncing your changes to the prototype you have shared.
Step 3: Sharing
After several iterations of building and previewing your High-Fidelity Prototype, it’s time to share it with your stakeholders*.
In your Draft link, click “Sync” to sync your changes to the live version of your prototype. Click “Share” for a share dialog and invite others to visit, or share using a public link.
Important note: You can create as many Drafts as you want.
The live prototype link will not change until you sync your changes to it. This makes it easy for you to both be able to iterate quickly in your own playground while having others experience your Prototype without the fear of breaking it.
Stakeholders: Can be Team members, Higher-ups, Boss, Client, Beta Testers
Step 4: Collaborating
With Anima v3 you can set up a team, invite guests, or share a public link.
People that have access to your prototype can play with it, and very importantly can also comment on it.
This lets you gather feedback quickly and conveniently. Use this feature to build consensus within your team, or get a sign-off from your clients.
We believe that designers should own their design all the way to production. While today’s tools help you communicate with developers, we aim to put you in charge. No coding, but a new generation of stronger visual tools. Imagine having coding skills, without the need to code. That’s what Anima is all about.
