Odpowiednie narzędzia mogą znacznie ułatwić pracę projektantów. np. poprzez pomoc w tworzeniu jakościowych projektów w jak najkrótszym czasie. A jak wiadomo, gonią nas terminy, dedlajny i inne takie.
Jednym z najpopularniejszych narzędzi w branży UI jest Figma — rozbudowany program do projektowania i prototypowania interfejsów.
Ach, Figma! Wspaniałe narzędzie, które stanowi absolutny must-have dla każdego designera. Dzięki niej można łatwo i szybko tworzyć prototypy, testować projekty i współpracować z innymi członkami zespołu.
I choć Figma sama w sobie gwarantuje bardzo szeroki zakres funkcjonalności, to na rynku można znaleźć sporo pluginów, które jeszcze bardziej rozszerzają jej możliwości. Wtyczki dostarczają funkcje, które ułatwiają pracę, poprawiają produktywność i dodają coraz to nowe opcje podczas pracy.
📕 Plugin brzmi obco? To pojęcie (i wiele innych!) znajdziesz w naszym ✨ Słowniczku Designera ✨!
W tym artykule mamy dla Ciebie 🔟 wybranych pluginów do Figmy, które mogą okazać się niezwykle przydatne w Twojej codziennej pracy.
Smacznego!
Ach, jeszcze jedno — kolejność nie ma znaczenia.
🔠 Typescale
O tym, że typografia „robi robotę” w dowiesz się z bezpłatnych lekcji web designu z Tomkiem Biskupem.
A jak zadbać o typograficzny porządek – nadać odpowiednią hierarchię i wielkość nagłówkom i pozostałym elementom?
W tym pomoże Ci plugin Typescale, który dobierze odpowiednie wielkości na podstawie wybranego wzorca.
Po odpaleniu pluginu określasz scale i sizes:
- Scale — to liczba, przez którą mnożysz podstawowy rozmiar fontu. Niższe współczynniki zapewniają subtelne różnice, a te wyższe gwarantują bardziej widoczne zmiany.
- Sizes — w tym miejscu określ liczbę wymaganych wielkości, powyżej i poniżej wielkości podstawowej.
Po odpaleniu pluginu musisz wybrać wielkość bazową fontu – base size. Plugin wygeneruje odpowiednio podaną liczbę rozmiarów – ponad i poniżej wielkości bazowej.
Jak podają na stronie pluginu:
Scale – This is the number by which your base font size is multiplied. Lower ratios will give subtle differences, while higher ratios will offer more dramatic variations.Sizes – Here you specify how many sizes you require, above and below your base size.
🤝 Clean Document
Kto lubi robić porządki w warstwach, nazwach, grupach? 🤫 Na pewno nie ma zbyt wielu takich gagatków. Całe szczęście i od tego są pluginy!
Clean Document, jak sama nazwa wskazuje, elegancko wyczyści chaos i niespójności. Przydatne, zwłaszcza kiedy dzielimy się naszym projektem z klientem i pozostałymi osobami z zespołu.
📝 Find & Replace
Och, idzie dostać białej gorączki, kiedy klient non stop coś zmienia w treści albo nazewnictwie.
A gdyby tak istniała wtyczka do wygodnej edycji treści…? Tak się składa, że jest!
Z pluginem Find & Replace to całkiem bezbolesny proces – automatycznie podmienia nazwy, a Ty nie musisz nad tym dłużej ślęczeć!
🤌 Font Awesome
Font Awesome to font, w którym zaszyte są ikonki. Przewaga tego sposobu nad innymi ikonkowymi pluginami, to fakt, że można je wybierać poprzez wpisywanie słów kluczowych „z palca” w polu tekstowym. Proste to, to! Szybkie to, to! Nic, tylko korzystać!
Jak to zrobić?
1️⃣ Najpierw trzeba zainstalować Font Awesome na komputerze.
2️⃣ Później, w Figmie, wybrać Font Awesome jako krój pisma i wpisać słowo kluczowe np. „globe”, „file” albo „desktop”, korzystając z tekstu (skrót „T”). Tutaj znajdziesz ściągawkę słów kluczowych.
A jeśli wolisz wybierać ikonki z okienka, to Font Awesome ma też swój dedykowany plugin o tutaj.
🏹 Arc
Jeśli czasami brakuje Ci trochę szaleństwa, jeśli chodzi o zabawę z tekstem i czujesz, że Twoje teksty są nieco nudnawe… Arc pozwoli Ci nieco nagiąć zasady! 🕺
To wtyczka, która pozwala tworzyć teksty na krzywych.
🧑🦯 Stark
Dostępność to szeroki temat. Podczas projektowania warto pamiętać, chociażby, o odpowiednim kontraście.
Ułatwi Ci to plugin Stark.
👉 A o dostępności dowiesz się więcej z naszego #12 odcinka podcastu z Wojtkiem Kutyłą. Możesz też zajrzeć do artykułu „👀 Dostępność w UX: dane, protipy… i AI!”. Nie pożałujesz.
🎑 Unsplash
Ładne zdjęcia pod ręką?
Całą galerię zdjęć z Unsplash masz w obrębie kilku klików. A do tego jakie ładne te zdjęcia! A jakie intuicyjne wyszukiwanie!
Ten plugin przede wszystkim pozwala zaoszczędzić dużo czasu. ⏱️
✍️ Content Reel
Projektowanie na lorem ipsum nie jest najlepszym pomysłem.
Lepiej użyć realnych danych, nawet jeśli są wymyślone przez Ciebie lub przez... plugin.
Dzięki Content Reel możesz wklejać adresy, specyficzne typy danych, numery, a także zdjęcia, avatary i ikony.
🤏 TinyImage Compressor
Dbanie o performance, czyli o wydajność, również powinno leżeć w gestii projektantek i projektantów.
A jednym z bardzo ważnych kwestii jest rozmiar plików. Im cięższe, tym gorzej. Niestety.
Przy eksporcie warto zadbać o kompresję plików. Nie tylko przełoży się to na lepszy performance np. stron internetowych, ale także to dobry ruch w kierunku digital ecology.
Twoim sojusznikiem w tej sprawie będzie TinyImage Compressor!
🤖 Automator
Zautomatyzuj nudne zadania!
Hasło naczelne tego pluginu to „Supercharge Figma”. To trochę taki plugin, dzięki któremu możesz zbudować swoje własne pluginy #incepcja. 😎
Możesz zautomatyzować też różne zadania — zerknij na przykład od samego autora Automatora. 👹
Warto się pobawić i wykorzystać jego supermoce!
🎁 Bonusy
Czyli wtyczki mniej przydatne na co dzień, ale naprawdę interesujące!
👋 Żegnajcie wiszące spójniki! Idzie Typograf!
Chcesz zadbać o typograficzne detale i zautomatyzować przenoszenie wiszących spójników? Nie ma sprawy, zrobi to za Ciebie plugin Typograf! Dodatkowo możesz śmiało korzystać ze specyficznych symboli i znaków typu symbole, waluty, i tak dalej.
🧩 Może nieład Ci się marzy?
Asystent specjalny do przypadkowego rozrzucania obiektów już tu jest, i nazywa się Ovvverrrflowww. Świetne narzędzie, a zwłaszcza przy tworzeniu różnych patternów.
📄 Lubisz porządeczek?
Jest też plugin do edytowania stylu list i punktorów. Nazywa się Bullets.
Koniecznie musisz wdrożyć te wtyczki do swojego systemu pracy! 🙌
👀 Psst! Jeszcze więcej o projektowaniu dowiesz się z naszych blogpostów:
→ „🌐 Web design – 5 zasad projektowania”,
→ „🎨 UI design – 5 kluczowych protipów”.
