Figma is the most widely used cloud-based design tool in the world. Everyone from UI/UX designers to entrepreneurs, developers and marketers uses it. Even its free plan offers powerful features, and in this guide you'll learn Figma from scratch all the way to an advanced level.
What Is Figma?
Figma is a browser-based design and prototyping tool. There's nothing to install on your computer — you can use it directly in the browser (a desktop app is also available). Thanks to real-time collaboration, several people can work on the same file at the same time.
Figma's standout features:
- Cloud-based — access from anywhere
- Real-time collaboration — like Google Docs
- Free plan — enough for personal use
- Component system — reusable design elements
- Auto Layout — automatic alignment and sizing
- Prototyping — build interactive prototypes
- Dev Mode — CSS/code export for developers
Getting Started with Figma
Creating an Account
Create a free account at figma.com. You can sign in with your Google account in one click. The free plan includes:
- 3 Figma files
- Unlimited personal draft files
- 30-day version history
- Basic component and style support
Getting to Know the Interface
The Figma interface consists of four main areas:
Left panel — Layers and Pages:
Shows every element in your file hierarchically. You can switch between pages here.
Top toolbar:
The core tools live here: Move (V), Frame (F), Shape (R), Pen (P), Text (T) and Hand (H).
Right panel — Properties:
This is where you edit the selected element's properties, such as size, color, typeface and effects.
Center area — Canvas:
The infinite white space where you build your design. You can zoom in and out as you work.
Core Tools
Frame (F)
The Frame is the basic building block of your design. Use it to create a web page, a mobile screen or any other area.
Commonly used Frame sizes:
- iPhone 15 Pro: 393 x 852
- Desktop: 1440 x 900
- iPad: 834 x 1194
- Instagram Post: 1080 x 1080
Tip: Press F and pick from the ready-made device sizes in the right panel.
Shape Tools
- Rectangle (R): Rectangles — for buttons, cards and backgrounds
- Ellipse (O): Circles and ellipses — for profile photos and icons
- Line (L): Lines — for dividers
- Polygon: Polygons — for custom shapes
- Star: Stars — for rating visuals
Text (T)
Press T to activate the text tool. In the right panel you can set:
- Font: The entire Google Fonts library is available
- Size: In pixels
- Weight: Regular, Medium, Semi Bold, Bold
- Line height: The spacing between lines
- Letter spacing: The spacing between letters
Color and Style
Every element has fill, stroke and effect (shadow, blur) properties.
Tips for choosing colors:
- Build harmonious color palettes with Coolors
- Preview your palette on a real website with Realtime Colors
- Sample existing colors with Figma's eyedropper tool (I key)
The Component System
Components are Figma's most powerful feature. Turn a design element into a component and you can reuse it anywhere. When you change the main component, all the copies update automatically.
Creating a Component
- Select the design element
- Right-click and choose "Create Component" (or press Ctrl+Alt+K)
- The component turns purple — this is the main component
Using a Component
When you copy and paste the main component, you create an "instance" (a copy). Instances:
- Automatically pick up changes made to the main component
- Let you change properties such as text and color locally (override)
- Let you edit that specific copy without changing the component itself
Variants
You manage a component's different states with variants. For example, a button component:
- State: Default, Hover, Active, Disabled
- Size: Small, Medium, Large
- Type: Primary, Secondary, Outline
This way, a single button component gives you 12 different combinations.
Auto Layout
Auto Layout is a feature that dramatically boosts your design efficiency in Figma. It works much like Flexbox in CSS.
What Does Auto Layout Do?
- Aligns elements automatically (horizontally or vertically)
- Resizes automatically when the content changes
- Lets you define padding and gap (spacing)
- Lets you reorder elements (drag and drop)
Using Auto Layout
- Select the elements
- Press Shift+A (or use "Add Auto Layout" in the right panel)
- Adjust the settings in the right panel:
- Direction: Horizontal or Vertical
- Padding: Inner spacing
- Gap: Spacing between elements
- Alignment: Alignment
Practical example — a button:
- Create a rectangle
- Type some text inside it
- Select both and add Auto Layout with Shift+A
- Padding: 24 left and right, 12 top and bottom
- Now the button expands automatically even if the text gets longer
Prototyping
In Figma, you can turn your static designs into interactive prototypes.
Basic Prototyping
- Switch to the "Prototype" tab in the top menu
- Select an element and drag from the blue circle to the target frame
- Choose the interaction type:
- On Click: When clicked
- On Hover: When hovered over
- On Drag: When dragged
- After Delay: After a set amount of time
Animations
Animation types for transitions:
- Instant: An immediate transition
- Dissolve: A dissolve effect
- Move In / Move Out: A sliding effect
- Smart Animate: Figma automatically animates the differences between elements
Sharing a Prototype
Use the "Play" button in the top right corner to test the prototype. With the "Share" button you can generate a link and send it to clients, developers or teammates.
Design Systems
For consistency in large projects, building a design system is essential. In Figma, a design system is made up of the following parts:
Color Styles
Save your project's color palette as styles. Give them meaningful names such as "Primary", "Secondary", "Success" and "Error". When you need to change a color, just update the style — every place it's used changes automatically.
Typography Styles
Define all your text styles, such as headings (H1-H6), body text and button text. Set the font, size, weight and line height.
Component Library
Build all your UI elements — buttons, input fields, cards, navigation, modals — as components and gather them in a library file. Your team can use this library across all projects.
Figma vs Other Design Tools
Figma vs Canva
Canva is excellent for social media graphics, presentations and simple designs. Figma, on the other hand, is a professional tool for UI/UX design and for web and mobile app design.
| Feature | Figma | Canva |
|---------|-------|-------|
| Target audience | Designers, developers | Everyone |
| Component system | Advanced | Basic |
| Prototyping | Yes | No |
| Auto Layout | Yes | No |
| Templates | Community templates | Extensive template library |
| Learning curve | Medium | Low |
Figma vs Framer
Framer combines design with website publishing. What you design in Figma, you can turn directly into a website in Framer.
Figma vs Sketch
Sketch is a macOS-only app. Because Figma is browser-based, it works on every platform. Figma's real-time collaboration is a major advantage over Sketch.
Useful Plugins for Figma
- Unsplash: Use free stock photos directly in Figma
- Iconify: Access a library of 100,000+ icons
- Content Reel: Add realistic dummy data (names, avatars, text)
- Contrast: Check color contrast for accessibility
- Autoflow: Create user flow diagrams
Inspiration and Resources
- Mobbin — UI/UX design inspiration from real apps
- Figma Community — Thousands of free templates and component kits
- Excalidraw — For quick wireframe sketches
- v0 — Generate a React component with AI and use it as a reference in Figma
Frequently Asked Questions (FAQ)
Is Figma free?
Yes, there's a free plan for personal use. You can create 3 Figma files and unlimited draft files. Teamwork and advanced features require a paid plan.
Is Figma hard to learn?
You can learn the basic tools in a few hours. Advanced features such as the component system and Auto Layout take a week or two. Free tutorials in Turkish are available on YouTube.
Do I need to know how to code to use Figma?
No. That said, knowing CSS makes it easier to understand Auto Layout and spacing concepts. You can use Figma comfortably even if you're not a developer.
Do my Figma files work offline?
The Figma desktop app has limited offline support. Files are cached locally and synced when you reconnect. For full functionality, though, you need an internet connection.
How do I turn what I design in Figma into a website?
There are a few ways:
- Framer — Import your Figma design and publish it directly as a website
- v0 — Give your design as a reference and generate React code with AI
- Dev Mode — Copy the CSS code with Figma's Dev Mode and hand it to developers
- Manual coding — Use the design as a reference and code it with Cursor or Bolt
Can I create animations in Figma?
Basic animations (Smart Animate, transition effects) can be done in Figma. For more advanced animations, you can use tools such as Spline (3D animations) or After Effects.
Conclusion
Figma is an indispensable tool in the modern design world. Start with the free plan, and as you learn the component system, Auto Layout and prototyping features, you'll be able to create professional-grade designs. Thanks to real-time collaboration, you work in sync with your team, and with Dev Mode you hand off to developers without friction.
To discover more design and productivity tools, visit the ToolHunters home page.
