UI/UX Design Figma Basics
Figma is a browser-based design tool that many teams use to create interfaces, prototypes, and design systems. Several people can work in the same file at the same time, and developers can inspect designs without installing heavy software. Learning the core features gives beginners a solid base for professional work.
The Figma Workspace
+----------------------------------------------------------------+ | Menu Move Frame Shape Pen Text Comment Share | +------------+-----------------------------------+---------------+ | LEFT PANEL | CANVAS | RIGHT PANEL | | Pages | +--------+ +--------+ | Design tab | | Layers | | Frame | | Frame | | Prototype tab | | Assets | | Login | | Home | | Position | | | +--------+ +--------+ | Fill, Stroke | | | | Effects | +------------+-----------------------------------+---------------+
- Canvas: The infinite space where you arrange screens.
- Layers panel: A list of every object, ordered from front to back.
- Properties panel: Controls for size, color, text, and effects of the selected object.
Frames: The Foundation
A frame acts as a container for a screen or a section. Pick a frame preset such as a phone or desktop size, then place content inside. Frames can nest. A page frame holds a header frame, a content frame, and a footer frame. Constraints inside a frame control how objects behave when the frame resizes.
Basic Shapes, Text, and Images
Draw rectangles, ellipses, lines, and arrows with the shape tools. Use the text tool to add labels and paragraphs. Drag images into a frame or fill a shape with an image. Group related objects to move them together.
Auto Layout
Auto layout makes a frame adjust itself around its content. Add a word to a button and the button grows. Remove an item from a list and the list closes the gap.
AUTO LAYOUT BUTTON Padding 16 left/right, 10 top/bottom, gap 8 between items [ icon ] [ Save draft ] → button width fits content [ icon ] [ Save ] → button shrinks automatically
Key Auto Layout Settings
- Direction: Horizontal or vertical stacking
- Spacing: Equal gaps between children
- Padding: Space between the content and the frame edge
- Resizing: Hug contents, fill container, or fixed size
Components and Variants
A component is a reusable design element, such as a button or a card. Create a main component once and place copies called instances across your screens. Edit the main component and every instance updates.
Variants group related versions of a component into one set. A button can offer variants for type (primary, secondary), state (default, hover, disabled), and size. Designers switch between versions using dropdowns in the properties panel.
COMPONENT SET: Button +-------------+------------------+------------------+ | | Default | Disabled | +-------------+------------------+------------------+ | Primary | [ Continue ] | [ Continue ] | | Secondary | [ Cancel ] | [ Cancel ] | +-------------+------------------+------------------+
Styles and Variables
Styles save colors, text formats, and effects for reuse. Variables store values such as colors, numbers, and strings, and support modes like light and dark. Change a variable once and every linked element updates. This approach keeps designs consistent and speeds up theming.
Prototyping
Switch to the Prototype tab and draw connections between frames. Choose a trigger such as "On click", then pick an action such as "Navigate to" with a transition like "Smart animate". Press the play button to test the flow as a user would.
[ Login ] --click "Sign in"--> [ Home ] --click card--> [ Details ]
^ |
+------- click back -------+
Collaboration
- Share a link with view, comment, or edit access
- Leave comments pinned to exact spots in the design
- Follow a teammate's cursor during live reviews
- Use version history to restore earlier states
- Use Dev Mode so developers can view measurements, colors, and code snippets
Useful Habits for Beginners
- Name layers and frames clearly, such as "Login / Header"
- Organize pages by purpose: Cover, Research, Wireframes, Final
- Build with components from the start
- Use a spacing scale such as 4, 8, 16, 24, and 32 pixels
- Learn core shortcuts for frame, text, duplicate, and group
Common Mistakes
- Detaching components, which breaks automatic updates
- Placing objects loosely on the canvas instead of inside frames
- Skipping auto layout and resizing items by hand
- Leaving layers named "Rectangle 247"
Key Points
- Figma runs in the browser and supports live collaboration
- Frames hold screens; auto layout makes them flexible
- Components and variants build reusable systems
- Styles and variables keep colors and text consistent
- Prototype mode links frames into testable flows
- Clear naming and organization save team time