While building our low-fidelity wireframes, we learned how to use tools and adjust properties of our layers to change their appearances. We can apply these same skills to create higher-fidelity designs.
In this tutorial, we'll introduce color and typography, place more emphasis on precision and accessibility, and explore features that speed up the design process in Figma.
You may consider these choices at different points in your process. That's fine too, there isn't one journey or path to a finished design.
Use pages
In the previous tutorial, we created some wireframes for our social media app for pets, Petma! To make it easier for our team to find our designs, we'll keep our explorations in the same file.
Figma lets you create multiple pages, each with their own canvas. We can view and navigate pages in the Layers panel of the left sidebar. Click the plus icon to add a page, and give it a descriptive name.
Let's start by building out the home page of our social media app. This is a feed that shows us posts from the pets we follow.
We'll start in a similar way to our wireframing. Press F to select the frame tool, and choose the Google Pixel preset. Then, press the R key and create a rectangle for the image of our post.
Grids and margins
We want some space, a margin, between the image and the frame edge. So we'll change the dimensions of the rectangle to 379 by 285, and center the image within the frame.
Because our frame is 411 points wide, this gives us a margin of 16 points on either side. We can check the margin by selecting the rectangle, holding down alt or option, and hovering the cursor over the frame. Figma will display the distance between the two. Measure distances between layers →
We can use this function to make sure our objects are laid out precisely. We can also use grids to quickly and consistently align layers.
To enforce a grid system, select a frame and click in the Layout grid section of the right sidebar. We can click the grid icon to customize our grid size, or change the grid style to columns or rows.
We're not going to focus on layout grids for this video, so we'll hide them using the keyboard shortcut:
- Mac: ⌃ Control-G
- Windows: Control + Shift + 4
Place image and image fills, corner radius
The Petma brand is fun and friendly, and we want that to come across in our designs. One way to do that is to round any harsh, pointy corners. Select our rectangle and change the corner radius to 8.
Then, we'll add an avatar for the user. Press the O key to select the ellipse tool and hold down the shift key to draw a perfect circle. We'll make sure it's 40x40, align it to the left edge of the image, and position it 8 points above.
We've been calling these two shapes "images", but they're really not images yet! They still only have a solid grey fill.
- Add images to shapes either of these ways:
- Click shape menu in the toolbar and select Place image.
- The keyboard shortcut ⌘Command-Shift-K (Mac) or Ctrl + Shift + K (Windows).
- Select two images to act as our placeholders.
- Click Open to confirm. Our cursor now shows we have two images to place. We can see a preview of the first image next to our cursor
- Click the avatar to replace the current fill with that image.
- Click to add the second image to the main image of the post.
Text and styles
Now we'll add a text layer for our pet's name. Let's press T, click to add a text layer, and type "Name". We can explore all the properties relating to text in the Text section of the right sidebar. Explore text properties →
The Rubik font matches the fun and playful nature of our app, so we'll select that and change the size to 16. We'll align our text and avatar layers to vertical center. Then use our arrows keys to position them 16 points apart.
We need a description to go alongside our image, so we'll duplicate the text layer and add some placeholder text. We'll adjust the width of the text layer to 397 to match the image.
If we want to change the font, size, or weight of our text, we'd have to select them all before updating. Or update them individually. This is manageable with only two text layers, but updating hundreds of text layers later in the design process would be painful!
To save ourselves some time, we'll use Styles. Styles are re-usable properties we can apply to objects. If we need to make changes to the style at a later point, every object using that style will also be updated.
- With our text layer selected, click in the text section of the right sidebar.
- Click to add a new style
- Give it a name "Body"
- Click Create Style
Now if we view the text properties in the right sidebar, we can see our style applied. We can apply the style to other layers too.
- Select the description.
- In the Text section, click .
- Select the style from the list.
Color styles and accessibility
Styles aren't just for text. You can also create color styles for fills and strokes, layout grid styles - like the 8 point grid system we mentioned earlier - or effect styles for things like drop shadows and blurs. Let's create a color style while we're here!
Our text layers are black on a white frame. This ultra-high contrast can cause strain on a person's eyes. Let's reduce the contrast to make reading more comfortable. Learn more about accessibility and inclusion in design →
This time, let's select both layers and change the fill to a lighter grey. Let's try this color: #888. Hmmm, this is too light, which could make it hard for low-vision readers to see.
We've already installed the Stark plugin from the Figma Community, which we can use to check the contrast of our layers. Click on the layer and go to the menu, select Plugins and then Stark. We'll choose Contrast Checker from the options.
Oh. Our intuition was right, this color is too light! Let's change this to a darker grey with just a hint of purple #1F132A and check the contrast again.
We can rerun our last plugin, without opening the menu, using the shortcut:
- Mac: ⌥Option ⌘Command + P
- Windows: Alt Control P
It passes! 🎉🥳 Now that we have an accessible color we're comfortable with, we'll turn it into a color style. We can create this color style from the fill section of the right sidebar.
To see the Styles we've created, we can click on the canvas to deselect everything, and view them in the right sidebar. We can see both our text and color styles.
We can click the adjustment icon to make changes to our style. Let's update the font size of our body text to 18. The text layers that use this style are also updated.
This has had an unintended consequences of moving our perfectly placed layers slightly out of alignment! If only there was a way for the layout of our design to reflow when we make changes. Lucky for us, there is!
Use Auto layout
Auto layout is a property you can add to frames. It allows you to create designs that grow to fill or shrink to fit, and reflow as their contents change. This is great when you need to add new layers, accommodate longer text strings, or maintain alignment as your designs evolve.
Auto layout is a powerful feature with many properties. It can save you so much time, but it can also feel a little daunting. We'll explain some key properties as they come up, but we encourage you to learn more about Auto layout in our other educational resources.
Layers in an auto layout frame can only align in single direction: Horizontal or Vertical.
If we select our post layers and add auto layout using the shortcut Shift + A, our layers form a single vertical auto layout frame. Hmmmm. Let's undo that using the keyboard shortcut:
- Mac: ⌘Command-Z
- Windows: Ctrl + Z
Instead, we need to create a horizontal auto layout frame for our avatar and name, then combine this with the other layers in our post inside a vertical auto layout frame.
Select the avatar and name layers and create an auto layout frame using the shortcut Shift + A. By default, our auto layout frame already grows to accommodate the size of its contents. If we were to change this text to something longer, the auto layout frame grows with it.
We have the auto layout frame selected. Let's press Enter to select the layers one level below our current selection. Now we can align our selection using the align horizontal centers and align vertical centers tools.
Great! Let's rename our new auto layout frame to Author info.
Let's select our first auto layout frame, and the other layers in our post, and add Auto Layout again using Shift + A. Figma will:
- Recognize the existing spacing between those layers
- Set the space between items property to 8
- Respect the spacing, regardless of how we change the contents within the frame.
If we were to change our text styles again, we'd no longer have any alignment issues. But, if the description gets too long, it goes past the other layers in our frame. That's not what we want!
The description layer currently has a horizontal resizing property of hug contents. This means its width will grow or shrink to accommodate the text.
Let's change this to Fill container, so it will take up all available space instead. When it runs out of space, it will wrap to a new line. Purrrfect!
This also sets the text resizing property to auto height. We can adjust the resizing properties in the text section of the right sidebar.
The final thing we want to do is give our post more empty space around its outer edges. You may have heard of this concept as white space, negative space, or giving objects "room to breathe".
The way we achieve this is through the padding property. Let's add 16 points of padding around the items within our frame. Adding the padding shifted our frame a bit, so we'll just recenter it and we're good to go!
Create and use components
We know that our app's feed will have many posts from our users, so we need some copies of the post we've been crafting!
To make it easier to change aspects of our posts in the future, we can turn this into a component. Before we do, let's give our layers some more descriptive names.
Let's turn this into a component by selecting it and choosing create component from the toolbar, or the shortcut:
- Mac: ⌥ Option - ⌘ Command - K
- Windows: Ctrl + Alt + K
We probably don't want our main component to live inside our designs. To make it easier for our team to find that component, we'll create a page for our components. In the pages section of the layers tab, click and name the page Components.
Now we can move our component to the new page. Right-click on the main component and select Move to page > Components.
We can now access this component in the Assets panel of the left sidebar. Any components we create in this file are grouped under local components. Let's drag an instance of this component into our frame. Then we'll make a few copies.
Clip content
We want to add some real content to our posts. At the moment, our frame has clip content applied. The Clip content setting is great when we want to hide the parts of our layer that extend beyond the frame's bound.
As we want to edit the contents of our posts, we'll uncheck the Clip content box in the right sidebar.
Our descriptions will vary in length, which will affect how much space each post takes up in our feed. Let's create an Auto Layout frame for our posts, adjust the space between items to 8, and rename the frame to "feed".
Now, if we edit the descriptions, the other cards will shift and adjust to preserve the spacing. Auto layout is saving us a lot of time!
Override properties
Let's use Place image to add real content to our posts. Figma supports static images as well as animated GIFs for fills. GIFs don't play in the canvas, but we'll see it in action when we view our prototype later.
When we change properties of an instance, like we did by adding a new image, we are performing an override. Overrides only apply to the specific instance and don't affect the main component.
We can use overrides to change lots of aspects of an instance - the contents of a text layer, strokes and fills, and effects like blurs and shadows.
There are some properties that we can't override. This includes the order of our layers, and any constraints or layout grids we've applied. Learn more about supported overrides →
Create icons with vector networks
Our app is really starting to take shape. But, we're missing a navigation bar at the top of the screen. It should contain a way search for users and posts, and a menu, which we'll use to navigated around our app.
As part of that process, we'll need to create menu and search icons for our navigation bar.
Icon design is a discipline of its own and there are entire programs dedicated to their creation. You don't have to become an icon design master to create custom shapes and intricate icons in Figma. Try browsing the Figma Community for some inspiration!
We can combine basic shapes to create icons. Or we could use the pen tool to create our own custom shapes from scratch. We'll start by creating a 32 by 32 frame for our icon.
We want precision for this kind of work, so we'll use the shortcut Shift + 2 to zoom to our selection. Next, we'll select the Pen tool and enter vector edit mode.
Note: Any shapes we create with the pen tool are vector networks. Vector networks allow you to create lines and curves that connect two or more points. Unlike traditional vector paths where you need to plot points on a single closed path, Vector networks allow you to create complex shapes that are made up of multiple paths.
Make a menu icon
- Click on a spot in the frame to create the first point, when we move the cursor, we can see a line extending from our first point.
- Hold down Shift to draw a perfectly horizontal line.
- Click again to add a second point.
- Save your shape and exit vector edit mode by hitting the Enter key.
We can adjust its position and dimensions, to ensure its width is 14. Then we can duplicate it twice to create our other two lines.
We want to round the ends of our lines:
- Select our lines
- In the Stroke section of the right sidebar, select the round cap. Much better!
- Finally, drag to position them in the center of the frame.
We've adjusted some of the basic properties of our menu icon, but there's more properties to customize. Try adjusting the stroke weight, or explore the advanced stroke menu. Adjust stroke properties →
Let's rename our frame to "icon / menu", turn it into a component, and send it to the components page.
Make a search icon
Let's make one more icon, a magnifying glass for search!
- Start the same as before, with a 32 by 32 frame.
- Use the ellipse tool to draw a 16 by 16 circle.
- Switch the fill and stroke properties using the Shift + X shortcut.
- To draw the handle of our magnifying glass, we'll use the pen tool.
- Hold Shift to snap to a 45 degree angles while drawing, and overlap the circle.
- We want to round the line again, but this time, we only need to round one point. Press the Enter key to access vector edit mode.
- Select just the point we want to edit, and change the cap to round.
- Hit Enter again to leave vector edit mode.
We need a way to combine these layers. Boolean operations allow us to create new shapes, without modifying the underlying layers. There are four boolean operations:
- Union
- Subtract
- Intersect
- Exclude.
We'll select both of our layers and choose Union selection to combine these two shapes into one. Our layers now have one fill color. We can now position the union group in the center of the frame.
Let's rename our frame to "icon / search", turn it into a component, and send it to the components page.
Create our navigation bar
Next, we'll create a navigation bar component to sit at the top of our screen. This will incorporate the icons we've just created.
Let's head over to our components page to create a navbar alongside our other components.
- Our navbar will take up the full width of our screen, so we'll create a frame that's 411 by 80.
- Now we'll add some icons. Open the Assets tab, drag in an instance of our menu, and place it on the left side of the frame.
- Make sure it's 8 points from the left and bottom.
- Repeat for the search icon on the right side.
- For this icon, change the horizontal constraints to right.
We need to add a logo and a status bar to our navigation bar. To save you some time and through the magic of editing, we'll use some components we created earlier.
- Grab the Petma logo from the assets panel and drop it in the center of our frame.
- Set the horizontal constraints to center.
- Create an instance of the status bar, place it at the top .
- Set the constraints to left and right.
- Rename this to "navbar"
- Turn it into a component.
If we return to our design page, we can now drag in an instance of our navbar component, and place it at the top of the page, then reposition the feed just below that.
FAB, Go to Component, Return to Instance, and Effects
The last component we want to add to our designs is a floating action button. This button will be used to create a new post in our feed. We created this component earlier, which consists of a circle and a plus icon.
Let's drag a copy of that into our frame and place it 32 points from the bottom right corner, and set the constraints to bottom and right to match.
This looks pretty good, but we want the button to look it's above the rest of the content. It is a floating action button after all.
With the instance selected, we can click reveal in library in the right sidebar to take us directly to the main component.
Under Effects in the right sidebar, click the plus icon to add a drop shadow. Shadow is a great way to communicate elevation.
We can click the effects icon to open the settings and make this drop shadow softer by changing the blur to 12.
With the main component selected, we can click the notification at the bottom of the screen to go back to where we were working.
Scrolling, fix position, and device frames
These are all of the elements we want to include in our home page. Let's see how it looks by presenting it!
Presentation view allows us to preview our designs in the browser. We can use Present when building interactive prototypes, running usability tests, or even presenting slides.
- Click the Present in the toolbar to open presentation view in a new tab. We can make our prototype more realistic by adding a device frame.
- Open the Prototype tab, click Show prototype settings.
- Choose a device frame from the list.
- See how that looks in presentation view. Not bad!
Tip! If you don't like the way your prototype displays, you can cycle through different view options using the Z key.
The feed extends past the bottom of the device, but we can't scroll down to see it. Let's head back to the editor to customize the scrolling behavior.
- Select the frame.
- Set the overflow behavior to Vertical scrolling.
- Back in Presentation view, scroll to access the rest of our posts in the feed.
But wait! We don't want our navbar or FAB to scroll.
- In the editor, we'll select both layers.
- Switch to the Design tab in the right sidebar.
- In the Constraints section, check the box next to Fix position when scrolling.
In the layers panel, we can see Figma has moved our status bar to a new FIXED section at the top of the frame. If we scroll up and down in presentation view, both layers stay in place.
Wow! We covered a lot of features in this video. If you got confused along the way, or have any questions, don't worry - Figma's Help Center has hundreds of helpful resources to explore.
When we check back again, we're going to create an interactive prototype, share it with our team, and incorporate their feedback into our final designs.
