▶️ Beginner 1: Explore ideas

Figma is a vector design tool that runs in the browser. Use Figma to brainstorm ideas, iterate on designs, create prototypes, and get feedback at any stage of the creative process.

In this beginners course, we're going to take you through key stages of designing an app in Figma, from the initial wireframes to an interactive prototype.

We'll cover the basics, and introduce more powerful features like Auto Layout, Components, and Prototyping. There's something for everyone, whether you're new to design or new to Figma.

We won't cover all these features in depth, but we'll provide you with resources to continue your Figma education

Get started with Figma

Sign up and create a team

Sign up for a free Figma account at figma.com. With a Figma account, you can create teams - shared spaces, where you can collaborate on files and organize them in projects.

Choose from a free Starter team or a paid Professional team. If you are a student or educator, you can get access to all of Figma's Professional features for free. Compare plans and teams in Figma →

Visit figma.com/education/apply to apply or learn how to verify your Education status.

Invite people to your team

Once you've created your team, you can invite members to collaborate. This will give them access to all the projects and files in your team. You can choose what level of access each member has.

• Guide to sharing and permissions
• Roles and permissions in teams

Explore Figma Design

We're pretty sure we have the next million dollar idea - a social media app... for pets! We want some feedback on the general layout, before we start exploring specific elements of our design.

Wireframes are simplified designs that are devoid of any style, like color, type, or imagery. They allow us to map out user flows and explore different ways we can structure our app, without having to design any elements, or add any content.

We'll start our journey by creating some wireframes in Figma Design. Create a new file heading to figma.com/new in the browser.

Canvas

The canvas is the backdrop for all of your designs - it's where you'll add all the frames, shapes, text, and images.

There are no bounds to your creativity, but you should know the canvas extends approximately 65,000 points in each direction.

By default, the canvas color is set to #E5E5E5. To change the canvas color:

1. Click on an empty spot in the canvas to deselect any layers
2. In the right sidebar, click the swatch in the Page section.
3. Select a new color using the color picker. Learn how to use the color picker →
4. Or, click to toggle off the background entirely.

Frames

With the great expanse that is the canvas, you need something to put your designs in. Enter frames. Frames are the containers you place your shape, text, and image layers in. You can think of each frame in the canvas as a single screen of your design.

If you've used other design tools, you might be familiar with artboards. Frames are Figma's version of an artboard! Frames in Figma →

1. The toolbar contains the tools you need for creating layers. Select the frame tool in the toolbar.
2. Frame presets, in the sidebar on the right, let us create frames with specific dimensions. We know that we're making a mobile app, so we'll select Google Pixel 2 XL from the presets.

Two exciting things just happened, Figma added a frame to our canvas, and the sidebar on the left is no longer empty. Everything that we add to the canvas will also be added to the layers panel. Let's right-click on this frame and rename it home.

Create shapes

Now you're ready to add some layers to your frame! As this is a wireframe, you can use shapes, like rectangles and ellipses, to represent more complex aspects of the design.

1. Select the rectangle tool to create an image for a post on your app's home page.
2. Just like frames, every layer in the canvas has dimensions. You can adjust a layer's position and dimensions in a few ways.

Position

• Click and hold on the layer you want to reposition. Drag the layer to the part of the canvas you'd like to position it on. Release to apply.
• To set specific co-ordinates, you can update the X and Y fields for that layer. These co-ordinates correspond to the top-left corner of the layer.

Dimensions

• Hover over the bounds of a layer until the cursor appears. Click and drag to change the size of the layer.
• To set specific dimensions, you can update the layer's dimensions using the width (W) and height (H) fields in the right sidebar.

Learn more about position and dimensions →

Parents and children

If you look in the layers panel, you can see the rectangle is within the home frame. Some layers, like frames, can contain other layers.

We use the analogy of parents, children, and siblings to describe relationships between layers. You may know these terms if you're familiar with web development or programming.

• Parents are layers that contain other layers. Think frames, components, and groups.
• Children are layers within a parent. Think of the text and shape layers within a component or group.
• Siblings are layers within the same parent. Layers need to be at the same level in the layer hierarchy to be siblings.

If you move the rectangle outside of the frame, the Layers panel will update to reflect the change in that relationship. We call this reparenting. Figma uses the dimensions of the relevant layers to determine whether to reparent.

Learn about layer relationships and reparenting →

Make an avatar

Now we're going to create a shape that represent a user's profile picture, or avatar.

1. Select the ellipse tool in the menu and click to start drawing the ellipse.
2. Hold down Shift as we drag to create a perfect circle. This also constrains the proportions of the ellipse.
3. Release to create the avatar with dimensions of around 30 by 30.
4. The is toggled on in the right sidebar. If you update one value in the right sidebar, the other will update too.
5. Click into one of the fields, then use the arrow keys to nudge the ellipse's dimensions to 30.

