With over 1 million installs on Figma, Anima is the best way to turn designs into code.

In this article, we’ll show you how to turn Figma into clean React code instantly. Anima can produce React components or even full flows with multiple screens, links, and responsive layouts.

What to expect from Anima’s code:

• Pixel-perfect, clean code that runs out of the box.
• Figma variants support, as well as props and sub-component support.
• Responsive CSS flex layout based on Figma Auto Layout.
• TypeScript / JavaScript, with CSS / SCSS / Tailwind / Styled Components styling.

How to convert Figma designs to React code

Anima provides 2 ways to export code for different use cases:

1. React code for an entire full flow, with multiple screens & links – Great for Marketing sites, PoCs, MVPs, or to kickstart a new project.
2. React code for a specific component – Great for code handoff to engineers on an existing project.

Generate React code for full flows with links

1. Install & open the Anima plugin in Figma
2. Select the Figma screens you’d like to convert to React.
   If you have multiple layouts for the same screen, use the Breakpoints feature.
3. Click the ‘Get Code’ button → Choose “React”.

4. Click ‘Go to Anima’ when syncing is complete. 

   You’ll be directed to your project in Anima’s web app, where you can download the full code package, ready to run. 

Get Anima plugin for Figma

Generate React code for a specific component

1. Switch to Dev Mode using the toggle at the top of Figma’s Inspect panel, and run Anima’s plugin.
2. Select any Figma component, layer, or frame.

3. On the right panel, you will get runnable code at your choice of framework: React, Vue, or HTML, with CSS, SCSS, or Tailwind.
4. Download the code or run it on Anima’s online playground using the buttons at the bottom.

No Dev Mode access?

• Edit mode – Use Anima in Edit mode and click “Switch” to inspect a single component.
• VSCode beta – Anima is coming to Visual studio code, get the beta here.

Build frontend 2x faster with Anima

Get Anima plugin for Figma

Video tutorial: How to export React components in Figma Dev Mode

The post Figma to React: How to get clean React code in Figma appeared first on Anima Blog.

Connect your different frame sizes as as one exportable screen

Who is it for?

Developers that want to streamline frontend builds with responsive, boilerplate React code right from Figma.

Why we added this feature

Anima’s generated code saves you the grunt work of building UI from scratch, and we’re constantly improving its quality to give you better, faster, more scalable results. And while we already produce reusable, interactive React components from any Figma design, we have a lot more to do.

Recently, many developers have asked us to support React media queries in our generated code. Why? Because media queries are the most efficient way to add responsive behavior in production, but they’re tedious to apply manually.

You asked, we listened!

Anima now turns screen layouts for different display sizes into responsive React code, with minimal manual effort.

How it works

With Anima, you can simply…

• Connect your different frame sizes (e.g. homepage-mobile, homepage-desktop..) as one exportable screen (e.g. responsive homepage)
• export reusable React with media queries applied for an interactive, responsive result out of the box. 
  

Try it now!

Thoughts? Special Requests?

Join our new Discord channel and help us shape the future of front-end 

The post Generate responsive React code from any Figma design appeared first on Anima Blog.

If you’re a sales leader comparing software demo tools for your team, you’ve come to the right place. In this article, we’ll break down eight of the leading SaaS demo solutions so you can pick the best one for your needs.

Benefits of software demo tools

The way we buy and sell SaaS products has changed dramatically over the last decade. In the age of instant gratification, prospects no longer want to hear what your product can do for them. They want to see it in action and experience it for themselves. They want to make informed, empowered, independent decisions. And they want it all now—with or without you present.

But don’t worry. The days of waiting weeks for R&D to build an interactive demo environment, or incorporating product screenshots into your PowerPoint presentations (yawn), are over.

Today’s software demo tools make it quick and easy to tailor targeted, interactive demos for every prospect without a developer—or a delay. And because prospects can navigate these demos independently, they’ll understand your product’s value before the first sales call and be more likely to convert from day one.

8 software demo tools for SaaS sales teams

Here are our top picks for sales teams that need to deliver immediate value to prospects:

1. Anima
2. Walnut
3. Navattic
4. Reprise
5. Demoboost
6. Regale
7. Storylane
8. Arcade

Now let’s dive into each one.

Anima

How it works

Anima is the only tool on this list that lets you sell new features without involving R&D. In one click, you can turn any Figma design into an interactive, responsive demo prototype that looks, feels, and functions like the final product. That means prospects can actually experience your offering firsthand, with interactions, animations, transitions, and rich media fully intact. 

And since demos created with Anima are HTML-based, you can share live links, download and use them offline, and embed them into websites and landing pages. It’s a great tool for selling potential or upcoming features that haven’t been sent to development yet.

Pros and cons

Sell features that haven’t been developed yet
Generate fully interactive, responsive product prototypes from Figma instantly
If you can add or change it in Figma, you can include it in your demo
Share a live version of your product, not a stitched series of static screen captures

Lacks built-in analytics tools (but easily integrates with several)
Requires basic knowledge of Figma and/or coordination with designers

Integrations

• Hotjar
• Fullstory

Pricing

Free plan:

• $0/month
• 1 project with up to 5 screens
• Unlimited free seats
• Can’t export code

Pro plan:

• $49/month per pro seat
• 3 projects with up to 15 screens
• 1 pro seat included
• Export HTML, React, and Vue
• Custom domains
• Priority support

Enterprise plan:

• Starts at $790/month
• Custom number of screens and seats
• Advanced security and SSO
• Premium support from a dedicated account manager

Walnut

How it works

Walnut was one of the first interactive software demo tools to hit the market, and helps you quickly create tailored, interactive software demos for your prospects without a developer. All you need to do is capture your product’s screens from your web browser, then use Walnut’s codeless visual editor to customize text, images, features, and colors for each prospect.

You can also create templates for specific use cases to quickly scale your demo delivery, and add custom HTML for more detailed demo edits. Plus, Walnut’s integrated analytics tools allow you to track demo performance and weed out unengaged prospects.

Pros and cons

Works alongside your existing SDR processes
Fast and easy to use, even with limited technical skills
Template creation and demo libraries are great for sales teams at scale

