Figma w ostatnich latach stała się najpopularniejszym narzędziem do projektowania interfejsów na urządzenia mobilne, stron desktopowych, sklepów internetowych czy prezentacji interaktywnych. Z perspektywy projektanta darmowa wersja Figmy daje ogromne możliwości z zakresu UX i UI. Jak w pełni wykorzystać potencjał tego programu? Sprawdź, czy znasz wszystkie proponowane przez nas tricki.
Przyspiesz proces projektowania interfejsów – skróty klawiszowe w Figmie
Zaczniemy od najprostszych sztuczek, które polecamy każdemu użytkownikowi Figmy, niezależnie od poziomu zaawansowania – skrótów klawiszowych. Oprócz funkcji przypisanych pojedynczym klawiszom (np. V porusza obiektami, C tworzy ramkę, a Z powiększa) mamy mnóstwo kombinacji, które z czasem wejdą Ci w krew.
Oto przegląd przydatnych skrótów, które usprawnią projektowanie makiet i prototypów:
Mac i Windows:
- Shift + 1 – dopasowuje warstwę do ekranu
- Shift + 2 – powiększa zaznaczoną ramkę
- Shift + 0 – powiększa o 100%
- Shift + R – pokazuje lub ukrywa linijki
Mac:
- Control + G – pokazuje lub ukrywa siatki układu
- Option + 1 – przechodzi do panelu warstw
- Option + 2 – przechodzi do menu Składniki
- Option + Command + V – kopiuje styl zaznaczonego elementu
- Command + G – tworzy grupę z wybranych elementów
- Command + Shift + G – rozgrupowuje elementy
- Command + Shift + L – blokuje lub odblokowuje element na płótnie
- Command + Option + O – otwiera menu biblioteki zespołu
- Command + Shift + E – eksportuje szczegóły wybranej warstwy
Windows:
- Alt + 1 – przechodzi do panelu warstw
- Alt + 2 – przechodzi do menu Składniki
- Ctrl + Shift + C – kopiuje styl zaznaczonego elementu
- Ctrl + G – tworzy grupę z wybranych elementów
- Ctrl + Shift + G – rozgrupowuje elementy
- Ctrl + Shift + L – blokuje lub odblokowuje element na płótnie
- Ctrl + Alt + O – otwiera menu biblioteki zespołu
- Control + Shift + E – eksportuje szczegóły wybranej warstwy
To tak naprawdę tylko kilka przykładów – na oficjalnej stronie Figmy znajdziesz dziesiątki skrótów klawiszowych dla projektantów UX, które pozwolą Ci jeszcze skuteczniej zarządzać czasem przeznaczanym na poszczególne projekty.
Funkcja auto-layout
Chcesz tworzyć responsywne ekrany bez tworzenia dedykowanych projektów? Figma pozwala na to po zastosowaniu funkcji Auto-layout, która jest czymś na kształt techniki Responsive Web Design w witrynach internetowych.
Jeśli masz grupę minimum dwóch elementów i aktywujesz Auto-layout, to możesz dodać marginesy i przestrzenie między obiektami oraz wprowadzić rozłożenie tekstu. Pozycjonujesz w ten sposób poszczególne elementy względem obszaru roboczego i skalujesz obiekty – przypomina to działanie przeglądarki.
Kiedy ta funkcja okaże się naprawdę przydatna? Docenisz ją przy obszernych projektach, które wymagają dynamicznego tworzenia kolejnych ekranów dostosowanych do różnych rozdzielczości i urządzeń, nawet jednocześnie modyfikując treści.
Wszystkie projekty widzisz wtedy na ekranie w tym samym czasie, co przyspiesza i usprawnia pracę.
Arc tool – narzędzie do tworzenia łuków
Za pomocą Arc tool stworzysz np. progress rings, czyli pierścienie obrazujące progres, a także wykresy i wiele więcej. Wystarczy kliknąć 0 na klawiaturze lub wybrać odpowiednią opcję na pasku narzędzi. Jeśli chcesz, żeby obiekt miał kształt okręgu, przytrzymaj klawisz Shift i przeciągnij kursor do odpowiedniego rozmiaru.
Następnie najedź kursorem na środek zaznaczonego okręgu – zobaczysz kropkę i napis Arc. Zabawa zaczyna się, kiedy chwycisz kropkę i przesuniesz kursorem. Narzędzie doskonale sprawdzi się do tworzenia wykresów pierścieniowych i kołowych.
Wykorzystanie komponentów
Zaprojektowane w Figmie elementy, które można wielokrotnie wykorzystać w różnych projektach, to właśnie komponenty. Przykładowo – raz utworzony przycisk może być wdrożony na wielu stronach i ekranach. Dzięki temu Twoje realizacje będą spójne.
Skalowanie projektu
Żeby wszystkie elementy Twojego projektu pozostały względem siebie w tych samych proporcjach, używaj narzędzia do skalowania. Kliknij obiekt, którym chcesz się zająć, naciśnij K i przeciągnij kursorem do odpowiedniego rozmiaru bez obaw, że coś się „rozjedzie”. Pierwotnie nadane proporcje są idealnie utrzymane podczas zwiększania lub zmniejszania rozmiarów projektu.
Udostępnianie projektów do edycji
Dzięki Figmie Twój klient będzie mógł z łatwością edytować projekt, który mu udostępnisz. Co ważne, dostępność fontów nie jest ograniczana, współpraca może odbywać się w czasie rzeczywistym, a to wszystko za darmo dla klienta.
Ta funkcja pozwala również sprawnie projektować makiety UX z innymi designerami. Każdy członek zespołu może edytować projekt w tym samym czasie i wszyscy wiedzą, kto wykonuje dane zadanie.
Projektowanie interfejsów – najlepsze wtyczki w Figmie
Żaden z projektantów UX pracujących w Figmie nie obejdzie się bez wtyczek. Oto kilka atrakcyjnych propozycji, z którymi sprawniej zaprojektujesz stronę internetową:
- Clean Document – ogarnia za Ciebie chaos w warstwach, nazwach i grupach w twoim pliku, redukując wszelkie niespójności;
- Content Reel – generuje za Ciebie adresy, numery, avatary, ikony czy zdjęcia, dzięki czemu nie musisz sam wymyślać danych do projektów;
- Color Palettes – zainspiruje Cię w kwestiach kolorystyki projektów;
- Unsplash – udostępnia zasoby zdjęć z Unsplash;
- Unbackground – usuwa tło z grafiki;
- Wireframe – tworzy szkielety stron www.
Figma i jej funkcjonalności to ocean możliwości dla projektantów UX – zarówno pod kątem wtyczek, jak i wbudowanych narzędzi. To intuicyjne i przyjazne użytkownikom oprogramowanie, które warto zgłębiać i odkrywać coraz więcej zaawansowanych opcji. Z pewnością wpłynie to na atrakcyjność zleceń i efektywność Twojej pracy.
