Kategoria: UX i UI
O szkoleniu
Figma to dziś podstawowe narzędzie do projektowania interfejsów stron i aplikacji. Na szkoleniu przechodzimy cały proces pracy w niej: od pustego pliku, przez ekrany, komponenty i style, po klikalny prototyp, który można pokazać klientowi, przetestować z użytkownikami i przekazać programistom. Ćwiczymy na przykładach typowych ekranów strony WWW i aplikacji mobilnej.
Po szkoleniu:
- będziesz swobodnie poruszać się po Figmie i utrzymasz porządek w plikach, także we współpracy z innymi,
- zaprojektujesz ekrany, które same dopasowują się do treści i różnych rozmiarów ekranu (Auto Layout),
- zbudujesz własne komponenty i style, zamiast kopiować kilkanaście razy te same przyciski i pola,
- przygotujesz klikalny prototyp do prezentacji albo prostego testu z użytkownikiem,
- przekażesz projekt programistom tak, żeby nie musieli zgadywać wymiarów, kolorów i odstępów.
Szkolenie dotyczy przede wszystkim warsztatu pracy w narzędziu. Jeśli chcesz najpierw poznać podstawy projektowania doświadczeń użytkownika – badania, persony, architekturę informacji – zacznij od szkolenia Wprowadzenie do UX. Zasady dobrego wyglądu interfejsu (typografia, kolor, layout) szerzej omawiamy na Wprowadzeniu do UI.
Szkolenie przyda się wszystkim, którzy projektują, zamawiają albo wdrażają interfejsy: początkującym projektantom UX/UI, grafikom i web designerom, programistom front-end, product ownerom, analitykom biznesowym i osobom z marketingu.
Czas trwania
2 dni
Program
- Figma od środka: interfejs i organizacja pracy
- pliki, strony, ramki (frames) i warstwy
- siatki, wyrównanie i odstępy
- porządek w pliku – tak, żeby inni się w nim odnaleźli
- Projektowanie ekranów
- kształty, tekst, obrazy i ikony
- hierarchia wizualna, typografia i kolor w praktyce
- Auto Layout – elementy, które dopasowują się do treści
- ekrany w wersji na komputer i telefon
- Komponenty, style i spójność projektu
- komponenty i instancje, warianty i właściwości komponentów
- style i zmienne: kolory, teksty, odstępy
- mała biblioteka elementów: przyciski, pola formularzy, karty, nawigacja
- rzut okiem na systemy projektowe (design system) i gotowe zestawy UI
- Prototypowanie
- przejścia między ekranami, interakcje i nakładki
- przewijanie, stany elementów i proste animacje
- prezentacja prototypu i podstawy testu z użytkownikiem
- Współpraca i przekazanie projektu
- udostępnianie, komentarze i historia wersji
- przekazanie projektu programistom: wymiary, style, eksport grafik
- rzut okiem na tryb dla programistów (Dev Mode)
- AI w pracy z Figmą
- rzut okiem na funkcje AI w Figmie i narzędzia AI do generowania makiet
- gdzie AI przyspiesza pracę, a gdzie projekt i tak trzeba poprawić ręcznie
Na zamówienie szkolenie możemy oprzeć na przykładach z projektów firmy, rozszerzyć o budowę systemu projektowego (design system) albo skrócić do jednego dnia dla osób, które głównie przeglądają i komentują projekty w Figmie.
Training also available in English .
Przeznaczenie i wymagania
Szkolenie jest przeznaczone przede wszystkim dla:
- osób, które zaczynają pracę z Figmą albo dotąd korzystały z niej tylko okazjonalnie,
- grafików i web designerów, którzy chcą projektować interfejsy stron i aplikacji,
- programistów front-end, product ownerów i analityków, którzy na co dzień pracują z projektami w Figmie.
Od uczestników oczekujemy:
- swobodnej obsługi komputera,
- ogólnej orientacji, jak wyglądają i działają strony WWW i aplikacje mobilne.
Doświadczenie z programami graficznymi nie jest potrzebne. Interfejs Figmy jest po angielsku – wystarczy podstawowa znajomość języka. Na zajęciach pracujemy na darmowym koncie Figma.
Certyfikaty
Uczestnicy szkolenia otrzymują imienne certyfikaty sygnowane przez ALX.