You can’t add new elements without a developer.
No live product simulations—only guided tours of your captured screens.

Integrations

• Salesforce
• HubSpot

Pricing

No standard pricing packages—Walnut tailors pricing for each customer.

Navattic

How it works

Like Walnut, Navattic allows you to capture a pixel-perfect copy of your product’s frontend, and customize, blur, or remove existing elements to personalize your demo. You can then share a link with prospects or embed your demo directly into your websites and landing pages.

Add prompts to targeted demos to guide your prospects through relevant features, or create self-guided tours that let them select the features or use cases they want to explore. Pair this with Navattic’s seamless CRM integrations, and you’ll be able to track feature interest before the discovery call.

Pros and cons

You can drive more qualified leads during presales with instant time-to-value.
It’s a simple workflow, demonstrated on their homepage.

There’s no template library feature, so every demo will be a one-off.
You can change or remove existing elements, but you can’t add new ones.
No custom HTML—limited to Navattic’s customizations
Product tours not optimized for mobile

Integrations

• Salesforce
• Hubspot
• Marketo
• Segment
• Google Analytics
• Zapier

Pricing

Standard pricing isn’t available—contact Navattic for plan pricing.

Reprise

How it works

Reprise is a powerful demo tool that’s well-integrated with sales and marketing toolkits and features robust built-in analytics. You can easily capture individual screens or your entire application, customize elements, and create guided tours for your prospects.

What sets Reprise apart from most other software demo tools is its ability to generate interactive product simulations. That means you can share live, functioning prototypes of your product instead of static demos with prompts—although you can’t add new elements, change layouts, or demo anything that hasn’t been developed already.

Pros and cons

Personalized, interactive product simulations without a developer
The most comprehensive built-in analytics dashboard on the list
More customization options than most

A complex user interface with a steep learning curve
Can’t add new elements or features to demos without R&D
No HTML editing

Integrations

• Salesforce
• Hubspot
• Marketo
• Google Analytics

Pricing

Free trial:

• $0/month
• Lightweight version with limited features

Comprehensive paid plan:

• Customized to customers’ needs
• Starts at $1000/month

Demoboost

How it works

Demoboost’s software demo tool makes it easy to clone demo versions of your product, showcase multichannel journeys, and highlight integrations in your demo flow. You can also create demo libraries for quick and easy repurposing.

Although your customization options are limited compared to Anima and Reprise, they’re still pretty robust. Plus Demoboost’s enhanced demo interactions—like the ability to submit a rating score—are great for both engagement and optimization.

Demoboost integrates with popular CRMs, and while its built-in analytics might not be as powerful as Reprise’s, its real-time prospect interaction notifications can help presales and sales tailor their approach on a dime.

Pros and cons

Easy to use with above-average personalization
Multichannel journey creation
Real-time prospect interaction notifications

Can’t add or rearrange elements
No custom HTML input
Limited integrations & fewer baked-in features than others on the list

Integrations

• Salesforce

Pricing

Not available—contact Demoboost for custom plan pricing.

Regale

How it works

Regale is a Windows desktop application that lets you easily capture your product’s images and animations, track where you clicked, and assemble a demo. The intuitive builder simulates a live demo without developer involvement, including page transitions and text inputs. You can even export to a static HTML site.

Although you can’t customize elements like you can with other tools on this list, you can create both guided tours and a more realistic product experience. Plus you can view detailed analytics for simulations.

Pros and cons

Simulate your actual product
Create self-guided multiple-path demo scenarios
Export your demos as static HTML sites and share a link

Only works with Windows OS
No customization options
Self-contained—no CRM integrations listed

Integrations

• No CRM integrations
• Connects to Microsoft office tools like PowerPoint

Pricing

Regale offers a free limited trial, and paid plans start at $960/year

Storylane

How it works

Storylane’s browser extension captures your product’s screens and interactions, then turns them into guided tours with simple drag-and-drop tools. It allows you to change images, content, and files with its no-code editor, and create a branded look for your demos in minutes.

You can create unique demo links to embed or share, and even generate gifs of your chosen flow. Storylane’s analytics suite is also powerful and gives you an in-depth look at user engagement, interactions, and clicks—and pushes data to a number of popular CRMs.

Pros and cons

Easy to learn and intuitive to use
Lots of CRM integrations
Create unique demo URLs
Add custom HTML for more customization

Limited customization options beyond images, content, and files
Only replicates image-based screens—overlayed guides make it feel interactive

Integrations

• Zapier
• Salesforce
• HubSpot
• Marketo
• Pardot

Pricing

Free plan:

• $0/month
• 1 published demo
• 1 user
• Walkthrough widgets
• Analytics

Startup plan:

• $50/month per user
• Screen recording
• Full product tour
• Advanced analytics
• Zapier & Hubspot integrations

Growth plan:

• Custom pricing
• Includes everything in the startup plan, plus
• HTML application capture + demo editor (text, image, graphs)
• Custom number of users & teams
• Personalization + clickable live demos + lead forms
• Integration with Marketo, Pardot, SDFC
• Dedicated Support

Arcade

How it works

Arcade automatically captures user interactions as you navigate through your product, and creates a unique demo that can be easily shared. You can also add interactive features like surveys and polls, so you can understand how users interact with your product. You can’t customize product elements for targeted demos, but Arcade is faster and more intuitive than most tools on this list.

Arcade’s analytics suite is comprehensive, offering views of customer engagement metrics across multiple demo versions. With its AI-powered insights, you can identify areas of improvement and quickly adjust your demos for better results.

Pros and cons

Quick to learn and easy to use
Add interactive features like surveys and polls
AI-Powered insights for real-time feedback
Comprehensive analytics suite with customer engagement metrics.

No product customization options
Limited integrations

Integrations

None listed

Pricing

Builder plan:

• Free
• Up to 3 publicly shared demos

Pro plan:

• $32/month per seat
• Unlimited demos
• Basic analytics

Team plan:

• Custom pricing
• Everything in pro, plus
• Collaborative demo building
• Advanced analytics
• Custom branding

Wanna demo new features before they go to development? Anima can help.

