Introduction to Figma for Beginners

Overview

• Figma is a design platform with multiple tools:
  • FigJam: Whiteboarding
  • Figma Slides: Presentation tool
  • Figma Design: Prototyping and design visualization
  • DevMode: Developer and designer collaboration
• Figma is used as a collaborative platform for consistent design systems across organizations.

Figma Design Editor

• Canvas: Central area to visualize designs
• Properties Panel: Adjust properties like color, width, height
• Layers Panel: Displays object hierarchy, allows object selection

Quick Actions Menu

• Access via Command K
• Allows quick search and execution of functions
• Use for finding keyboard shortcuts and functionalities like dark/light mode

Shapes in Figma

• Shapes Menu: Includes rectangles, ellipses, polygons, stars
• Rectangle: Adjust fill color and radius
• Ellipse: Draw perfect circles with shift, center growing with option
• Polygon: Adjust number of sides, create shapes like play buttons
• Star: Adjust properties for custom shapes

Vector Networks

• Vector Graphics: Scalable using math-based design
• Pen Tool: Draw shapes, create arrow icons using nodes
• Vector Networks: Connect nodes for complex designs

Boolean Operations

• Create unique shapes by combining existing ones
• Union: Combine shapes
• Subtract: Remove one shape from another
• Intersect: Find common area between shapes

Fills and Effects

• Fills: Solid, gradient (linear, radial, angular, diamond), images
• Image Fills: Place images in shapes, adjust positioning
• Effects: Drop shadow, inner shadow, layer blur, background blur

Typography

• Type Tool: Selects text within canvas
• Font Options: Access Google fonts, variable fonts
• Advanced Typography: Hanging punctuation, stylistic alternates

Alignment and Constraints

• Alignment Saltine: Tidy arrangement of objects
• Constraints: Controls object behavior within frames when resized

Resizing vs. Scaling

• Resize: Adjust frame dimensions without changing object sizes
• Scale: Use scale tool (K key) to proportionally change object size

Auto Layout

• Maintains ordering and spacing within frames
• Auto Layout Frame: Shift A to apply
• Changes direction, spacing, wrapping of objects

Building a UI Card

• Use auto layout, shapes, text, and fills
• Adjust spacing, alignment, and constraints to create responsive designs

Conclusion

• Figma's tools offer extensive capabilities for design and prototyping
• Additional resources available on Figma's EDU YouTube channel