Layer properties

Colors or paints

New shape layers have a gray fill by default, but we can apply another color or paint to these layers. Paints can be solid colors or gradients, as well as images or animated gifs.

You can apply paints to the fill, stroke, or effect properties of a layer. You can even add more than one paint to a layer and use blend modes to create unique styles or effects.

Paints appear similarly in the right sidebar:

• Preview a swatch of the color or a thumbnail of the image or GIF.
• View the opacity of the paint applied to this layer.
• See the hex color code for solid colors and gradients, or a generic Image or GIF label.
• Enter a hex code in the field, or click the swatch to open the color picker.
• Select colors from the palette, or apply other fills, like gradients, images, and even animated GIFs.
• Click to remove the fill.

Adjust fill or stroke properties

We want our wireframes to appear like outlines instead of solid shapes. We can do this using the stroke property. Strokes work like outlines or borders around our shapes and layers.

1. Select both shape layers.
2. View the Fill and Stroke properties in the right sidebar.
3. Click under Stroke to add a stroke to the layer.
4. Click next to an existing Fill to remove the fill.
5. Adjust the color of the stroke:
   • Enter a hex code directly in the field.
   • Click the swatch to open the color picker. Select colors from your palette or apply other paints, like gradients, images, and even animated GIFs.

Switch it up! You can quickly change a layer's fill to a stroke by pressing Shift X. This remove the layer's existing fill and applies it as a stroke instead. You can then click the swatch in the >Stroke settings to choose another color.

Align siblings

We've learned how to align layers to their frames, but we can also align layers to each other.

1. With the layers already selected, click align left.
2. As the dimension of the avatar layer are smaller, Figma will move this layer so it aligns with the larger image layer.

Learn more about alignment →

Text

Now we need a username to go with our avatar. We'll create a default text layer now and cover adjusting text properties later in the series.

1. Select the text tool in the toolbar.
2. Click on a spot in the canvas next to our avatar to create a text layer.
3. Type in nameas our placeholder text.
4. We want our text layer to align with the center of our avatar. Click on an empty spot in the canvas and drag your cursor to select multiple layers.
5. We want our text layer to align with the center of our avatar. Drag over multiple layers to select them at once, and click Align vertical center.
6. We'll also need some text below our image. Press T to select the text tool and click and drag to create another text layer. Add description .

Copy and duplicate layers

We want users of our app to be able to engage with each other by commenting, liking, and saving posts. Let's create some icons for these actions.

1. Press R to select the rectangle tool.
2. Hold down Shiftagain to constrain the rectangle's proportions and create a perfect square.
3. Click and drag to draw a rectangle in the canvas. Aim for dimensions of 32x32.

Instead of drawing three separate squares, we can copy the original layer. There are a few ways to copy layers:

