Definicja #
Figma to oparte na przeglądarce narzędzie do projektowania interfejsów (UI) i doświadczeń użytkownika (UX), stworzone przez Figma Inc. (założone w 2012 roku; w 2022 roku Adobe ogłosiło przejęcie za 20 mld USD — transakcja ostatecznie zablokowana przez regulatorów UE i UK w 2023 roku). Figma działa w przeglądarce bez konieczności instalacji — pliki przechowywane są w chmurze.
Kluczowe funkcje Figmy:
- Wektory i ramki — precyzyjne projektowanie interfejsów z pikselową kontrolą
- Współpraca w czasie rzeczywistym — wielu użytkowników widzi zmiany na żywo (jak Google Docs, ale dla designu)
- Komponenty i warianty — biblioteki wielokrotnego użytku z systemami projektowania (Design System)
- Auto Layout — responsywne komponenty dostosowujące się do zawartości
- Prototypowanie — interaktywne przejścia między ekranami bez kodowania
- Dev Mode — inspekcja projektu przez deweloperów z dostępem do wymiarów, kolorów i kodu CSS/iOS/Android
- Figma AI — automatyczne generowanie komponentów i treści (od 2024)
Figma stała się standardem branżowym dla projektantów UX/UI, wypierając Sketch (macOS-only) i Adobe XD.
Zastosowania #
Figma stosuje się do:
- Projektowania interfejsów aplikacji webowych i mobilnych — wireframy, mockupy, hi-fi design
- Budowy Design Systemów — biblioteki komponentów, tokeny kolorów i typografii dla spójności produktu
- Prototypowania — interaktywne dema do testów użyteczności i prezentacji dla klientów
- Współpracy między designerami a deweloperami — Dev Mode pozwala programistom sprawdzić wymiary, spacingi i wyeksportować zasoby
- Projektowania UX — user flows, diagramy ścieżek użytkownika, wireframy niskiej wierności
Ścieżka nauki #
Figma jest stosunkowo intuicyjna — interfejs jest przyjazny nawet dla początkujących.
Zacznij od:
- Darmowe konto na figma.com — plan Free pozwala na 3 projekty
- Podstawy: ramki (frames), kształty, tekst, kolorowanie, wyrównywanie elementów
- Komponenty — tworzenie i wielokrotne użycie; różnica między komponentem a instancją
- Auto Layout — klucz do responsywnych, elastycznych komponentów
Następnie poznaj:
- Warianty komponentów — stany (hover, disabled, active) w jednym komponencie
- Prototypowanie — linki między ekranami, animacje przejść
- Zarządzanie Design Systemem — style, zmienne (Variables), biblioteki współdzielone
- Dev Mode — jak korzystać z Figmy jako deweloper (inspekcja, eksport, Figma API)
FAQ #
- Czy Figma jest darmowa?
- Figma oferuje plan Free z ograniczeniem do 3 projektów i 3 edytorów. Plan Starter (ok. 15 USD/miesiąc) i Professional (ok. 45 USD/miesiąc za edytora) usuwają te limity. Dla studentów i nauczycieli dostępny jest bezpłatny dostęp do planu Professional.
- Czym Figma różni się od Adobe XD?
- Figma działa w przeglądarce (bez instalacji), a jej główną zaletą jest współpraca w czasie rzeczywistym. Adobe XD był aplikacją desktopową z gorszą współpracą. Adobe XD jest oficjalnie wycofywane — Figma jest de facto standardem branżowym od 2022 roku.
- Czy programista musi umieć obsługiwać Figmę?
- Programista nie musi projektować w Figmie, ale powinien umieć korzystać z Dev Mode — przeglądać projekty, sprawdzać wymiary, style i eksportować assety. To znacznie poprawia współpracę z designerami.
- Ile zarabia projektant UX/UI znający Figmę?
- Figma to dziś podstawowe narzędzie projektantów UI/UX — brak jej znajomości jest dyskwalifikujący. Junior UX/UI Designer zarabia w Polsce od 6 000 do 10 000 zł brutto, mid od 10 000 do 16 000 zł, senior od 16 000 do 24 000 zł.