Figma Basics

Frames

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.

Core Elements and Tools

• 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.

Element Properties

Each element can be customized with:

• Text – Adjust font, size, weight, and color.
• Shapes – Modify borders, fills, shadows, and corner radius.
• Images – Resize, crop, adjust opacity, and apply effects.

Groups vs. Components

• Groups – Combine multiple elements (e.g., an icon + text) to move and manage them as one. Great for quick layout organization.
• Components – Create reusable elements (e.g., buttons, cards). Editing the main component updates all linked instances, ensuring consistency.

Constraints and Auto Layout

• Constraints – Define how elements behave when the screen resizes (e.g., keep a button pinned to the bottom).
• Auto Layout – Automatically resizes elements and maintains consistent spacing. Ideal for designing flexible buttons, lists, and responsive UI sections.

Using Plugins and Figma Community

• Plugins – Extend functionality (e.g., Unsplash for images, Iconify for icons, and Content Reel for placeholder text).
• FigJam – A brainstorming tool within Figma for wireframing, flow mapping, and collaboration.