#32 How to create a low-fidelity prototype in Google Sheets

A conceptual diagram of Google Sheets prototype

Google Sheets is a spreadsheet, just like Microsoft Excel.

Most people associate it with calculating numbers. But Google Sheets is actually great for organizing your ideas, making lists, even creating a low-fidelity prototype.

When I come up with an idea for a product or a design concept, I want to capture that initial vision in my head by writing it down in text, or visualizing it in sketches.

Once my vision is written down as a statement, a sketch, or a description of some sort, I need to further break it down into a set of high-level features in order to turn that vision into an actionable product requirement or a design brief to formulate a project.

An image of Macbook showing Google Sheets open, with an overlaid formula “=SUM(A1:A10)”.
Google Sheets is primarily used for calculating numbers

I found that this whole initial process, from a vision to a high-level feature set, then to a low-fidelity prototype can be done fairly efficiently in Google Sheets.

In this article, I’d like to share this process in Google Sheets with you, taking a portfolio website as an example.

1. Vision and user story

  • First I write down my vision in Google Sheets document. Since I’m taking a portfolio website as an example, I start describing what kind of portfolio site that I want to create.
  • Because my portfolio website’s users are recruiters and hiring managers, it’s a good idea to put myself in their shoes, and write down a user story from their perspective.
A screenshot of Google Sheets with a vision and a user story typed in.
Vision and user story

2. Vision to feature set

  • As soon as I write down my vision and a user story from a user’s perspective, I start generating a feature set — all the things that I need to have in my portfolio website. A spreadsheet structure makes it super-easy to create and edit such a list.
  • Once I write down all the features/content that I can think of, I prioritize those in an order.
A screenshot of Google Sheets with a vision, a user story, and feature set typed in.
Feature set

3. Feature set to pages

  • As soon as I have a list of features and content, I start thinking how these should be distributed across multiple pages of my portfolio website.
  • I create a new column called Pages, and assign an appropriate page for each feature and content that I listed.
A screenshot of Google Sheets showing pages column is added which shows corresponding page for each feature set item.
Corresponding pages for each feature set

4. Pages to main menu

  • These pages become main menu items.
  • I create another column called Main menu, and put pages in an order that I want to have in the main menu of my site.
A screenshot of Google Sheets showing main menu column is added which shows main menu items.
Main menu

At this point I have an overall information architecture of my portfolio website, in forms of a main menu, and a list of features and content with assigned pages for each.

A screenshot of Google Sheets showing main menu and feature set for each page, color-coded.
Information architecture shown with color-coded main menu item and its corresponding feature and content

5. Creating each page

  • Now it’s time to create each page of my site using a tab feature. Tabs are perfect for creating separate pages of my prototype still within the same Google Sheets document.
  • I copy and paste corresponding elements for each page from feature/content list, which I already created and organized in the first tab of Google Sheets document. Below screenshots shows a sequence of creating new pages in new tabs.
A screenshot showing a home page being added as a new tab.
Create Home page in a new tab, then paste corresponding elements from feature/content list
A screenshot showing about me page being added as a new tab.
Create About me page in a new tab, then paste corresponding elements from feature/content list
A screenshot showing projects page being added as a new tab.
Create Projects page in a new tab, then paste corresponding elements from feature/content list
A screenshot showing a project detail page being added as a new tab.
Create Project detail page in a new tab, then paste corresponding elements from feature/content list

6. Linking pages

  • Once all the pages are created as separate tabs within the Google Sheets document, I copy and paste the main menu to the home page.
  • I insert a link to each main menu item by grabbing a URL of each page, which is a different tab in the same document.
  • I copy and paste the main menu with all the inserted links to other pages.
  • I add a highlight to a corresponding main menu item in each page to represent the selected status.
A screenshot showing a popup for “insert link” on one of main menu items.
Inserting links to each main menu item

Now I have a clickable low-fidelity prototype so that I can test and evaluate the overall structure of my portfolio website, before moving forward with creating a high-fidelity design or building the actual portfolio site on a website-building platform such as WordPress.

A diagram showing an overall structure of a portfolio site low-fidelity prototype with pages, main menu, and tabs.
Overall structure of a portfolio site low-fidelity prototype created in Google Sheets

The beauty of this prototype is that it’s fast, and I can stay razor-focused on my very vision without being distracted by all the visual treatments.

Before jumping into UX design/prototyping tools or a site-building platform to start building a website, it’s probably a better idea to focus on my vision and high-level idea first to see if it makes sense overall.

Because, as soon as I start diving deep into a UX design tool, my attention could easily be taken away by all the user interface details that I can play around with, such as colors, sizes, typography, white spaces, iconography, images, videos and so on.

The fact that it’s a spreadsheet meant for numbers somehow seems to offload my desire and obligation to make it look good as I would when using any design/prototyping tools. It’s an interesting psychological effect.

This approach works great even for non-designers too, such as product managers, product owners, business owners, entrepreneurs, and engineers.

Because Google Sheets is a simple spreadsheet, most people know how to use it. And it’s free.

Google Sheets allows anyone to freely mock up their ideas into a simple low-fidelity prototype without visual distractions and having to worry about learning how to use fancier UX prototyping tools. I found it quite useful.

This article was also published on Medium in UX Collective.

Check out YouTube version too!

For prototype related articles, check out these too:

#31 Macbook damaged keyboard – what happened later (2020)

Simplified illustration of Macbook Pro keyboard with damaged key silkscreening

In one of my previous articles, I talked about my disappointment with my MacBook Pro damaged keyboard. I have a follow-up story on this.

Damaged keys on my Macbook Pro.

Previously I was assuming that I would probably have to pay if I were to replace damaged keys because the initial 1 year warranty period has passed.

This was not only based only my assumption but actually one of Apple store person that I talked to before confirmed at  the time.

The other day, I had a chance to go to Apple store for a Genius Bar appointment for some other reasons. I casually asked about my MacBook keyboard problem.

To my surprise, the Apple store staff said that they can replace damaged keys up to 5 keys!

So I made another Genius Bar appointment few days later.

When I showed my MacBook Pro to a Genius Bar staff and mentioned that I was previously told by another staff that they could replace damaged keys up to 5 keys without charging.

he said “OK, let me replace all the damaged keys.” after examining my MacBook.

20 minutes later, he came back with my MacBook, with the keyboard looking good! He said, “OK, so I replaced all the 14 keys that were damaged.”

Wow, what a surprise!

And I asked, “So this is all free of charge?”

He said, “yes”

Me: so as I mentioned, this never happened to my older 17 inch MacBook. Why is this happening to this newer MacBook?

Here are what he mentioned:

15″ MacBook has thinner keys compared to 17″ MacBook.

So this newer MacBook has a lot thinner keys compared to older ones.

Layered structure of MacBook keys

Each key is fully transparent when not painted so that the backlit LED shines through. 

Then you put a white layer on it. 

Finally on top of that, you put another layer with silkscreening of black with letter shape cutout so that the letter shows up in white.

Because of this 3 layer structure,  when the keyboard is heavily used, it wears off the top black layer, exposing the 2nd layer which is white.

