Figma pozwala przejść od pustego obszaru roboczego do klikalnego prototypu w jednym pliku. Na początek zapamiętaj prosty schemat: tworzysz Frame, projektujesz jego zawartość w karcie Design, a następnie łączysz ramki w karcie Prototype.
Jak poruszać się po interfejsie Figma?
Figma działa w przeglądarce, a pliki są przechowywane w chmurze. Dzięki temu możesz pracować nad projektem z różnych urządzeń i łatwo udostępniać go innym osobom. Główną przestrzenią pracy jest Canvas, czyli obszar, na którym układasz ramki, teksty, kształty i inne elementy.
Po prawej stronie znajduje się panel właściwości. Jego zawartość zmienia się zależnie od zaznaczonego obiektu oraz wybranej karty. Na początku najważniejsze są dwie z nich:
| Funkcja | Karta Design (Projekt) | Karta Prototype (Prototyp) |
|---|---|---|
| Główne zastosowanie | Tworzenie wyglądu interfejsu | Definiowanie zachowania i przejść |
| Najważniejsze ustawienia | Kolor, rozmiar, odstępy, typografia i położenie | Wyzwalacz, operacja, miejsce docelowe i animacja |
| Rezultat pracy | Statyczny ekran projektu | Interaktywny przepływ między ekranami |
Frame to podstawowy kontener projektu. Może przedstawiać ekran telefonu, widok strony internetowej albo dowolny obszar interfejsu. W przeciwieństwie do zwykłej grupy Frame może pełnić funkcję ekranu w prototypie.
Jak stworzyć pierwszy projekt w Figma?
Najłatwiej zacząć od prostego ekranu, na przykład strony logowania lub widoku startowego aplikacji. Wykonaj następujące kroki:
- Wybierz narzędzie Frame z paska narzędzi albo użyj skrótu F. Wybierz gotowy rozmiar urządzenia lub narysuj własną ramkę na Canvasie.
- Dodaj podstawowe elementy, takie jak prostokąt, elipsa i tekst. Narzędzie tekstowe uruchomisz skrótem T, a kształt prostokąta skrótem R.
- Zaznacz element i przejdź do karty Design. W prawym panelu ustaw jego wymiary, położenie, kolor wypełnienia, obramowanie, zaokrąglenie narożników oraz cień, jeśli jest potrzebny.
- Ułóż elementy wewnątrz ramki i sprawdź hierarchię warstw. Nazwy takie jak „Nagłówek”, „Przycisk” czy „Ekran startowy” ułatwią późniejszą pracę.
Na tym etapie nie musisz budować kompletnego systemu wizualnego. Wystarczy jeden ekran z przyciskiem oraz druga ramka, która będzie widokiem po kliknięciu. Najpierw dopracuj wygląd w karcie Design, dopiero potem przejdź do zachowania prototypu.
Przeczytaj również: Prototypowanie w Figma – jak zacząć tworzyć interaktywne projekty?
Jak połączyć ekrany w prototyp?
Prototyp składa się z ramek i połączeń. Połączone ramki tworzą Flow, czyli ścieżkę, po której użytkownik porusza się podczas testowania projektu. Każda interakcja ma wyzwalacz, operację i miejsce docelowe. W prostym przykładzie wyzwalaczem będzie kliknięcie przycisku, operacją przejście do innej ramki, a miejscem docelowym drugi ekran.
Skonfiguruj pierwszy przepływ w ten sposób:
- Zaznacz ramkę, od której ma zaczynać się prezentacja, i w karcie Prototype ustaw punkt początkowy przepływu. Figma może również utworzyć go automatycznie po dodaniu pierwszego połączenia.
- Zaznacz przycisk lub inny element, który ma reagować na działanie użytkownika. Kliknij ikonę połączenia i przeciągnij ją do drugiej ramki.
- W panelu Interaction wybierz wyzwalacz On click lub On tap, a jako operację ustaw przejście do wskazanej ramki. Możesz też wybrać rodzaj animacji i jej czas trwania.
Miejscem docelowym połączenia musi być ramka najwyższego poziomu, dodana bezpośrednio do Canvasu. Nie wskażesz jako celu pojedynczego tekstu, przycisku ani kształtu zagnieżdżonego w innej ramce.
Uwaga: Przy większej liczbie ekranów łatwo stworzyć plątaninę połączeń. Układaj ramki w logicznym porządku, zostawiaj między nimi wolne miejsce i grupuj ekrany należące do tego samego przepływu. Dzięki temu późniejsze poprawki nie zamienią prototypu w trudną do odczytania sieć linii.
Sprawdź także: Figma animation – jak tworzyć płynne przejścia i interakcje?
Uruchom podgląd prototypu, aby sprawdzić, czy kliknięcie prowadzi do właściwego ekranu. Na początku wystarczy jedna interakcja typu On click. Nakładki, zmienne i bardziej złożone animacje zostaw na później.
Jak pracować szybciej?
Kilka skrótów wystarczy, aby ograniczyć przełączanie między narzędziami i panelami:
- Shift + E – przełączanie między kartami Design i Prototype.
- Cmd/Ctrl + D – duplikowanie zaznaczonego elementu.
- Cmd/Ctrl + Z – cofnięcie ostatniej czynności.
- F – wybranie narzędzia Frame.
- T – dodanie warstwy tekstowej.
Warto też korzystać z wielokrotnego zaznaczania, aby jednocześnie przesuwać lub duplikować kilka elementów. Przyciski i powtarzalne karty możesz później zamieniać w komponenty, ale na pierwszym ekranie skup się na poznaniu podstawowego przepływu pracy.
Zobacz także: Shadcn Figma – jak korzystać z komponentów w projektowaniu?
Co poznawać dalej?
Gdy potrafisz stworzyć dwie ramki i połączyć je w działający prototyp, masz podstawę do dalszej nauki. Przykłady plików i szablony znajdziesz w Figma Community, gdzie możesz analizować gotowe układy zamiast zaczynać za każdym razem z pustego Canvasu.
Najbliższy plan nauki może wyglądać tak:
- Komponenty – tworzenie elementów, które można wielokrotnie wykorzystywać.
- Auto Layout – układanie elementów, które dopasowują się do zawartości.
- Variables – przechowywanie wartości używanych w bardziej dynamicznych prototypach.
Zacznij od małego projektu: jeden ekran startowy, jeden przycisk i jeden ekran docelowy. Taki zakres wystarczy, aby przećwiczyć pełny proces od Frame przez projektowanie w Design do interakcji w Prototype.