The post 8 software demo tools for SaaS sales teams appeared first on Anima Blog.

If your product team is switching to Figma, you’re in good company. Many organizations are making the jump, driven by Figma’s web-based collaboration features and extensive community resources. Plus, many predict that Figma will eventually replace XD in Adobe’s lineup.

But if you have a large, dynamic design system, manually migrating your code components into Figma is a months-long process that requires a dedicated team. This can significantly slow progress, as designers are focused on migrating and maintaining instead of building.

Anima automates the migration process, transferring your entire coded component library into Figma, including variants and Auto Layout. And it takes days instead of months—without a dedicated team.

All migrated components include variants and Auto Layout properties defined in the code 

How Anima transfers your code components

Anima migrates your production components from Storybook to Figma automatically. And if you don’t have a Storybook, Anima’s team will generate one from your GitHub component library.

From Storybook to Figma

If you’ve got a component library in Storybook, Anima will turn it into a native Figma library in a single click. Anima turns props into Figma variants, responsive CSS into Auto Layout specs, and maintains all naming conventions from the code. Designers are notified when a component changes in Storybook with the option to update it in Figma automatically, so continuous syncing is a breeze.

From GitHub to Storybook to Figma

If you don’t have a Storybook set up, Anima will generate one from your code components in GitHub. Once complete, you can convert your new Storybook into a native Figma library with all of the variants and Auto Layout properties you’ve defined in the code. And with automatic updates in Figma, you’ll stay synced with your code base.

Anima brought this button component and all of its variants from Storybook into Figma

Benefits of migrating to Figma with Anima

Minimal downtime

Anima automates what would take a team of designers months to complete, so there’s no need to reallocate resources and stall product development to support your component migration.

A sustainable single source of truth

Anima brings your current code components into Figma and keeps them synced, ensuring that design and development are using the same building blocks.

Live React components in Figma

Anima renders your Figma components into their React equivalents without a developer, so designers can easily create coded prototypes using your production components.

Seamless handoff and easy adoption

Anima turns Figma into React with references to your design system code components, which prevents new developers from using the wrong components or rebuilding existing ones. This accelerates the development lifecycle, increases design system adoption, and reduces redundancy.

Infinite scalability

Design systems are getting larger and more complex, and the cost of manually maintaining them will soon outweigh their benefits. Anima automates the manual bottlenecks—from migration to management—so you can scale sustainably with your existing team.

Migrate your React components into Figma in days, not months.

Try it now

The post Migrate your React components into Figma automatically appeared first on Anima Blog.

Generated by Dall-e 2 AI: “A robot painting a Jackson Pollock rendition” 

Designing visual assets for your product can be tedious and time-consuming. AI-generated art is a great solution, as it allows you to turn your ideas into beautiful custom assets without designing from scratch—and might even spark a new way of thinking. With AI art generators, you can instantly create custom images that match your brand’s aesthetic instead of spending hours at the drawing board.

In this article, we’ll explain what AI-generated art is, how to create it, and what the benefits are for product designers.

In the spirit of automation, we wrote this article using Jasper, an AI writing assistant. Plus, every visual includes images from either Midjourney or Dall-e 2—some of the most popular AI art generators.

What is AI-generated art?

AI art is artwork that is created by a computer using machine learning algorithms. These algorithms allow the computer to learn from examples and create its own images based on user instructions, resulting in truly unique artwork. No two pieces are ever exactly alike.

Each of these avatars was generated by Midjourney's AI

AI art generators can be used for product design to create visuals that match your product’s aesthetic. Additionally, AI art generators are easy to use and can save you time and money compared to traditional design methods. They’re a great way to create unique and eye-catching visuals quickly and easily—from digital art to impressionist paintings—without needing any special artistic skills or training.

Benefits of Using AI-Generated Art for Product Design

Save time

AI art generators allow product designers to create custom assets quickly and easily. This can save countless hours spent designing manually.

Improve UX

Avoid the most repetitive and iterative design tasks, and focus more on how to elevate the user experience.

Get inspired

AI art can be a great source of inspiration for product designers. The beautiful, stylized images created by AI can give designers new ideas for the product.

Create unique visuals

With AI generated art, product designers can create one-of-a-kind visuals that are still consistent with their brand’s visual language.

Design realistic prototypes

Create more realistic prototypes in less time to better convey your vision and get more relevant user testing insights.

How to create AI generated art for product design

Creating AI generated art for product design is relatively straightforward. All you need is an AI art generator like Dall-E 2 or Midjourney. Generally speaking, all you need to do is:

1. Input text instructions describing the image you want to create (some platforms allow you to add reference images as well)
2. Generate an AI image or series of images based on your input
3. Select your preferred image (if more than one)
4. Iterate by adjusting text input (or reference images) to finetune your asset
5. Download the visual in the format and location of your choice
6. Add your AI-generated asset to your designs

Dall-E 2 generated images: “a pencil sketch of a sad monkey playing a ukulele in the rain”

Live example: an NFT app with AI generated visuals

We designed this live, responsive NFT Marketplace Template in Figma using Anima. We quickly added interactions and functionality with Anima’s plugin and created the visuals using Midjourney’s AI art generator. We then synced it with Anima’s web app and generated this live prototype in a single click.

Anima is another AI-based tool that uses machine learning to turn Figma, Adobe XD, and Sketch designs into developer-ready React, Vue, and HTML code automatically. And since designs created with Anima are backed by code, you can create and share fully functional prototypes—like our NFT app—without a developer.

A live NFT app UI created with Figma, Anima, and Midjourney

The future of AI in product design

As AI technology and machine learning algorithms improve, the field of product design will adapt to incorporate them. AI tools are becoming increasingly advanced, accessible, and easy to use, meaning product designers will have more opportunities to leverage them in their daily workflows.

We expect AI art generators to become more sophisticated and powerful as the technology advances—allowing for greater customizations and more complex visuals with fewer instructions. We’re excited to continue exploring these possibilities and see what the future holds!

In a nutshell