His assumption is that because now that the entire key is thinner, each 3 layer might be also thinner, which might be the reason why this is happening more often compared to the older MacBook which had thicker keys, probably with thicker layers too.

He said that he has a 10 years of experience at Apple Store.

His explanation made sense, and I was very satisfied with how he replaced all the damaged keys of my MacBook.

I didn’t expect this to happen, so this was a pleasant surprise.

Which is why I wanted to make another video to give a clear statement and a shoutout to how Apple Store treated me with good care.

Now the question still remains.

I know that my 15 inch MacBook is definitely a lot  thinner and slicker compared to my older 17 inch MacBook.

It’s definitely a lot lighter,  so its easy to carry around so that I can take it with me to anywhere. It’s great.

But if this slickness, thinness and portability is realized at the expense of “easier to wear off keyboards” that is constantly at the risk of getting messy, I wonder if that’s worth or not.

Maybe my typing or way of handling the keyboard applied more pressure than needed which might have caused the keyboard to wear off faster.

I don’t know.

But I’m curious if Apple collected this kind of information from customers.

This type of issues require longer time period to fully observe and evaluate.

Maybe we already live in such a high-paced consumerism that companies and customers don’t care much about using one particular tech product for a long period of time because a newer product always comes out with faster performance, cheaper price, and better features so you just upgrade anyway?

It reminds me of things like mobile phone battery that dies immediately after the warranty expires, or a major car components start to break after  the 3 year warranty.

It also reminded me of Apple a few years ago that admitted that certain iPhone models had their batteries performance went down significantly after a certain period of time.

They ended up launching a special program to replace such iPhones’ batteries for free.

In a way, we are all trapped in this industry cycle, that we have to upgrade our devices to the latest ones in order to be on top of the technology trend, or in order to keep up with the highest productivity level to stay competitive as professionals?

One thousand dollar mobile phone must have sounded ridiculous in late 90s. But somehow it became a norm.

I still use iPhone 8 in the year 2020, and yes, it works perfectly fine! Because I’m a UX designer, so I feel like I always have to upgrade my phone to the latest.

But at the same time, I question this whole “have to upgrade” mentality and trend that we all have somehow blindly adopted without having a deeper thinking whether we really need it or not.

Check out YouTube version too!

#29 Delightful OOBE from a boring home product

Bunkie board by Zinus, a photo of the product vs. assembly instruction manual.
A product image of Zinus Gulzar Easy Assembly Quick Lock 1.6 Inch Bunkie Board / Bed Slat Replacement
Zinus Gulzar Easy Assembly Quick Lock 1.6 Inch Bunkie Board / Bed Slat Replacement (Source: Zinus)

I bought a 47 dollar bunkie board made by Zinus.  Bunkie Board is a frame you put under a mattress of your bed to prevent the mattress to sag in the middle for a better, healthier sleep. It’s nothing special, just a boring home product, right? Which is why it caught me with a nice unexpected surprise when I unpacked the product and went through its Out-Of-Box-Experience (OOBE).

Besides the actual product which comes in pieces to be assembled, below are OOBE components that greeted me when I opened a box.

An overview of OOBE components of Zinus Bunkie Board
OOBE components of Zinus Bunkie Board

1. An envelope with a thank you message 

A photo of thank you message on a slip-off band and an envelope
Thank you message appears on a slip-off band when you open an envelope

When you open a dark green envelope, a thank you message comes out. Interesting thing is that it is printed on a slip-off band that wraps around three cards. The message has a nice casual touch. The message explains that because they don’t want to waste materials including their thank you card, they printed their message on a slip-off band rather than on a card itself, so that the actual cards (three of them) can be used as regular cards by a customer to send to friends and family for whatever later occasion.

A photo of three blank cards
Three blank cards you can use for later occasions

2. Hardware Kits

A photo of a hardware kits
Hardware kits: easy to see and count

All the screws are packaged in pairs so that it’s easy to see and count how many. It’s also nice that the spare parts are clearly labeled as spare. An Allen wrench is included too.

A photo of an another hex wrench included in a package
Another hex wrench included in a package

The OOBE package also includes this tool, which is a hex wrench of some sort, in addition to a typical Allen wrench mentioned above. I used the Allen wrench during the assembly, and did not use this tool. But it’s a nice gesture.

3. Instruction manual — overview and components

The instruction manual was the best part. While thank you message and cards are definitely a nice touch, the core user experience of the product OOBE is assembling Bunkie Board itself. Therefore, this is the most important thing.

A photo of an instruction manual: overview and components
Instruction manual: overview and components

The instruction manual starts with an overview diagram above. It clearly shows how to place frames in which orientation, and in which particular order to assemble. This is actually quite useful so that you can absolutely make sure to place all the parts in right orientations in right positions relative to each other so that you don’t end up assembling parts the wrong way or the wrong orientation. It seems so simple and straightforward, but there are many hardware products that don’t have as clear instruction as this.

Right underneath the overview diagram, you see Components, which describes all the components needed to assemble the product. Illustrations of components are fairly accurate, both in terms of the shapes and relative size with each other (except the Allen wrench and the screw of course!),which is helpful. 

Again, you come across quite a few hardware products with inaccurate technical illustrations on their instruction manuals. When you come across such inaccuracy, sometimes you can immediately tell that it was done purely from production efficiency purposes such as slightly different models with different shapes sharing exactly the same instruction manuals with generic illustrations that may not look like the product you purchased.

Assembly instruction

When I started assembling with the step 1, it was super-clear because the numbering system on the assembly instruction was consistently carried through to the actual components too. As you can see in the assembly instruction and pictures below, the actual components had numbering stickers, so that you can make sure to match the same numbers to screw those together.

A photo of an assembly instruction: step 1–4
Assembly instruction: step 1–4
Photos showing numbering stickers on components: step 1 and 2
Numbering stickers on components: step 1 and 2
A photo of an assembly instruction: step 5–10.
Assembly instruction: step 5–10
Left: a photo of the numbering on components — step 5, Right: a photo of how parts D fit into the slits of part B (Source: Zinus)
Left: numbering on components — step 5, Right: How parts D fit into the slits of part B (Source: Zinus)

It’s kind of similar to IKEA furnitures in terms of its instruction manual that shows you how to assemble products. But from my perspective, this was done much better, a lot easier and clearer to understand so that you don’t make mistakes. From my past experience, IKEA instruction manuals are sometimes a bit confusing especially when you have similar parts not accurately drawn in illustrations. Also, IKEA instruction manuals have almost no instruction texts, so you have to reply on illustrations only. On the other hand, Zinus Bunkie Board has a better, clearer instruction diagrams, and more accurate illustrations overall with text descriptions if needed.

Another thing that I liked about this product is that it was very well built when considering the price tag ($47). I felt this especially when I inserted all the thirteen “D” parts into slits of “B” parts. (see picture on above-right). Every parts fit perfectly into the slits.

Sure, this is a simple product. How can it go wrong? 

