Sprawna praca w Figma - Nauczysz się poruszać po interfejsie Figma, organizować pliki, strony i warstwy oraz budować czytelną strukturę projektu, dzięki czemu szybciej przygotujesz uporządkowane makiety i ekrany.
Lepsze projektowanie interfejsów - Opanujesz narzędzia do tworzenia i edycji elementów UI, wyrównywania, maskowania oraz pracy z auto-layoutem i siatkami, więc zaprojektujesz bardziej spójne i responsywne widoki.
Własny system komponentów - Dowiesz się, jak tworzyć assety, komponenty, warianty i biblioteki współdzielone, aby wielokrotnie używać tych samych elementów i utrzymać porządek nawet w rozbudowanych projektach.
Spójne design guidelines - Zbudujesz zestaw stylów kolorów, tekstu, efektów, siatek i spacingu, dzięki czemu łatwiej zachowasz jednolity wygląd produktu i szybciej wdrożysz kolejne ekrany bez chaosu.
Ekrany na różne urządzenia - Nauczysz się projektować widoki hi-fi dla desktopu, mobile i tabletu, stosować breakpointy oraz zasady skalowania, aby Twoje interfejsy działały logicznie na różnych rozdzielczościach.
Przemyślany flow użytkownika - Przećwiczysz analizę celu projektu, tworzenie map ekranów i makiet lo-fi, więc łatwiej zaplanujesz architekturę informacji i unikniesz błędów jeszcze przed dopracowaniem warstwy wizualnej.
Interaktywne prototypy - Stworzysz prototypy z przejściami, mikroanimacjami i zachowaniami komponentów, co pozwoli Ci szybciej testować pomysły, prezentować koncepcje i lepiej oceniać użyteczność projektu.
Lepsze przekazanie do developmentu - Poznasz eksport assetów, panel Inspect, przygotowanie specyfikacji i linków dla zespołu, dzięki czemu sprawniej przekażesz projekt deweloperom i ograniczysz liczbę nieporozumień na wdrożeniu.
Praca w Figma wymaga sprawnego poruszania się po interfejsie i rozumienia struktury plików już od początku projektu. W tej części uczestnicy porządkują sposób użycia Pages, warstw i grup, a także poznają znaczenie ramek Frames jako podstawy organizacji widoków.
Od operacji na kształtach, ikonach i obrazach zaczyna się swobodne poruszanie po narzędziach projektowych Figma. Sekcja rozwija pracę z zaznaczaniem, wyrównaniem i maskowaniem, a następnie wprowadza podstawy auto-layout oraz siatek Layout grid w kontekście responsywności.
Assety i komponenty porządkują projekt tam, gdzie te same elementy występują na wielu ekranach. Część obejmuje ich strukturę, typy i organizację, zasady tworzenia wariantów, model master-instance oraz wykorzystanie wspólnej biblioteki komponentów w zespole.
Spójność systemu wizualnego wynika z jasno zdefiniowanych reguł stosowania stylów. Ta sekcja obejmuje budowę i nazewnictwo palety kolorów, typografię dla web i mobile, style efektów oraz siatki i spacing, które razem tworzą praktyczne Design Guidelines.
Budowanie własnej biblioteki zaczyna się od prostych, powtarzalnych elementów interfejsu. Uczestnicy tworzą buttony, karty i pola formularzy, a następnie porządkują zasady ich standaryzacji i skalowania, uzupełniając zestaw o ikony oraz podstawowe layouty.
Zanim powstanie warstwa wizualna, trzeba uporządkować cele projektu i sposób poruszania się użytkownika. Sekcja łączy analizę potrzeb z budową mapy ekranów oraz user flow, a następnie przekłada je na makiety lo-fi przygotowujące grunt pod projekt hi-fi.
Na etapie hi-fi powstają dopracowane widoki aplikacji dla desktopu, mobile i tabletu. Sekcja pokazuje praktyczne użycie auto-layout, porządkuje relację między stylami a komponentami oraz uwzględnia wersjonowanie ekranów i zarządzanie zmianami w projekcie.
Interaktywność pozwala sprawdzić logikę działania produktu jeszcze przed etapem wdrożenia. W ramach tej części powstają przepływy między ekranami, przejścia i mikroanimacje, a także zachowania komponentów, które następnie są testowane i doskonalone w prototypie.
Projektowanie na różne rozdzielczości opiera się na spójnych zasadach adaptacji interfejsu, a nie na tworzeniu odrębnych widoków bez wspólnej logiki. Uczestnicy pracują z gridami, skalowaniem i breakpointami, aby poprawnie planować zachowanie układu w responsive design.
Gdy nad jednym plikiem pracuje kilka osób, znaczenia nabiera sprawna komunikacja i kontrola zmian. W tej części omawiane są komentarze, iteracyjne poprawki i współpraca w czasie rzeczywistym, a także historia wersji oraz udostępnianie projektów interesariuszom.
Przekazanie projektu do wdrożenia wymaga przygotowania plików w formie czytelnej dla zespołu front-end. Sekcja obejmuje eksport assetów do SVG, PNG, PDF i WebP, pracę z panelem Inspect oraz tworzenie linków i dokumentacji zawierającej specyfikację implementacyjną.
Obsługa komputera - Powinieneś swobodnie korzystać z komputera, przeglądarki i podstawowych skrótów klawiaturowych, aby bez problemu pracować na plikach, warstwach i ekranach podczas ćwiczeń.
Podstawy pracy z grafiką cyfrową - Przyda Ci się ogólne rozumienie pojęć takich jak warstwa, obraz, tekst, ikona czy rozdzielczość, aby szybciej odnaleźć się w pracy nad interfejsem i układem ekranów.
Podstawy projektowania interfejsów - Powinieneś kojarzyć, czym są przyciski, formularze, nawigacja, siatka i układ ekranu, aby łatwiej przejść od makiet lo-fi do bardziej dopracowanych widoków hi-fi.
Gotowość do pracy projektowej - Warto, abyś był gotowy analizować potrzeby użytkownika, przyjmować uwagi i iterować projekt, bo szkolenie obejmuje prototypowanie, współpracę i rozwijanie rozwiązań krok po kroku.
