Figma dla początkujących: pierwszy prototyp aplikacji krok po kroku

Otwierasz Figmę, widzisz pustą, nieskończoną kanwę i nie wiesz, od czego zacząć? To normalne. Większość osób na początku rysuje pojedyncze ekrany „na oko”, a dopiero później odkrywa, że poprawienie jednego przycisku oznacza ręczną zmianę w dwudziestu miejscach. Dobra wiadomość: kilka podstawowych nawyków oszczędza ten ból od pierwszego dnia.

Ten poradnik to praktyczna wersja tematu Figma dla początkujących. Przejdziemy drogę od pustego pliku do klikalnego prototypu aplikacji mobilnej, który możesz pokazać klientowi lub zespołowi.

Figma dla początkujących: zacznij od planu, nie od rysowania

Zanim narysujesz pierwszy prostokąt, odpowiedz na trzy pytania:

• Kto będzie używał aplikacji? Jedno zdanie wystarczy, np. „pracownik biura zamawiający lunch w drodze do pracy”.
• Jaki jest główny cel użytkownika? Prototyp ma pokazać jedną kluczową ścieżkę, a nie wszystkie funkcje naraz.
• Z ilu ekranów składa się ta ścieżka? Na pierwszy prototyp wystarczy 4–6 ekranów.

Weźmy przykład: aplikacja do zamawiania lunchów w biurze. Ścieżka może wyglądać tak: ekran startowy z listą dań → szczegóły dania → koszyk → potwierdzenie zamówienia. To cztery ekrany i jeden jasny scenariusz.

Warto też naszkicować je na kartce. Nie chodzi o ładny rysunek, tylko o ustalenie, co jest na którym ekranie. Dzięki temu w Figmie od razu budujesz, zamiast improwizować.

Ramki, siatki i odstępy – fundament każdego ekranu

Ramki (Frames) zamiast luźnych kształtów

Ekran w Figmie to ramka. Wybierz narzędzie Frame (skrót F) i w panelu po prawej wskaż gotowy rozmiar urządzenia, np. popularny telefon. Każdy ekran aplikacji powinien mieć tę samą wielkość, bo później łatwiej połączysz je w prototyp i uniknie się „skaczących” elementów.

Ramki mogą się zagnieżdżać. Cały ekran to ramka, a w środku są mniejsze ramki: nagłówek, lista, dolna nawigacja. Takie porządkowanie przydaje się potem przy zmianach układu.

Siatka układu (Layout Grid)

Do ramki możesz dodać siatkę kolumn. Dla ekranu mobilnego często stosuje się 4 kolumny z równymi marginesami po bokach. Siatka sprawia, że elementy są równo wyrównane, a projekt wygląda spójnie, nawet jeśli jesteś na początku drogi.

Przy odstępach trzymaj się jednej skali, np. wielokrotności 8 (8, 16, 24, 32). Gdy każdy odstęp ma swoje uzasadnienie, ekrany wyglądają profesjonalniej bez dodatkowego wysiłku.

Auto Layout – układ, który sam się dopasowuje

To jedna z najważniejszych funkcji Figmy. Zaznacz elementy i użyj skrótu Shift + A, a Figma ułoży je w rzędzie lub kolumnie z zadanym odstępem. Gdy zmienisz tekst na przycisku, jego rozmiar dopasuje się automatycznie. Na liście dań dodanie nowej pozycji nie wymaga ręcznego przesuwania reszty.

Komponenty i style – projektuj raz, używaj wielokrotnie

Przycisk „Dodaj do koszyka” pojawi się w Twojej aplikacji wielokrotnie. Zamiast kopiować go ręcznie, zamień go w komponent (zaznacz element i użyj skrótu Ctrl/Cmd + Alt + K). Od tej pory każda kopia to instancja głównego komponentu: zmieniasz oryginał, a zmiana przenosi się na wszystkie ekrany.

Warianty komponentów