But because it’s a simple product, its assembly should be super-clear and super-simple. What I documented here may not seem anything spectacular or magical. Yes, everything is very straightforward. It may seem that it’s a no brainer to make something like this. That’s the beauty, when something is very well thought-out and manufactured, so that everything feels right. 

But the fact and reality that there are so many products out there that don’t have its OOBE as simple and clear as this tell me that it is actually quite hard to do what it seems so easy to achieve on paper.

And this type of experience — the one that seems so simple and gives you a pleasant experience without anything too fancy — is what we as UX designers should aim for in whichever products or services we design.

Check out another article on Starbucks free reusable cup, which was also about an unexpected delight from a boring product.

#27 How do you overcome being seen as “not enough experience” when applying for a UX position?

Job posting for an entry-level UX designer says you are required to have 2-3 year work experience.

Many UX beginners struggle that a lot of entry-level UX positions already require 2-3 year work experience.

How do you overcome applying for entry-level job positions that require 2-3 year of work experience when you just graduated from college, or if you don’t have such work experience?

So the field of UX has been attracting so many people from all the different fields. 

As soon as you start applying for a job, you will confront this.

Hiring managers and recruiters ask you:

“What kind of work experience do you have?”

And lot of times, you will hear them telling you that,

“You don’t have enough experience”.

And you wonder, how can I possibly already have work experience when I just graduated from a college?

Hiring managers and recruiters are looking to fill in open positions in their companies with someone who can directly function from day 1. Lot of the time, the hiring side is in a desperate business need to fill in an open position to get their business going. This means that they have no time to hire someone with no experience, because that means they need to train and educate that new person. This is a significant investment, that they want to avoid.

Which is why, hiring managers and recruiters will focus on candidates’ work experiences and portfolios as concrete proofs.

So what do all these mean to you?

This means you need to understand this reality, and plan ahead.

While you are still in college, you should do the followings:

1. Try to do internships as much as possible.

Most colleges offer internship opportunities. This is a great way to get an early exposure to the real world, and get a chance to work on real world projects while you are still in college, so that you can put those projects in your portfolio.

If the internship goes really well, you might even get an offer for a full-time position once you graduate.

2. Try to set your school project in a real world context

Instead of working on pure, imaginary project, try to find a real client such as a local non-profit organization that you can work with for your school project. 

This works great because…

  • It turns your school project into a real world project, solving a real user’s problem
  • The whole process of you finding an organization, making a pitch to them, and working through problems with them will be a great experience for you, which could make a great case study to be put in your portfolio. 

3. Continuously work on your own UX projects

If you cannot find an organization to work with as described in #2, you can still work on your own UX projects. Even if you are able to do #2, I would still suggest you work on your own UX projects to continuously build up your experience.

Instead of working on a generic “redesign of existing popular website or app”, try to find a specific problem, and focus on solving that specific problem.

When you work on your own UX project, treat it as if it’s a real project.

Go through a whole cycle of: 

  1. Define a problem
  2. Research on competitive products that solve similar problems
  3. Develop concepts
  4. Test your concepts with users
  5. Iterate your design based on learnings from the user test

For more details on how to work on your own UX project, check out my other article.

Also, check out my another article on why you need two portfolios.

If you start working on these three from early on when you are still in college, you will be in a much better position once you graduate and are ready to apply for jobs.

Being a UX designer is a journey of continuous learning.

In order to gain experience, you need to keep working on UX projects. That’s the only way, and the best way to learn and grow as a UX designer.

If you can do all these three, and put these in form of a case study, or an in-depth process walkthrough as part of your portfolio, your portfolio becomes a concrete proof that you have experience, and you can deliver concrete results.

The only way to overcome being seen as “not enough experience” is to prove yourself that you can actually deliver by showing them your tangible output in form of a portfolio.

Keep working hard, enjoy the whole process. Good luck!

Check out YouTube version too.

#26 What are the most popular UX prototyping tools?

Logos of 8 popular prototyping tools shown with a person.

Lot of people new to UX want to know which UX prototyping tool they should use. Prototyping is critical part of UX process. Important thing is how you think and use a tool to visualize your ideas so that it becomes communicative to others. To do so, you need to be proficient enough with a tool, so that you don’t become a slave of it.

The whole point of prototyping is to quickly test and evaluate concepts before its too late. Therefore, speed and ease of use are critical.

Today, Sketch still remains as the most popular design tool, which has a prototyping capability. While Sketch is the most popular and it’s a great design tool, when it comes to prototyping, it’s not the best.

Most of today’s popular prototyping tools have what is called “stitch screens with wires” interaction model.

This is a very intuitive way to quickly make a prototype, just by linking from one screen to another to create a transition. 

To make these transitions feel natural when interacting with a prototype, you need some transition effects. These include simple fade, slide in, and more sophisticated animated effects. This is where Sketch falls short.

Other tools such as InVision Studio, Principle, Adobe XD have better transition effects with fine-tuning capability.

The good news is, most of these softwares have some sort of compatibility with Sketch, and it works very similar to each other.

In today’s mobile-centric world, running a prototype on a mobile phone is becoming more and more important. Sketch does have a mobile app called Sketch Mirror to support this, but the app needs to be used while you have your Sketch file open on your Mac, and both your Mac and your mobile phone need to be connected to the same wifi network. This means you cannot share your prototype with your team members online on mobile.

This is also where other tools are better, such as Craft plugin for Sketch, InVision Studio, Adobe XD.

These days, collaborating with other designers seamlessly is becoming more and more important. Sketch has Team feature, but with additional paid subscription.

If the collaboration feature is important for you, Figma and Adobe XD might be a better fit for you, as they provide collaboration feature for free to certain extent.

All these information might be quite overwhelming for beginners.

So here’s a good news for you!

I created, and just launched Prototype Resource Map Lite.

This is a 131 page free ebook.

It gives you a comprehensive overview of today’s 8 most popular prototyping tools. 

It gives you a comparison of these 8 tools in various factors such as price, basic prototyping features and so on.

It also walks you through each tool with its pros and cons, and uniqueness.

It should give you a thorough understanding of 8 popular tools, to help you make a smart, informed decision on choosing which tool to start, and which tool to use for what purpose.

Download free Prototype Resource Map Lite now!

Also, if you haven’t downloaded my UX Resource Map yet, download that too for free! 

It’s a must-have tool for a UX beginner with full of useful resources.

Check out YouTube version too.

Also, check out my other article, a prototype is worth a 1000 pictures!

#25 How to work on your own UX project as a UX researcher

A person wondering about UX project for UX researcher.

A lot of people are interested in becoming a UX researcher, but seem to be struggling to break in to the field especially when you come from a different background, and you don’t have a relevant education and experience yet. In the field of UX, experience is everything. You need to show an artifact of your work in form of a portfolio in order to prove that you can put your knowledge in action effectively in a UX project context. Which is why it’s important to work on your own UX project as as UX researcher.

If you haven’t done that, you should start working on it. 

Start working on your own projects to build your portfolio as a UX researcher. 

A UX researcher works as part of a UX team. The goal of UX research is to help making the user experience of the product/service better. 

To do so, UX researchers can help in various ways both qualitative and quantitative research, including ethnography research, generative research, concept validation, usability test and so on.

