Figma projektowanie użytecznych interfejsów
Czas trwania szkolenia:2 dni (16h)
Kod kursu:UI/FIGMA
Poziom zaawansowania:
O szkoleniu Figma projektowanie użytecznych interfejsów
W cenie otrzymasz:
- Materiały szkoleniowe
- Certyfikat ukończenia szkolenia
- W przypadku szkolenia w trybie stacjonarnym zapewnimy Ci również lunch oraz sprzęt niezbędny do nauki
Dla kogo?
- Dla nowicjuszy - jeśli dopiero poznajesz Figmę i chcesz się dowiedzieć jak z jej pomocą efektywnie projektować UI
- Dla znających Figmę - jeśli już korzystasz z Figmy, ale chciałbyś ugruntować lub rozwinąć swoją wiedzę
- Warsztat jest adresowany szczególnie do osób, które chcą rozwijać się w kierunku UX/UI Designu oraz Product i Service Design
Zalety
- Figma jest niezwykle intuicyjna i prosta w obsłudze, jest to narzędzie, które możesz wykorzystać do wielu celów: np. projektowania interfejsów aplikacji, stron www, rozwiązań e-commerce, prowadzenia spotkań, daily i warsztatów, prezentacji, harmonogramowania
- Nauczysz się budować nie tylko nudne makiety, ale także klikalne prototypy Twoich pomysłów - idealne do testów i badań z użytkownikami
- Poznasz możliwości wspólnej pracy nad projektem, usprawnisz proces projektowy, obniżysz koszty
- Praktyka przed teorią - wszystkie szkolenia technologiczne prowadzone są w formie warsztatowej. Konieczna teoria jest wyjaśniana na przykładzie praktycznych zadań
- Konkretne umiejętności - w ramach każdego szkolenia rozwijamy praktyczne umiejętności związane z daną technologią i tematyką
- Nauka z praktykami - wszyscy trenerzy na co dzień pracują w projektach, gwarantuje to dostęp do eksperckiej wiedzy i praktycznego know-how
Cele szkolenia
- Poznanie Figmy jako narzędzia do projektowania, prototypowania i testowania
- Poznanie możliwości współdzielenia projektów w Figmie, ich komentowania i pracy grupowej
- Nauczenie się tworzenia konkretnych UXowych rozwiązań - makiet, UI, onboardingu, user flow
- Nabycie umiejętności wykorzystania Figjam do przeprowadzenia spotkań online, warsztatów czy badań
Program
Wprowadzenie do narzędzi projektowych:
- Wireframing
- Makietowanie
- Prototypowanie
Figma - wprowadzenie
- Cennik i plany
- Zasoby
- Zakładamy konto
Jak poruszać się po obszarze Files
- Ekran Files: Recents, Drafts, Community, Favorites, Teams, Notifications, Internal profile, Account, Desktop app, Plugins, Współdzielenie pracy
Jak poruszać się po FigJam
- Zoom, Hand Tool, skróty klawiaturowe
- Ekran FigJam: Tools, Templates, Functions, Emote, Stamps, Section
Jak poruszać się po Figmie
- Ekran Figma: Layers, Assets, Pages, Design, Prototype, Inspect, Share, Comments, Present, History, Deleted files, Tools, Main menu, Second mouse button menu,
- Figjam a Figma
Najważniejsze elementy UI
- Autosave
- Frame: cechy, Eksport , Frame i elementy poza, gotowe przykłady web i mobile
- Linie pomocnicze
- Layout grid
- Warstwy: lokalizacja, widoczność, zamrożenie, kolejność, przenoszenie na spód, na wierzch, cechy z Photoshopa
- Zapis i eksport
Narzędzia
- Move i Scale
- Frame i Slice
- Kształty: omówienie zakładki Design: Align, Width, High, Layer, Fill, Stroke, Effects, Export
- Wstawianie obrazów: JPG, SVG, PNG
- Pen i Pencil
- Tekst: omówienie zakładki Design: Text, Fonts, Local Fonts, Missing Fonts
- Resources
- Hand Tool
- Komentarze
Obiekty
- Kolory, przeźroczystość, obwódka
- Zaznaczanie obiektów
- Mierzenie odległości między obiektami
- Kopiowanie obiektów
- Align tools
- Obróć pionowo/poziomo/obróć dowolnie
- Grupowanie
Poznaj Figmę bliżej
- Style
- Menu podręczne
- Maski
- Komponenty: Assets, Masters, Version
- Auto Layout
- Constraints
- Współdzielenie pracy
- Plugins
- Widgets
- Community
Projektowanie makiet i prototypów
- Makietowanie
- Prototypowanie
- Dobre praktyki
- Przykłady
- Ćwiczenia