Przycisk ma zwykle kilka stanów: aktywny, nieaktywny, wciśnięty. Zamiast tworzyć osobne elementy, zbierz je jako warianty jednego komponentu. Później przełączasz stan jednym kliknięciem w panelu właściwości, a w prototypie możesz między nimi animować przejścia.

Style i zmienne

Kolory, fonty i efekty zapisz jako style, a wartości takie jak kolory marki czy odstępy możesz porządkować za pomocą zmiennych. Zyskujesz dwie rzeczy: spójność i szybką zmianę. Gdy klient napisze „a może jednak ciemniejszy zielony?”, poprawiasz jedną wartość, a nie przeklikujesz cały projekt.

Na początek zbuduj mały zestaw:

• przycisk główny i drugorzędny,
• pole tekstowe,
• karta dania (zdjęcie, nazwa, cena),
• pasek nawigacji dolnej,
• nagłówek ekranu.

To wystarczy, żeby złożyć wszystkie ekrany przykładowej aplikacji. Nadaj komponentom czytelne nazwy, np. Button/Primary, bo po tygodniu pracy docenisz porządek w panelu zasobów.

Prototypowanie w Figmie: z ekranów robisz klikalną aplikację

Gdy ekrany są gotowe, przełącz się w panelu po prawej z zakładki Design na Prototype. Tutaj ekrany zamieniają się w interaktywne doświadczenie.

1. Wybierz element, który ma być klikalny, np. kartę dania.
2. Przeciągnij niebieski uchwyt na ramkę docelową, np. ekran szczegółów.
3. Ustaw wyzwalacz i akcję: najczęściej „On click” oraz „Navigate to”.
4. Wybierz animację, np. przesunięcie w bok albo Smart Animate, która płynnie animuje zmiany między podobnymi elementami.
5. Wskaż punkt startowy (flow), aby prototyp zaczynał się od właściwego ekranu.

Uruchom podgląd przyciskiem Present i przejdź całą ścieżkę tak, jakbyś był użytkownikiem. Sprawdź, czy każdy przycisk prowadzi tam, gdzie powinien, czy da się wrócić do poprzedniego ekranu i czy nie ma „ślepych uliczek”.

Najczęstsze błędy początkujących

• Za dużo ekranów na start. Lepiej mieć dopracowaną jedną ścieżkę niż dziesięć szkiców.
• Brak powrotu. Użytkownik musi umieć się cofnąć.
• Różne rozmiary ramek. Przez to prototyp „skacze” w podglądzie.
• Elementy poza siatką. Drobne przesunięcia razem tworzą wrażenie bałaganu.
• Brak nazw warstw i ekranów. Przy dłuższej pracy zaczyna to naprawdę przeszkadzać.

Udostępnianie prototypu klientowi i zbieranie uwag

Prototyp ma sens dopiero wtedy, gdy ktoś go zobaczy. Figma działa w przeglądarce, więc nie musisz wysyłać plików ani instalować dodatkowych programów u odbiorcy.

1. Uporządkuj plik. Nazwij strony i ramki, usuń niepotrzebne szkice albo przenieś je na osobną stronę.
2. Ustaw okładkę i punkt startowy, żeby klient od razu zobaczył właściwy ekran.
3. Kliknij Share i wybierz uprawnienia. Do samego oglądania wystarczy dostęp „can view”, do współpracy możesz nadać możliwość komentowania lub edycji.
4. Wyślij link do prototypu razem z krótką instrukcją: co klient ma sprawdzić i do kiedy odesłać uwagi.
5. Zbieraj komentarze w pliku. Uwagi przypięte do konkretnych miejsc na ekranie są dużo czytelniejsze niż opisowe e-maile.

Dobrą praktyką jest prowadzenie jednej wersji prototypu „do akceptacji” i oddzielnej strony roboczej. Dzięki temu klient nie widzi niedokończonych pomysłów, a Ty możesz spokojnie poprawiać kolejne wersje.

Co dalej? Figma i AI w praktyce

