If you're a Developer stepping into the world of UI Design and looking for the right design tool to help you create beautiful, functional UIs you really can't go wrong with Figma.

It’s browser-based (Windows and Linux users rejoice!) Free. Highly intuitive to use. Oh and did I mention it was Free?

With this article I want to show you how to gain a better understanding of this powerful design tool, and get you up to speed on some of its core features.

And as I've always said, there's no better way of learning a new Design Tool than just diving in and building something. So guess what? That’s what we’ll be doing together very shortly where I'll be showing you how to create a simple Mobile App Screen inside of Figma.

Exciting times lie ahead...


But I've never used a Design Tool before!

If you’ve never picked up a Design Tool of any kind, the first time can feel a little overwhelming. You want to start creating great UIs, but the problem is you don’t know how to actually use the damn tool yet!

Well hopefully the following article will help you out, and make you realise what a user-friendly and powerful tool Figma really is.

Let’s get to it…


Checking out the Figma interface.

Click Thumbnail to Enlarge

The great thing about the Figma interface is its clean, and intuitive interface.

I’ve pretty much used every design tool there is, and over time a lot of them have started to feel a little bloated; interface-wise. Figma keeps it tight, and lean and it’s a joy to use on a daily basis.

Let me give you a super-quick overview of the Figma UI…

Toolbar.

Click Thumbnail to Enlarge

The Toolbar in Figma contains a variety of tools to help you on your projects, and what appears in the toolbar will depend on what you’ve selected on the Canvas.

Here’s a short list of the Tools (with the relevant Shortcut) you’ll find yourself using the most…

  • Move (V)
  • Scale (K)
  • Frame (A or F)
  • Rectangle (R)
  • Line (L)
  • Arrow (Shift + L)
  • Ellipse (O)
  • Place Image (Shift + Ctrl + K or Shift + Cmd + K)
  • Pen (P)
  • Text (T)
  • Hand (Press and hold SPACE)

Layers Panel.

Click Thumbnail to Enlarge

On the left of the screen is where you’ll find the Layers Panel.

This gives you easy access to the Layers, Assets and Pages used inside of your current Figma File.

Any Frames, Groups or Objects that you add to the Canvas will be visible in the Layers Panel.

Assets Panel.

Click Thumbnail to Enlarge

Inside of the Assets Panel is where you’ll have easy access to all of your Components.

Components are reusable design elements such as Buttons or Icons, as well as more complex UI elements such as Menus or Modals.

To speed up your workflow you can quickly select a Component in the Assets Panel and drag it onto the Canvas to create an Instance.

Canvas.

Click Thumbnail to Enlarge

The Canvas.

This is where your designs are presented.

Erm. Yeah. Simple as that really.

Moving on…

Properties Panel.

Click Thumbnail to Enlarge

On the right of the screen is the Properties Panel which allows you to view and adjust the properties of any element you currently have selected, as well as access your current files Prototype settings, and also view the Code of any selected element.

Design Tab.

Click Thumbnail to Enlarge

The Design Tab allows you to easily view, add, remove or change the properties of elements within your design.

The Layer that you currently have selected will determine what settings are available to you in the Design Tab.

Prototype Tab.

Click Thumbnail to Enlarge

The Prototype Tab give you access to all of the Prototyping functionality that Figma has to offer, and enables you to apply Transitions between your Frames, bringing your static designs to life.

Code Tab.

Click Thumbnail to Enlarge

The Code Tab in the Properties Panel allows you to see how to present elements of your design in code, with the following formats available to you…

  • CSS
  • iOS
  • Android

Now on to the good stuff…


Designing a Mobile App Screen.

Click Thumbnail to Enlarge

Please Note: Before we dive into this section, make sure you download the required design elements needed to follow along with the tutorial here. (There’s also the completed file in there for you to reference).

Open up Figma, and create a new document by clicking the on Plus (+) icon at the top right of the application.

Click Thumbnail to Enlarge

From the screen that appears, select the iPhone 11 Pro / X option, and click Create File.

Click Thumbnail to Enlarge

Then click on the file name in the Toolbar and rename it to ‘Mobile App Screen’.

Click Thumbnail to Enlarge

Post Thumbnail.

Click Thumbnail to Enlarge

Select the Rectangle Tool (R) and draw out a shape around 375px wide by 406px tall and position it at the top of the Frame. You can also double-check it’s positioned correctly by checking that it’s set to 0 on the X and Y axis in the Properties Panel.

Click Thumbnail to Enlarge

Still in the Properties Panel, click the Independent Corners icon and choose 30 for the bottom left, and bottom right corner radiuses of the rectangle.

Now let’s place an image inside of our shape using the aptly titled, and super-helpful Place Image function.

So using the shortcut Shift + Ctrl + K or Shift + Cmd + K, choose building.jpg from the Images folder and then click on the shape to insert the image directly into it.

