Kurs prototypowania w Figmie od podstaw

Lekcja 1 • Ekosystem Figmy i konfiguracja konta

Omawia aplikacje internetową i desktopową Figmy, typy planów i konfigurację konta. Ustanawia techniczną podstawę przed rozpoczęciem jakichkolwiek prac projektowych.

Lekcja 2 • Niezbędne skróty klawiszowe i ustawienia

Omawia najbardziej wpływowe skróty i ustawienia preferencji dla wydajnego przepływu pracy. Zdobyta tutaj szybkość i dokładność kumulują się w każdym kolejnym rozdziale.

Lekcja 3 • Pliki, strony i organizacja projektu

Uczy, jak tworzyć, duplikować i organizować pliki i strony w ramach projektów. Właściwa struktura zapobiega chaosowi w późniejszej pracy nad prototypami wieloekranowymi.

Lekcja 1 • Rysowanie i edycja podstawowych kształtów

Omawia prostokąty, elipsy, wielokąty i narzędzie gwiazdy wraz z ich właściwościami. Te prymitywy stanowią elementy składowe każdego elementu interfejsu tworzonego później.

Lekcja 2 • Narzędzie pióra wektorowego i edycja ścieżek

Przedstawia narzędzie pióra do tworzenia niestandardowych ścieżek wektorowych i manipulacji punktami zakotwiczenia. Niestandardowe ikony i ilustracje zbudowane tutaj pojawią się w późniejszych ekranach prototypu.

Lekcja 3 • Wyrównanie, dystrybucja i odstępy

Omawia narzędzia wyrównania, inteligentną dystrybucję i kontrolę odstępów. Precyzyjne odstępy są niezbędne przed wprowadzeniem automatycznego układu w następnym rozdziale.

Lekcja 4 • Zrozumienie ramek a grup

Wyjaśnia strukturalną różnicę między ramkami a grupami i kiedy używać każdej z nich. Ramki są fundamentem ekranów, komponentów i automatycznego układu.

Lekcja 1 • Wypełnienia, gradienty i obrazy

Omawia wypełnienia jednolite, gradienty liniowe i radialne oraz tryby wypełnienia obrazem. Techniki te tworzą dopracowane tła i powierzchnie interfejsu w całym projekcie.

Lekcja 2 • Budowanie skali typograficznej

Uczy, jak zdefiniować modułową skalę typograficzną dla nagłówków, treści i podpisów. Zdefiniowana skala zapewnia hierarchię wizualną na każdym ekranie prototypu.

Lekcja 3 • Style tekstowe i zarządzanie stylami

Omawia tworzenie, nazywanie i stosowanie współdzielonych stylów tekstowych w pliku. Zarządzanie stylami zmniejsza niespójności przed wprowadzeniem komponentów.

Lekcja 4 • Tworzenie lokalnego systemu kolorów

Uczy, jak zdefiniować podstawowe, drugorzędne, neutralne i semantyczne tokeny kolorów jako style lokalne. Scentralizowane kolory umożliwiają natychmiastową globalną aktualizację we wszystkich ramkach.

Lekcja 1 • Więzy i ramki responsywne

Omawia ustawienia więzów, które kontrolują zachowanie warstw podczas zmiany rozmiaru ramki. Więzy w połączeniu z automatycznym układem dają prawdziwie responsywne projekty ekranów.

Lekcja 2 • Zagnieżdżanie ramek automatycznego układu

Uczy, jak zagnieżdżać ramki automatycznego układu, aby tworzyć złożone, adaptacyjne struktury interfejsu. Zagnieżdżone układy są podstawą siatek kart, pasków nawigacyjnych i układów formularzy.

Lekcja 3 • Wprowadzenie do automatycznego układu

Wyjaśnia podstawową koncepcję automatycznego układu: kierunek, odstępy i wypełnienie wewnętrzne. Zrozumienie tego modelu jest wymagane przed zbudowaniem jakiegokolwiek responsywnego komponentu.

Lekcja 4 • Budowanie responsywnych wzorców interfejsu

Stosuje automatyczny układ i więzy do zbudowania paska nawigacyjnego, siatki kart i formularza. Te wzorce są bezpośrednio wykorzystywane w ekranach prototypu w późniejszych rozdziałach.

Lekcja 1 • Budowanie podstawowej biblioteki komponentów interfejsu