Hiring managers and recruiters need to see:

  • How a UX researcher plans and executes a research (sessions) 
  • Summarizes the findings
  • Distills those findings into a list of actionable items
  • And then communicates all these effectively and efficiently to stakeholders

Yes, you will hear many people tell you “you don’t have experience”, if you never worked on a real world project as a UX researcher.

The only way to overcome this is to show a concrete proof that you can actually deliver. 

Real world projects are obviously ideal, but if you don’t have those, the next best thing is to build your own projects and work on those as if it’s a real project.

Below are just some examples to give you an idea on what kind of projects that you can work on your own.

  1. Future opportunity research around a topic of ABC:
    1. Pick a topic area of your interest (e.g. future of voice assistant), and interview 5-10 people who are relevant to that area in some way. 
    2. Ideally you should pick at least one expert in the field, a power-user, and a casual user. 
    3. Summarize the interviews into a report or a presentation.
    4. You could also run a quantitative survey.
    5. Incorporate your desk research results.
    6. Summarize all above into a presentation / report.
  2. Deep dive of a software or an app, and find pain points and possible solutions:
    1. Pick a software or an app that you have an access to its power users. 
    2. Closely observe these users interact with the software or app with their permissions, record these, take notes.
    3. Distill user pain points that you found, 
    4. Come up with possible improvement points. 
    5. Summarize all the findings with possible solutions in form of report or a presentation.

Taking above ideas as a springboard, feel free to expand and explore your ideas on what kind of UX research projects that you would like to work on!

Check out YouTube version too.

Also check out my other article on how to start your own UX project as a UX designer too!

#24 How to convert web designer’s portfolio to UX portfolio

Illustration of converting web designer's portfolio into UX portfolio

A lot of web designers want to transition to UX designers, as that seems like an easy thing to do on its surface. If you are serious about moving in to user experience, you need to spend some time to work on your portfolio towards that direction, in order to convert your web designer’s portfolio to UX portfolio.

As a web designer, I understand that you may have only done web-based projects or websites. And the final output for those projects might be something that you are not happy with, or not what you intended. 

But you can actually take those projects and turn those into case studies by shedding lights from a UX perspective.

You can articulate how you would reframe the project from a UX point of view, and rework on the project based on that new perspective and process.

If you have a project with a final output that you don’t feel comfortable, you can document the whole process, and clearly point out what went wrong, what you would have done if you were given enough resource and opportunity, then actually work on ideal design to prove your point.

  • Document the process of your project from start to finish
  • Point out issues along the way:
    • what went wrong
    • what you would have done if xyz (e.g. if you were given enough resource…)
  • Try to be as objective as possible, don’t just blame others. It’s OK to criticize, but when you do, you should propose a solution.
  • If the final product turned out to be very different from what you originally designed, compare those two, and point out pros and cons for both.
  • Come up with a revised plan and strategy to improve the process and output.
  • Include user test as part of the process so that you can learn from users.
    Create a design mockup based on the revised plan and strategy above.
    Articulate improvement points of your new design.
    Point out potential issues of your new design too.

The key point here is for you to clearly demonstrate how you can learn from your past experience, analyze issues, come up with a better plan including how to collaborate with other stakeholders such as clients, developers and managers, and improve your design output.

If you can put your serious effort and pull out these together, I think the whole documentation of your thought process to an improved design output can become quite convincing in showing your problem-solving skills and a healthy, positive mindset as a UX designer.

You first need to get through a stereotype label that recruiters and hiring managers will immediately put on you that, ”you don’t have enough experience”.

A UX designer solves a user’s problem, rather than simply creating fancy visuals. And you need to concretely show your ability to do so.

Being a UX designer is a journey of continuous learning.

In addition to above, you should constantly work on your own UX projects to further build your experience and portfolio. Check out my other article on how to work on your own UX project.

Check out YouTube version too!

#28 Prototype Resource Map: Comprehensive guide to today’s 8 popular UX prototyping tools

A diagram of “stitch screens with wires” interaction model and transition dropdown menu, with name of 8 prototyping tools.

Although tools are not the most important things to learn as a UX designer, inevitably you need to use it in order to achieve your more important goals, to solve user’s problems. This article covers today’s 8 most popular UX prototyping tools including Sketch, Craft, Axure, Adobe XD, InVision Studio, Principle, Framer X, and Figma. First, it compares key aspects such as price, basic prototyping features, Sketch compatibility. Then it covers a high-level overview of each software program in terms of pros and cons and uniquenesses.

I understand there are many more tools out there, and other people may have different opinions. I also acknowledge that I am not familiar with every single tool available. I chose these 8 tools based on a combination of popularity and how these tools played key roles in the modern history of prototyping tools, and likely to take part in the future.

When Adobe Flash started going down, Axure took over in Web 2.0 Era, then Sketch came along to become a de facto standard. But lack of prototyping and cloud features in its early days opened up other new tools to emerge around Sketch, such as InVisionPrincipleCraft plugin for Sketch, and Adobe XD with a new voice capability. Framer X is tackling a challenging developer handoff problem, which could be the future of prototyping. Figma is getting more tractions lately because it was built for cloud-based collaboration, which is becoming a norm in today’s accelerated remote work situation.

Trends in today’s prototyping tools

Today’s trends in prototyping tools are ”stitch screens with wires” interaction model, accompanied by auto-animate transitions that smartly animate transitions between two screens connected. This makes prototyping super-fast and intuitive for non-tech-savvy UX designers.

Left: a diagram of how "stitch screens with wires" interaction model works, Right: an example dropdown menu for transitions with auto-animate highlighted.
Left: “Stitch screens with wires” interaction model, Right: Auto-animate transition smartly look for same objects between two screens and create animations based on parameter changes on size, position, opacity level/etc.

Currently, Sketch is the most popular prototyping tool. However, Sketch is very limited when it comes to creating transitions and micro-interactions with animated effects. This is where other tools have strengths, and all of them have some sort of compatibility with Sketch. Let’s dive in to comparisons of 8 popular prototyping tools.

Section divider title graphics including the title, Comparison of 8 popular UX prototyping tools.

Comparison of 8 most popular prototyping tools


A pricing table of all the 8 UX prototyping tools. It includes notes and free trial period.
Price comparison of 8 prototyping tools
  • Sketch one time price is $99 which includes 1 year of software updates and Sketch Cloud usage. Optional renewal is available for $79/year for software updates and cloud.
  • Adobe XD is free.
  • Axure is $495 for its perpetual license, or $29/month subscription.
  • InVision Studio and Craft are free, but are limited to only 1 prototype in InVision Cloud for free.
  • Principle is $129 (one time fee).
  • Framer X is $15/month or $144/year, based on 1 year subscription.
  • Figma is free with a Starter plan, up to 3 prototypes.

Basic prototyping features

Comparison of basic prototyping features:
Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end. The author of this article does not have affiliations with any companies listed.

Legends for diagrams shown in a table above, interaction models and artboard structure.

Because the whole point of prototyping is to quickly test concepts, ease of use and speed are critical. In most real world situations, time is very limited, so ability to quickly create a basic prototype just by connecting screens together is super convenient, and that’s all you need in most cases.

