Figma

Figma

The industry-standard collaborative interface design platform. Browser-based with real-time multiplayer editing, component systems, prototyping, developer handoff via Dev Mode, and AI-powered features. Used by product design teams worldwide for UI/UX design.

Free AvailableUI/UX DesignCollaborationPrototypingDesign-to-Code

Product Hunt Rating

4.92/5

Product Hunt Reviews

1,423

Fundado

2012

Plugins Available

Thousands

Empresa

Figma, Inc.

Introducción

Figma has become the undisputed industry standard for UI/UX design, fundamentally changing how design teams work by bringing real-time collaboration to the design process. Before Figma, designers worked in isolated desktop applications, emailing files back and forth and constantly dealing with version conflicts. Figma replaced that with a browser-based platform where entire teams — designers, developers, product managers — work together simultaneously on the same file, with live cursors showing who is doing what.

Beyond collaboration, Figma offers a complete product design toolkit. Its component system lets teams build and maintain scalable design systems with reusable components, variants for different states, and auto layout for responsive designs. Prototyping capabilities let designers create interactive clickable prototypes with transitions and animations without leaving the tool. Dev Mode bridges the design-to-development gap by providing developers with code snippets, design tokens, spacing measurements, and exportable assets directly from design files.

Figma serves the full spectrum of product design work. Startup designers use it to rapidly iterate on product interfaces. Enterprise design systems teams use it to maintain consistency across products with shared component libraries. Frontend developers use Dev Mode to translate designs into code accurately. Product managers use it for feedback and sign-off. With the introduction of Figma AI, the platform now offers intelligent features like generating designs from text prompts, auto layout suggestions, and component recommendations — extending its lead as the most capable design tool available.

Ventajas

  • +Industry-standard collaboration with real-time multiplayer editing and live cursors
  • +Browser-based — works on Mac, Windows, and Linux with no installation required
  • +Powerful component system and design tokens for scalable design systems
  • +Dev Mode provides seamless developer handoff with code snippets and measurements
  • +Figma AI accelerates common design tasks with intelligent suggestions
  • +Extensive plugin ecosystem with thousands of community-built tools
  • +FigJam whiteboard included for brainstorming and planning
  • +Branching and merging brings version control to the design process

Desventajas

  • -Requires internet connection for full functionality and collaboration
  • -Performance can degrade with very large and complex design files
  • -Free tier limited to 3 design files and 3 FigJam files
  • -Significant learning curve for advanced features like auto layout, variants, and variables
  • -Not suited for print design, illustration, or content creation (use Canva or Adobe for those)
  • -Per-editor pricing on higher tiers can get expensive for large teams

Características principales

Real-Time Multiplayer Collaboration

Multiple designers, developers, and stakeholders can work simultaneously on the same file with live cursors, comments, and complete version history. No file conflicts, no manual merging — changes are instant and persistent.

Figma AI

Generate UI designs from text prompts, get intelligent auto layout suggestions, receive component recommendations from your design system, rename layers automatically, and summarize design files. AI accelerates common design tasks.

Interactive Prototyping

Create interactive prototypes with transitions, smart animate, conditional logic, and variables. Share clickable prototypes with stakeholders for feedback, user testing, and sign-off without leaving Figma.

Dev Mode (Design-to-Code)

Developer handoff mode provides ready-to-use code snippets (CSS, SwiftUI, Jetpack Compose), design tokens, spacing measurements, and exportable assets. Developers inspect designs and extract implementation details directly.

Component System & Design Systems

Build scalable design systems with reusable components, variants for different states (hover, active, disabled), auto layout for responsive behavior, and shared team libraries. Changes to components propagate across all instances.

Auto Layout

Create responsive designs that adapt to content changes. Auto layout handles padding, spacing, alignment, and resizing automatically — similar to CSS flexbox but visual. Essential for building consistent, scalable UI components.

Plugin Ecosystem

Access thousands of community-built plugins for icons, stock photos, accessibility checking, content generation, design linting, data population, and workflow automation. Extend Figma capabilities for any use case.

