Figma Techniques

Mastering the dominant design tool for modern brand and digital work.

Figma has become the central tool for most design work—UI, brand, presentations, and collaboration. Its browser-based, multiplayer approach changed how teams work. Mastering Figma means mastering the core workflows of modern design.

---

Why Figma

Collaboration Native

• Real-time multiplayer editing
• Comments and feedback in context
• Sharing via links, not files
• Version history built in

Platform Agnostic

• Runs in browser
• Desktop apps for Mac/Windows
• No file compatibility issues
• Access from anywhere

Ecosystem

• Extensive plugin library
• Community files and templates
• Integrations with other tools
• Active development

---

Core Concepts

Files and Pages

Files: Self-contained documents, shareable via link Pages: Sections within files (use for organizing phases, versions, or components)

Organization tips:

• One project per file typically
• Pages for: Cover, Research, Concepts, Final, Components
• Use consistent naming across projects

Frames and Groups

Frames: Containers with layout properties (like HTML divs) Groups: Simple collections without layout properties

Use frames for:

• Artboards/screens
• Components
• Anything needing auto layout
• Export containers

Use groups for:

• Quick temporary organization
• Simple visual grouping
• When layout properties not needed

Components and Instances

Components: Reusable elements (master) Instances: Copies linked to component (children)

Benefits:

• Change once, update everywhere
• Consistency enforcement
• Faster design
• Design system foundation

Variants: Multiple states within one component (hover, active, sizes)

Auto Layout

Responsive, flexible layouts:

• Automatic spacing
• Content-aware sizing
• Direction (horizontal/vertical)
• Padding and gap control
• Alignment options

Essential for:

• Buttons that resize with text
• Cards that adapt to content
• Lists and repeated elements
• Responsive components

Styles

Reusable properties:

• Color styles
• Text styles
• Effect styles (shadows, blurs)
• Grid styles

Foundation of design systems. Define once, apply everywhere.

---

Brand Design in Figma

Logo Work

Figma is increasingly capable for logos:

Strengths:

• Boolean operations
• Vector editing
• Component variants for versions
• Easy mockup placement

Limitations:

• Less precise than Illustrator for complex paths
• Font outline controls less robust
• Some print workflows prefer AI

Workflow:

• Sketch concepts in Figma
• Refine in Illustrator if needed for precision
• Return to Figma for system and applications

Brand Systems

Figma excels at brand systems:

Structure:

• Component library for brand elements
• Styles for colors, typography
• Variants for logo versions
• Mockup templates

Publishing:

• Team libraries share components
• Updates push to all files
• Version control built in

Guidelines Documents

Create brand guidelines in Figma:

Advantages:

• Interactive, not static PDF
• Easy to update
• Shareable via link
• Can include prototypes

Approach:

• Design system file as source
• Guidelines as separate presentation file
• Export to PDF when needed

Presentations

Figma for client presentations:

Tips:

• Use frames as slides
• Prototype for navigation
• Present mode for fullscreen
• Comments for async feedback

---

Efficiency Techniques

Keyboard Shortcuts

Essential shortcuts:

Learn shortcuts incrementally—a few per week.

Quick Actions

⌘/ (Cmd+/) opens command palette:

• Search any action
• Faster than hunting in menus
• Plugins accessible here
• Learn as alternative to shortcuts

Copy/Paste Properties

• Copy: ⌘C
• Paste properties: ⌥⌘V
• Selectively paste: specific properties only

Huge time saver for applying styles.

Find and Replace

Edit → Find and Replace:

• Change text across file
• Update layer names
• Batch modifications

Bulk Operations

Select multiple objects:

• Same selection: Right-click → Select all with same...
• Rename layers: ⌘R with pattern matching
• Batch property changes

---

Organization

File Structure

Consistent structure across projects:

📄 Project Name
  📑 Cover
  📑 Research & Inspiration
  📑 Concepts
  📑 Selected Direction
  📑 Final Deliverables
  📑 Components (if not separate library)

Naming Conventions

Consistent naming for findability:

• Layers: Descriptive names (not "Rectangle 47")
• Components: Category/Name (Icons/Arrow-Right)
• Pages: Numbered or clear order (01-Cover)

Component Organization

For larger systems:

• Use slash naming for hierarchy: Button/Primary/Large
• Group by function: Forms/, Navigation/, Feedback/
• Document with component descriptions

---

Collaboration

Real-Time Editing

Working together:

• Communicate about who's editing what
• Use named cursors to track collaborators
• Audio/video chat for discussions
• Leave notes for async collaborators

Comments

Feedback in context:

• Pin comments to specific elements
• Resolve when addressed
• Tag people for attention
• Export comments if needed

Version History

Track changes:

• Auto-saved versions
• Named versions for milestones
• Compare versions
• Restore if needed

Branching (with paid plans)

For complex projects:

• Create branches for exploration
• Merge approved changes
• Avoid disrupting main file

---

Design Systems in Figma

Libraries

Shared component sources:

• Publish library from file
• Enable in other files
• Updates push to consumers
• Version notes for changes

Tokens and Variables

Native variables (newer feature):

• Color tokens
• Spacing tokens
• Mode switching (light/dark)
• Responsive values

Integrates with code token systems.

Documentation

Built-in documentation:

• Component descriptions
• Link to guidelines
• Usage notes
• Figma annotations plugin

---

Plugins

Essential Categories

Productivity:

• Rename It (batch renaming)
• Instance Finder
• Clean Document

Content:

• Content Reel (real content)
• Unsplash (stock photos)
• Iconify (icons)

Design Systems:

• Tokens Studio
• Design Lint
• Contrast checker

Export:

• Export Kit
• HTML.to.design

See Plugin Recommendations for detailed list.

---

Export and Handoff

Export Settings

For different uses:

Developer Handoff

Inspect mode:

• CSS properties
• Measurements
• Asset export
• Comments

Dev mode (newer):

• Enhanced code views
• VS Code integration
• Component documentation

---

Related

• Tools
• Adobe Workflows
• Plugin Recommendations
• Design Systems
• Brand Systems