Figma has completely changed the world of digital design. Interface design that used to be done in Photoshop or Sketch has become much faster, more collaborative and more accessible with Figma. On top of that, Figma runs entirely in the browser, so it doesn't matter whether you're on Mac or Windows, and its free plan is more than enough to get started. In this post, I'll share everything you need to learn Figma from scratch. I'm writing as a designer who has used Figma for three years, drawing on real project experience.
What Is Figma and Why Is It So Popular?
Figma is a browser-based design tool. It's used to design websites, mobile apps, dashboards and interfaces. But what makes Figma special is less its design capability than what it offers for teamwork.
I first started using Figma on a startup project three years ago. Until then I'd been using Sketch and was tied to the Mac. We had a developer on our team who used Windows, and to share designs we constantly had to export PNGs and send them over. When we switched to Figma, the developer could see the design live in the same file. That alone brought an incredible boost in efficiency.
The main reasons for Figma's popularity are these. It runs in the browser and needs no installation. Multiple people can work on the same file at the same time. Its free plan works, even if it's limited to three files. Prototyping, design systems and developer handoff are all in one tool.
First Steps: Getting to Know the Interface
When you first open Figma it may look a little overwhelming, but the basic structure is actually very simple.
On the left there's the layers panel. All design elements are listed here. On the right there's the properties panel. The color, size, font and other properties of the element you've selected are edited here. At the top there's the toolbar. Basic tools like drawing shapes, adding text and creating frames are here.
Understanding the concept of a frame is the foundation of Figma. A frame is a container for a page or a screen. If you create a frame the size of an iPhone 14, you do your design inside that frame. I start every project by creating a frame: 1440 pixels wide for desktop and 390 pixels wide for mobile.
Making Your First Design
Let's design a simple card component. First, create a frame 350 pixels wide and 400 pixels tall. Set the background color to white. Draw a rectangle inside the frame; this will be the image area. Add a text element below it; this will be the title. Add another text element; this will be the description. Finally, add a button.
Add auto layout to this simple structure. Auto layout arranges elements automatically and adjusts the spacing between them. Click the auto layout button in the right panel, align your frame's elements vertically and set the spacing to sixteen pixels. Now if you delete or add an element, the other elements adjust automatically.
Building a Design System
The foundation of professional Figma use is the design system. Colors, fonts, components and styles are defined once and used consistently across the whole project.
I didn't build a design system on my first project, and I realized afterward that it was a big mistake. When the client asked for a color change, I had to change hundreds of elements one by one. On my second project I set up the design system first, and the same change took thirty seconds.
To create color styles: draw a rectangle, give it the color you want, click the color box in the right panel and choose "Create style." Use a naming convention like "Primary/500." That way, when you use this style across the whole project and change the color in one place, it changes everywhere.
Components are Figma's most powerful feature. Design a button, right-click and choose "Create component." Now you can use this button anywhere in the project, and when you change the main component, all the copies update automatically.
With the variant feature, you can define different states of a component. For example, you define a button's primary, secondary and outline variants within the same component. Or you create separate variants for hover, active and disabled states.
Prototyping: Bring Your Designs to Life
Figma's prototyping feature makes your designs clickable and interactive. It's wonderful for showing a client or your team "when you click here, this page opens."
Prototyping is very simple: select an element, switch to the "Prototype" tab in the right panel and draw an arrow from that element to the target frame. Choose the transition animation: slide, dissolve, smart animate and so on. Now in presentation mode, when you click that element, it moves to the target page.
The Smart Animate feature is a game changer. It automatically animates elements with the same name between two frames. For example, when moving from a card list page to a card detail page, the card image grows as it transitions. These micro-animations make your prototype look like a real app.
Last month, a prototype I prepared with smart animate for a client presentation really delighted the client. "Is this a real app?" he asked. Not a single line of code had been written yet, but the prototype looked that realistic.