Figma – projektowanie UI/UX

Dlaczego: Aplikacja desktopowa oferuje lepszą wydajność, obsługę lokalnych fontów i skróty klawiszowe, które nie kolidują z przeglądarką.

Jak:

• Pobierz instalator ze strony figma.com/downloads.
• Zaloguj się na darmowe konto startowe.
• Skonfiguruj profil i włącz powiadomienia o komentarzach.

Warunek ukończenia: Aplikacja jest zainstalowana i uruchomiona na komputerze.

Dlaczego: Projektowanie to nie tylko wygląd (UI), ale przede wszystkim działanie i użyteczność (UX).

Jak:

• Przeczytaj o UX (User Experience): badanie potrzeb, makiety lo-fi, testy.
• Przeczytaj o UI (User Interface): kolory, typografia, ikony, layout.
• Zapisz w notatniku 3 przykłady dobrze zaprojektowanych aplikacji, z których korzystasz.

Warunek ukończenia: Posiadanie notatki definiującej oba pojęcia własnymi słowami.

Dlaczego: Szybkie poruszanie się po panelach oszczędza czas podczas pracy nad projektami.

Jak:

• Zidentyfikuj panel warstw (lewa strona), panel właściwości (prawa strona) i pasek narzędzi (góra).
• Przetestuj skróty: Spacja + przeciąganie (przesuwanie widoku), Ctrl/Cmd + scroll (zoom).
• Stwórz nową stronę w pliku, aby uporządkować przestrzeń.

Warunek ukończenia: Swobodne przybliżanie i oddalanie widoku bez użycia menu.

Dlaczego: Standard 8pt zapewnia spójność odstępów i ułatwia pracę programistom (większość ekranów jest podzielna przez 8).

Jak:

• Ustaw 'Nudge amount' w ustawieniach Figmy na 8px (Small nudge: 1, Big nudge: 8).
• Stwórz Frame (klawisz F) i dodaj 'Layout Grid'.
• Wybierz 'Columns' (12 dla desktopu, 4 dla mobile) z marginesami bocznymi.

Warunek ukończenia: Frame z widoczną siatką pomocniczą i skonfigurowanym skokiem kursora.

Dlaczego: Każdy interfejs składa się z prostokątów, kół i linii.

Jak:

• Użyj skrótów: R (prostokąt), O (elipsa), L (linia).
• Przetestuj zaokrąglanie rogów (Corner Radius) bezpośrednio na kształcie.
• Wypróbuj operacje logiczne (Boolean Operations): Union, Subtract, Intersect do łączenia kształtów.

Warunek ukończenia: Stworzenie prostej ikony (np. chmury) z połączonych kół i prostokąta.

Dlaczego: Tekst musi być czytelny i wskazywać użytkownikowi, co jest najważniejsze.

Jak:

• Wybierz jeden font bezszeryfowy (np. Inter, Roboto).
• Stwórz skalę: Nagłówek (32px, Bold), Podtytuł (20px, Medium), Body (16px, Regular).
• Ustaw interlinię (Line height) na ok. 140-160% dla tekstu akapitowego.

Warunek ukończenia: Trzy bloki tekstu o różnej hierarchii wizualnej.

Dlaczego: Style pozwalają na błyskawiczną zmianę koloru w całym projekcie jednocześnie.

Jak:

• Zdefiniuj kolor Primary (główny), Secondary (akcent) oraz Neutral (szarości dla tekstów).
• Dodaj kolory do stylów (ikona czterech kropek w panelu Fill -> +).
• Nazwij je logicznie, np. 'Brand/Primary', 'Text/Main'.

Warunek ukończenia: Lista co najmniej 4 zapisanych stylów kolorystycznych w panelu bocznym.

Dlaczego: Niezbędne do tworzenia niestandardowych ikon i ilustracji wektorowych.

Jak:

• Naciśnij P i stwórz zamknięty kształt.
• Klikaj, aby tworzyć punkty, i przeciągaj, aby tworzyć łuki.
• Użyj narzędzia 'Bend tool' (Ctrl/Cmd), aby wygładzić ostre kąty.

Warunek ukończenia: Narysowanie prostego serca lub gwiazdy za pomocą Pen Tool.

Dlaczego: To najważniejsza funkcja Figmy. Sprawia, że elementy dopasowują się do treści (np. przycisk rośnie wraz z tekstem).

Jak:

• Napisz tekst, naciśnij Shift + A.
• Ustaw padding (odstępy wewnętrzne) i gap (odstęp między elementami).
• Zmień kolor tła i dodaj zaokrąglenie rogów.

Warunek ukończenia: Przycisk, który automatycznie zmienia szerokość po dopisaniu dłuższego słowa.

Dlaczego: Komponenty to wzorce. Zmiana w komponencie głównym aktualizuje wszystkie jego kopie (instancje).

Jak:

• Zaznacz swój przycisk z Auto Layout.
• Kliknij ikonę rombu na górze (Create Component).
• Skopiuj go (Alt + przeciągnięcie) i zobacz, jak zmiany w oryginale wpływają na kopię.

