Figma

Figma

The industrie-standard collaboratif interface design plateforme. Navigateur-based with en temps réel multiplayer editing, component systems, prototyping, developer handoff via Dev Mode, and AI-powered comprend. Used by product design équipes worldwide for UI/UX design.

Free AvailableUI/UX DesignCollaborationPrototypingDesign-to-Code

Product Hunt Rating

4.92/5

Product Hunt Reviews

1,423

Fondé en

2012

Plugins Available

Thousands

Entreprise

Figma, Inc.

Introduction

Figma est devenu the undisputed industrie standard for UI/UX design, fundamentally changing how design équipes work by bringing en temps réel collaboration to the design process. Before Figma, designers worked in isolated bureau applications, emailing files back and forth and constantly dealing with version conflicts. Figma replaced that with a navigateur-based plateforme where entire équipes — designers, développeurs, product managers — work together simultaneously on le/la même file, with live cursors showing who is doing what.

Beyond collaboration, Figma propose a complete product design toolkit. Its component system lets équipes build and maintain scalable design systems with reusable components, variants for different states, and auto layout for responsive designs. Prototyping capacités let designers create interactif clickable prototypes with transitions and animations sans quitter the tool. Dev Mode bridges the design-to-développement gap by providing développeurs 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 équipes use it pour maintenir consistency across products with shared component libraries. Frontend développeurs use Dev Mode to translate designs into code précisly. Product managers use it for feedback and sign-off. With the introduction of Figma AI, the plateforme now propose intelligent comprend like generating designs from text prompts, auto layout suggestions, and component recommendations — extending its lead as le/la plus capable design tool disponible.

Avantages

  • +Industrie-standard collaboration with en temps réel multiplayer editing and live cursors
  • +Navigateur-based — fonctionne on Mac, Windows, and Linux sans installation required
  • +Puissant component system and design tokens for scalable design systems
  • +Dev Mode fournit transparent developer handoff with code snippets and measurements
  • +Figma AI accelerates common design tasks with intelligent suggestions
  • +Extensive plugin écosystème with thousands of communauté-built tools
  • +FigJam whiteboard included for brainstorming and planning
  • +Branching and merging brings version control to the design process

Inconvénients

  • -Nécessite internet connection for full functionality and collaboration
  • -Performance can degrade with very large and complex design files
  • -Offre gratuite limited to 3 design files and 3 FigJam files
  • -Significant learning curve for avancé comprend like auto layout, variants, and variables
  • -Not suited for print design, illustration, or création de contenu (use Canva or Adobe for those)
  • -Per-éditeur tarification on higher tiers can get expensive for large équipes

Fonctionnalités clés

En temps réel Multiplayer Collaboration

Multiple designers, développeurs, and stakeholders can work simultaneously on le/la même 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.

Interactif Prototyping

Create interactif prototypes with transitions, smart animate, conditional logic, and variables. Share clickable prototypes with stakeholders for feedback, user testing, and sign-off sans quitter Figma.

Dev Mode (Design-to-Code)

Developer handoff mode fournit ready-to-use code snippets (CSS, SwiftUI, Jetpack Compose), design tokens, spacing measurements, and exportable assets. Développeurs 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 sur tous les instances.

Auto Layout

Create responsive designs that adapt to content changes. Auto layout gère padding, spacing, alignment, and resizing automatically — similar to CSS flexbox but visual. Essentiel pour building cohérent, scalable UI components.

Plugin Écosystème

Access thousands of communauté-built plugins for icons, stock photos, accessibility checking, content génération, design linting, data population, and flux de travail automatisation. Extend Figma capacités for any cas d'utilisation.

FigJam Whiteboard

Built-in collaboratif whiteboard for brainstorming, user journey mapping, diagramming, sprint planning, and retrospectives. Intègre directly with design files for transparent fonctionnehop-to-design flux de travails.

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 développement handoff, ensuring design-développement 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 s'adresse-t-il

Product UI/UX Design

Design web and mobile application interfaces with components, auto layout, and prototyping. Iterate rapidly with en temps réel feedback from stakeholders. Use Dev Mode to hand off pixel-perfect specifications to engineering équipes.

Product designers, UI/UX designers, and design équipes

Design System Management

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

Design systems équipes, enterprise design organisations, and frontend architects

Developer Handoff and Implementation

Développeurs 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 développement constants.

Frontend développeurs, mobile développeurs, and design engineers

Product Strategy and Planning

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

Product managers, UX chercheurs, and cross-functional équipes

Plans tarifaires

Free (Starter)

$0
  • 3 Figma design files
  • 3 FigJam whiteboard files
  • Illimité collaborators on each file
  • Communauté plugins and modèles
  • Mobile preview app
  • Basic prototyping
