Kurs Figma od podstaw - projektowanie stron
i aplikacji
Zaprojektuj responsywną stronę i klikalny prototyp w Figmie. W 16 godzin przejdziesz od pustego pliku przez układ, Auto Layout i komponenty do wersji desktopowej oraz mobilnej gotowej do prezentacji.
1500 zł brutto
Czas: 16h / 2 dni / 9:00-15:30
Miejsce: Sopot ul. Kościuszki 44/1 lub online na żywo
Data szkolenia:
Od pomysłu do interaktywnego projektu
Figma pozwala projektować strony internetowe, aplikacje i inne interfejsy cyfrowe w jednym uporządkowanym środowisku. Podczas kursu nie ograniczasz się do poznawania ikon
w programie. Budujesz kompletny projekt i uczysz się podejmować decyzje, które wpływają na czytelność, spójność i wygodę korzystania z interfejsu.
Pracujemy krok po kroku: od prostego szkicu i hierarchii treści, przez kolory, typografię, siatkę i formularze, aż po komponenty, wersję mobilną i klikalny prototyp. Dzięki temu widzisz, jak poszczególne funkcje Figmy łączą się w jeden rzeczywisty proces projektowy.
Co wykonasz podczas kursu Figma?
Makieta i struktura strony
Ułożysz hierarchię informacji, sekcje, menu oraz najważniejsze ścieżki użytkownika.
Responsywny projekt interfejsu
Przygotujesz widok komputerowy i mobilny, wykorzystując ramki, siatki, ograniczenia i Auto Layout.
Komponenty i warianty
Zbudujesz wielokrotnie używane przyciski, pola formularzy, karty i elementy nawigacji.
Formularz i stany interfejsu
Zaprojektujesz pola, komunikaty, stany błędu, potwierdzenia oraz czytelne działania użytkownika.
Klikalny prototyp
Połączysz ekrany i pokażesz działanie menu, przycisków oraz podstawowych przejść.
Plik gotowy do prezentacji
Uporządkujesz warstwy, style i zasoby oraz przygotujesz projekt do omówienia lub przekazania.
Co to jest Figma i do czego służy
Figma to internetowe środowisko do projektowania interfejsów stron i aplikacji, tworzenia makiet oraz budowania interaktywnych prototypów. Projekt można otworzyć w przeglądarce lub aplikacji komputerowej, udostępnić innym osobom i wspólnie komentować.
Program wykorzystuje się do tworzenia układów ekranów, przycisków, menu, formularzy, kart i całych systemów elementów. Figma nie jest jednak gotową stroną internetową. Projekt pokazuje wygląd i sposób działania interfejsu, a jego wdrożenie wymaga później kodu lub odpowiedniego kreatora stron.
UI i UX - czego uczysz się na tym szkoleniu
UI, czyli user interface, dotyczy wyglądu i zachowania elementów, z którymi użytkownik wchodzi w interakcję: menu, przycisków, formularzy, ikon i układu ekranów. UX obejmuje szersze doświadczenie użytkownika, w tym potrzeby, logikę ścieżki, użyteczność i testowanie rozwiązania.
Na kursie skupiamy się na praktycznym projektowaniu UI w Figmie, a jednocześnie wprowadzamy podstawowe zasady UX potrzebne do tworzenia logicznych i czytelnych interfejsów. Nie jest to pełny kurs badań UX ani obietnica zdobycia całego zawodu UX Designera w 2 dni.
Dla kogo jest kurs Figma?
Osoby początkujące
Dla osób, które chcą nauczyć się Figmy od podstaw i wykonać pierwszy uporządkowany projekt interfejsu.
Osoby pracujące wcześniej w Adobe XD
Dla projektantów, którzy chcą przenieść swój sposób pracy do Figmy i poznać Auto Layout, komponenty oraz prototypowanie.
Graficy i projektanci
Dla osób, które znają grafikę, ale chcą rozszerzyć kompetencje
o strony, aplikacje, prototypy
i responsive design.
Programiści i zespoły produktowe
Dla osób, które chcą lepiej rozumieć projekty interfejsów, komunikować się z projektantami i sprawniej przygotowywać wdrożenie.
Marketing i e-commerce
Dla osób przygotowujących landing page, kampanie, serwisy produktowe lub materiały przekazywane wykonawcom.
Firmy i instytucje
Dla zespołów, które chcą ujednolicić sposób tworzenia, omawiania i przekazywania projektów cyfrowych.
Czy musisz znać Figmę przed kursem
Nie. Zaczynamy od utworzenia i organizacji pliku, pracy z ramkami, warstwami, tekstem, kształtami i obrazami. Stopniowo przechodzimy do Auto Layout, komponentów, wariantów i prototypowania.
Przydaje się swobodne korzystanie z komputera oraz podstawowe wyczucie estetyczne, ale wcześniejsza znajomość programów graficznych, UX ani kodowania nie jest wymagana.
Bezpłatny plan Figma Starter na szkoleniu
Każdy uczestnik pracuje na własnym, bezpłatnym koncie Figma Starter. Plan umożliwia realizację ćwiczeń przewidzianych w programie, w tym projektowanie w indywidualnych plikach roboczych, pracę z komponentami i Auto Layout oraz przygotowanie podstawowego prototypu.
Przed szkoleniem otrzymasz krótką instrukcję utworzenia konta. Nie musisz kupować abonamentu ani posiadać pakietu Adobe. Wystarczy komputer i stabilne połączenie z internetem.
Program kursu Figma od podstaw
Program obejmuje 16 godzin dydaktycznych i prowadzi od podstaw obsługi programu do wykonania responsywnego interfejsu oraz klikalnego prototypu. Ćwiczenia tworzą jeden spójny proces projektowy.
1. Wprowadzenie do projektowania UX i UI • różnice pomiędzy UX i UI oraz rola Figmy w procesie projektowym • cel strony lub aplikacji i najważniejsze potrzeby użytkownika • podstawowa ścieżka użytkownika i hierarchia informacji • użyteczność, dostępność i spójność interfejsu
2. Środowisko pracy w Figmie • konto Starter, pliki robocze i organizacja projektu • interfejs, strony, sekcje, ramki i warstwy • kształty, tekst, obrazy, maski i podstawowe operacje wektorowe • wyrównywanie, grupowanie, nazewnictwo i porządek w warstwach • importowanie zasobów oraz bezpieczne korzystanie z Figma Community
3. Kolor, typografia i hierarchia wizualna • budowanie prostej palety kolorów i zachowanie kontrastu • dobór kroju, wielkości, interlinii i długości wiersza • hierarchia nagłówków, treści i działań użytkownika • wykorzystanie zdjęć, ikon i ilustracji bez przeciążania projektu • style kolorów, tekstu i efektów w uporządkowanym pliku
4. Układ strony i projektowanie responsywne • siatki, kolumny, marginesy i rytm odstępów • nagłówek, menu, sekcje treści, karty i stopka • ramki oraz zachowanie elementów przy zmianie rozmiaru • projektowanie widoku komputerowego i mobilnego • czytelne priorytety treści na mniejszym ekranie
5. Auto Layout w praktyce • kierunek, odstępy, padding i wyrównanie elementów • automatyczne dopasowywanie ramek do zawartości • stała, elastyczna i wypełniająca szerokość elementów • zagnieżdżanie Auto Layout i budowanie elastycznych sekcji • praktyczne zastosowanie w kartach, menu, listach i formularzach
6. Komponenty, warianty i podstawy systemu UI • komponent główny i jego instancje • przyciski, pola formularzy, karty i elementy nawigacji • warianty rozmiaru, rodzaju i stanu elementu • właściwości komponentów i kontrola zawartości • porządkowanie stylów i podstawy systemu elementów w jednym pliku
7. Formularze, menu i stany interfejsu • czytelne pola, etykiety, podpowiedzi i komunikaty • stany podstawowy, aktywny, nieaktywny, błąd i potwierdzenie • projektowanie przycisków oraz hierarchia działań • menu dla komputera i urządzeń mobilnych • podstawowe zasady dostępności formularzy i nawigacji
8. Prototypowanie i interakcje • łączenie ekranów i tworzenie przepływu użytkownika • działanie przycisków, menu, formularzy i nakładek • przejścia pomiędzy widokami i podstawowe animacje • podgląd prototypu na różnych ekranach • udostępnianie prototypu do prezentacji i komentarzy
9. Projekt strony w wersji komputerowej i mobilnej • zbudowanie kompletnego widoku na podstawie przygotowanej makiety • zastosowanie kolorów, typografii, siatki i komponentów • przekształcenie projektu desktopowego w wersję mobilną • kontrola spójności, odstępów, hierarchii i czytelności • połączenie ekranów w prezentowany prototyp
10. Przekazanie projektu oraz HTML i CSS dla projektanta • różnica pomiędzy projektem w Figmie a gotową stroną internetową • podstawowa rola HTML i CSS w budowaniu interfejsu • kontenery, sekcje, elastyczne układy i punkty zmiany widoku • sprawdzanie wymiarów, kolorów, tekstu i podstawowych właściwości • eksport ikon, obrazów i innych zasobów • porządek w pliku ułatwiający współpracę z programistą lub wykonawcą
11. Prezentacja i omówienie projektu końcowego • sprawdzenie kompletności widoków i działania prototypu • omówienie decyzji projektowych i informacji zwrotnej • poprawki w hierarchii, responsywności i komponentach • przygotowanie linku do projektu oraz eksport najważniejszych ekranów • plan dalszego rozwijania umiejętności po szkoleniu
Kurs Figma dla firm i zespołów
Program możemy dopasować do rodzaju projektów, poziomu zespołu i sposobu współpracy z marketingiem, programistami lub zewnętrznym wykonawcą. Szkolenie zamknięte realizujemy w siedzibie klienta, w naszej sali w Sopocie albo online na żywo.
• projektowanie stron, aplikacji lub paneli używanych przez organizację
• uporządkowanie komponentów, nazewnictwa i struktury plików
• współpraca projektantów, marketingu, product ownerów i programistów
• przygotowanie responsywnych widoków i materiałów do wdrożenia
• zakres podstawowy lub rozszerzony dopasowany do liczby godzin
Dlaczego warto wybrać nasze szkolenie Figma
Uczysz się na jednym realnym projekcie
Każda kolejna funkcja ma konkretne zastosowanie w powstającym interfejsie.
Pracujesz z trenerem na żywo
Możesz zadawać pytania, konsultować projekt i od razu poprawiać błędy.
Poznajesz program i zasady projektowania
Łączymy obsługę Figmy z hierarchią, typografią, kolorem, responsywnością i dostępnością.
Pracujesz w małej grupie
Grupa do 6 osób pozwala zachować praktyczny charakter szkolenia i indywidualną informację zwrotną.
Kończysz z projektem i prototypem
Po kursie masz uporządkowany plik, wersję desktopową i mobilną oraz działającą prezentację interfejsu.
Co otrzymujesz w ramach szkolenia
-
Certyfikat ukończenia kursu
Potwierdzenie udziału w szkoleniu Figma od podstaw -
Materiały szkoleniowe PDF
Skrypt do samodzielnej pracy po kursie -
Zestaw uczestnika
Notes, torba i ołówek dla uczestników szkolenia -
Możliwość zadawania pytań
dotyczących własnych realizacji i problemów
Uczestnicy oceniają nasze szkolenia bardzo wysoko!
Sylwia - Opinia Google
Jako osoba której zależało na nauczeniu się programów graficznych Adobe, lepiej nie mogłam trafić :) Miałam przyjemność uczestniczyć w zajęciach z Photoshopa i Illustratora prowadzonych przez Dorotę, oraz Jędrzeja. Obydwoje są profesjonalistami w swoim fachu z wieloletnim doświadczeniem. Mają też dar do przekazywania wiedzy, wszystko było tłumaczone i pokazywane w bardzo dokładny i przystępny sposób. W kilkudniowym szkoleniu jest naprawdę ogromna dawka wiedzy. Samo miejsce jest bardzo przyjazne, miło spędza się tam czas. Zajęcia prowadzone w fajnej, luźnej atmosferze - bo sami prowadzący są mega sympatycznymi ludźmi :) Z ręką na sercu mogę polecić szkolenia w tym miejscu, bo sama z chęcią wrócę po kolejną dawkę wiedzy. Pozdrawiam Dorotę, Przemka i Jędrzeja!
Magda - Opinia Google
Świetni prowadzący, intensynwe kursy z świetnie przygotowanym materiałem szkoleniowym. Z chęcią jeszcze wrócę na inne szkolenia. Polecam 😊
Igor - Opinia Google
Studiowałem tu na dwutygodniowym kursie grafiki komputerowej i tworzenia stron internetowych. Z czystym sumieniem mogę polecić tę placówkę edukacyjną. I oto dlaczego. Profesjonalnie prowadzone szkolenia: przejrzysta prezentacja materiału, chęć szybkiego wyjaśnienia, co powoduje trudności. Zasada: dalej nie idziemy, dopóki wszyscy nie zrozumieją. Bardzo podobało mi się, że po przedstawieniu bloku informacji prowadzący pyta, czy wszystko jest jasne. Czasem krępowałem się i nie mówiłem, że nie rozumiałam, ale prowadzący odczuwał to po wyrazie moich oczu. To oczywiście najwyższy poziom. Wysoka jakość materiałów szkoleniowych: część kursu znałem bardzo dobrze, a nawet z powodzeniem wykorzystywałem ją w swojej pracy. Materiały te były zgodne z obowiązującymi trendami i wiedzą. Chciałbym również zaznaczyć, że w szkole panuje sympatyczna atmosfera, nauczyciele i dyrekcja szkoły to bardzo mili ludzie, z którymi ciekawie jest pogadać poza zajęciami. Dodatkowym bonusem jest to, że szkoła mieści się w starym pięknym domu w Sopocie, który był i jest zamieszkany przez słynnych mieszkańców.
Najczęściej zadawane pytania o szkolenie
Naucz się projektować w Figmie od podstaw
W ciągu 16 godzin poznasz uporządkowany sposób pracy w Figmie i wykonasz własny projekt interfejsu. Przygotujesz widok komputerowy i mobilny, zbudujesz komponenty, połączysz ekrany oraz zaprezentujesz klikalny prototyp.
Wybierz udział stacjonarnie w Sopocie lub online na żywo i rozpocznij pracę z Figmą.
Masz pytania dotyczące kursu?
Chętnie pomożemy dobrać termin, formę szkolenia i zakres kursu do Twoich potrzeb.
Skontaktuj się z nami: 58 524 50 65, 609 33 55 27 lub biuro@szkolenia-graficzne.pl