Figma tutorial: a first app

Latest update: 09-05-2023

This tutorial introduces the basics of prototyping an app with Figma. It quickly 'touches' all necessary steps without going into too much detail. If you have any suggestions for improvements please let me know!

Start

For this prototype, we will create a simple app mockup, consisting of two screens (frames in Figma).

The main menu is accessible via the Figma icon, the most left icon in the menu bar (see below). If you need some guidance when drawing shapes, you can for instance turn on rulers via the menu:

For this tutorial, the "light" theme was used. You can switch themes via Preferences > Theme

1. Create first frame

A frame can be used to create a screen of the app. Select the frame tool (click it once). Notice the list of pre-formatted frames in the right sidebar. Pick a frame, eg. the 'iPhone 8':

The frame appears:

Now download this zip-file with images, extract its content to a folder. Next, drag & drop the background image back.jpeg into Figma:

In the same manner, drag & drop the icon for the hamburger menu hamburger.svg into the top right corner: Make sure its size is set to 50 x 50. More/other icons are available at freeicons.io.

Next, we will add a title to the screen. Select the Text-tool and draw the box that will contain the text (click and hold down the mouse, then drag). When you release the mouse button, first set the font size to 48, then you can start typing the title:

You can also select the text and then change its font size.

2. Add a component

We will use multiple buttons in this app, so we will create a re-usable component for that. First draw a rectangle and adjust its properties so it looks like a button. In this case we changed the corner radius to give it rounded corners:

Next, in the rectangle, add the text for the button: (notice the font size has been decreased a little)

Now, hold down the Shift-key while selecting both the rectangle and the text. Then select 'Create Component', to turn it into a component:

Now it is a component:

Double-click it to rename it to 'Button':

3. Add another frame

Add another frame (an 'iPhone 8'). You can do this in two ways: a) copy the entire frame and remove the background, or b) add a new frame, add the title and a copy of the hamburger-icon (select it from the first screen and duplicate it using Ctrl-D, drag the copy to the second screen). Method b) in detail:

Now select the Button and use Ctrl-D to duplicate it and drag it to the second screen:

Notice there is now a copy of the component in the second screen. Now select the master of the Button component (indicated by a ) and give the rectangle inside that a stroke of 2 pixels:

Notice the copy of the component also changes. Double click the button in the second screen twice and change its text to 'Back':

In this way you can make all kinds of re-usable components.

Finalize the design by giving it a proper name. Go back to files:

And double-click the 'Untitled' design to open it again. Now click on the text 'Untitled' in the top bar and change it to a proper name, eg. 'My first app':

4. Do the prototyping

In prototyping mode you can design the interactions of the app mockup.
Switch to prototyping mode and hover over elements. Notice the blue dots that appear.

Hover over de Next button, click the blue dot and drag to the second screen while holding down the mouse. Release the mouse when the second frame highlights:

In the same way, connect the back button to the first screen. Now hit the play button to test the prototype. It will open in a new tab.

The buttons should work and you should be able to change pages with them.

5. Share

While playing the prototype, click the 'Share Prototype' button to share it with others:

6. Popup menu as overlay

Select the frame tool (click it once). Instead of selecting a default frame from the sidebar, draw the frame:

From the folder of .svg icons drag & drop the close.svg icon to Figma and add it to the frame. Set its size to 30x30:

You can now add some menu items to that menu. I have created a Component 'Menu item' for that, which is similair to the 'Button' but with different styling. After that, switch to prototyping mode, and add connections. Connect the hamburger menu icon to the Frame. Make sure to set the interaction is set to 'Overlay' and the Overlay position is set to 'Top Right':

To make it possible to close the popup menu, drag the blue dot of the close-icon onto the close symbol which will appear next to it when you start dragging:

Click the play button to test the mockup interaction. If all went well, you should be able to use the menu (from the second page).

Downloads & more info

The result, the app mockup created by this tutorial, is available here to try (click to open it):

More info

License

The free edition is limited to 2 editors. Need more?:
Sign-up with your student-email address, then go to figma.com/education/apply to apply for the educational version.
After that, once you received confirmation that you received the education plan, you can form a team at figma.com/files/create-team.