From this perspective, Sketch, Craft, InVision Studio, Principle, Figma, Adobe XD, Framer X all do great jobs with similar “stitch screens via wires” interaction models.

Principle creates all the transitions automatically, allowing some controls via timeline UI. This is great for creating a nice animation instantly. But it doesn’t offer the most basic “preset transitions” such as slide, push or dissolve like other tools. For this reason, Principle is positioned slightly to the right in the chart compared to others (except Axure).

InVision Studio also provides a timeline UI similar to Principle, but it also provides basic preset transitions, which makes it a bit easier when it comes to basic prototyping.

Axure uses a very different interaction model. A user has to specify and add every single interaction via Interaction Editor. Interaction Editor is a very powerful tool for building complex interactions, but lacks speed and glance-ability for basic prototyping.

A matrix of 8 UX prototyping tools plotted on a price vs. ease of use plane.
Chart 1: Price vs. ease of use — basic prototyping: Ease of use is evaluated based on the author’s perspective, especially in terms of how easy to build a basic prototype by connecting multiple screens together via transitions.

Above chart shows how 8 tools are positioned on a price vs. ease of use plane. As you can see all the tools except Axure fall under bottom-left quadrant.

Basic prototyping features — animation adjustments

A table showing ability to adjust animations in basic prototyping feature across 8 UX prototyping tools.
Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end. The author of this article does not have affiliations with any companies listed.
A matrix of 8 UX prototyping tools plotted on a ease of use and fine-tuning capability plane.
Chart 2: Ease vs. fine-tuning capability — basic prototyping: Ease of use and fine-tuning capability are evaluated based on the author’s perspective, especially in terms of how easy to build a basic prototype by connecting multiple screens together, and how much controls you have in terms of sequences, timing and ease in/out.

This chart illustrates how much controls you have when creating a basic prototype, when it comes to sequence of multiple animations, timing and duration of animations, and ease in/out effects. Software programs are broken down into 3 groups.

The group in the top-left quadrant have a good balance of an overall ease of use and ability to fine-tune transitions and animations without too much work. These include InVision Studio, Principle and Adobe XD. All three do pretty good job in creating auto-animate transitions. Although similar, Principle seems to create the smoothest animations in most cases.

Figma recently added Smart-Animate feature, but currently it’s lagging compared to above three programs. Framer X can do fine-tuning but only via code. Sketch and Craft does not support fine-tuning. They only support basic preset transitions.

Axure can do many complex interactions, but only via Interaction Editor, which is not the simplest way from basic prototyping perspective.

Sketch compatibility

A table showing Sketch compatibility across 8 UX prototyping tools.
Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end.

Currently, InVision Studio is the most Sketch-compatible program, which supports opening Sketch file directly as well as copy & paste objects and symbols from Sketch.

Adobe XD supports opening Sketch file directly, but copy & paste from Sketch doesn’t work. Principle can import Sketch file almost the same way as opening, but copy & paste does not work. Figma can import Sketch file but takes time. Copy & pasting a Sketch object does not work. Framer X accepts copy & pasting a Sketch object, but cannot directly open or import Sketch file. Axure can take copy & pasted Sketch object, but only via Axure plugin installed to Sketch.

A matrix showing 8 UX prototyping tools on a price vs. Sketch compatibility matrix.
Chart 3: Price vs. Sketch compatibility: Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end.

Advanced prototyping

A table showing advanced prototyping capability such has ability to build full interaction, micro-interactions, and voice interaction.
Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end.
A matrix showing 8 UX prototyping tools on a price vs. advanced prototyping capability plane.
Chart 4: Price vs. advanced prototyping capability: Evaluated based on the author’s perspective.

When it comes to advanced prototyping capability, Axure covers pretty much any interactions possible to simulate how the actual product is going to feel like via Interaction Editor except voice interaction. But Axure does not support videos. (Axure supports GIF animations)

Framer X is another tool that has a potential to add a lot of advanced interactivity to a prototype. One of the unique advantages of Framer X is that it supports video and audio. You can even embed YouTube video and run it inside your prototype, which is pretty powerful. While Framer X has a store to download many useful components, many of advanced interactivity need to be added via code.

Principle has an interesting and unique feature called Drivers, which can add various micro-interactions quickly to make the prototype look real.

Adobe XD allows you to create voice interaction, which stands out from competition in this area as no other tools support that.

Sketch, Craft and Figma are fairly basic, so does not support advanced interactivity at this point.

Running a prototype on mobile

A table showing capability of running a prototype on mobile across 8 UX prototyping tools.
Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end.

All the software programs have mobile apps to run a prototype except Framer X. Framer X is lagging in this area, where a prototype can only run inside a mobile web browser via QR Code.

Sharing a prototype online

A table showing ability to share a prototype online across 8 UX prototyping tools.
Capability of sharing a prototype online across 8 prototyping tools

Principle falls short in this area as it does not have a cloud. In order to share a prototype in Principle, you need to either send a Principle file and have it open from Principle mobile app, or export a prototype as a Mac Desktop app to be viewed on a Mac that doesn’t have Principle app installed. This means you cannot share a prototype with Windows users.

3rd-party ecosystem

A table showing 3rd party ecosystem of 8 UX prototyping tools such as plugins, store and others.
Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end.

While Sketch remains strong in this area with its abundant plugins, Adobe XD and Figma are catching up. Framer X has a unique approach with its Store, which is super-easy to browse and download functional components such as YouTube Player. Moving forward, Adobe may have a powerhouse advantage in a near future, as seen in innovative new feature such as voice interaction. Many of popular Sketch plugins are already getting ported to Adobe XD too.

Collaboration capability

A table showing collaboration capability and price across 8 UX prototyping tools.
Based on data as of April 2020. information is all subject to change, whenever listed companies make any changes on their end.

As for collaboration within a team, Principle falls short. Adobe XD and Figma offers free collaboration feature. Sketch offers a separate subscription for Team feature. Axure has a separate software that supports Team feature called Axure RP9 TeamInVision Studio offers additional subscription for Team feature. Craft uses InVision Cloud. Framer X has Small Teams plan that allows access to Team Store.

Section divider graphic with a title "overview of each tool".
Sketch logo as a section divider for Sketch section.

1. Sketch (based on version 63.1)

Sketch UI showing 3 screens connected using prototype feature.
Sketch UI showing 3 screens connected using prototype feature.

Sketch is the most popular tool, a de facto standard with various 3rd party plugins. But the default transitions are minimum, animate from right, bottom, left, top only.

Sketch UI with a blow-up of Prototyping animation options.
Sketch prototype feature, 5 animation options
  • Pricing: $99  (includes 1 year updates, 1 year Sketch Cloud. Optional renewal is available for $79/year for software updates and cloud. )
  • Free trial: 30 day
  • Mac only


  • Abundant plugins
  • De facto standard
  • Strong symbol features
  • Smart Layout


  • Limited transition animation options
  • No fine-tuning capability for animations
  • No micro-interaction support