• AI art is artwork that is created by a computer using machine learning algorithms
• AI art generators can be used for product design to create visuals that match your product’s aesthetic
• AI-generated images can be a great source of inspiration for product designers
• With AI generated art, product designers can create one-of-a-kind visuals that are still consistent with their brand’s visual language
• Creating AI generated art for product design is straightforward and can save time and money
• Anima is an AI-based tool that turns Figma, Adobe XD, and Sketch designs into developer-ready React, Vue, and HTML code automatically.
• With the right tools and tips, you’re now ready to start creating beautiful and unique visuals for your next product launch!

Use Anima’s AI to launch live prototypes & export code right from your design tool! Sign up now

The post How to use AI-generated art in digital product design appeared first on Anima Blog.

If you’re reading this article, you’re likely confused about the difference between wireframes and prototypes. Don’t worry—we’ve got you covered. But before we differentiate them, we need to understand the function of each within the product design process.

The goal of product design is to generate products that satisfy users’ desires and solve their problems. That’s because developing products users want and need guarantees market alignment and vastly increases your likelihood of success.

Sounds easy, right? But how do you achieve this? What steps can you take to make sure your users remain central?

While there are numerous steps in the ideal user-centered design process, wireframing and prototyping are among the most critical for establishing product-market alignment.

Here we’ll explain the unique role of each, then highlight the differences between them. More importantly, however, we’ll describe how they work together to produce products that solve users’ problems intuitively and enjoyably.

What are wireframes?

Wireframes are quick-and-dirty, low-fidelity outlines of your product’s layout and most essential components. Their goal is to work out how your product will solve your users’ problems without the distraction of a pretty UI or the need to optimize the experience. Just roll up your sleeves and get your ideas on paper—the uglier the better. Wireframing:

• presents your proposed solutions early in the process so you and your team have something to talk about.
• is the swiftest way to get feedback from collaborators (including developers) while the product is still in its infancy.
• allows teams to quickly brainstorm and experiment with layouts and features that might meet users’ needs more effectively.
• uses placeholders for visual assets, but includes preliminary written copy that addresses user pain points and indicates how they’ll move through your product.
• optimizes structure and content for users while the stakes are low—before investing time and money in the actual UI.
• can be done with paper sketches or simple digital renderings.

A series of hand-drawn wireframes (source)

What are prototypes?

Prototypes apply a design system to the structural blueprint established in your wireframes. While early-stage, low fidelity prototypes can look a lot like wireframes, late-stage prototypes are generally high fidelity and intended to look, feel, and (hopefully) function like the real thing. Their goal is to make sure the solutions established in your wireframes are accessible, intuitive, and enjoyable to interact with. Prototyping:

• produces navigable artifacts that can be tested with users, presented to stakeholders, and ultimately handed off to developers.
• adds visual assets, color, and media to the skeletal structure established in the wireframe phase, which helps users more intuitively navigate to their desired objectives.
• relies on user feedback to identify friction points and opportunities as early as possible, so you can iterate and improve until the design is seamless.
• incorporates some or all of the design assets that will appear in the final product, depending on fidelity (later prototypes should include all assets and, ideally, be fully interactive and responsive).

A high fidelity prototype (source)

What’s the difference and why does it matter?

Now that we’ve established the independent roles of wireframes and prototypes, let’s take a closer look at how they’re different—and how they work together. Consider the following analogy:

Planning a building (conceptualizing your product)

Think of your product as a building you’re planning to construct. Before you begin, you need to determine the building’s purpose; the problem it’s intended to solve. Easy peasy! Your target users are sick and want to feel better, so you decide to make your building a doctor’s office.

Drawing blueprints (creating your wireframes)

Your wireframes, then, are the blueprints for your soon-to-be-built medical masterpiece. At this stage, you flesh out your proposed solution on paper. You optimize the building’s layout and basic features. Your goal is to help users get from the front door to their final objective—to be poked, prodded, and treated by a bona fide doctor.

With that goal in mind, you decide the building should have three rooms. You draw a waiting room, receptionist area, and exam room. You indicate where the furniture will be placed and label each room accordingly so collaborators can understand how patients will move through the space.

You’re pretty sure you nailed the blueprints, but when you share them with your construction team, someone points out that you forgot to add a bathroom. But where should it go? It needs to be easily accessible from all three rooms, which requires some reconfiguration.

You continue this process until you’ve settled on a structure that gives users a clear and painless path to their desired solution: a coveted seat at Dr. Shmoctor’s exam table.

Constructing the building (iterating your prototypes)

Now you’re ready to begin construction. Your early low fidelity prototype is a stripped-down version of the building—the walls, floors, ceiling, window openings, and door frames.

At this point, it’s little more than an interactive version of the blueprint you created. But it’s enough to have patients and collaborators walk through the space, gauge their early feedback, and adjust as needed.

Next you’re ready for high fidelity prototypes. This is where you’ll apply your design system: painting surfaces to make the space feel inviting, adding windows for airflow, doors for privacy, furniture for comfort, and fixtures for function. You even add a water cooler in case patients get thirsty while they wait. You show this iteration to the office managers (stakeholders) to get approval, and they like what they see.

The previously barebones structure now looks, feels, and functions like a real doctor’s office. Again you bring patients to test out the space and give their feedback. Colors feel depressing? Change them. Furniture too firm? Replace it.

You continue iterating like this until patients can arrive, check in, sit comfortably, and ultimately see the doctor without friction or intervention. This is the result of a user-centered design process that started on paper and ended with a perfect product.

Wireframes and prototypes compared:

But what if this isn’t your process?

We know we’re presenting an ideal scenario here, and that you might not have the luxury of completing a traditional end-to-end design process.

The most important takeaway—whether you’re a solo designer at a startup, a corporate drudge with impossible deadlines, or somewhere in-between—is to make sure you understand the problem you’re trying to solve before you try to make it pretty.

The short version

Wireframes are quick-and-dirty, low-fidelity outlines of your product’s layout and most essential components that demonstrate how your product will solve your users’ problems.

Prototypes utilize user-friendly design systems, user testing, and iteration to make the solutions established in your wireframes accessible, intuitive, and enjoyable to interact with.

In reality, many designers don’t have the time or resources to undertake every step of the design process. Regardless of your limitations, it’s important to understand the problem you’re trying to solve before you try to make it pretty.