Click Thumbnail to Enlarge

Let’s add a gradient overlay to our image to add a little contrast between itself and the elements that we’ll be placing over it shortly.

From the Fill panel, click the Plus (+) icon to add a new Fill. Make sure the Linear option is selected.

Click Thumbnail to Enlarge

Click on the Fill colour, and then from the fly-out menu insert the following Hex (#) value: 5D45F9 for the top colour, and 267DEB for the bottom colour. Make sure both values are set at 50% opacity.

Click Thumbnail to Enlarge

Finally, let’s add a subtle drop shadow to our thumbnail image and add a little depth to our design.

From the Effects panel click the Plus (+) icon, choose Drop Shadow from the select menu, and then adjust the following Effect Settings

  • X - 0
  • Y - 4
  • Blur - 4
  • Color - #303030
  • Opacity - 20%
Click Thumbnail to Enlarge

Navigation Bar.

Click Thumbnail to Enlarge

For the Navigation Bar we’re going to insert a couple of Icons. One for navigating back to the previous screen, and the other for bookmarking the article.

With your Icons folder open simply drag & drop the following icons, one at a time, onto your Frame…

  • arrow_back
  • bookmark
Click Thumbnail to Enlarge

With both icons selected, go to the Selection Colors panel, and change the Hex value to White (FFFFFF).

Click Thumbnail to Enlarge

Holding the Alt key to measure the distance between elements in your design, position each icon 32px from the left, and right edges of the Frame.

And then with both icons selected, go to the Properties panel and choose Align Vertical Centers (Alt + V).

Click Thumbnail to Enlarge

With both icons still selected use Ctrl + G or Cmd + G to Group them, and Ctrl + R or Cmd + R to Rename. This just keeps things a little more tidy, and organised in the Layers Panel.

Click Thumbnail to Enlarge

Always rename, and group as you go. It saves a whole lot of time and prevents you from coming to the end of a design and being faced with a Layers Panel of Rectangle 1, Rectangle 2 etc… Not cool!

Finally. Holding Alt, position this new Group 56px from the top of main Frame.

Click Thumbnail to Enlarge

Notification.

Click Thumbnail to Enlarge

As you can see we added a filled version of the Bookmark icon for the Navigation Bar as though the user had just bookmarked the post.

Let’s add a simple Notification that could be shown to the user when that Bookmark icon is tapped on. Just a subtle visual cue to show that the action (tapping of the icon) has been recognised, and completed.

Using the Rectangle Tool (R) draw out a shape around 131px x 33px, and then round the Corners to 24.

Click Thumbnail to Enlarge

From the Fill panel, give it a Hex (#) value of 303030 and reduce its opacity to 60%.

Click Thumbnail to Enlarge

Onto the Effects panel. Let’s give this lil’ Notification a subtle background blur to add both visual interest, and a little more contrast between the image, and the text that we’ll soon place inside of it.

In the Effects panel click the Plus (+) icon, and from the select menu choose Background Blur.

Click Thumbnail to Enlarge

Click on the Effect Settings icon and change the Blur Strength to 6.

Click Thumbnail to Enlarge

Time for some Text, and to tweak some more properties don’t you think?

Using the Text Tool (T), add a new text element and type the word ‘Bookmarked’.

Then from the Text Properties Panel, apply the following…

  • Font - Lato
  • Weight - Regular
  • Size - 14
  • Text Align - Center
  • Align - Middle
  • Fill - #FFFFFF
Click Thumbnail to Enlarge

With both the Text, and Shape layer selected, use the Alignment options at the top of the Properties Panel to align the elements both Horizontally and Vertically to one another.

Click Thumbnail to Enlarge

Use Ctrl + G or Cmd + G to group them and Ctrl + R or Cmd + R to rename.

Then finally use Ctrl + Click or Cmd + Click to select the Notification group, and Image, and then use the Alignment options to align the Notification both horizontally and vertically inside of the image.

Click Thumbnail to Enlarge

Avatar + Social Icons.

Click Thumbnail to Enlarge

Let’s get our Avatar, Author Name and Social Share Icons into place shall we?

Select the Ellipse Tool (O) and draw out a shape 48 x 48px. You can also hold Shift to constrain proportions as you do.

Click Thumbnail to Enlarge

Using the shortcut Shift + Ctrl + K or Shift + Cmd + K to use the Place Image tool, select avatar.jpg from the Images folder and place it inside of the shape.

Click Thumbnail to Enlarge

With the shape selected, hop over to the Properties Panel and add the following…

Stroke –

  • Color - #FFFFFF
  • Width - 2
  • Position - Inside

Drop Shadow –

  • X - 0
  • Y - 2
  • Blur - 4
  • Color - #303030
  • Opacity - 25%
Click Thumbnail to Enlarge

Let’s go ahead and drop in a few more Text layers for both the Author Name, and the date the article was posted…

Using the Text Tool (T) create 2 new Text layers, edit the text accordingly, and then for the Author Name apply the following properties…

  • Font - Lato
  • Weight - Bold
  • Size - 16
  • Text Align - Left
  • Fill - #212121
Click Thumbnail to Enlarge

…and for the Date Posted use the following…

  • Font - Open Sans
  • Weight - Regular
  • Size - 12
  • Text Align - Left
  • Fill - #7D7D7D
Click Thumbnail to Enlarge

Using the trusty Alt shortcut, space the text layers to one another giving them a little breathing room.

Then use the Alignment tools so they’re both Aligned Left to one another, and then finally Group (Ctrl + G or Cmd + G) them.

Click Thumbnail to Enlarge

Align this new Group 16px from the right of the Avatar, and then with the new Group and Avatar selected, press Alt + V to align them vertically to one another.

Click Thumbnail to Enlarge

Let’s drop in a couple of social share icons

Like before, simply drag & drop the Instagram and Twitter icons, one at a time, onto your design, and using a combination of the Alignment tools, and Alt shortcut, align them vertically to one another (Alt + V), and space them 16px apart.

Click Thumbnail to Enlarge

Group (Ctrl + G or Cmd + G) the icons, and rename (Ctrl + R or Cmd + R).

With your Social Icons Group, Text Layers Group, and Avatar all selected, use Alt + V to align them vertically to one another.

Click Thumbnail to Enlarge

Group (Ctrl + G or Cmd + G) all of those elements together, and then position this new Group 32px from the left, and right edge of the Frame, and 32px from the bottom of the Image.

Click Thumbnail to Enlarge

Title + Content.

Click Thumbnail to Enlarge

Let’s add a lil’ Title and snippet of Content to fill out our design some more…

Using the Text Tool (T), create a simple Title, and then from the Properties Panel apply the following…

  • Font - Lato
  • Weight - Bold
  • Size - 21
  • Line Height - 32
  • Text Align - Left
  • Align - Top
  • Fill - #212121
Click Thumbnail to Enlarge

Then, using the Text Tool (T) once more, create a paragraph of content to appear below the Title with the following properties…

  • Font - Open Sans
  • Weight - Regular
  • Size - 16
  • Line Height - 28
  • Text Align - Left
  • Align - Top
  • Fill - #7D7D7D
Click Thumbnail to Enlarge

We’ve set the colour of this block of text to be a dark grey (#7D7D7D) so it contrasts nicely against the Title, adds a little bit of visual interest, but it’s still accessible against the White background for users with poor vision.

Hold the Alt key and hover between the 2 Layers to view the distance between them, and space them 8px apart.

Click Thumbnail to Enlarge

Don’t forget to Group (Ctrl + G or Cmd + G) and Rename (Ctrl + R or Cmd + R), and then space this new group 32px from the left edge of the Frame, and 32px from the bottom of the Avatar group.

Click Thumbnail to Enlarge

Comment Form.

Click Thumbnail to Enlarge

Ok. Let’s wrap things up here, and add a little Comment Form/Field to our design.

Calling upon the Rectangle Tool (R) once more, draw out a shape around 263 x 40px, give it a Corner Radius of 24, and a Fill of #E4E4E4.

Click Thumbnail to Enlarge

Insert a Text layer (T), tweak the wording (ie; Add Comment…), and then add the following properties…

  • Font - Lato
  • Weight - Regular
  • Size - 16
  • Text Align - Left
  • Align - Middle
  • Fill - #707070
Click Thumbnail to Enlarge

With both the shape, and text layer selected, align them vertically to one another (Alt + V), and then group (Ctrl + G or Cmd + G) them, and rename (Ctrl + R or Cmd + R).

Click Thumbnail to Enlarge

Drag & drop the arrow_circle_right icon onto your design, and then using the Scale tool (K), resize it proportionally to 40 x 40px so it shares the same height dimensions as the field we just created.

Click Thumbnail to Enlarge

Position the icon 8px from the right of the Comment Field, and then with both the field group and icon selected, align them vertically to one another (Alt + V).

Click Thumbnail to Enlarge

Finally. Group the 2 elements (Comment Field, and Icon). And position this new group 32px from the bottom of the text content, and from the left and right edges of the Frame.

Click Thumbnail to Enlarge

And that folks is a wrap for our lil’ Mobile App Screen.

Hopefully with this short overview of Figma you’ll now feel a little more comfortable with this powerful, and increasingly popular Design Tool.

I’ve said it many times before, just jump in there and start designing, and then design some more. It’s really the best way to learn a new tool, and improve your design skills at the same time.

Thanks for reading the article,
Marc Andrew.

Discover 21 Quick, and Easy Tips to help you improve your designs today!

Subscribe below to download my FREE Cheatsheet of UI & UX Tips, and also receive Regular UI & UX Articles, and Tips straight to your Inbox.

UI and UX cheatsheet cover