FigJam Whiteboard

Built-in collaborative whiteboard for brainstorming, user journey mapping, diagramming, sprint planning, and retrospectives. Integrates directly with design files for seamless workshop-to-design workflows.

Variables and Design Tokens

Define variables for colors, spacing, typography, and other values. Use modes for light/dark themes and responsive breakpoints. Export as design tokens for development handoff, ensuring design-development consistency.

Branching and Merging

Create branches to explore design alternatives without affecting the main file. Merge approved changes back when ready. Brings Git-like version control concepts to the design process.

¿Quién debería usarla?

Product UI/UX Design

Design web and mobile application interfaces with components, auto layout, and prototyping. Iterate rapidly with real-time feedback from stakeholders. Use Dev Mode to hand off pixel-perfect specifications to engineering teams.

Product designers, UI/UX designers, and design teams

Design System Management

Build and maintain organization-wide design systems with shared component libraries, design tokens, and documentation. Ensure consistency across products and teams with centralized, version-controlled design assets.

Design systems teams, enterprise design organizations, and frontend architects

Developer Handoff and Implementation

Developers use Dev Mode to inspect designs, copy code snippets (CSS, SwiftUI, Compose), measure spacing, and export assets. Variables and design tokens translate design decisions directly into development constants.

Frontend developers, mobile developers, and design engineers

Product Strategy and Planning

Use FigJam for brainstorming sessions, user journey mapping, sprint planning, and retrospectives. Create interactive prototypes for user testing and stakeholder demos. Gather feedback with comments and annotations.

Product managers, UX researchers, and cross-functional teams

Planes de precios

Free (Starter)

$0
  • 3 Figma design files
  • 3 FigJam whiteboard files
  • Unlimited collaborators on each file
  • Community plugins and templates
  • Mobile preview app
  • Basic prototyping
Recomendado

Professional

$15/month
  • Unlimited Figma and FigJam files
  • Shared team component libraries
  • Dev Mode for developer handoff
  • Advanced prototyping with variables
  • Branching and merging
  • Audio conversations
  • Custom file/project permissions

Organization

$45/month
  • All Professional features
  • Per editor pricing model
  • Organization-wide shared design systems
  • Centralized admin, billing, and reporting
  • Private plugins and widgets
  • SSO (SAML) authentication
  • Design system analytics

Enterprise

$75/month
  • All Organization features
  • Advanced admin and security controls
  • Dedicated workspaces
  • Guest access controls
  • REST API access
  • Role-based access controls (RBAC)
  • Dedicated support and onboarding

Comparativa

Figma vs Canva

Figma and Canva serve fundamentally different design needs. Figma is for product design — building application interfaces, design systems, and developer handoff. Canva is for content creation — social media posts, presentations, and marketing materials. They rarely compete directly.

Figma destaca en

  • +Industry standard for UI/UX and product interface design
  • +Component systems and design tokens enable scalable design at enterprise level
  • +Dev Mode provides developer handoff that Canva does not offer

Canva destaca en

  • +Canva is dramatically easier for non-designers to use
  • +Canva covers content types Figma does not (social media, video, print)
  • +Canva has a much larger template library for quick content creation

Figma vs Sketch

Figma and Sketch were long-time rivals, but Figma has largely won the market. Figma is browser-based and cross-platform; Sketch is Mac-only. Figma has built-in real-time collaboration; Sketch added it later. Most teams have migrated from Sketch to Figma.

Figma destaca en

  • +Browser-based and cross-platform (Mac, Windows, Linux)
  • +Built-in real-time collaboration with live cursors
  • +Free tier available vs Sketch requires paid license

Sketch destaca en

  • +Sketch has a slightly more performant rendering engine for very complex files
  • +Sketch native Mac integration can feel snappier for Mac-only teams
  • +Some Sketch plugins have no direct Figma equivalents

Figma vs Adobe XD

