icon icon

Kurs Figma UX i UI Design – kompleksowe warsztaty praktyczne

icon

Proces szkoleniowy

Analiza potrzeb szkoleniowych

Jeśli masz życzenie dotyczące programu szkolenia, przeprowadzimy dla Ciebie analizę potrzeb szkoleniowych, która będzie wskazówką dla nas, na jakie aspekty programu położyć większy nacisk – tak, by program szkolenia spełniał konkretne potrzeby.

Co zyskujesz?

icon

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.

icon

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.

icon

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.

icon

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.

icon

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.

icon

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.

icon

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.

icon

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.

Program szkolenia

1. Wprowadzenie do pracy w Figma

  • omówienie interfejsu i układu narzędzia,
  • praca z plikami i strukturą projektu,
  • strony (Pages) i organizacja dużych projektów,
  • warstwy i grupowanie elementów,
  • ramki (Frames) – kluczowy element pracy w Figma.

2. Podstawowe funkcje i narzędzia projektowe

  • kształty, ikony, obiekty, obrazy,
  • zaznaczanie, wyrównanie, maskowanie,
  • auto-layout – podstawy i zastosowanie,
  • siatki (Layout grid) – projektowanie responsywne.

3. Assety i komponenty

  • Assety – struktura, organizacja, typy,
  • komponenty – tworzenie, używanie, warianty,
  • zasada master–instance i dobre praktyki,
  • wspólna biblioteka komponentów.

4. Tworzenie Design Guidelines

  • style kolorystyczne – budowa palety, nazewnictwo,
  • style tekstowe – typografia webowa i mobilna,
  • style efektów – cienie, rozmycia, promienie,
  • siatki i spacing – budowanie spójności projektowej.

5. Budowa biblioteki elementów graficznych

  • proste elementy UI od podstaw (buttony, karty, pola formularzy),
  • standaryzacja i skalowanie elementów,
  • tworzenie zestawu ikon i layoutów.

6. Architektura informacji i projekt lo-fi

  • analiza celu projektu i użytkownika,
  • tworzenie mapy ekranów (user flow),
  • makiety lo-fi – schematy, struktury, układy,
  • przygotowanie pod projekt high-fidelity.

7. Projektowanie ekranów aplikacji (hi-fi)

  • tworzenie widoków desktop, mobile i tablet,
  • zastosowanie auto-layout w praktyce,
  • style vs komponenty – zachowanie spójności,
  • wersjonowanie ekranów i zarządzanie zmianami.

8. Prototypowanie i animacje

  • tworzenie interaktywnych przepływów,
  • dodawanie przejść i mikroanimacji,
  • ustalanie zachowań komponentów,
  • testowanie i udoskonalanie prototypu.

9. Tworzenie wersji dla różnych rozdzielczości

  • projektowanie responsywne,
  • gridy i zasady skalowania,
  • breakpointy i dobre praktyki.

10. Praca zespołowa i współpraca w Figma

  • komentarze i iteracja projektu,
  • współpraca w czasie rzeczywistym,
  • historia zmian (version history),
  • udostępnianie projektów interesariuszom.

11. Eksport i przekazywanie projektów deweloperom

  • eksport assetów (SVG, PNG, PDF, WebP),
  • panel deweloperski (Inspect),
  • specyfikacje dla front-end developerów,
  • przygotowanie linków i dokumentacji.

Jakie są wymagania wstępne do udziału w szkoleniu?

icon

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ń.

icon

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.

icon

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.

icon

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.