Recommandé

Professional

$15/mois
  • Illimité Figma and FigJam files
  • Shared team component libraries
  • Dev Mode for developer handoff
  • Avancé prototyping with variables
  • Branching and merging
  • Audio conversations
  • Custom file/projet permissions

Organization

$45/mois
  • All Professionnel comprend
  • Per éditeur tarification model
  • Organization-wide shared design systems
  • Centralized admin, billing, and reporting
  • Private plugins and widgets
  • SSO (SAML) authentification
  • Design system analytics

Enterprise

$75/mois
  • All Organization comprend
  • Avancé admin and sécurité controls
  • Dedicated fonctionnepaces
  • Guest access controls
  • REST Accès API
  • Role-based access controls (RBAC)
  • Support dédié and onboarding

Comparatif

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 création de contenu — social media posts, presentations, and marketing materials. They rarely compete directly.

Figma excelle dans

  • +Industrie standard for UI/UX and product interface design
  • +Component systems and design tokens enable scalable design at enterprise level
  • +Dev Mode fournit developer handoff that Canva ne ... pas offer

Canva excelle dans

  • +Canva is dramatically easier for non-designers pour utiliser
  • +Canva covers content types Figma ne ... pas (social media, video, print)
  • +Canva has a much larger modèle library for quick création de contenu

Figma vs Sketch

Figma and Sketch were long-time rivals, but Figma has largely won the market. Figma is navigateur-based and cross-plateforme; Sketch is Mac-only. Figma has built-in en temps réel collaboration; Sketch added it later. Most équipes have migrated from Sketch to Figma.

Figma excelle dans

  • +Navigateur-based and cross-plateforme (Mac, Windows, Linux)
  • +Built-in en temps réel collaboration with live cursors
  • +Offre gratuite disponible vs Sketch nécessite paid license

Sketch excelle dans

  • +Sketch has a slightly more performant rendering engine for very complex files
  • +Sketch native Mac intégration can feel snappier for Mac-only équipes
  • +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 utilisateurs toward Figma (Adobe attempted to acquire Figma in 2022). Figma is now the clear winner in this category.

Figma excelle dans

  • +Larger and more active communauté with better plugin écosystème
  • +More frequent updates and feature développement
  • +Industrie-standard adoption means better collaboration across équipes

Adobe XD excelle dans

  • +Adobe XD utilisateurs get tighter intégration with other Adobe products
  • +XD included in some Créatif Cloud plans at no extra cost
  • +XD offered some unique comprend like 3D transforme and voice prototyping

1. Pour commencer with Figma

S'inscrire at figma.com — Figma fonctionne entirely in the navigateur sans installation needed (a bureau 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 bureau 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 pour créer 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) pour rendre 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 Interactif Prototypes

Switch to Prototype mode in the right panel. Draw connections between frames by clicking and dragging from interactif 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 interactif states. Preview your prototype with the Play button and share it with stakeholders via a link.

4. Collaborating and Handing Off to Développeurs

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 résolution they need.

Questions fréquentes

Yes. The Starter plan is free and inclut 3 Figma design files, 3 FigJam whiteboard files, illimité collaborators per file, and access to communauté plugins and modèles. It is adapté pour individuals and small personal projets.
The Figma bureau app caches recently opened files for limited offline viewing and editing. Cependant, Figma is primarily a basé dans le cloud tool and full functionality — collaboration, plugins, asset syncing — nécessite an internet connection.
Figma is navigateur-based, cross-plateforme (Mac, Windows, Linux), and has built-in en temps réel collaboration. Sketch is Mac-only with collaboration comprend added later. Figma has largely replaced Sketch as the industrie standard for product design équipes.
Yes. Dev Mode fournit code snippets in CSS, iOS (SwiftUI), and Android (Jetpack Compose). Développeurs can inspect design token values, measure spacing and padding, and export assets in any format and résolution directly from design files.
Figma AI is un ensemble de built-in AI comprend 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 est optimisé for screen design (web, mobile, UI). While vous pouvez export to PDF, it lacks print-specific comprend like CMYK color mode, bleed paramètres, and spot colors. Use Adobe InDesign or Illustrator for professionnel print work.
Dev Mode is a view in Figma conçu pour développeurs. It fournit code snippets, design tokens, spacing measurements, and asset exporte. Développeurs can switch to Dev Mode to inspect designs without accidentally modifying them. Disponible on Professionnel 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 comprend.
FigJam whiteboard files are included in all Figma plans. The Starter plan inclut 3 FigJam files. Professionnel and higher plans include illimité FigJam files. FigJam est conçu 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 équipes to migrate from Sketch to Figma without rebuilding their design files.