Symbols are pre-built elements that, when changed, also change every copy — to an extent. Editing the original symbol will change the copy except for certain edits, like text changes and multistate elements’ default states, that you make on each instance.
For example, you can change the text inside an individual button without changing other buttons based on the symbol. But if you change the master symbol’s background color, every instance of it will change, regardless of their text.
To make a symbol, select one or more elements and right-click or type opt/alt-S. Doing so will create a symbol in the current prototype, not your design system — more on that in a moment. Copy/paste the symbol, or opt/alt drag it, to make a copy. Double-click any copy of a symbol to edit its contents.
To edit a symbol, double-click one of its copies and make changes as necessary. Certain changes will alter every copy of the symbol:
- Resizing elements within a symbol, like boxes or lines
- Changing colors, such as a box’s fill, navigation elements’ highlights, or text colors
- Adding new elements
- Spec mode notes
You can also change several things per instance, such as two buttons of the same design but different utility.
- Text content
- Changing the overall size of the symbol itself
For example, if your button style calls for a certain shade of blue, updating that color once will update every button instance. However, you can change the text of one button to say “search” while another says “submit.”
Changing text in or resizing one instance of a symbol only affects that one instance. However, you can choose to reset the change(s) to match the original symbol, which helps keep everything across your project identical. This is handy when you make a change — and then change your mind.
If you make a change, and would like to see it take effect across the project, click “set as default”. For example, if your team adds or removes items in a navigation bar, clicking “set as default” will change every navigation bar across your project.
“Detaching” a symbol will unlink it from all its instances in a prototype. Also, the detached symbol won’t be synced with the Design System Library anymore. This enables you to make variations on complex sets of elements, like dashboard widgets, that have similar but not identical looks or functions.
Once detatched, a new symbol has all the functionality of its original — but you can edit it and clear its overrides, as described above, without affecting the original. Please note that if you detach a symbol, you won’t be able to revert this action to connect it again with its other instances.
Add a symbol to your design system
Symbols fall under the UI Patterns section of your design system. To add a symbol to the system so your team can use it, select a copy of the symbol, scroll to the bottom of UI Patterns, and click “add symbol.”
Create a symbol by right-clicking an element or elements on the canvas and choosing the “+ symbol” tile. Double-click its title to rename it. Once it’s in your UI Patterns, drag it from UI Patterns into your canvas to create a new instance.
- Article: Design Systems Sprint 1: The Interface Inventory
- Article: Tweak Your Buttons for a Design System With Some Leeway
- Tutorial: How to Find Your Team’s Design Assets in a Hurry (Hint: it’s More Than a Name Game)
- Get a free trial
Ask a question
< User Guide table of contents
If someone asked you to define the word “flow” or describe an example of one, what would you say? Would you immediately think about flow as it relates to user experience or interaction design? Maybe … but, maybe not.
In this post, I’ll describe how to create smooth user flows based on my experience as a UX designer.
You may think about flow in terms of water. For example, how snowmelt flows into waterfalls and streams, which in turn, flow into reservoirs, lakes and the ocean.
You may also think about flow in terms of air. Did you know that a golf ball has dimples to turbulate the flow of air around it (which reduces drag), causing the ball to fly farther than a smooth ball?
You can also measure the success of a flow (or lack thereof) in terms of efficiency. Just look at NASA and Boeing who collaborated on solving a flow problem this past April in a wind tunnel.
The teams outfitted a Boeing 757 tail with special technology that could potentially make flight more efficient. The impact of this? Lower fuel burn that might save airlines millions of dollars, which in turn, could save frequent flyers hundreds, possibly even thousands, of dollars on plane tickets. Sounds good to us!
How Flows Relate to UX Design
So what do all these notions of “flow” have in common?
- Flow depicts movement: movement through water, through air, through websites, through apps, etc.
- Flow is variable: Flow variability can cause a golf ball to fly farther (or fall short); a plane to cruise faster (or have more drag); and an online shopper to checkout with ease (or abandon her cart).
Long story short, the concept of flow is important. The success of your website or app is often contingent upon how well your modeled flows meet the needs of your targeted users (personas), as well as the needs of your business.
Because lo-fi prototypes lack visual detail, the user flows are the heart of your prototype. Lo-fi prototypes help you focus on creating the smoothest flows for users to accomplish their goals.
Building a Flow with Users in Mind
When you build a user flow, what’s the first thing you should think about?
It might be obvious … your users!
For example, if you are designing a business intelligence tool that allows users to create reports and share them, you will want to have at least two flows: one flow for the Data Consumer (i.e. the user receiving/reviewing the reports) and an entirely separate flow for the data analyst (i.e. the user building/sharing the reports).
Photo credit: Persona tool in UXPin
Editor’s note: If you want to create your own user personas, you can do so in UXPin with a free trial.
Before you start creating your prototype flows, you should clearly understand your personas’ motivations and needs. Ask yourself, what drives my personas and what are they trying to accomplish?
Once you’ve created your persona, you can better grasp user goals. Map out both sets of goals so you know what your prototype needs to accomplish.
For templates and helpful tips on creating personas, check out the chapter “Analyzing Users Before Diving Into Design” in the free ebook The Guide to UX Design Process & Documentation.
Considering Goals & Entry Points
If you are designing a website user experience, another good practice before creating your flows is to determine and map out where your users are coming from. Based on Morgan Brown’s advice in Stop Designing Pages and Start Designing Flows, we’d recommend you consider the following sources for your web or mobile prototype:
- Direct traffic
- Organic search
- Paid advertising
- Social media
- Referral sites
Different entry points define different user behavior. Take a look at the difference in the below hypothetical scenarios for someone looking to buy a smartphone on Amazon.
Organic Search Visitor:
- Searches for reviews of iPhone
- Enters Amazon.com.
- Uses search bar to find iPhone
- Browses more iPhone reviews
- Uses search bar to find Samsung Galaxy
- Browses Galaxy reviews
- Returns to original iPhone Amazon vendor
- Buys iPhone
- Enters Amazon.com
- Uses search bar to find iPhone
- Buys iPhone
Now, we’re not saying the comparative shopping experience is that simple (or that the behavior between direct and organic visitors is always black-and-white). We are saying, however, that you must map out these different flows in order to deliver a comprehensively smooth experience.
To view some sample flows based on these entry points, check out the article Build it with the User in Mind: How to Design User Flow. The author, Peep Laja, has created three different user flows, where each flow originates from a different entry point and aligns with specific user and business objective.
Creating a Flow Outline
At this point, you should know:
- Which users/personas you will be designing your flows for
- What user and business objectives need to be accomplished
- Where your users are coming from (i.e. entry points)
Now you can think about what happens before and after a user is on a particular page. Like it’s described in Interaction Design Best Practices, you can link up your pages and create as many flows as you need.
One quick way that you can begin to begin exploring different page flows is by creating a simple flow outline. Before sketching or prototyping, a written outline helps you explore the most important part of your app or website – the content. Building flows around content gives you a much more accurate assessment of the total number of pages required for the user experience.
Here are a couple techniques for outlining your flow.
Writing-first Approach to Outlining a Flow
You can use the writing-first approach, which Jessica Downey writes about in her article Jumpstarting Your App Conception Without Sketching UI. This outlining method helps flesh out ideas and build a “common understanding” of each page of your app or site.
Let’s create one for, say, a banking app. The scenario: someone wants to turn on auto deposit. Note in the outline below, content in [brackets] represents action buttons/links.
Step 1: Would you like to set up auto deposit?
Step 2: Select Deposit Frequency
[Once per month][Twice per month]
[Every other week][Every week]
Step 3: Deposit Once per Month
[Select calendar day]
Step 4: Set Amount
Display amount field
Shorthand Approach to Outlining a Flow
For our banking app example above, we can create a shorthand for Steps 2 and 3 that looks something like this:
To see how Singer demonstrates shorthand for Basecamp and how he can illustrates complex flows with this outlining process, check out A Shorthand for Designing UI Flows.
Sketching and Prototyping a Flow
Now we’re ready to create a low-fidelity sketch for each page in our flow outline and/or flow shorthand. The sketches bring your ideas to life with more detail around layout and structure. Once you have created your sketches, a simple low-fidelity prototype can help you test those ideas with users.
You can sketch out user flows in a variety of ways, as demonstrated in these examples of user flows and wire flows from Wireframes Magazine. Before committing to any particular flow, however, create a simple prototype to validate that its alignment with your user and business objectives. It doesn’t have to be anything fancy — your prototype can be done on paper so you can start understanding how users flow between content and actions.
From there, you could continue iterating the sketches on paper and cut them out for a paper prototype, or move to a digital prototyping tool like UXPin.
Photo credit: UXPin
Real Examples of Flows and Their Teardowns
Now that we’ve shown you the process for creating your own user flows and turning them into sketches and low-fidelity prototypes, we’re going to leave you with some interesting examples of real UX flows for user onboarding.
User onboarding is a great scenario in which it requires particular skill to balance user needs and business needs. The user wants to dive straight into the app with as little learning curve as possible. The business obviously also wants the user to dive in, but they also want to gently nudge users into upgrading their plans. To see deconstructed examples of what we’re talking about, we highly recommend going to User Onboarding.
You certainly need to master the art of persuasive design in order to create flows that educate users while helping them discover the benefits of upgrades.
When it comes to mastering user experience, there’s absolutely no substitute for practice.
I’ve used UXPin in my own career to create user flows, interactive wireframes, lo-fi prototypes, and even animated prototypes. Apply what you’ve learned here and feel free to create a free account so you can start experimenting.
I’d recommend you start by wireframing basic flows like a mind map (making each box represent a step in a user action). Once you feel satisfied, feel free to build wireframes for each page, then add interactions to bring your flow to life with a prototype.