To use Figma, create an account, open a new Figma Design file, press F for the Frame tool and click the canvas to make a frame. Add shapes, text and images inside frames, name your layers and share the file link. Frames are the containers everything else sits in.
Figma opens in a browser, looks like a blank grey canvas and leaves many beginners wondering where to click. The fix is to learn one concept: the frame. Almost everything you design, from a button to a whole website page, lives inside a frame. Here's how to start a file, how frames work, the different kinds of file you can make and a simple first project.
Start a new file
Anyone with a Figma account can create files in their own drafts. Figma adds that only people with can-edit access to a team can create files in that team. So if you're just trying it out, drafts are the place to start. Choose the type of file you want from the options Figma offers.
| File type | Use it for |
|---|---|
| Figma Design | Interactive, responsive designs, where precision matters |
| FigJam | Online whiteboard for meetings, brainstorms, diagrams and research |
| Figma Slides | Presentations with polls, voting and interactive prototypes |
| Figma Sites | Designing and publishing websites such as portfolios or landing pages |
| Figma Make | An AI-driven way to turn ideas into functional prototypes |
| Figma Buzz | Marketing assets built from shared brand templates |
For learning, open a Figma Design file. It's the core product, and the others use the same ideas.
The most important idea: frames
Figma defines frames as layers that act as containers for other layers, such as shapes, images and text. You can place frames inside other frames. A frame can be as small as an icon or a button, or as big as an entire website layout or mobile app screen.
- Top-level frame: a frame sitting directly on the canvas.
- Parent: a frame that contains other layers.
- Child: any layer or nested frame inside a parent.
You'll recognise frames in the Layers panel on the left by their frame icon. Getting comfortable with that structure makes everything else easier, because moving a parent moves everything inside it.
Create your first frame
- Select the Frame tool in the toolbar, or press F (or A).
- Click on the canvas to create a top-level frame, or click and drag to draw one at the size you want.
- To use a ready-made size, choose a frame preset instead.
- Click inside an existing frame to add a nested frame.
Figma says the first top-level frame you make in a session comes out at 100 x 100, and later ones copy the size of the last one you drew. Don't worry if it's tiny: you can resize it any time. You can also duplicate an existing frame, or select several layers and wrap them in a new frame.
What frames convert
Once something is in a frame, Figma gives you access to layout guides, auto layout, constraints and prototyping. Auto layout makes elements space themselves as content changes. Constraints control how a design adapts when a frame is resized. Prototyping lets you link frames together so you can click through a design like a real app. You don't need these on day one, but it's good to know why frames matter.
A simple first project
- Create a frame the size of a phone screen using a preset.
- Add a heading with the text tool.
- Draw a rectangle for a button and put a label on it.
- Name your layers, for example 'Heading' and 'Button'.
- Duplicate the frame to try a second version.
- Share the file with a colleague for feedback.
Habits that help from day one
- Name layers and frames. A default name like 'Frame' repeated twenty times tells nobody anything.
- Keep one idea per frame, so it's easy to duplicate and compare.
- Group related elements by placing them in a frame.
- Keep files tidy and delete the experiments you don't need.
Figma sits alongside many other design tools. My guide to key graphic design terms helps you follow tutorials, and my notes on free logo makers cover quicker options when you don't need a full design tool.
Share and get feedback
Design is rarely a solo job. Once you have a frame worth showing, share the file with a colleague or client and ask them to comment directly on the design, rather than sending screenshots by email. Keep a short list of what you want feedback on, such as layout or wording, so comments stay useful. Because everybody works in the same file, you avoid the classic confusion of five people reviewing five different versions.
Want AI doing the heavy lifting in your marketing?
I build the systems that handle the boring 80 percent, so you get your week back. Done properly, with the human kept in.
Common beginner mistakes
- Designing without frames. Loose shapes on the canvas are hard to move, align and reuse.
- Making one huge frame. Use one frame per screen or per component.
- Ignoring the Layers panel. It's where you find, rename and reorder everything.
- Copying designs without reasons. Know why a layout works before you imitate it.
- Skipping the basics of spacing and alignment. Clean spacing makes beginner work look professional.
Where to go next
When frames feel natural, learn auto layout so buttons and lists resize with their content, then constraints so designs adapt, then prototyping so you can click through your work. Take them one at a time and use each in a real project, even a tiny one. A practical goal, like redesigning a single page of your own website, teaches more than any amount of watching.
My verdict
Open a Figma Design file in your drafts, learn the Frame tool and build one simple screen. Name everything as you go, and only look at auto layout and prototyping once frames feel natural.
Frequently asked questions
How do I start using Figma?
Create an account, open a new Figma Design file in your drafts, press F for the Frame tool and build inside frames.
What is a frame in Figma?
A layer that acts as a container for other layers such as shapes, images and text. Frames can be nested inside other frames.
What's the difference between Figma Design and FigJam?
Figma Design is for detailed, interactive design. FigJam is an online whiteboard for meetings, brainstorms and diagrams.
What size is a new frame?
Figma says the first top-level frame in a session is 100 x 100, and later ones use the size of the last frame you created.
Who can create files in a team?
Only people with can-edit access to the team. Anyone with a Figma account can create files in their drafts.
