Learning objectives:
- Learn about Constraints
- Research some tablet or desktop design patterns
- Practice adapting the mobile app design for a larger screen size
- Consolidate yesterday’s prototyping skills
Time to complete: 45 minutes
Figma for Mac (unofficial) This is an Electron wrapper for Figma. It lets you install Figma on your Mac and easily access it from the Dock instead of your web browser. Download the latest version of Figma for Mac - Interface design tool with real-time collaboration. Read 2 user reviews of Figma on MacUpdate.
Making Figma feel more at home on the Mac. Like a growing number of designers out there, I recently started using Figma for some of my static app design work. After a few hours of using it, I came to the conclusion, the software was amazing, but the desktop experience on the Mac could use a little love. Download the Figma desktop app for macOS or Windows as well as the font installer and device preview apps Features Design Prototyping Design Systems Collaboration What’s New Downloads.
Download Figma
Today’s tutorial
Today, we’re setting you free! It’s time to get creative and make your own designs for a tablet or desktop version of the app, by adapting your existing layouts for a different screen size.
Just before you get started, though, let’s cover one more awesome feature in Figma called Constraints. This is particularly useful to know when transposing a design from one device or screen size to another.
Constraints define how any object will behave if its containing Frame is resized. Each Layer in Figma actually has Constraints set by default—select any object in your Figma file and you’ll be able to see these settings in the Inspector on the right of the window:
The first dropdown (which here says “Left”) tells Figma how to manage the object’s horizontal position, while the second dropdown (which by default says “Top”) sets its vertical position.
The advantage of Constraints is that we can use them to make our design resize intelligently, which saves us the work of sizing and positioning elements manually. As an example, follow these steps to make the nav bar resizable.
- Click and drag to select all the elements in the nav bar. Group those elements with ⌘G (Mac) or CtrlG (PC). Then, convert the new Group to a Frame using the dropdown menu at the top of the Inspector. In Figma, Frames can be nested—meaning that one Frame can contain another Frame. Rename this new Frame “Nav Bar”.
- Next, let’s set the constraints for how the “Nav Bar” frame will relate to its container “Photo Page - Menu” frame. With the Nav Bar frame selected, change the Constraints settings to “Left & Right” and “Bottom” respectively. This means that Figma will preserve the Nav Bar’s position relative to both left and right edges, and that it will keep it tethered to the bottom edge of the Frame.
- Finally, we need to set how the objects within the Nav Bar Frame relate to their container. Double-click the Nav Bar Frame, then select each object in turn and set its Constraints as follows:
- Background rectangle: Left & Right, Bottom
- Camera icon: Center, Bottom
- Back arrow: Left, Bottom
- Hamburger button: Right, Bottom
You might like to apply this method to other screen elements as you develop your tablet or desktop version of the app. Anyway, to get you started, here are instructions to set up an initial Frame and layout grid for your chosen device:
Tablet (landscape):
- Hit F to select the Frame tool
- Click the “Tablet” drill-down menu in the Inspector
- Click “iPad Pro 10.5”
- Once the Frame has been created, switch the orientation to Landscape at the top of the Inspector, next to the drilldown menu we just used to create the Frame
- In the Inspector, add a Layout Grid like we did on the first day, change the column count to 12, and set the gutter to 16 and the margin to 32
Desktop:
- Hit F to select the Frame tool
- Click the “Desktop” drill-down menu in the Inspector
- Click “Desktop” (1440 * 1024)
- In the Inspector, add a Layout Grid like we did on the first day, change the column count to 12, and set the gutter to 16 and the margin to 128
A good option for translating your work from mobile to tablet or desktop is to make a duplicate of the original mobile screen design, and drag that frame so it’s next to the new frame you’re working on. You can copy elements across, or simply use it as a point of reference.
Here’s a checklist to keep in mind as you work on this:
- As a user, what might you want to be consistent between the mobile and tablet/desktop versions of the app? (Perhaps color, or certain layout patterns like the photostream?)
- Equally, what might you want to be different? (For example, how might navigation and menus be different on tablet or desktop?)
- Take a look at other sites to get a sense of how the relative scale, sizing, and spacing of elements might need to be different on a larger device.
- Check out the site UI Patterns for some inspiration on how you might want to lay out elements in a different format: ui-patterns.com
Have fun, and look back to previous lessons if you need to check how to do anything! In case you get stuck, we’ve included our own version below that you can use for inspiration—or, if you prefer, have a go at duplicating the layouts we made.
Today’s bonuses
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.
![App App](/uploads/1/3/4/2/134261953/467954999.png)
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.
Take lots of screenshots
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.
Drag and drop into Figma
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.
Resize images (if necessary)
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.
Turn images into frames
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.
Rinse and repeat
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.
Place target zones over elements
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.
Basic prototyping
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.
Figma Mac App
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. How to delete app mac el capitan.
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.
Figma Mac Desktop App Download
Copy pasta & add new features
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.
Download Figma Desktop App
Make it presentable
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.
App to transfer photos from android phone to mac. 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.