In this tutorial, you’ll learn how to start your first Figma project and begin designing from scratch. There are many features built into the tool that can save you time and effort all while giving you a sleek, modern app for your next project.
Creating Projects and Designs
Go to a web browser or your mobile device. Designers can use Figma on whichever device they want. Your designs will always be available anywhere you log in to Figma, and they’ll never get lost in the cloud.
Sign in to your account with a Google account or email address. Click the Log In button at the top-right of your screen in order to access the file browser.
Log in or create an account.
When you create a Figma team, you’ll get access to the latest features and support the development of your item. Creating a team will also give you more opportunities for collaboration with other designers and their teams.Create or select a team.
Create a new project by clicking New project from the top-right corner of the team’s file browser. Name your project, decide who can view and edit its files and then click Create project.
Create a new project.
To add a design file to a project, click + New at the top-right corner and select Design file.
Add a design file to your project.
Click the Frames tool. The Frames menu looks like a hashtag, and you’ll find it in Figma’s upper-left area. Frames are containers for your design on a canvas.
Adding and Modifying Frames
Figma offers a wide variety of frame sizes for different screens. If you’re working on a particular project, select the relevant frame size from the Design panel and it’ll show up on the canvas.
Click the Frames tool.
With a frame selected, you can assign properties to it. You can fill the frame with a color, stroke it with a line, or add effects like shadows and blurring.
Select a frame size from the Design panel.
Nest frames inside other frames to organize your content into more manageable sections. To create a frame, press F on the keyboard and draw the desired size.
Edit a frame’s properties.
To the right of the existing frame, press F or A on the keyboard again to add another. Just select a second frame size when prompted.
Place another frame inside a frame (optional).
To add an image to your design in Figma, you can either drag it from your computer or use a URL for one of the following file formats:
Add non-nested frames for other screens or pages.
Here’s how you can fill a frame or object with an image as its background:
Inserting Images, Objects, and Text
Double-click the image to edit it. This can bring up tools in a separate window that says “Image” at the top. If that doesn’t work, click the name of the image first in the Layers panel, and then double-click on it. With the image open for editing, you can do any of these:
Drag an image from your computer into your design.
With the easy-to-use pencil tool, you can sketch anywhere on your designs. To activate it, press Shift + P on the keyboard and select a color. Then just click and drag to create your sketch. Try it as many times or until you’re happy with the result!
Fill a frame or object with an image.
Click the Shapes menu in the upper-left corner of Figma to select and draw shapes. The Shape menu includes options to draw rectangles, lines, arrows, ellipses, polygons, or stars. After selecting a shape option, you can adjust it’s size by clicking and dragging with your mouse.