Translate your wireframes into fully functioning code-based prototypes—in your existing design tool—using Anima!

• Get the Anima plugin for Figma, Adobe XD, and Sketch
• Sign up to Anima now
• Learn with Anima 101

The post Wireframes vs prototypes: different deliverables with a common objective appeared first on Anima Blog.

Great UX isn’t a product of your imagination. It’s a product of extensive research, careful planning, repeated testing, and many trips to the drawing board. So how do you make sure this process is as efficient as possible? How can you be certain you’re designing with your users in mind?

The most important foundation of a streamlined, user-centered design process—besides user research—is the user flow. It’s a simple diagram that shows a user’s potential paths through a product, and it does wonders for your design workflow.

Here we’ll explain what a user flow is and how to read one, then describe its fundamental role in creating great UX.

What is a user flow?

A user flow is a basic visual map of a user’s potential paths through a product—in this case, an app or a website. This map can represent an entire product or simply a task within that product, like subscribing to a newsletter or making a purchase.

A user flow begins at a user’s entry point into a product or task, like a landing page or shopping cart, and ends at a final interaction, like completing a sign up placing an order.

Visualizing how a user might move through your product allows you to zoom out and consider the effectiveness of its overall structure. This way you can identify and address potential user obstacles to improve navigability.

An example of a basic user flow structure

How to read a user flow

A user flow lays out the series of steps a user takes to get from the entry point to the final interaction. Every step, or node, is represented by a circle, rectangle, or diamond, each of which indicates a different type of action the user must take. These nodes are connected by arrows indicating the user’s direction of movement through the product.

Here’s a breakdown of each user flow building block:

User flow components explained

When to create a user flow

If possible, you should create a user flow early in your design process—ideally right after your initial user research. This way you can optimize the flow before you start designing. You’ll be able to see problem areas, remove unnecessary steps, and determine which screens you’ll need to produce for your early prototypes.

It’s worth noting that user flows can also be created at any point during a product’s development, or even after a product has been released. If you need to visualize and assess the overall structure of a potential or existing design, user flows are a quick, effective solution.

The role of user flows in UX design

Now that you know what user flows are and how they work, we’ll have a look at their role in the UX design process. User flows can help you:

1. Create an intuitive interface

Visualizing the flow of users through your product or feature will highlight friction points, redundancies, and potentially confusing elements before you build them into your design. If your user flow doesn’t provide a direct and intuitive path to an objective, chances are the final product won’t either.

2. Evaluate an existing interface

User flows are a great way to optimize existing products that may not be converting or retaining as expected. In cases like this, you can implement user flows to visualize and optimize processes where users are bouncing or churning.

3. Convey your strategy to team members and stakeholders

User flows aren’t just great for your design workflow. They’re great for collaboration as well. User flows give teammates, decision makers, and stakeholders a better understanding of the user experience architecture behind your product. This minimizes misunderstandings and speeds up buy-in.

User flows can also help developers understand the overall structure behind your final prototype, which makes handoff more efficient.

An example of user flow for a login process (task flow)

User journey vs user flow

The terms user journey and user flow are often used interchangeably, but they’re not the same thing. Each one focuses on different layers and levels of detail within the overall user experience.

User journeys illustrate a specific user’s relationship with your product, including how they arrived at the product as a solution and what pain points and motivations drove them to it. User flows, on the other hand, show all potential paths any user can take through the product itself.

4 key differences between user journeys and user flows:

1. USER JOURNEYS focus on what users are thinking and feeling at each step, while USER FLOWS focus on what users are doing
2. USER JOURNEYS begin before the user first interacts with the product and continue after the user has finished, while USER FLOWS begin at a user’s entry point into the product and end at the final interaction
3. USER JOURNEYS focus on specific user personas, while USER FLOWS focus on general users
4. USER JOURNEYS  tell the entire story behind a user’s interaction with a product, while USER FLOWS simply show a user’s potential paths through a product

User flows in a nutshell

There you have it. User flows for UX designers are a lot like outlines for writers. Both are structural frameworks that help organize and refine the flow of the final product before development begins. User flows:

• demonstrate the potential paths a user can take through a product or task— beginning at the entry point, moving through the steps, and ending at the final interaction
• consist of 4 main building blocks: circles (start/finish), diamonds (decisions), rectangles (processes), and arrows (direction of movement between steps)
• should be created right after initial user research is complete in order to outline and optimize the design process that follows
• can also be created later in the design process or for existing products that need usability analyses and process improvements
• serve 3 primary purposes: creating intuitive interfaces, evaluating existing interfaces, and conveying your strategy to teammates and stakeholders

Test yourself:

What are user flows?

A user flow is a basic diagram of a user’s potential paths through a product (an app or website) or task within that product (subscribing, purchasing, etc). It begins at a user’s entry point into the product or task and ends at their final interaction.

Why do we use user flows in UX design?

In a single diagram, user flows convey how users will move through your entire product. This wide view allows you to consider the effectiveness of your proposed structure and flow. You’ll be able to spot and resolve friction points and begin optimizing the UX before you start designing.

User flows can help create intuitive interfaces, evaluate existing interfaces and convey your product’s structure to teammates and stakeholders.

Wanna build fully functioning prototypes based on your user flows? Try Anima now.

• Get the Anima plugin for Adobe XD, Figma, or Sketch
• Check out Anima 5’s prototyping superpowers
• Sign up to Anima now

The post What are UX user flows and why are they important? appeared first on Anima Blog.

If you’re looking for your first UI/UX design job, there’s a lot to consider. Will you work at a startup or at a more established company? Will you focus on UX research, UI design, or both?

Not sure which skillset to highlight? Check out this article comparing UX and UI.

Regardless of the direction you choose, one thing’s for sure. If you want to land an interview, you’re going to need a great portfolio.

In this article, we’ll discuss why you need a UX/UI portfolio, what it should include, and how to make yours stand out using design best practices.

Why do you need a junior UI/UX designer portfolio?

As a UI/UX designer, your portfolio is your most important personal branding document. While your resume or CV describes your skills, your portfolio demonstrates them. You can lay out work samples, illustrate your approach, and show potential employers who you are and what you’re about.