Running a prototype locally, on mobile and in the cloud

  • Clicking a preview icon on the top right corner allows you to run a prototype locally.
  • Sketch Mirror app can mirror an open Sketch file on your Mac through the same wifi connection. To mirror a prototype on a mobile app, click Notifications on the top right of the desktop app window, and select a mobile phone running Sketch Mirror app.
  • Uploading to a cloud allows you to share a prototype with others via a link. This is a great way to share a prototype with others and get feedback.

Smart Layout, plugins

  • Smart Layout allows automatic resizing of buttons and layouts based on the text lengths.
  • Abundant plugins are one of Sketch’s biggest strengths compared to its competitors. All the installed plugins appear under Plugins menu, and can be disabled via Preferences/Plugins.
  • Rename It, one of Sketch plugins lets you rename selected layers or artboards in bulk with numbered names. Adding “%N” in Name field after your desired text string (e.g., rectangle, square, thumbnail) results in layer names with your [desired text string]+number.

Collaboration – Team  feature

  • Sketch has a Team feature which allows you to collaborate. You can access this feature by logging in to your Sketch Cloud, then select Create New Team.
  • Adding team members cost $9/month per contributor, or $99/year per contributor.

Sketch related useful inks

Craft logo as as section divider for Craft section.

2. Craft plugin for Sketch (Based on version 1.0.94) 

Craft toolbar embedded inside Sketch. Craft-based prototype links shown in blue.
Craft toolbar embedded inside Sketch. Craft-based prototype links shown in blue.

InVision’s Craft plugin enables a slightly better prototyping capability directly within Sketch. These include gestures such as tap, swipe, and transitions such as dissolve, push, slide.

  • Pricing: free
  • Mac only (as it’s a Sketch plugin)


  • Free (if you already have Sketch)
  • More transition controls than Sketch
  • Smart Duplicate, Data features


  • You need Sketch
  • Transition options are still limited
  • Sticky header not supported
A blue arrow appears from a selected layer, and shows an option to link back/close, external URL, or artboard to link to.
Pressing “C” while a layer is selected brings up a blue arrow to link to another artboard, link back, or external URL.

Prototype menu and toolbar are embedded in Sketch

Because Craft is a Sketch plugin, Craft menu appears as an embedded toolbar on the right side of the screen. Clicking on a circular head of a blue link arrow brings up prototype menu. Prototype options that Craft has are slightly more than Sketch’s options as below.

Prototype menu appears when a start of the blue arrow is clicked. Craft toolbar appears embedded in Sketch UI. on the right.

Running Craft prototype locally, in the cloud, on mobile

  • Craft prototype is very similar to Sketch prototype. Currently a “sticky header” feature is not available.
  • A prototype uploaded to InVision Cloud can be opened in InVision mobile app to run on mobile. Only one prototype is allowed on a cloud with a free InVision account.
Craft prototype running on mobile via InVision mobile app.

Data, Stock

  • Data pulls real content from a range of sources and place it directly in your design.
  • Stock allows you to find and place high-resolution imagery from Getty and iStock to your design.


Once a prototype is uploaded to InVision Cloud, clicking on “+” icon allows you to invite a person to collaborate. 

InVision Cloud UI showing that clicking on "+" opens a popup to enter email to invite people.
Clicking on “+” opens a popup to enter email to invite people.

Craft related useful inks

Axure logo as a section divider for Axure section.