Stosuje komponenty i warianty do budowy przycisków, pól wejściowych, ikon i kart. Ta biblioteka jest bezpośrednim źródłem wszystkich ekranów zbudowanych w rozdziale o prototypowaniu.

Lekcja 2 • Właściwości komponentów

Omawia właściwości logiczne, tekstowe, zamiany instancji i zagnieżdżonych instancji w komponentach. Właściwości udostępniają kontrolowaną personalizację bez naruszania struktury komponentu.

Lekcja 3 • Warianty komponentów

Uczy, jak grupować powiązane stany komponentów w zestaw wariantów z nazwanymi właściwościami. Warianty umożliwiają interaktywne zmiany stanu w prototypach bez duplikowania komponentów.

Lekcja 4 • Tworzenie i używanie komponentów

Omawia konwersję ramek na komponenty główne i umieszczanie instancji w pliku. Komponenty zapewniają, że pojedyncza edycja natychmiast propaguje się na wszystkie ekrany.

Lekcja 1 • Połączenia prototypu i interakcje

Uczy, jak dodawać połączenia prototypu, wyzwalacze i miejsca docelowe między ramkami. Połączenia przekształcają statyczne ekrany w klikalny, nawigowalny prototyp.

Lekcja 2 • Projektowanie kluczowych ekranów aplikacji

Stosuje bibliotekę komponentów do zbudowania ekranów powitalnych, pulpitu i szczegółów. Każdy ekran wykorzystuje automatyczny układ i współdzielone style ustanowione w poprzednich rozdziałach.

Lekcja 3 • Planowanie ekranów i przepływów użytkownika

Omawia mapowanie przepływu użytkownika, inwentaryzację ekranów i konwencje nazewnictwa przed projektowaniem. Planowanie zapobiega przeróbkom strukturalnym podczas łączenia ekranów w późniejszych sekcjach.

Lekcja 4 • Ustawienia przejść i animacji

Omawia przejścia natychmiastowe, rozpuszczanie, przesuwanie, pchanie i inteligentną animację. Odpowiednie przejścia jasno komunikują kierunek nawigacji i zachowanie interfejsu.

Lekcja 1 • Interaktywne komponenty i zmiany stanów

Omawia używanie wariantów komponentów z połączeniami prototypu do symulowania zmian stanów. Interaktywne komponenty zmniejszają liczbę ramek potrzebnych do złożonych przepływów.

Lekcja 2 • Przewijanie, przepełnienie i elementy stałe

Uczy pionowego i poziomego przewijania, przycinania przepełnienia i stałych warstw przyklejonych. Te ustawienia odwzorowują natywne zachowanie przewijania w prototypach mobilnych i internetowych.

Lekcja 3 • Logika warunkowa i akcje

Uczy warunków if-else i sekwencji wieloetapowych akcji w interakcjach prototypu. Logika warunkowa umożliwia rozgałęzianie przepływów, które odzwierciedlają rzeczywiste punkty decyzyjne aplikacji.

Lekcja 4 • Wprowadzenie do zmiennych Figmy

Omawia tworzenie kolekcji zmiennych liczbowych, tekstowych, logicznych i kolorowych. Zmienne umożliwiają dynamiczne zarządzanie danymi i stanem, niedostępne w podstawowym prototypowaniu.

Lekcja 1 • Testy użyteczności z prototypami

Omawia planowanie zadań testowych, rekrutację uczestników i prowadzenie moderowanych sesji. Ustrukturyzowane testowanie generuje praktyczną informację zwrotną dla cyklu iteracji.

Lekcja 2 • Tryb inspekcji i eksport zasobów

Uczy deweloperów, jak korzystać z panelu inspekcji Figmy, a projektantów, jak eksportować zasoby. Prawidłowe ustawienia eksportu zapewniają pikselowo dokładne zasoby we wszystkich docelowych rozdzielczościach.

Lekcja 3 • Historia wersji i konserwacja plików

Omawia zapisywanie nazwanych wersji, przywracanie poprzednich stanów i utrzymywanie czystego pliku w czasie. Kontrola wersji chroni pracę i wspiera iteracyjne projektowanie w cyklach.

Lekcja 4 • Analiza informacji zwrotnej i priorytetyzacja zmian

Uczy mapowania podobieństw, oceny dotkliwości i priorytetyzacji zmian na podstawie wyników testów. Priorytetyzacja zapewnia, że problemy o największym wpływie są naprawiane przed przekazaniem.