Figma Basics

Back to UI/UX for Developers
Arjit Sharma
02 Mins

Figma is a powerful tool for designing user interfaces, and it’s beginner-friendly! Let’s break down the essentials to get you started creating stunning designs.

Frames : Your Design Foundations

Frames act as containers for screens (e.g., homepages, dashboards) and define layout boundaries. They help structure designs and simulate actual app or website layouts, making it easier to visualize screen flows and responsiveness.

Use preset frame sizes (e.g., iPhone 14, Desktop 1440px) to mimic real-world screens.

Core Tools to Build UI

Figma’s toolbar is your creative playground. Here are the key tools you’ll use:

  • Shapes – Build buttons, icons, and UI elements.
  • Lines – Use as dividers or directional guides.
  • Text – Essential for headings, labels, and body content.
  • Images – Upload or use plugins like Unsplash for quick access to visuals.

Customizing Elements

Every element in Figma is customizable. Here’s how to make them pop:

  • Text – Tweak font style, size, weight, or color in the right-hand panel.
  • Shapes – Add borders, fills, shadows, or rounded corners for polish.
  • Images – Crop, resize, or adjust opacity for seamless integration.

Groups vs. Components

Managing elements efficiently is key to a smooth workflow:

  • Groups – Bundle elements (e.g., an icon + text) to move or edit them together. Perfect for quick layouts.
  • Components – Create reusable elements like buttons or cards. Edit the main component, and all copies update automatically.

Constraints and Auto Layout

Want your designs to adapt to different screen sizes? Use these tools:

  • Constraints – Pin elements (e.g., a button) to specific edges so they stay in place when the frame resizes.
  • Auto Layout – Automatically adjusts spacing and sizes for flexible layouts like lists or button rows.

Supercharge Figma with Plugins and FigJam

Figma’s ecosystem makes designing even easier:

  • Plugins – Add functionality like Unsplash (free images), Iconify (icons), or Content Reel (dummy text).
  • FigJam – Figma’s brainstorming tool for wireframes, user flows, or team collaboration.
Next →