Figma

What is Figma?

Figma is a cloud-based design tool for creating user interfaces, prototypes, and design systems. It enables real-time collaboration and is widely used by designers and developers worldwide.

Getting Started

• Figma Help Center - Official documentation
• Learn Design - Free Figma courses
• Figma YouTube - Video tutorials and tips
• Free Plan: Available for individual designers

Core Features

• Frames & Layouts: Flexible container system
• Auto Layout: Responsive component design
• Components: Reusable design elements
• Variants: Multiple states of components
• Constraints: Responsive resizing behavior
• Styles: Color, text, and effect libraries

Advanced Capabilities

• Prototyping: Interactive flows and animations
• Design Systems: Shared component libraries
• Plugins: Extend Figma with custom tools
• Variables: Dynamic values for themes and responsiveness
• Dev Mode: Developer handoff features
• FigJam: Collaborative whiteboarding

Learning Path

• Week 1: Interface basics, frames, shapes, text
• Week 2: Components, auto layout, constraints
• Week 3: Prototyping, interactions, animations
• Week 4: Design systems, plugins, collaboration

Community Resources

• Figma Community - Free templates and plugins
• Best Practices - Professional workflows
• Figma Friends: Local meetup groups worldwide
• Config: Annual Figma conference

Popular Plugins

• Unsplash: Free stock photos
• Iconify: Thousands of icons
• Autoflow: User flow diagrams
• Content Reel: Generate realistic content
• Stark: Accessibility checking

Designer-Developer Handoff

• Inspect Mode: CSS code generation
• Export Assets: PNG, SVG, PDF formats
• Measure Tool: Spacing and dimensions
• Comments: Feedback and annotations