Figma

Tools

Figma ist das führende Design-Tool für UI/UX-Designer — browserbasiert, kollaborativ und mit erstklassigem Developer-Handoff für nahtlose Design-to-Code-Workflows.

Figma hat Adobe XD und Sketch als Standard-Tool für UI-Design abgelöst. Echtzeit-Kollaboration ermöglicht Design-Reviews direkt im Browser ohne File-Sharing. Auto-Layout und Komponenten-Systeme beschleunigen konsistentes Design. Figma-Dev-Mode exportiert CSS, iOS- und Android-Code direkt aus Designs.

Visit Website

Figma bei SW Business Solutions

Figma ist unser primäres Design-Tool für UI/UX-Design, Prototyping und Design-System-Entwicklung. Wir nutzen Figma für alle Projekte, die professionelle Designs vor der Entwicklung erfordern.

Einsatz in Kundenprojekten

UI-Design: Pixel-perfekte Designs für Web- und Mobile-Projekte
Design-Systeme: Komponentenbibliotheken mit Tokens für konsistente Designs
Prototyping: Interaktive Prototypen für Usability-Tests und Stakeholder-Reviews
Dev-Handoff: Figma-Inspekt mit exakten CSS-Werten, Spacing und Assets
Kollaboration: Mehrere Designer und Entwickler arbeiten gleichzeitig im selben File

Warum Figma?

Browser-basiert: Kein Install - öffnet direkt im Browser, funktioniert auf Mac und Windows
Real-time-Kollaboration: Mehrere Personen sehen Änderungen sofort - wie Google Docs für Design
Dev Mode: Entwickler sehen CSS-Properties, exportieren Assets und messen Abstände
Auto Layout: Responsive Designs direkt in Figma
Community: Tausende kostenloser Templates und Icon-Sets

Typische Projektkombinationen

Kombination	Anwendungsfall
Figma + Next.js	Design-to-Code mit präzisen Specs
Figma + Tailwind CSS	Figma-Tokens zu Tailwind-Config
Figma + Wireframing	Lo-Fi zu Hi-Fi in einem Tool
Figma + shadcn/ui	Design-System-Alignment

Technical Details

Figma nutzt WebAssembly für performantes Vektor-Rendering im Browser. Komponenten und Varianten ermöglichen Design-Systeme mit Tokens. Plugins erweitern Figma um Funktionen wie Icons, Mockups und Barrierefreiheitsprüfungen. FigJam ist Figmas Whiteboard für Design-Thinking und Retrospektiven.

Why Figma?

Echtzeit-Kollaboration im Browser

Dev-Mode für direkten CSS/Code-Export

Komponenten-Systeme für konsistente Design-Sprache

Umfangreiche Plugin-Bibliothek

Kostenfrei für einzelne Designer

Nahtloser Design-to-Development-Handoff

Use Cases for Figma

UI/UX Design

Design web and app interfaces from wireframe to finished high-fidelity prototype.

Design System Management

Component libraries, design tokens and style guides for consistent product UX.

Developer Handoff

Transfer CSS values, spacing and assets directly to developers via Figma Dev Mode.

Collaborative Design

Real-time collaboration of design teams and stakeholder reviews directly in the browser.

Works well with

Frequently Asked Questions about Figma

Figma oder Adobe XD?

Figma hat Adobe XD als Industry-Standard abgelöst — Adobe stellte XD 2023 ein. Figma's Browser-basierter Ansatz, Echtzeit-Kollaboration und aktive Entwicklung machen es zur klaren Wahl für neue Projekte.

Wie funktioniert der Design-to-Code-Workflow mit Figma?

Dev Mode zeigt CSS-Eigenschaften und Assets direkt an. Figma-Plugins wie Anima generieren Code automatisch. Design Tokens können als JSON exportiert werden für Style-Dictionary. Für React: Locofy.ai oder Builder.io als Code-Generatoren.

Was sind Auto Layout und Components?

Auto Layout ist Figmas Flexbox — Elemente werden automatisch ausgerichtet und skalieren responsiv. Components sind wiederverwendbare UI-Bausteine mit Varianten für verschiedene Zustände. Zusammen bilden sie die Basis für Design Systems.

Figma Free vs Professional?

Free-Plan: 3 Figma-Dateien, unbegrenzte FigJam-Dateien, max. 2 Editoren. Professional: 15$/Monat, unbegrenzte Projekte und Editoren, Team Libraries. Für professionelle Teams ist Professional unverzichtbar.