Warunek ukończenia: Posiadanie jednego komponentu głównego i trzech jego instancji.

Dlaczego: Pozwala to trzymać różne stany tego samego elementu (np. przycisk aktywny, naciśnięty, wyłączony) w jednym miejscu.

Jak:

• Zaznacz komponent, kliknij '+ Add Variant' w panelu właściwości.
• Zmień kolor drugiego wariantu (np. na ciemniejszy dla stanu 'Hover').
• Nazwij właściwość 'State' i wartości 'Default', 'Hover'.

Warunek ukończenia: Jeden komponent z co najmniej dwoma przełączalnymi wariantami.

Dlaczego: Określają, jak elementy mają się zachowywać przy zmianie rozmiaru ekranu (np. logo zawsze w lewym górnym rogu).

Jak:

• Umieść element wewnątrz Frame.
• W panelu 'Constraints' wybierz 'Left & Right' lub 'Center'.
• Rozciągnij Frame i obserwuj zachowanie elementu.

Warunek ukończenia: Pasek nawigacji, który rozciąga się poprawnie wraz z szerokością ekranu.

Dlaczego: Prototyp pozwala przetestować logikę aplikacji przed jej zaprogramowaniem.

Jak:

• Przejdź do zakładki 'Prototype' (prawa góra).
• Kliknij niebieskie kółko przy przycisku i przeciągnij linię do drugiego ekranu.
• Wybierz 'On click' -> 'Navigate to'.

Warunek ukończenia: Po kliknięciu 'Present' (ikona Play) przycisk przenosi użytkownika do drugiego ekranu.

Dlaczego: Tworzy płynne przejścia między stanami, automatycznie animując pasujące warstwy.

Jak:

• Skopiuj ekran, zmień położenie lub rozmiar elementu na drugim ekranie.
• W ustawieniach prototypu wybierz 'Smart Animate' zamiast 'Instant'.
• Ustaw czas trwania na 300ms.

Warunek ukończenia: Płynna animacja elementu (np. przesuwający się kwadrat) po kliknięciu.

Dlaczego: Pozwala na animowanie drobnych elementów (np. checkbox, przełącznik) bez tworzenia wielu osobnych ekranów.

Jak:

• Wewnątrz wariantów komponentu połącz je w zakładce Prototype.
• Ustaw wyzwalacz 'While hovering' lub 'On click'.
• Użyj tego komponentu w dowolnym projekcie.

Warunek ukończenia: Przycisk, który zmienia kolor po najechaniu myszką w trybie prezentacji.

Dlaczego: Projekty mobilne wyglądają inaczej na ekranie telefonu niż na monitorze.

Jak:

• Pobierz aplikację 'Figma' na telefon (iOS/Android).
• Zaloguj się i wybierz aktualnie otwarty plik.
• Sprawdź, czy przyciski są wystarczająco duże dla kciuka (min. 44x44px).

Warunek ukończenia: Wyświetlenie własnego projektu na fizycznym urządzeniu mobilnym.

Dlaczego: Utrwalenie wszystkich umiejętności w jednym, spójnym zadaniu.

Jak:

• Zaprojektuj: 1. Ekran powitalny (Login), 2. Listę produktów/postów, 3. Detale wybranego elementu.
• Wykorzystaj wcześniej stworzone style, Auto Layout i komponenty.
• Zadbaj o spójne odstępy (siatka 8pt).

Warunek ukończenia: Kompletny, estetyczny projekt trzech powiązanych ze sobą ekranów.

Dlaczego: Programista musi wiedzieć, jak wdrożyć Twój projekt.

Jak:

• Uporządkuj warstwy i nazwij je (np. 'Card / Product').
• Usuń nieużywane elementy i brudnopisy.
• Sprawdź zakładkę 'Dev Mode' (ikona przełącznika u góry), aby zobaczyć wygenerowany kod CSS.

Warunek ukończenia: Czysty plik z logicznie nazwanymi warstwami i grupami.

Dlaczego: Ikony i zdjęcia muszą trafić do kodu w odpowiednich formatach.

Jak:

• Zaznacz ikonę, przejdź do sekcji 'Export' w prawym panelu.
• Wybierz format SVG dla ikon i PNG/WebP dla zdjęć.
• Użyj skrótu Ctrl/Cmd + Shift + E, aby wyeksportować wszystko naraz.

Warunek ukończenia: Folder na dysku zawierający wszystkie ikony z projektu w formacie SVG.

Dlaczego: Aktywne przypominanie sobie funkcji utrwala wiedzę na dłużej.

Jak:

• Spróbuj wymienić z pamięci 5 skrótów klawiszowych.
• Wyjaśnij (na głos lub pisemnie), czym różni się 'Fill container' od 'Hug contents' w Auto Layout.
• Znajdź jeden darmowy plugin (np. 'Iconify' lub 'Unsplash') i zainstaluj go.

Warunek ukończenia: Poprawne wyjaśnienie kluczowych pojęć i instalacja pierwszego pluginu.