As designers at Spatial Networks, we are always looking for ways to improve our tools and processes so that we can provide the highest quality user experience for our customers. Over the past year, Figma became one of our primary tools for user interface and user experience design. It has greatly improved our ability to design, prototype, test, and communicate with our teams.
Getting started with any new tool can be daunting, so in this post I will demonstrate how you can use Figma to design and prototype a simple feature for an existing app.
If you are just getting started with Figma, there are a couple things that will put your mind at ease right away. First of all, it’s FREE! The paid version is great for multiple editors and makes communication and collaboration with a large team much smoother, but the free version offers more than enough features to justify using it on a work project. The free version is also free indefinitely so there is no need to upgrade if you don’t need the extra features.
Second, the desktop version of Figma is cross-platform (Mac, Windows, and Linux) and also works entirely in the browser. We recommend the desktop version of the app for power users who need keyboard shortcuts and a more standalone experience, but for most team members the browser-based version is more than sufficient.
The sign-up and download process is fairly straightforward so assuming that you’ve gotten that out of the way, click the plus button in the upper left of the toolbar (right of the hamburger menu) to start a new file.
You should have a blank canvas so let’s start the workflow for adding a new feature.
If time allows, it’s ideal to demonstrate both how the app currently works and the new feature so that they can be easily compared. This will also help later when you present the prototype to stakeholders. It tends to make things more objective and ensures that you are comparing apples to apples instead of relying on memory or perception of how the app works.
To do this, we will start by recreating the current functionality, duplicating it, and then designing the new feature on top of the duplicated version. In our example we will be changing the color of the YES/NO buttons in a typical Fulcrum record and adding some emojis to spice things up. 😎
Here is the live prototype of the example app we will be building embedded directly from Figma.
First, let’s start by taking as many high-quality screenshots of the app as is necessary to show the current functionality. It makes things much easier later if the screenshots are all exactly the same width as the device you want to use for your prototype. At Spatial Networks, we want our apps to work well on the broadest range of devices so we tend to design for smaller, more affordable devices first and scale up as necessary. Fulcrum has native Android and iOS apps, but for this example we will focus on iOS and use the iPhone SE because of its small screen size (320px x 568px).
If you have access to your app’s source code, it is preferable to run the app locally using the simulator that is built into XCode and take screenshots from there. Android Studio has a similar screenshot function as well. Of course you can also take screenshots using actual Android or iOS devices as well, but capturing full-screen images can be tricky. If your app is browser-based, you can use the screenshot function built into the developer tools of Google Chrome and Firefox to take great screenshots at specified widths. It usually works better to choose the “Capture full size screenshot” option if possible. You can use any method to collect screenshots but it is important that all of the images stay the same width and equal proportionally so that the size of similar elements stays the same from image to image.
Once you have taken all the necessary screenshots, drag and drop the downloaded images on to your empty Figma canvas. The images should appear on the canvas and should all be the same width. It is important that all of the images are the same width because they will need to fill the entire width of your prototype’s screen. Height is not an issue because although it will not fit the target prototype device’s viewport height, it will automatically create scrollable content as you would expect on a native device.
Now that all of your screenshots are on the canvas, select one of them by clicking on it. To the right of the canvas you should see the Properties Panel which has three tabs at the top labeled Design, Prototype, and Code. Make sure that the Design tab is active and the image is still selected. You should see the image’s X/Y coordinates as well as width and height dimensions. If your screenshot came from a high DPI screen such as a Mac Retina display, it may be the correct aspect ratio but double or even triple the total desired size. To correct this, make sure the the width and height proportions are constrained by toggling the ‘Constrain Proportions’ link icon to the right.
With the proportions constrained, set the width to the target device size (320px for our iPhone SE example) and the height should scale accordingly so that the image is not distorted.
With your image the correct size and still selected, click on the hamburger menu in the upper left of the toolbar and select Object > Frame Selection from the dropdown menu. This will turn the image into a frame. A frame in Figma is similar to an artboard in other apps such as Adobe Illustrator and will allow us to turn it into a screen for our prototype.
Repeat the process of resizing and turning each of your screenshots into frames. If you are comfortable, you can do the same thing with multiple images selected and all of them should turn into frames of the same width. The frames you have just created will become the separate screens you will use in your protoype so make sure that every possible state (button color, hover, targeted, overlay, modal, etc) is represented in your screenshots.
The screenshot images are now frames but are still basically static and unconnected. To turn them into an interactive prototype, we will need to reanimate the actionable elements in the app by creating targetable (clickable/tap-able) zones over them. Any object in Figma (text, shape, image, etc.) can become a targetable zone in your prototype.
Start by using the shape tools to create shapes (rectangles usually work great) that cover all of the actionable elements in your app such as navigation icons, text links, and buttons. Use a unique color for these shapes that sticks out and does not occur anywhere else in your app. It is also helpful to give it some transparency so you can see the elements below.
Make sure that you use exactly the same color and level of opacity because it will make them easier to select all at once in later steps.
With one of your new shapes selected, click on the “Prototype” tab at the top of the Properties Panel on the right side. In this panel you can set prototype interactions for each of the targetable elements you have created.
It’s usually best to start with the most basic settings and add more complex interactions and animations as needed. See this excellent series of videos by the Figma team for a more in-depth look at prototyping.
Make sure that the prototype is set to the same width as all of your frames. For this example we have selected the default settings for the iPhone SE with the Space Grey model as a frame to make it even more realistic.
The prototype interactions will show up as connected arrows between elements that you can select and drag to reposition if necessary.
Once you have given all of your shapes an action, you can view your prototype by clicking on the “Present” button (play icon) right above the Prototype tab and just to the right of the “Share” button in the toolbar. This will open a new tab that you can use to present or share your prototype. Our example app prototype is embedded in the post above using the embed options from that share menu.
With all of your prototype actions set to mimic the way that your app currently functions, you should have a great base for designing the new feature. Start the new iteration by selecting all of your current frames and then duplicating them. On a Mac, it is easiest to use the Option + Select + Drag method to duplicate all of the selected frames at once and place them in a separate area of the canvas at the same time. You should end up with a mirror image of all your previous frames as well as prototyped interactions.
It is important to rename all of the duplicated frames so that your prototype interactions will not get confused. Use this new set of frames as a base to design your new feature.
With your new features designed and all of your prototype interactions working, it’s time to clean things up so you can show off your prototype. With one of the uniquely colored target zones selected, choose Edit > Select all with same fill from the dropdown menu.
This should select every target zone across the entire document with that same color fill and allow you to reduce the opacity to 0% which will make all of the elements disappear but remain clickable for prototyping purposes.
After testing (and testing again) your prototype should be ready for communicating with stakeholders and your team.
Design is an iterative process that involves a continuous cycle of researching, designing, prototyping, and testing as well as communicating with stakeholders along the way. Figma is helping us to do all of those things better and faster than we ever have before and we believe that our increased efficiency will result in a better user experience for our customers.