Moduł 1 · Pierwsze kroki w Figmie
Interfejs Figmy: plany, okno programu i nawigacja
Po tej lekcji założysz pierwszy plik Figma Design, rozpoznasz pięć obszarów okna programu i będziesz poruszać się po obszarze roboczym skrótami zamiast myszką. Dowiesz się też, co daje darmowy plan Starter, a czego w nim nie ma.
Przez cały kurs projektujemy dla fikcyjnej polskiej firmy: Studio jogi Oddech z Poznania. Właścicielka, Marta, chce stronę z grafikiem zajęć i aplikację do rezerwacji. Zaczynamy od pustego pliku.
Figma, plany i rodzaje miejsc (seats)
Figma to kilka produktów pod jednym kontem. W tym kursie pracujesz głównie w Figma Design — narzędziu do projektowania i prototypowania stron, aplikacji i innych produktów cyfrowych. Obok są m.in. FigJam (tablica do warsztatów), Figma Slides (prezentacje), Figma Draw (ilustracja wewnątrz pliku Design), Figma Make (aplikacje i prototypy z poleceń AI) oraz Figma Sites i Figma Buzz, które pomoc Figmy oznacza jako wersje beta.
Figma działa w przeglądarce (Chrome, Firefox, Safari, Edge), więc uruchomisz ją na Windows, macOS, Linuksie i ChromeOS. Aplikacja desktopowa istnieje tylko dla macOS i Windows; jej przewaga to m.in. dostęp do fontów zainstalowanych w systemie bez osobnego instalatora fontów.
Plan Starter jest bezpłatny i wystarczy do większości ćwiczeń z modułów 1–3. Ma jednak limity, które warto znać od pierwszego dnia:
- jeden folder (zespołu), a w nim najwyżej 3 pliki Figma Design i Figma Sites łącznie, 3 pliki FigJam i 3 pliki Slides;
- dowolna liczba szkiców (drafts) — plików, których nie przeniesiono do folderu;
- historia wersji tylko z 30 dni, brak bibliotek zespołu (team libraries);
- brak Dev Mode — w module 4 zobaczysz go na planie płatnym albo przez opis w lekcji.
W planach płatnych (Professional, Organization, Enterprise) każda osoba ma jedno miejsce: Full, Dev, Collab albo View. Tylko Full pozwala edytować pliki Figma Design; Dev daje pełny Dev Mode bez edycji projektu; View jest bezpłatne i pozwala oglądać oraz komentować. Aktualne ceny miejsc Figma podaje na stronie figma.com/pricing — sprawdź je tam przed zakupem, bo zmieniają się częściej niż funkcje.
Pięć obszarów pliku Figma Design
Po otwarciu nowego pliku zobaczysz pięć stref. Stan na październik 2026: po lewej stronie jest nowy pasek nawigacji (navigation bar), który zastąpił dawne zakładki w lewym panelu.
Na podstawie artykułów pomocy Figma o pasku nawigacji i pasku narzędzi, stan na październik 2026.
Najważniejsze zakładki paska nawigacji:
- File (Alt+1 / Option+1) — strony i warstwy pliku, wyszukiwanie (Find) i zamiana tekstu.
- Assets (Alt+2 / Option+2) — komponenty z pliku i z dodanych bibliotek; Alt+3 / Option+3 otwiera okno bibliotek.
- Tools — wtyczki (plugins), widżety, shadery i narzędzia Weave.
- Agents — czat z agentem Figma (funkcja AI; wrócimy do niej w module 5).
W pasku narzędzi menu Actions (Ctrl+K w Windows, Cmd+K na Macu) to wyszukiwarka poleceń: wpisz „align”, a dostaniesz wszystkie polecenia wyrównywania. To najszybszy sposób, gdy nie pamiętasz, gdzie jest dana opcja.
Poruszanie się po obszarze roboczym
Nie musisz znać stu skrótów. Wystarczy kilka, które działają w każdej sytuacji:
| Czynność | Windows | macOS |
|---|---|---|
| Tymczasowa „rączka” (przesuwanie widoku) | przytrzymaj spację i przeciągnij | to samo |
| Powiększ / pomniejsz | Ctrl + plus / minus | Cmd + plus / minus |
| Pokaż wszystko na stronie | Shift+1 | Shift+1 |
| Powiększ do zaznaczenia | Shift+2 | Shift+2 |
| Schowaj panele | Ctrl+Shift+\ | Cmd+Shift+\ |
| Lista skrótów | wpisz „Keyboard shortcuts” w Actions | to samo |
Zaznaczanie: kliknięcie zaznacza warstwę, Shift+klik dodaje kolejną. Gdy zaznaczysz ramkę, Enter schodzi do jej pierwszego elementu, Shift+Enter wraca do rodzica, a Tab przechodzi do następnego elementu na tym samym poziomie. Te trzy klawisze oszczędzają mnóstwo klikania w gęstych projektach.
Pierwszy plik: strony i nazwy
Każdy plik ma co najmniej jedną stronę (page), a każda strona ma własny obszar roboczy. Pomoc Figmy radzi m.in. tworzyć osobne strony dla etapów pracy i osobną stronę na komponenty. Dla studia Oddech przyjmij od razu taki układ:
- „Inspiracje” — zrzuty stron innych studiów, notatki z rozmowy z Martą.
- „Szkice” — makiety szare, bez kolorów.
- „Projekt” — finalne ekrany.
- „Komponenty” — przyciski, karty zajęć, nagłówki.
Nazwę pliku zmienisz w zakładce File (menu obok nazwy pliku). Zmiany zapisują się automatycznie, a w menu pliku znajdziesz historię wersji.
Najważniejsze w 3 punktach
- Figma Design działa w przeglądarce na każdym systemie; aplikacja desktopowa jest dla macOS i Windows, a plan Starter ma limity plików, 30 dni historii i nie ma Dev Mode.
- Okno ma pięć obszarów: pasek nawigacji (File, Assets, Tools, Agents), lewy panel, pasek narzędzi, obszar roboczy i prawy panel właściwości.
- Shift+1, Shift+2, spacja z przeciąganiem i Actions (Ctrl/Cmd+K) wystarczą, żeby sprawnie poruszać się po każdym pliku.
Źródła
- Figma Learn: What is Figma? — https://help.figma.com/hc/en-us/articles/14563969806359 (dostęp: październik 2026)
- Figma Learn: Starter plan overview — https://help.figma.com/hc/en-us/articles/13838684089751
- Figma Learn: Compare and manage seats in Figma — https://help.figma.com/hc/en-us/articles/360039960434
- Figma Learn: Explore the navigation bar and left sidebar — https://help.figma.com/hc/en-us/articles/360039831974
- Figma Learn: Access design tools from the toolbar — https://help.figma.com/hc/en-us/articles/360041064174
- Figma Learn: Adjust your zoom and view options — https://help.figma.com/hc/en-us/articles/360041065034
- Figma Learn: Use the actions menu in Figma Design — https://help.figma.com/hc/en-us/articles/23570416033943
- Figma Learn: Create and manage pages — https://help.figma.com/hc/en-us/articles/360038511293
- Figma Learn: What are the system requirements for Figma? — https://help.figma.com/hc/en-us/articles/360039827194
- Figma Learn: Guide to the Figma desktop app — https://help.figma.com/hc/en-us/articles/5601429983767