The fastest answer to how to use Figma is not to read the theory but to start designing right away. Figma is a tool that runs in the browser, offers a free starter plan, and has become the industry's de facto standard for both interface design and prototyping. In this article we assume you have never opened it: we get to know the interface, create your first frame, design a simple mobile card with the basic tools, and make your file shareable. The goal is for you to end up with a design you actually built yourself.
Opening Figma and creating your first file
To start using Figma, just go to figma.com in your browser and create a free account. You can also download the desktop app if you prefer; both use the same core, so there is no difference. Once you sign in, a file manager (Files) greets you. When you create a new design file with the button at the top right, an empty, infinite surface opens. In Figma's language this surface is called the canvas, and it really is unlimited: you can place as many designs side by side as you like.
An important habit for beginners: name your file straight away. Click the title at the top left and type something like "My First Design". Figma saves every change automatically, so there is no need to hunt for Ctrl/Cmd + S.
Getting to know the interface: three main regions
Although Figma's interface looks busy at first glance, it really consists of three logical regions:
- Left panel (Layers / Assets): the tree structure of every layer in your design is listed here. As a design grows, this becomes your map.
- Center area (Canvas): the actual workspace where you draw. Zoom in and out with the scroll wheel, and pan by holding the
Spacekey. - Right panel (Design): here you set every property of the selected object — size, position, color, border, shadow. When nothing is selected, this panel shows the page settings.
The toolbar at the top holds the tools you will use most. Each has a keyboard shortcut, and learning them multiplies your speed: V to move, F for a frame, R for a rectangle, T for text.
What is a frame, and why is it the basis of everything?
In Figma, the foundation of a design is the frame. Think of a frame as a "container box": a phone screen, a web page, or a business card. Everything you place inside belongs to that frame and moves with it. It is Figma's equivalent of the "canvas" or "artboard" concept in a classic design program.
When you press F, ready-made sizes appear in the right panel: iPhone, Android, Desktop, tablet, and more. For our first design, let's choose an iPhone 14 & 15 Pro size (393 × 852). A phone screen appears on the canvas. Our working surface is now ready.
Building your first design with the basic tools
Now let's design a simple "profile card" inside this phone screen. Let's go step by step:
- Background: with the frame selected, set the Fill color in the right panel to a light gray tone (such as
#F4F4F5). - Draw the card: draw a rectangle with
R. To round the corners, set the Corner radius value to16in the right panel and choose white as the fill color. If you like, add a subtleDrop shadowfrom the Effects section. - Add an avatar: again with
R, draw a small square, then turn it into a circle by setting the corner radius to half its size (for a 40×40 square, use 20). - Add text: press
T, click above the card, and type a name. Set the font, size, and weight from the Text section of the right panel. Add a smaller, gray subtitle underneath.
For alignment, my favorite Figma feature kicks in: when you select two objects, red guide lines and distance measurements appear between them. As you bring one object close to another, it automatically "snaps" when the centers line up. You can select multiple objects and center them with the alignment buttons in the right panel, or distribute them at equal spacing.
Quick tips for color, typography, and layout
For a good first design, focus on consistency rather than flashiness:
- Use few colors: one neutral (shades of gray), one main color, and one accent color are enough for most interfaces.
- Consistent spacing: work in multiples of 8 (8, 16, 24, 32 pixels). This "8-point grid" instantly makes your layout look more professional.
- A single typeface: at first, use different weights of a single family like Inter; four different fonts on screen create chaos.
To duplicate an element, Ctrl/Cmd + D or holding Alt while dragging speeds you up a lot. When you make a mistake, Ctrl/Cmd + Z is always there for you.
Sharing and previewing the design
When your design is ready, you can do two things. First, view it full-size as if on a real screen with the Present (play) button at the top right. Second, create a link with the Share button and send it to a friend or client. This is exactly where Figma's power lies: the person you share with can see the design in the browser without installing anything, and even leave comments if you allow it.
If you want to export an image, select the object and download it as PNG, JPG, or SVG from the Export section at the bottom of the right panel. For the web, PNG or SVG usually works; for print, a high-resolution PNG does the job.
Frequently Asked Questions
Is Figma free?
Yes, Figma offers a generous free plan for individual use. With it you can create unlimited personal files and run a limited number of shared projects. For getting started and learning, the free plan is more than enough; features such as teams and unlimited version history come with the paid plans.
I have no design experience — can I still learn?
Absolutely. Figma's learning curve is gentle, and you need neither code nor drawing skills to use the tool. If you start with a small card like the one in this article and progress by designing a new screen each week, you can comfortably build basic interfaces within a few weeks.
Should I use Figma instead of Photoshop?
For interface (UI/UX) design, prototyping, and team collaboration, Figma is far more practical because it runs in the browser and offers real-time sharing. Photoshop, on the other hand, is powerful for photo manipulation and raster editing. So the purpose is different: if you are designing a digital product, Figma is the right choice.
Ready to build your first design? If you want to set up a brand's interface, logo, or a complete product screen professionally, let's bring your idea to life together. Get in touch with me and tell me about your project.