What you might not realize, however, is that your most important work sample is the portfolio itself.

Not sure where to start? Try our live portfolio template for Figma for some creative inspiration.

Why is UI/UX portfolio design so important?

Work samples aren’t interactive

In a UI/UX portfolio, each work sample is presented as a case study; a static mockup of your design accompanied by a detailed breakdown of your process. This allows you to highlight your:

• UX research skills
• route to the final product
• ability to speak a cohesive visual language`

An excerpt from a UX case study with static mockups (source)

So what’s missing?

Since case studies present static mockups of your prototypes, recruiters have no way to gauge how usable or intuitive they are in real life.

That’s where your portfolio comes in.

UI/UX portfolios are user interfaces

Your portfolio website is a fully interactive interface that you’ve designed—and potential employers are its target users.

Recruiters will only spend a few minutes reviewing your portfolio site, so its usability will be their best indication of your design chops.

But how can you be sure your portfolio aligns with recruiters’ goals? You’ll need to conduct user research.`

How to conduct user research for your UI/UX portfolio

You can’t conduct traditional user research with potential employers. Luckily, the user insights you need are already at your fingertips.

Here are 3 excellent resources for user insights:

1. Job postings:
   Recruiters have already done the work for you. Job postings provide details about the company culture, structure, and goals. You’ll also get a bulleted list of their wants and needs, indicating which skills and attributes you should be highlighting in your case studies.
2. LinkedIn:
   LinkedIn pages are a great place to do competitive research. Here, you can access a list of a company’s employees. Look for other designers, then check out their profiles and portfolio websites for a good idea of what works.
3. Company website and existing assets:
   Read the mission statement, peruse the content, and get a sense of each employer’s visual brand language. Know who your target employers are and how they speak. Craft your visual and written content to appeal to them.

A junior UX/UI job posting—tons of user insights! (glassdoor)

What to include in a UI/UX portfolio

Your portfolio’s user experience is as important as its contents, so don’t distract recruiters with unnecessary features. Here are the only 3 things your portfolio should include:

1. Intro, about statement, and contact info→ tell employers who you are, what you do, what they can expect if they work with you, and how to get in touch
2. Case studies→ show employers what you did, how you did it, and what tools you used (like Figma, Adobe XD, and Anima) with no more than two to four of your best, most relevant case studies (make sure to highlight your strengths as a researcher, designer, or both)
3. Professional social media and web links→ include your LinkedIn account, industry-specific accounts or websites (like a design-focused blog or Instagram page), a link to your resume or CV

The portfolio example below is intuitive and uncluttered, with all relevant content accessible from the homepage:

A clean, intuitive portfolio with just what recruiters need (source)

7 design best practices for UI/UX portfolios

Employers will assess your about statement, your case studies, and maybe your social media and web links. But they’ll pay equal attention to how intuitive and navigable your site is.

Here are 7 design best practices for a frictionless, user-friendly portfolio:

1) Make the user the focus

• Design for your users—in this case, prospective employers
• Learn what they want, what information they need, and what they hope to achieve (use job postings, LinkedIn, and company websites)

2) Use a logical structure

• Think about what recruiters need to know and in what order
• Start by introducing who you are and what you do, then show how you do it with well-organized case studies

3) Keep it simple and strive for clarity

• Avoid unnecessary graphics, animations, and interactions that complicate the user journey
• Make sure recruiters can determine who you are, what you’ve designed, and what your process is within the span of a few minutes
• Make all essential components visible and scannable on your homepage

4) Minimize steps and actions per screen

• Keep as much content as possible to a single page
• Make more detailed content (like expanded case studies) accessible in a single click
• Make it clear and simple for recruiters to reverse actions and return to your homepage
• Avoid forcing users to navigate through carousels or image series to view your mockups

5) Be consistent

• Reuse design components throughout your interface (buttons, menus, icons)
• Design components should resemble those used by other websites (don’t make recruiters learn new conventions, which will waste precious time)

6) Make your site responsive

• You don’t know how or with what device a recruiter will view your portfolio
• Make sure your site adapts to any screen—employers will value this ability

7) Get user feedback

• You can’t user-test potential employers, so get feedback from friends, family, classmates, instructors, and design communities on platforms like Reddit and Facebook
• Use this feedback to improve usability, and keep iterating until your portfolio is frictionless

How to build a killer UI/UX portfolio | TLDR

• UI/UX portfolio work samples are static mockups that don’t indicate the usability of the final products they represent
• A portfolio website is an interactive interface you’ve designed, and recruiters are its target users
• An intuitive interface where recruiters can efficiently assess your skills and background is the best indication of your ability to create a seamless user experience
• Lead with the user (recruiters), and implement the same UX/UI best practices you’d use in any design
• Make sure your portfolio is: user-centered, logically structured, simple and clear, navigable with minimal steps and actions, consistent, responsive, and user-tested

FAQ Snapshot:

What should be in a UX portfolio?

Recruiters will only spend a few minutes scanning your portfolio (if you’re lucky) so don’t distract or overwhelm them. Your UX/UI portfolio should only include 3 things:

1. Your personal introduction, about statement, and contact info
2. Links to your professional social media accounts and downloadable resume/CV
3. No more than 2-4 case studies exhibiting your best work

What are UX portfolio best practices?

Here are 7 design best practices for a user-friendly portfolio:

1. Make the user the focus (satisfy recruiters’ wants, needs, and objectives)
2. Use a logical structure (intro→ about statement→ case studies)
3. Keep it simple and strive for clarity (Don’t distract recruiters with irrelevant content)
4. Minimize steps and actions per screen (few clicks, easy journey to desired content)
5. Be consistent (have a design system, reuse similar components, follow conventions)
6. Make your site responsive (your portfolio site should look good on any screen)
7. Get user feedback (friends, family, classmates, instructors, online design communities)

Build high-fidelity prototypes and share them with recruiters using Anima

• Get the Anima plugin for Adobe XD, Figma, or Sketch
• Visit the Anima 101 page
• Sign up to Anima now

The post How to build a killer UI/UX portfolio using design best practices appeared first on Anima Blog.

