Figma to przeglądarkowe narzędzie do projektowania interfejsów użytkownika. Pozwala na real-time collaboration — cały zespół (designerzy, developerzy, PM) pracuje na jednym pliku jednocześnie. Figma zastąpiła Sketch i Adobe XD jako standard branży.
Figma oferuje: projektowanie UI, prototypowanie interaktywne, design systems z komponentami i zmiennymi, Dev Mode dla developerów, FigJam do brainstormingu i Figma Slides do prezentacji.
📁 Design System
├── 🎨 Foundations
│ ├── Colors (semantic tokens)
│ ├── Typography (scale + styles)
│ ├── Spacing (4px grid)
│ ├── Shadows & Elevation
│ └── Border Radius
├── 🧩 Components
│ ├── Button (primary, secondary, ghost)
│ ├── Input (text, select, textarea)
│ ├── Card (product, user, stat)
│ ├── Modal, Dialog, Sheet
│ ├── Navigation (header, sidebar, tabs)
│ └── Data Display (table, list, chart)
├── 📐 Patterns
│ ├── Forms (login, register, checkout)
│ ├── Dashboards (analytics, admin)
│ └── Empty States & Errors
└── 📱 Templates
├── Mobile (iOS, Android)
├── Tablet
└── Desktop
/* Figma Dev Mode → CSS */
.card {
display: flex;
flex-direction: column;
padding: 24px;
gap: 16px;
border-radius: 16px;
background: var(--surface-primary);
border: 1px solid var(--border-subtle);
box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
/* Spacing tokens → Tailwind config */
spacing: {
'xs': '4px', // Figma: Spacing/XS
'sm': '8px', // Figma: Spacing/SM
'md': '16px', // Figma: Spacing/MD
'lg': '24px', // Figma: Spacing/LG
'xl': '32px', // Figma: Spacing/XL
}
Wektory, auto layout, constraints, gridy. Pixel-perfect design na każdą rozdzielczość.
Interaktywne prototypy. Transitions, smart animate, conditional logic, variables.
Komponenty, warianty, zmienne (variables), style. Single source of truth.
CSS, iOS, Android code snippets. Spacing, colors, typography — gotowe do implementacji.
Iconify, Unsplash, Content Reel, Stark (accessibility). 1000+ pluginów.
Whiteboard do brainstormingu, user flows, journey maps, retrospektyw.
Zawsze. Figma to standard branży. Używamy Figma w każdym projekcie — od discovery i wireframes, przez design system, po prototypy i handoff do developerów.
Figma jest darmowa dla małych zespołów (do 3 projektów). Professional plan od $15/miesiąc za edytora.