Five Steps to App Prototyping and Other Great Figma Resources
You’ve had a brilliant idea! You’ve realized your hobby, industry, or the world at large needs a tool that hasn’t been invented yet, and you know just the thing for it — a mobile app!
If you’re an average Joe, maybe you’re here because you don’t know where to start the app prototyping process. If you’re a business, you’ve found your brand identity, laid out your goals, and invested in social media marketing. You’re thinking the next step just might be creating a mobile app of your own.
Figma is an easy-to-use, free website that has everything you need to model your prototype. One of the many great Figma resources is their plethora of tutorials. You can check out their prototyping tutorial here, or keep reading to get the simple step-by-step version of how to go about the prototyping process.
Why an App?
Mobile apps have become just as important in our lives as our wallets — think Venmo, CashApp, and GooglePay. They’ve become an educational resource — think language learning apps, kindle, and University-run apps. They’re our primary source of entertainment.
Building an app for your business can accomplish a variety of goals. Maybe you want to generate more sales. Maybe you you’ve identified a resource your industry is lacking.
If your customers or clients have to frequently access your website or make calls to get what they want from you, consider developing an app to minimize the amount of friction they have to endure to reach your service or product.
The best part?
You don’t actually have to build the thing, you just have to prototype it. A prototype is “a first, typical or preliminary model of something, especially a machine, from which other forms are developed or copied” (Oxford Languages). If you’re thinking about developing an app, you’re probably thinking first and foremost about how it will look and function. Most of us aren’t going to think about what’s referred to as “the back end” of an app, the computer sciency programing part.
At the conception stage, you can hire a professional to prototype that app for you, or you can spend some time doing it yourself. The best resource I’ve used by far has been Figma. It’s got loads of built in templates and design options.
It just takes five steps to get from a spark of genius to the real deal!
1. Brainstorming
At this stage, you’ve just identified a need in your industry, realized your clients need to get to your product or service faster, or you’ve just got a good idea. Your first step is to do a little digging to see if there is anyone out there doing something similar. If there is, use their app and note what you like and what you’d do better. If there’s not, it’s time to brainstorm. During the brainstorming process, you’re writing everything down in free-flow style. Don’t censor yourself or edit your thoughts while you write. Consider what the purpose of the app is, how you want your audience to experience it (the UX), and what you want it to do for your business.
2. Sketching
Now that your app concept has started to take shape, think of the three or four most important functions, always with the function of the app in mind. One of these will be the welcome screen, and the remainder will be up to your discretion. For example, if you’re a store, the function of your app is to generate sales, so your second most important screen will be your cart or check-out view.
Then, work backward from your end goal to the welcome screen and decide what the most important functions in between are. Is it a continuous scroll of your available products? Is it a tile view of product types that the user selects from? Now start your sketch! Here’s how:
- Open Figma with ipad, on your computer with your drawing tablet linked up to your computer, or just grab a pencil if that’s what you’ve got (in which case, skip this list for now, then come back when you’re ready to wireframe).
- Select “New design file”.
- At the top left on the grey toolbar, there is a hashtag symbol. Click on that and select “frame”
- On the right-hand side of the screen, there is a white toolbar. The second tab at the top is labeled “prototype”. Click on it.
- Select which device your app would be most used on (don’t worry about making it work on other devices yet, the developer will help with that later) and it will populate a canvas with the right specs. Do this again to create subsequent screens.
- Sketch out what those screens will look like. Don’t worry about whether or not your design or interaction is possible in the programming stage yet. Run with your imagination!
Working with a team? One of the awesome Figma resources is the FigJam. If you start your project in a FigJam file, anyone with the link can get in there and add their ideas!
3. Wireframing
In this step, you’re moving beyond those main three or four screens. You’re thinking about the other functions your app will have like a search bar, a contact page, a blog tab, or some other novel procedure. You’re going to create a wireframe of the app.
Check out Figma’s tutorial here for a closer look at the image above.
In a wireframe, you’re plugging in the shapes of your content, deciding where buttons should go, and thinking about fonts and copy. You’ll get a better idea of what navigating the app will feel like for your user as you sculpt each view.
4. Create the Prototype
Now get to work! It’s time to produce the copy and content! Once you’ve got that compiled, I recommend making a copy of your wireframe file so you can keep the original as a template in case you decide to start your design over.
In your copy wireframe file, you’ll start plugging it all in and creating navigational pathways between your screens.
When you’re finished, go to the top right on the grey bar and click play! Interact with every function of the prototype a few times to make sure everything works smoothly. Then have a trusted partner or friend do the same (make sure you trust whomever you allow to see your work not to copy your intellectual property).
When you’re satisfied that your app is designed just the way you like it, it’s time to add a developer to your team!
5. Hand it Off to a Developer
App developers can be hired on a freelance basis or hired out through an agency. They’ll take care of the coding and processing and come back to you with any flaws they see (they’ll probably see a lot at first, which is a good thing. A good developer develops good apps).
Market Your App!
No matter how brilliant your app is, creating it is just the first step. The real challenge is getting people to invest in it. A smart marketing strategy that includes incentives or demonstrates the benefits of using your app will make or break your investment.
Stick to it! It might take a little while for your app to take off, but if well designed, useful, and you promote it well, your clients will invest in it.