If you’re a designer or team working with Material Design, you know the frustration of explaining how a static prototype will behave—especially to developers. You spend a ton of time describing what the design does only to have your vision lost in translation anyway.

Luckily, working with Google’s game-changing Material Design system doesn’t need to be a trade-off.

Anima makes Material Design easy

Introducing Anima 5 for Figma and Adobe XD, a platform that supports truly functioning Material Design in your existing tools. Say goodbye to flat, pixel-based prototypes you need to explain, and hello to fully functional prototypes that speak for themselves.

Anima’s Material component library is code-based instead of pixel-based, so every building block is interactive and responsive. This allows you to design material-based prototypes that behave exactly like the final product.

Live prototyping saves you time by improving user-testing, easing client and stakeholder buy-in, and most importantly streamlining developer handoff.

It’s a win-win. Developers get functioning prototypes paired with pixel-perfect HTML, React, and Vue code while designers get a final product that’s exactly what they envisioned.

Anima 5 brings functioning Material Design to Figma and Adobe XD

Anima’s Material Design widget library

Anima’s Material Design widget library gives you all of the live, customizable Material components you need to build a killer prototype.

Here’s what you’ll get:

• Buttons
• Checkboxes
• Drop-downs
• FABs
• Google Font Icons
• Radio Buttons
• Sliders
• Switches
• Text Fields

Anima 5’s Material Design widget library for Figma:

Anima 5’s Material Design Widget Library in Figma

Anima 5’s Material Design widget library for Adobe XD:

Anima 5’s Material Design Widget Library in Adobe XD

Material Design with Anima: a step-by-step guide

Now you know what Anima does for designers and product teams.

Anima lets you build live prototypes with truly functioning Material UI components in your existing design tools. This streamlines your process, reduces iterations, and helps your team get better products to market faster.

Here’s every step you’ll need to start building with live Material building blocks:

How to implement functioning Material Design in Figma

Step 1: Open the Anima plugin (if you already use Anima, make sure you restart the plugin to update all of the new features).

Step 2: Open the Widget Library.

Step 3: Click the Material Design icon.

Opening Anima's Material Design library in Figma

Step 4: Select the Material component you want to add to your design.

Step 5: Change the color theme by clicking “Edit theme” at the top right corner of the plugin.

Step 6: Customize the Material component’s attributes using the drop-down menus below the component’s image in the plugin (you can use either the primary or secondary color from your theme, or select a custom color).

Step 7: Drag-and-drop the component into your design, or click “Insert” at the bottom right of the plugin, then position the component wherever you’d like it.

Selecting, customizing, and dragging a live switch into a Figma design with Anima

How to implement functioning Material Design in Adobe XD

Step 1: Open the Anima plugin (if you already use Anima, make sure you restart the plugin to update all of the new features).

Step 2: Open the Widget Library.

Step 3: Click the Material Design icon.

Opening Anima's Material Design library in Adobe XD

Step 4: Select the Material component you want to add to your design.

Step 5: Change the color theme by clicking “Edit theme” at the top right corner of the plugin.

Step 6: Customize the Material component’s attributes using the drop-down menus below the component’s image in the plugin (you can use either the primary or secondary color from your theme, or select a custom color).

Step 7: Click “Insert” at the bottom right of the plugin, then position the component wherever you’d like it once it appears in your design (Adobe XD doesn’t offer the drag-and-drop option).

Selecting, customizing, and inserting a live slider into an Adobe XD design with Anima

Preview your interactive prototype

To see your live prototype in action, just click the “Preview in Browser” button at the bottom of the Anima plugin’s main menu.

• In Figma, your interactive and responsive prototype will open automatically in the same tab.
• In Adobe XD, you’ll get a popup that says “Your prototype draft is ready.” Just click “Open” and your fully functioning prototype will pop up in your web browser.

Hand your live prototype off to developers

We know this step is already making your palms sweat, but don’t worry! In a few simple steps, you can share your truly functioning Material Design-based prototype—along with pixel-perfect HTML, React and Vue for each component—with developers. Here’s what you need to do:

1. Create a project on Anima’s web platform: This is where your live prototype will be stored once you’ve synced it. Here’s how to create a project for Figma and how to create a project for Adobe XD.
2. Sync your design to the project you’ve created: This will save your live prototype to Anima’s web platform. Here’s how to sync a project from Figma and how to sync a project from Adobe XD.
3. Share your prototype: Open your project on Anima’s web platform to view your live, responsive prototype and share it with developers, teammates, and stakeholders. Here’s how to share your prototype.
4. Hand off to developers: Once they’ve logged in to the project, developers (and collaborators) can interact with your live prototype, make comments, and get clean code to help build the UI accurately and efficiently. Here’s how developers can get code from your prototype.

With Anima, you can collaborate continuously, communicate your design clearly, and keep your entire team on the same page.

Again, it’s a win-win:

• Developers get fully functioning prototypes that require zero explanation along with pixel-perfect HTML, React, and Vue code.
• Designers get the satisfaction of seeing their designs accurately represented in the final product.

Wrapping it up

So there you have it. Anima 5 has reinvented the way designers and teams work with Material Design in their design tools:

• You have the power to customize every Material UI component.
• You can insert your custom components into your design with a single click, and they’ll be fully interactive and responsive.
• You can hand off your high fidelity prototype to developers along with automatically generated, pixel-perfect HTML, React, and Vue code.
• Designers get to see their visions accurately represented in the final product, developers get working prototypes and clean front-end code, and product teams get better products to market faster.

Start using fully functioning Material Design components in the tools you love

• Learn more about Anima 5
• Get the Anima plugin for Adobe XD or Figma
• Sign up to Anima now

The post How to use Material Design in Figma and Adobe XD with Anima appeared first on Anima Blog.

Designers and product teams are under increasing pressure to produce top-notch digital experiences that are branded, scalable, responsive, and flawlessly intuitive—on tighter timelines than ever before.

Google created its renowned Material Design system to help product development teams do just that, while actually making those experiences more attractive and intuitive.

In this article, we’ll break down everything you need to know about Material Design and explain why it’s a must-have for your toolkit.