3. Axure (Based on version

A screenshot of Axure user interface
Axure user interface

Axure has established its own unique place as a go to prototype tool to build a more robust, complex prototype with various interactions, not just screen-to-screen click throughs.

Many experienced UX designers still use Axure because you can do more, but the trend is more towards software programs with “connect screens with wires” interaction model, because that’s much faster to create simple prototypes.

  • Pricing: $495 (perpetual) or $29/month
  • Free trial: 30 day
  • Both Mac and Windows


  • Advanced prototyping capability
  • Can build almost any interactions (except voice interaction)
  • Unlimited cloud


  • Most expensive — $495 perpetual, or $29/month.
  • Does not use popular “connect screens with wires” interaction model
  • Font Awesome not supported in mobile app
  • Least Sketch compatibility

Interaction Editor and Condition Builder

  • Interaction Editor allows you to add various complex interactions. Various list of events, actions and tiggers are available in Axure’s Interaction Editor to be able to create complex interactions.
List of available events, actions and triggers available in Axure’s Interaction Editor
  • In Interaction EditorCondition Builder allows conditional branching of interactions. This is basically If statement in code done visually.
An example of creating conditions with logic in Condition Builder.

Running a prototype locally, in the cloud, on mobile

  • Clicking Preview button opens a browser window and runs a prototype.
  • Publishing to a cloud allows you to share a prototype easily with others to collect feedback.
  • Axure Cloud mobile app can open a project published on a cloud. Font Awesome did not render.

Sketch plugin, widget libraries

Axure RP9 Team

  • Axure offers team (collaboration) feature as a separate product.
  • Subscription is $49/month per user, which is more expensive than regular license.
  • Perpetual license is $895 per user.

Adobe XD logo as a section divider for Adobe XD section.

4. Adobe XD (Based on version

Adobe XD user interface in Design Mode.

While Adobe XD entered the market late, it has a unique voice interaction feature, which no other competitors support.

Its Auto-Animate feature is pretty strong and simple, however, there’s no timeline UI like Principle or InVision Studio to make adjustments.

It can directly bring in Photoshop files, Illustrator files. It can also open Sketch file directly.

  • Pricing: free
  • Both Mac and Windows


  • Voice interaction capability
  • Can open Photoshop/Illustrator files
  • Free


  • Mobile app requires uploading a file to the cloud first
  • It takes long to open a file in a mobile app
  • Font Awesome not supported in mobile app

Prototype mode — trigger and action

  • Adobe XD separates Design Mode and Prototype Mode. Below screenshot shows Prototype Mode.
  • AmongTriggersTime allows a timer function. Voice is the most unique feature of XD, which is one of triggers.
  • Among transitions, Auto-Animate is a pretty powerful feature that can smartly animate a transition between screens.

Running a prototype locally, in the cloud, on mobile

  • Clicking a Play button runs a prototype locally.
  • A file needs to be saved to a cloud in order to run a prototype on Adobe XD mobile app.
  • An XD file saved on Adobe Cloud becomes accessible from Adobe XD mobile app. Font Awesome didn’t render.

Repeat Grid and voice interaction

  • Repeat Grid auto-copies what’s selected as you drag a handle. You can bulk-adjust margins too. It’s a smart productivity tool that works great when creating tables or lists.
  • Voice interaction capability is the most unique and advanced feature that Adobe XD has. Below you can see the voice prototype in action. Note that you need to hold down a screen while speaking up your voice command that you specified in Speech Playback.
You can type in a voice command that you want to use in Command field after selecting Voice from Trigger.
For a Speech Playback, you can select different voice, then enter what you want that voice to speak up.


  • To enable Coediting, you first need to save the document to the cloud. Once the document is saved to the cloud, Invite to Document icon gets activated. After clicking Invite to Document, enable Coediting, then send an invite.
  • Once fellow designers are added, you see them as color-coded avatars and bounding boxes.
Adobe XD website showing how Coedit works

Adobe XD related useful inks

InVision Studio logo as a section divider for InVision Studio section.

5. InVision Studio (Based on version 1.26.1)

A screenshot of InVIsion Studio user interface.
InVision Studio user interface showing three artboards linked with its interaction feature.

InVision Studio can open Sketch file, or can take objects and symbols copy-&-pasted from Sketch, and can create a more sophisticated prototype via its timeline-based transition capability.

When opening Sketch files, there are a few things to keep in mind. Link layers in Edit timeline doesn’t support Sketch symbols currently. In order to achieve a smooth animation, a file may need to be optimized accordingly.

  • Pricing: free
  • Both Mac & Windows

In order to publish more than one prototype to share online, you need subscription to InVision Cloud.


  • Free
  • Best compatibility with Sketch
  • Transition adjustments via timeline


  • Sometimes buggy and sluggish
  • Cloud only allows one prototype for free
  • Sync layers does not work for Sketch symbols

Interactions panel

  • Selecting a layer displays Interactions panel on the right.
  • Timer, one of triggers, allows certain interaction to happen automatically after a specified number of seconds.
Showing available triggers of 4 different groups: desktop, mobile, keyboard and Timer, and preset transitions.
Interactions panel: available triggers and preset transitions
  • Timeline allows sequencing multiple animations in a particular order to make the overall animation easier to understand.
InVision Studio's timeline interface. You can also adjust a velocity curve.
InVision Studio’s timeline opens when Edit Timeline is clicked from Interactions panel.

Running a prototype locally, in the cloud, on mobile

  • Clicking a Play button on the top right runs a prototype locally.
  • A prototype uploaded to the cloud becomes sharable with the link generated.
  • Prototype on a cloud can easily be shared with others to collect feedback.
  • A prototype uploaded to the cloud becomes accessible from InVision mobile app.
  • A prototype can be mirrored to a mobile app via QR Code without cloud, but it’s sometimes buggy.
Screenshots of InVision Studio UI showing QR code, and InVision mobile app showing scan QR code screen.
Clicking on mobile icon displays a QR code, which you can scan from InVision mobile app.


To use Team feature to collaborate with other designers, you need to purchase Team plan, which is $89/month for 5 team members.

InVision Cloud pricing on InVision website, showing 4 options: Starters, Professional, Team, and Enterprise.
InVision Cloud pricing on InVision website.

InVision Studio related useful inks

Principle logo as a section divider for Principle section.

6. Principle (Based on version 5.10)

Principle user interface showing 3 artboards with a prototype preview window open by default.
Principle user interface opens a prototype preview screen by default.

Principle can import Sketch file directly, and can create a more sophisticated prototype.

Its animation is very smooth, with powerful auto-animate feature, which looks for same layer names between two screens.

Components and Drivers feature allow you to quickly create various micro-interactions.

However, there are a few things to keep in mind with auto-animate feature. It could automatically animate many unwanted elements in a screen depending on how layers are named between two screens. To avoid that, your may need to prepare a file in Sketch first by renaming all the layer names carefully.

  • Pricing: $129 (one time fee)
  • Free trial: 14 day
  • Mac only


  • Auto-animate is very smooth
  • Easy to make micro-interactions with Drivers
  • Works very well with Sketch


  • Costs $129
  • Auto-animate sometimes creates unintended animations
  • Mobile app requires USB connection
  • No cloud service

Triggers, Timeline and velocity control

  • Auto option in Triggers works similar to Timer InVision Studio has, which allows things like a toast appears automatically after an action completes.
  • Timeline allows you to control duration, ease and sequence of certain animations, or freeze those.
Screenshots of Principle's triggers dropdown menu and Principle UI showing interaction arrows between artboards.
Available triggers and interaction arrows
Principle's timeline UI, showing velocity control popup.
Principle’s timeline UI.

Prototype running locally, on mobile

  • Prototype preview is always open, so super-convenient to test.
  • Connecting an iOS device running Principle Mirror app to Mac via USB cable mirrors a prototype on mobile from desktop.


Below shows a dynamic header that shrinks when a scroll starts, created with Drivers. As shown below, Drivers is a powerful and useful feature to build various micro-interactions.


Principle related useful inks

Framer X logo as a section divider for Framer X section.

7. Framer X (Based on v50)

A screenshot of Framer X user interface.
Framer X user interface

Framer X is some of newer tools. You can copy & paste Sketch symbols and elements into Framer X artboard, but you cannot directly open Sketch file. Prototyping features for average users are fairly basic, and does not have auto-animate capability. But for code-savvy users, you can use code to do more advanced prototyping.

  • Price: $12/month (pay annually) or $15/month
  • Trial: 14 day
  • Mac only


  • Store for easy component downloads
  • Stack is a smart, powerful feature
  • Code extensibility, code handoff
  • Supports videos


  • Limited Sketch compatibility (copy & paste only)
  • Basic transitions are limited
  • No mobile app
  • Monthly subscription ($12/month)


Preset transitions are fairly basic.

A screenshot of Preset transitions of Framer X.
Preset transitions in Framer X is fairly basic.

Running a prototype locally, on mobile

  • Clicking on Play icon opens up a window to run a prototype locally.
  • Framer X does not have a mobile app. Scanning a QR code opens up a browser for to run a prototype.
Clicking a mobile icon displays a QR code so that you can scan it from your mobile phone to open a prototype in a mobile browser.

Stack, Store, Motion API

Framer X Store
  • Stack is a powerful feature for creating lists and grids. Objects dropped into a Stack becomes auto-adjustable elements. Stack can be nested.
  • Store allows you to search and download various useful components. Video Player and YouTube Player components from the Store are super-convenient.
  • For a code-savvy users, Motion API opens up various advanced prototyping possibilities via code.
  • Web version is work in progress as below.


Small Teams allows members to share components via secure Team Store.

Framer X website showing pricing for Individual, Small Teams, Company.
Framer X pricing including Individual, Small Team, and Company

Framer X related useful links

Figma logo as a section divider for Figma section.

8. Figma (Based on Figma Desktop App release 85 Build 10)

Screenshot of Figma user interface (desktop version)
Figma user interface (desktop version)

Figma is unique in a way that it was built primarily as a web application saving it’s files to the cloud by default, even in their desktop version. Figma can import Sketch file, but could take quite some time to complete the import. Prototyping feature is fairly basic.

  • Pricing: Free
  • Starter: Free for up to 2 Editors and 3 projects
  • Professional: $12 per editor/month billed annually or $15 month-to-month
  • Both Mac and Windows


  • Files are saved to the cloud by default
  • Free up to three projects, two editors (collaborators)
  • Well-designed user interface


  • Limited transition options
  • Cannot copy & paste objects from Sketch (import only)
  • Free version limited to 3 prototypes

Home screen, prototype mode, prototype panel

  • Figma has a home screen called Drafts that displays all of your projects. Files are saved to the cloud by default.
  • Figma has Design mode and Prototype mode, similar to Adobe XD.
  • Smart Animate was added in 2019 to catch up with the competition.
Figma's various controls in prototyping: trigger, transition and action shown in screenshots.
Figma’s various controls in prototyping: trigger, transition, action

Running a prototype locally, in the cloud, on mobile

  • Clicking on Play button opens up a new tab and runs a prototype locally.
  • Clicking on Share Prototype creates a link to share with others.
  • People who received the prototype link can view the prototype via a web browser.
  • While a project is open on your computer AND an artboard is selected, Figma Mirror app can mirror the prototype on mobile.

Importing a Sketch file, plugins

  • Importing a Sketch file may take some time to complete.
  • Plugins are available from Figma website.
Clicking on Import file on the top left allows you to import Sketch file, shown in Figma UI.
Clicking on Import file on the top left allows you to import Sketch file.

Collaboration — Share an individual file, create a Team

  • You can easily share your individual file with edit permission.
  • You can create a Team from Figma web UI then invite members. Team feature is free for up to 2 editors and 3 projects.
  • You can easily move your file from Drafts to a Project within a Team to collaborate.
  • Team feature is free for up to 2 editors and 3 projects. Beyond that, Figma offers 2 types of paid subscription plans for more robust feature supports, Professional with $12 per editor/month, or Organization with $45 per editor/month.
A screenshot of Figma web UI showing a Team with members and projects
Figma web UI showing a Team with members and projects

Figma related useful inks

Section divider graphic with section title: Recommendations for beginners.

So what is recommended for beginners?

There are three options depending on what’s important to you.

1: Sketch + InVision Studio

Given the de facto standard status of Sketch, Sketch with InVision Studio to animate prototypes makes a good choice. InVision Studio is free, but sharing a prototype requires cloud upload, which is limited to 1 prototype in a free account. And Sketch is not free.

2: Figma

Figma is free and gaining tractions these days because of its strengths in cloud-based collaboration feature. If realtime collaboration is a high priority for you, Figma is the way to go.

3: Adobe XD

Currently, Adobe XD is the only tool that allows you to create voice interaction prototypes. XD also has Coediting for realtime collaboration. If you want to pursue voice interaction and collaboration is important for you, XD should be the choice, and it’s free.

Thank you for reading. Best wishes to your success!

This article was published on Medium in UX Collective.

#23 How to prepare for whiteboard challenge or app critique during a UX job interview

A person working on a whiteboard challenge and app critique while hiring managers are watching.

I totally understand that you get nervous, and want to prepare as much as possible, when you have an upcoming UX job interview with a whiteboard challenge or an app critique.

Here are things that you might want to consider.

  1. Try to put yourself in a user’s shoes and feel/experience/think the product from a user’s perspective, rather than trying to see things as a smart expert observing from an outside.
  2. Try to see a forest first (big picture) rather than getting caught up in each tree (details)
  3. Focus on the most important feature/task.

All of these will help you think about how you would use the product in your life in which context (where, when, how…etc)

The product could be the app your are asked to criticize during an app critique session, or the web application you are asked to design on a whiteboard.

It’s important to put the product in a context that it belongs when it is used.
Once the product is put in a context, it will naturally reveal what works and what may not work, what you may want to improve/change, or what actions you may consider/etc.

In addition to these, here are some more general things that you should keep in mind.

  1. Try to think out loud so that the interviewers understand your thought process.
  2. Try to be as crisp and clear as possible when you speak out loud.

Hiring side typically wants to see your thought process, how you approach problems, how you articulate your ideas and communicate to others effectively. 

They also want to see if you are a team player with a good positive energy, and a right fit for their team or not.

“App critique” or “white board challenge” (or whatever it is) are more or less just a vehicle to see how these aspects of a candidate come through.

Relax, be yourself, be friendly, be excited, be confident and enjoy the whole process as if you are working as part of the team with your interviewers.

Then you will be fine!

Even if you didn’t do well during your interview, going through an interview process to prepare for a whiteboard challenge or an app critique under pressure by themselves give you invaluable lessons.

Your experience will not be wasted.

Check out YouTube version too!

Also, check out Why it’s important to have 2 different UX portfolios too!

#22 Why it’s important to have 2 different UX portfolios

Illustration showing a person looking at two UX portfolios in a drawer

UX portfolio is the most important component when you market yourself and apply for a job. Yes, your previous work experiences are important too, and your college degrees still matter to certain extent. But UX portfolio is the most concrete and tangible proof of your work.

Nothing beats that.

I would suggest that you have 2 UX portfolios:

  1. In-depth process walkthrough portfolio (PDF or ppt or Keynote)
  2. Online portfolio

In-depth process walkthrough portfolio

Hiring managers and recruiters are looking for candidates who can actually deliver tangible results. Well, what does that mean?

So a UX designer’s job is to solve a user’s problem. In order to prove yourself to hiring managers and recruiters that you can deliver, you need to show the process through tangible artifacts. You need to show your thought process and decision-making process.

This means that bunch of screenshots of a final product don’t mean much.

Because screenshots don’t tell any story about why.

  • What was the process that you took to get there?
  • What kind of key decisions did you make along the way?
  • What were the reasoning for those decisions?
  • What kind of user research did you do?
  • What were the key findings from those user research?
  • What was your role and contribution to the project?
  • What were the things that didn’t work well?
  • What were the things that worked well?
  • How did you define the problem in the first place?
  • Or was it defined by someone already?
  • How did you work with PM and engineers and other stakeholders?

These are types of things that hiring managers and recruiters need to know in order to evaluate UX designer candidates.

All these can be captured in a process walkthrough document. This is an in-depth walkthrough of your process throughout the project, which will give its audience a detailed view of how you worked. Typically, it’s better to create this type of portfolio in a presentation style such as PDF, Powerpoint, Keynote.

Pick one or two of your strongest projects, and create in-depth process walkthrough. This works great for in-person onsite interviews, where you will be given 30 minutes to an hour to present your work.

Hiring managers and recruiters are looking for your problem solving process and ability. How you define a problem, how you approach and solve the problem, how you learn what worked and what didn’t, how you iterate your design based on those learnings, and what your process is to go through all those/etc.

In-depth process walkthrough portfolio should be able to answer all those questions.

Ideally, when you work on any UX projects, you should make a habit of documenting your process along the way. 

Once project documentation becomes your habit, you will be in a far better position than before, so that you are always one step away from putting together an in-depth process walkthrough portfolio.

Online UX portfolio

Another UX portfolio that you should prepare is an online portfolio.

This should cover wider range of projects without getting too much into details to show a variety of projects that you worked on. Just include basic information such as project/product name, year, your contribution, key accomplishments.

This online portfolio works well when you initially apply for a position.

Many people use portfolio platforms such as Behance, which is probably the easiest way to get started. The downside of using such popular platform is that your portfolio page could easily get lost in the crowd, because there are so many similar portfolios competing yours.

If you can afford it, creating your own WordPress portfolio site with your own domain may make it stand out from the crowd.

But this is more time consuming and expensive solution, so it’s definitely not for everyone.

Check out YouTube version too!

Also, check out How to start your own UX project too!