Overview
This lecture introduces Figma for designing websites, apps, and digital graphics, covering core tools, layout features, and prototyping basics.
Getting Started with Figma
- Sign up at figma.com and either use the browser version or download the desktop app.
- Click "New Design File" to create a project; the main area is your canvas.
Basic Tools and Canvas Navigation
- Use the toolbar at the bottom to move and arrange things on the canvas.
- Create frames (artboards) with the Frame tool (F) using presets for web or custom sizes.
- Draw basic shapes like ellipses; hold Shift for perfect circles and set dimensions in the properties panel.
- Add and edit text with the Text tool; adjust size, weight, font, and letter spacing.
- Use the layers panel on the left to organize and select elements.
- Add comments anywhere on the canvas for feedback.
Working with Colors and Grids
- Change fill colors using hex codes or gradients; edit gradients by dragging color stops.
- Save color styles for reuse throughout your design.
- Use position tools and alignment options for precise layout.
- Add grids (square or column) to align elements; adjust opacity and color for visibility.
Editing and Manipulating Objects
- Duplicate frames or elements using Alt-drag, copy-paste, or shortcuts.
- Scale objects using the Scale tool (K), holding Alt/Option to scale from the center.
- Import images via Shift+Cmd+K, copy-paste, or drag-and-drop.
- Adjust image size, aspect ratio (hold Shift), and basic image edits (exposure, contrast, etc.).
- Use masks by selecting layers, right-clicking, and choosing "Use as Mask".
Advanced Features: Masks, Blending, and Auto Layout
- Apply image masks to text for creative effects.
- Use blend modes to add color overlays to images.
- Auto Layout (Shift+A) organizes selected items with customizable spacing and padding.
- Add strokes (borders) and adjust their size and color for enhanced visual design.
- Create pill-shaped buttons by increasing corner radius.
Components and Prototypes
- Duplicate and modify components (e.g., buttons) for different states like hover.
- Create component sets for interactive elements and reusable assets.
- Add prototype interactions (e.g., change on hover, navigate on click) and select animation types.
- Group masked items to avoid masking issues when adding new elements.
- Use the Prototype menu to link frames and simulate user flow.
Sharing and Exporting
- Share designs with others, setting access for viewing, editing, or commenting.
- Export frames or assets as JPEG, PNG, SVG, or PDF at different scales.
Key Terms & Definitions
- Canvas — The main area where you arrange and design elements.
- Frame — An artboard or section that defines a design’s boundaries.
- Properties Panel — The panel on the right for adjusting settings of selected elements.
- Layers Panel — The panel on the left for organizing and selecting elements.
- Mask — A layer that reveals parts of another layer based on shape.
- Auto Layout — A feature to automatically arrange and align elements.
- Component — A reusable design element with editable instances.
- Prototype — An interactive simulation of user flows and interactions.
Action Items / Next Steps
- Sign up for Figma and create a new design file.
- Practice using basic shapes, text, masking, and auto layout tools.
- Follow extended tutorials on the Flux Academy Channel for more in-depth Figma learning.