What is Material Design?

A complete design system

Material Design is a design system developed by Google. It was created to help product development teams build attractive, intuitive interfaces that behave consistently on any platform or device.

The system includes everything you need to build stunning, user-friendly products fast:

• A UI component library: beautiful interactive building blocks for the entire UI
• Use-specific design guidelines: instructions and layout grids that show you how to create clean, intuitive interfaces with Material components
• Customization tools: You can adjust component colors and shapes, typography, and icon styles to match your brand
• Documentation for developers: open-source code and a detailed development framework for the UI

Built on Google’s success

Google first applied Material Design to its own range of products, perfecting the system through research and user testing before releasing it to the public in 2014.

Now you can build branded products that are as clean and natural to use as Google’s. What’s more, your product will benefit from the trust and familiarity it took Google years to establish.

Google perfected Material Design by applying the system to its own products (Google Flights)

User interaction based on the real world

Material Design was named for the fact that its components behave like materials in the real world. Inspired by paper and ink, the subtle presence of reflected light and shadows mimics traditional print material and gives the impression that elements are layered on a three-dimensional plane.

This 3D spatial relationship creates a sense of depth and elevation, helping users understand which components are interactive (like the now-famous floating action button in the mockup below), and giving designers a way to draw attention to specific elements.

The key benefit here is that users don’t need to learn how to interact with your product, because it behaves like real-world objects they encounter every day. It also eases the user journey with a clear visual hierarchy.

Light and shadows give Material components a clear visual hierarchy

Material Design features explained

Now that you understand what Material Design is and why it’s so valuable, here’s a breakdown of the four main features that’ll allow you to make it your own:

1) Component library

The component library contains all of Google’s code-based Material UI components. These building blocks are fully functional and interactive, meaning buttons respond, drop-downs drop down, and sliders slide. It includes everything you need to build your UI, including:

• Toolbars
• Buttons
• Drop-downs
• Backgrounds
• Cards
• Sliders
• & more…

A sneak peak at Google's Material Design component library 

2) Guidelines

Material Design’s guidelines are a set of usability best practices and grid layouts—perfected by Google’s design experts—that explain how to use Material UI components to create a superb user experience. These guidelines show designers how to do things like:

• Implement an intuitive component hierarchy using grid layouts
• Increase usability and accessibility with typography
• Design for different platforms and devices
• Use shadows and elevation to emphasize components
• Adjust color to maximize usability and accessibility
• Apply negative space to ease user journeys

Material Design guidelines for creating responsive layout grids

3) Material Theming

The Material Theming feature lets you customize Material UI components to fit your brand aesthetic. You can then automatically apply the changes to similar components across your entire design:

• Color system→ Color guidelines help you choose a palette that matches your brand while maximizing usability, accessibility, and visual harmony. There’s also a Material palette generator that automatically creates a complementary palette around your main brand colors.
• Typography → Customize every aspect of the typography, including font, size, weight, and slope, and automatically apply your selections to specific uses (i.e. headings, button text, and menu text) throughout the design.
• Shape → Choose component corner shapes from a variety of rounded, square, and cut options, then automatically apply those shapes to all components of a similar size (i.e. make all buttons rounded).
• Icons → Select from five themed icon sets: filled, sharp, rounded, outlined, or two-toned.

The example below shows how Airbnb used Material Theming to adapt generic Material Design components to its own brand aesthetic:

Airbnb used Material Theming to adapt Material UI components to its unique brand aesthetic

4) Functionality

Material Design components are code-based, making them fully functional, interactive, and responsive right off the shelf:

• Built-in, customizable states that communicate each component’s status (active, inactive, hovered, pressed, etc.)
• Working drop-downs, sliders, buttons, text fields, and more
• Allows designers with the right tools to create truly functioning prototypes that look, feel, and behave exactly like the final product

An interactive slider from Material’s component library (source)

Why Material Design is a product team’s best friend

It’s a game-changer for designers

Designers can use Material Design’s guidelines, components, and tools to build perfect products every time with less friction and more certainty. That’s because it’s:

• Flexible → Designers can build products on Google’s proven framework while using their own creativity to adapt those products to their brand’s visual language
• Intuitive→ Users already recognize Material Design because it’s everywhere, so they know exactly how to interact with it and what to expect from its components (which means fewer iterations!)
• Interactive→ Material Design components are backed by code, so they have all of the functionality you’d expect from the final product
• Responsive→ Responsive grid layouts allow designers to build products that work seamlessly on every device—with code-based components that are also responsive
• Ideal for apps→ Originally developed for Android apps (and now used on every mobile platform), Material Design is perfect for touch-based user interactions

It’s a time-saver for developers

Developers can get pixel-perfect HTML (formatting, style, fonts, image assets) from every UI building block. Developers also get complete documentation and open source code, so they can skip the guesswork and implement the UI quickly and efficiently.

It’s a problem-solver for product managers

It’s simple. Teams benefit from a proven design framework that minimizes iteration and decreases time to market—all while producing more attractive, intuitive products. This means better ROI and happier stakeholders. It’s a win-win-win.

And it’s great for users too!

Material Design has reinvented the digital user experience. Its familiar architecture has been so widely adopted that users can now navigate almost any website or app using the exact same conventions, without friction or uncertainty. And that’s exactly what designers want.

The short version

• Material Design is a game-changing Google-developed design system that helps product teams develop better digital experiences faster than ever before.
• Material Design has 4 main features: UI Components, guidelines, customization tools, and developer documentation.
• Google first applied Material Design to its own range of products, perfecting the system through research and user testing before releasing it to the public—now product teams can reap the benefits.
• Inspired by paper and ink, Material Design got its name because it behaves like 3D materials in the real world—making it natural and intuitive for users to interact with.
• Google’s Material Theming tools let designers customize Material components (color, typography, shape, icon theme) to create branded digital experiences.

Build with functional Material Design using your own design tool

• Learn about Anima 5’s Material UI library for Figma and Adobe XD
• Get the Anima plugin for Adobe XD or Figma
• Sign up to Anima now

The post What is Material Design and why should you use it? appeared first on Anima Blog.