Kurs Figma UX i UI Design – kompleksowe warsztaty praktyczne

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.