Gdy opanujesz podstawy, kolejnym krokiem jest przyspieszenie pracy. Narzędzia sztucznej inteligencji pomagają przy pomysłach na układ, treściach w makietach czy porządkowaniu projektu, ale nie zastąpią znajomości zasad, o których pisaliśmy wyżej. Najlepsze efekty daje połączenie obu rzeczy: solidne podstawy w Figmie plus mądre wsparcie AI.

Jeśli wolisz uczyć się z prowadzącym zamiast samodzielnie szukać odpowiedzi w tutorialach, sprawdź szkolenie Figma + sztuczna inteligencja (AI). Szkolenia w Akademii Komputerowej odbywają się w formule 1 do 1, czyli indywidualnie, więc tempo i przykłady możesz dopasować do własnych potrzeb.

Jak wygląda szkolenie

• Czas: 14 godzin zegarowych, 2 dni, w godzinach 8:30–15:15.
• Online: 2500 zł netto (MS Teams lub Google Meet).
• Stacjonarnie: 3700 zł netto, w dowolnym mieście w Polsce lub w siedzibie Twojej firmy.
• Wymagania: własna wersja programu zainstalowana na Twoim komputerze.
• Certyfikat: w standardzie VCC (Akademia Edukacji VCC, nr AE-001-0874-001), zgodny z BUR.

Pełną ofertę znajdziesz na stronie wszystkich szkoleń, a więcej praktycznych wskazówek w poradniku na blogu. Jeśli chcesz zacząć od razu, przejdź do strony zapisów albo napisz do nas przez formularz kontaktowy na akademia-komputerowa.pl. Chętnie pomożemy dobrać termin i formę szkolenia, żeby Twój pierwszy prototyp w Figmie nie był tylko ćwiczeniem, ale początkiem realnego projektu.

Najczęściej zadawane pytania

Czy Figma jest trudna dla osoby bez doświadczenia w projektowaniu?

Nie. Interfejs opiera się na kilku podstawowych narzędziach: ramkach, kształtach, tekście i panelu właściwości. Największym wyzwaniem nie jest obsługa programu, lecz zrozumienie zasad układu i spójności, a tego da się nauczyć na prostym projekcie, np. 4–6 ekranach aplikacji.

Od czego zacząć pierwszy projekt w Figmie?

Od planu: określ użytkownika, jego główny cel i kilka ekranów potrzebnych do jego realizacji. Potem utwórz ramki o jednakowym rozmiarze, dodaj siatkę układu, zbuduj kilka podstawowych komponentów i dopiero wtedy połącz ekrany w prototyp.

Czym różni się ekran projektu od prototypu?

Ekran projektu to statyczny widok wyglądu aplikacji. Prototyp łączy takie ekrany interakcjami, np. kliknięcie przycisku przenosi do kolejnego widoku. Dzięki temu można przejść ścieżkę użytkownika i ocenić ją przed rozpoczęciem programowania.

Jak udostępnić prototyp z Figmy klientowi?

Użyj przycisku Share i ustaw odpowiednie uprawnienia: do samego oglądania wystarczy dostęp do podglądu, a jeśli chcesz zbierać uwagi, możesz dać możliwość komentowania. Przed wysłaniem linku uporządkuj plik i ustaw punkt startowy prototypu.

Czy na szkolenie z Figmy muszę mieć własny program?

Tak, szkolenia w Akademii Komputerowej wymagają własnej wersji programu zainstalowanej na komputerze uczestnika. Dzięki temu uczysz się na narzędziu, z którego będziesz korzystać na co dzień.

Ile trwa szkolenie Figma + sztuczna inteligencja (AI) i ile kosztuje?

Szkolenie trwa 14 godzin zegarowych w ciągu 2 dni (8:30–15:15) i odbywa się w formule 1 do 1. Cena to 2500 zł netto online lub 3700 zł netto stacjonarnie. Po szkoleniu otrzymujesz certyfikat w standardzie VCC.