Adobe XD was Adobe attempt to compete with Figma in UI/UX design. Adobe has largely pivoted away from XD, directing users toward Figma (Adobe attempted to acquire Figma in 2022). Figma is now the clear winner in this category.

Figma destaca en

  • +Larger and more active community with better plugin ecosystem
  • +More frequent updates and feature development
  • +Industry-standard adoption means better collaboration across teams

Adobe XD destaca en

  • +Adobe XD users get tighter integration with other Adobe products
  • +XD included in some Creative Cloud plans at no extra cost
  • +XD offered some unique features like 3D transforms and voice prototyping

1. Getting Started with Figma

Sign up at figma.com — Figma runs entirely in the browser with no installation needed (a desktop app is optional). Create a new design file and explore the canvas. Use the toolbar to place frames (artboards), shapes, and text. Frames are the foundation: they represent screens, components, or sections. Start with a phone or desktop frame preset from the right panel to establish your design dimensions.

2. Building Reusable Components

Select a group of elements and press Ctrl/Cmd+Alt+K to create a component. Add variants for different states — hover, active, disabled, different sizes — by combining components with the variant property panel. Enable auto layout (Shift+A) to make components responsive. Drag component instances from the Assets panel and override text, images, and properties as needed. Changes to the main component automatically propagate to all instances.

3. Creating Interactive Prototypes

Switch to Prototype mode in the right panel. Draw connections between frames by clicking and dragging from interactive elements (buttons, links). Set triggers (click, hover, drag, keyboard), actions (navigate, overlay, scroll to), and animations (dissolve, smart animate, move in/out). Use variables for conditional logic and interactive states. Preview your prototype with the Play button and share it with stakeholders via a link.

4. Collaborating and Handing Off to Developers

Share your file by clicking Share and adding teammates by email with view or edit permissions. Use comments (press C) to give and receive contextual feedback on specific elements. For developer handoff, enable Dev Mode — engineers can inspect spacing, measurements, and padding; copy CSS, SwiftUI, or Jetpack Compose code; and export assets in any format and resolution they need.

Preguntas frecuentes

Yes. The Starter plan is free and includes 3 Figma design files, 3 FigJam whiteboard files, unlimited collaborators per file, and access to community plugins and templates. It is suitable for individuals and small personal projects.
The Figma desktop app caches recently opened files for limited offline viewing and editing. However, Figma is primarily a cloud-based tool and full functionality — collaboration, plugins, asset syncing — requires an internet connection.
Figma is browser-based, cross-platform (Mac, Windows, Linux), and has built-in real-time collaboration. Sketch is Mac-only with collaboration features added later. Figma has largely replaced Sketch as the industry standard for product design teams.
Yes. Dev Mode provides code snippets in CSS, iOS (SwiftUI), and Android (Jetpack Compose). Developers can inspect design token values, measure spacing and padding, and export assets in any format and resolution directly from design files.
Figma AI is a set of built-in AI features that generate UI designs from text prompts, suggest auto layouts, recommend components from your design system, rename layers automatically, and summarize design files. It speeds up routine design tasks.
Figma is optimized for screen design (web, mobile, UI). While you can export to PDF, it lacks print-specific features like CMYK color mode, bleed settings, and spot colors. Use Adobe InDesign or Illustrator for professional print work.
Dev Mode is a view in Figma designed for developers. It provides code snippets, design tokens, spacing measurements, and asset exports. Developers can switch to Dev Mode to inspect designs without accidentally modifying them. Available on Professional plans and above.
Yes. Figma excels at design systems with shared component libraries, variants, auto layout, and design tokens. Organization and Enterprise plans include organization-wide design system sharing, analytics, and governance features.
FigJam whiteboard files are included in all Figma plans. The Starter plan includes 3 FigJam files. Professional and higher plans include unlimited FigJam files. FigJam is designed for brainstorming, planning, and diagramming.
Yes. Figma can import .sketch files directly, converting layers, components, and styles into Figma equivalents. This has made it easy for teams to migrate from Sketch to Figma without rebuilding their design files.