In this case we changed the corner radius to give it rounded corners: First draw a rectangle and adjust its properties so it looks We will use multiple buttons in this app, so we will create a re-usable component for that. You can also select the text and then change its font size. When you release the mouse button, first set the font size to 48, then you can start typing the title: Select the Text-tool and draw the box that will contain the text (click and hold down the mouse, then drag). More/other icons are available at freeicons.io. 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. Next, drag & drop the background image back.jpeg into Figma:
Figma tutorial download#
Now download this zip-file with images, extract its content to a folder. Notice the list of pre-formatted frames in the right sidebar.
If you need some guidance when drawing shapes, you can for instance turn on rulers:Ī frame can be used to create a screen of the app. Then click New design file to create your first Figma file:įor this prototype, we will create a simple app mockup, consisting of two screens (frames in Figma). Login to and register if you have not done that. If you have any suggestions for improvements please let me know! It quickly 'touches' all necessary steps without going into too much detail.
This tutorial introduces the basics of prototyping an app with Figma.
0 kommentar(er)