• Hold down the ⌥ Option (MacOS or Alt (Windows) key, click on the square layer, and drag to create a copy.
• Press ⌘ Command-D (Mac) or Ctrl + D (Windows) to duplicate the layer and create the third square.
• Figma recognizes the distance between the first two squares and keeps the same distance.

Groups and frames

All these layers make up a single post and we want to make sure these objects stay together. There are two ways we can group or organize layers: groups and frames.

While frames and groups look similar in the layers panel, they have different functions.

• A

  Groups

  Use the shortcut ⌘ Command-G or Ctrl + G to group a selection of layers.

  Groups allow us to move around a collection of layers, without having to select each layer individually. Groups don't have properties of the own, only the layers inside the group do.

  Use groups to organize your layers or apply properties to layers in bulk.

• B

  Frames

  Use the shortcut ⌘ Command ⌥ Option G (Mac) or Ctrl + Alt + G to frame your current selection.

  Frames on the other hand, can have their own dimensions and properties, some of which can affect the layers within them. They allow you to access features like constraints, auto layout, prototypes, and more. We'll learn more about frames and their properties later in this series.

  Use frames to create distinct containers, like screens in a mobile app design or individual slides in a presentation.

  Tip! You can also nest frames within other frames, so you can use frames for design elements like buttons, nav bars or newsfeed posts. If you're familiar with web development, anything you could put in a div could be a frame.

We can convert a group to a frame in the right sidebar. Click Group in the position section and select Frame from the menu.

Get components

To make this look more like a real news feed, we'll create a second post. Copy the frame using any of the copy and paste methods we explored above 😉. Then move the post below the original inside your frame.

The feed is starting to take shape, but we're missing some crucial elements to make it look like an app! We need a status bar and a navigation menu to move between pages in our app.

We could make these elements using shapes, or we could rely on components and libraries to speed up the process.

• Components are the building blocks of our designs. They can be basic UI elements like buttons or icons, or more elaborate compositions, like toolbars and menus. Guide to components →
• Libraries are collections of components and styles. You can use libraries in Figma to create, share, and use components across your files. Guide to libraries →

Duplicate Community files

The Figma Community is a space where creators can share resources in the form of design files and plugins. We can look for a component library to use in our wireframes. Duplicate this wireframe UI kit to add it to your drafts →

Professional teams

If you're in a Professional team, you can publish the file as a library to share styles and components from this file with your team.

Components can only be published in a team, so you need to move the file to a project in your team before publishing.

1. Open the file in the editor.
2. Click Drafts in the toolbar to change where the file lives.
3. Click file name in the toolbar and select Publish styles and components.
4. Enter a description for the library and press Publish to share it with your team.

You can now make the library available in your wireframe file:

1. Open the original wireframe file.
2. Select the Assets panel of the left sidebar.
3. Click to open the libraries modal.
4. Toggle the switch to enable the library in the current file.

Starter teams

We can copy components from the Community file in our drafts and paste them in our wireframe file. This is a great option if you have a free Starter team and can't use component libraries.

Any components you paste in the team file will paste as main components and won't be linked to the original file.

We can still access local components from the Assets panel. Find them in the Local to this file section above any enabled libraries.

Use components

Okay! We need components to represent the status bar at the top of the screen and a floating action button, or a FAB at the bottom.

This generic status bar is perfect. To add this component to our file:

1. Click on the component in the assets panel and drag it into the canvas.
2. Position this status bar near the top of frame and release to place.
3. Align to the top and left.
4. Let's repeat the process for the FAB and place it in the bottom and right of the frame.

Now we have copies of these components, known as instances. Instances are connected to the main component they originated from.

If you make a change to the main component, Figma will also apply those changes to any instances. This saves you having to manually update every instance, when you want to change properties of your component.

Constraints

Our eventual application will need to adapt to different screen sizes. If we try to resize the frame now, our components doesn't change. We can make sure they respond to different frame sizes using constraints.

At the moment, our constraints are set to top and left by default. We want the status bar to take up the full width of our frame.

1. Keep the vertical constraints at Top and set our horizontal constraints to Left and Right.
2. Set the constraints for the FAB to Bottom and Right.
3. Now when we resize our frame, our components will respond according to their constraints.

Create a menu page

Our app is coming together! Let's create another frame for our menu:

1. Select the frame tool in the toolbar, or press the F key.
2. Add another Google Pixel 2 XL preset to the canvas.

Let's add some text layers for each page in our app:

1. Press T to select the text tool and click to create a text layer.
2. Type menu item in the layer for now.
3. We want all our text layers to be the same width so we'll set the width to 200.
4. Duplicate the layer to create four more menu items, one for each page in our app.

Let's copy the status bar and FAB from our home page to complete our menu page:

1. Click to select the status bar.
2. Hold down shift and click to select the FAB.
3. Use the shortcut ⌘Command-C (Mac) or Ctrl + C (Windows) to copy them to our clipboard.
4. Select our menu frame and press ⌘Command-V (Mac) or Ctrl + V (Windows)to paste.
5. Figma pastes them in the same position in this frame. Nice!

Explore iterations

I think there are some other ways we could lay out this menu page so we can explore some different approaches.

Share designs for feedback

We have a few designs here, but we're not quite sure which approach to take. We could set up a design critique and schedule some time on the calendar... but I wonder if anyone on my team is around to help me choose.

As we've already invited everyone to our team, we don't have to invite them to every file. We can send them a link to the file instead:

1. Click the Share button in the toolbar.
2. Click Copy link in the share modal.
3. Paste the link in our team channel.

Our team has some existing sticky note components, which we love to use for feedback. I'll enable that library in this file, while I'm waiting for my team to arrive.

Design in multiplayer

Our team member's avatars are showing up in the toolbar. To jump to their location on the canvas, we can click their avatar and enter observation mode.

It sounds like our team loved the simplicity of our first design, but thought a back button would be better than our FAB. Someone suggested the menu could be underneath the rest of our content. I like that idea. Another person pointed out that the centered text makes it hard for users to scan quickly. That's a great point!

It looks like fellow design intern Daniel is creating a new version of the menu, which incorporates some elements of each of our designs. This looks awesome and everyone's on the same page!

I'm glad we got some feedback on our wireframes, before we invested in some higher fidelity designs. Now we know which direction to go in! We'll see you in our next video where we explore color, typography, and imagery.