Gwałtowny rozwój AI zrewolucjonizował narzędzia do projektowania interfejsów. Spokojnie – rola Product Designerów nie jest zagrożona, ale dzięki kreatywnym wtyczkom do Figmy, nasza praca może być znacznie szybsza i prostsza.
Chcę Ci opowiedzieć o kilku pluginach, które mogą usprawnić Twoją twórczą pracę. Przygotowałem zestawienie obejmujące różne etapy projektowania – od generowania koncepcji, przez automatyzację procesów w trakcie samego projektowania, aż po testowanie i prezentację efektów.
Pomoc w warsztatach i pracy konceptualnej
Przed rozpoczęciem projektowania każdy projekt wymaga podjęcia co najmniej kilku kluczowych decyzji. Najczęściej ustalasz je podczas warsztatów z resztą interesariuszy lub samodzielnie dokumentujesz podjęte decyzje. W tych momentach mogą okazać się pomocne usprawnienia, które opiszę niżej.
UX Pilot AI
UXpilot.ai to plugin, który pojawi się tutaj jeszcze w innym kontekście, bo jest prawdziwym kombajnem w pracy UX/UI designera. Zintegrowany z Figmą i Figjam w kilku prostych krokach wygeneruje dla Ciebie plansze do warsztatów w zależności od ustalonego przez Ciebie celu lub stworzy w schemat na podstawie zadanego przez Ciebie promptu.

Generowanie wireframe’ów
Kolejnym krokiem w procesie projektowym jest często praca na wireframe’ach, która jest etapem w ustalaniu docelowego layoutu projektu. Tutaj także może przyjść z pomocą wymieniony już UXpilot, ale oferta wtyczek jest o wiele bardziej bogata.
Relume
Relume to jeden z najpopularniejszych pluginów, dzięki prostemu interfejsowi i bardzo trafnym odpowiedziom na prompty. Może być dla Ciebie świetnym źródłem inspiracji, gdy szukasz pomysłu, jak zagospodarować przestrzeń projektu. Przyda się też przy pracy nad architekturą treści.
UX Magic AI
UXmagic.ai działa na podobnej zasadzie do poprzedniej wtyczki. Prosty interfejs w Figmie pozwala na wpisanie zapytania. Im bardziej precyzyjne – tym lepszy efekt końcowy. Tak samo jak Relume, jest to wtyczka integrująca serwis zewnętrzny, pozwalający na wykorzystanie jego funkcjonalności bezpośrednio w interfejsie Figmy. Ma jednak jeden minus – w chwili pisania tego artykułu niestety wciąż obowiązuje lista oczekujących dla osób chętnych wypróbować jego możliwości. Z mojego doświadczenia – nie powinno to jednak trwać dłużej niż kilka dni.
Tworzenie assetów
Kiedy już podjąłeś wstępne decyzje, czas określić charakter projektu i zająć się wyglądem.
FontExplore AI
FontExploreAI to prosta wtyczka, która pomoże Ci dobrać odpowiedni font. Wystarczy, że opiszesz, jaki charakter ma mieć Twój projekt, a resztę AI zrobi za Ciebie. Oszczędza tonę czasu na przeszukiwaniu całej kolekcji fontów.
UX Pilot AI – Color & Gradient AI
UXpilot.ai – Color & Gradient AI to plugin od developera, o którym już wspomniałem w tym artykule. Jednak tym razem skoncentrujemy się na generowaniu palet kolorów lub gradientów. To przydatna opcja do testowania różnych rozwiązań wizualnych i ciekawe narzędzie do odnajdywania nieoczywistych połączeń kolorów.
Automatyzacja działań
To chyba część procesu projektowania, która pochłania mi najwięcej czasu. Powodów jest kilka. Figma jest narzędziem skoncentrowanym na projektowaniu, a nie na przygotowywaniu treści, do czego trzeba użyć narzędzi zewnętrznych. Dodatkowo – duże projekty potrafią bardzo szybko rosnąć i przy pracy kilku projektantów na raz czasem trudno zapanować nad spójnością (choćby w nazewnictwie warstw). Całe szczęście developerzy wtyczek również tutaj nie zawiedli.
Figma Autoname
Figma Autoname to narzędzie, które pomoże Ci zapanować nad nazewnictwem warstw. Dzięki niemu unikniesz generycznej nomenklatury i braku spójności przy pracy wielu designerów nad jednym projektem. Metoda działania jest niezwykle prosta – zaznaczasz warstwy klikasz przycisk „Name” w interfejsie wtyczki, a ta wykona całą pracę za Ciebie. Modele AI przeanalizują projekt i dobiorą automatycznie najlepszą nazwę dla użytych w pliku warstw.

Icons8 Background Remover
Icons8 Background Remover to darmowe rozwiązanie, które znacznie przyspieszy przygotowywanie grafik do umieszczenia w projekcie, bez potrzeby przechodzenia do zewnętrznych aplikacji, aby usunąć tło z grafik, które chcemy umieścić w layoucie. Zaznacz warstwę, uruchom wtyczkę i voilà.
Generowanie treści
Projekty z lorem ipsum zamiast prawdziwego tekstu czy zaślepek zamiast obrazków od samego początku nie były dobrym pomysłem. Realia pracy nad produktami cyfrowymi są takie, że prawie nigdy zasoby na stronę nie są gotowe przed projektem graficznym. Spędzanie czasu nad ich tworzeniem (zwłaszcza gdy nie ma dedykowanej osoby w zespole do tego typu działań), to często godziny dodatkowej pracy. Pojawienie się rozwiązań takich jak ChatGPT znacząco wspomaga twórców w rozwiązaniu tego problemu, a kolejnym krokiem jest implementacja narzędzi wykorzystujących generowanie treści lub grafik do interfejsu Figmy.
Frontitude
Frontitude to wtyczka, która na podstawie ustalonych parametrów wygeneruje tekst dla Twojego projektu. W prosty sposób ustalasz ton, długość i inne cechy, a w kilka sekund wypełniasz layout angażującymi treściami.

Magician
Magician to rozwiązanie, które świetnie się przyda do generowania ikon i obrazów. Działa dokładnie tak samo jak większość tutaj już wymienionych. W polu tekstowym wpisujesz, czego potrzebujesz (np. ikonę magika z lornetką) – wtyczka zrobi resztę za Ciebie. Potem wystarczy już umieścić na layoucie jeden z wygenerowanych obrazków.

Testowanie rozwiązania
Przed wdrożeniem projektu powinieneś upewnić się, czy Twoje rozwiązanie spełnia wstępne założenia. Wtyczki wspomagane AI mogą nam pomóc w analizie lub mogą Cię wesprzeć w wygenerowaniu klikalnych makiet, które możemy zabrać na testy z użytkownikami.
Clueify
Clueify jest usługą, która pozwala przełożyć bazę tysięcy zagregowanych wyników badań na Twój projekt. Po wybraniu interesującej warstwy w Figmie i uruchomieniu wtyczki, projekt zostanie poddany analizie, a wyniki przedstawione w postaci np. heatmapy prezentującej potencjalną uwagę użytkowników na poszczególnych elementach widocznych na layoucie. Dzięki temu możesz z dużym prawdopodobieństwem przekonać się, czy Twój design ma szansę na osiągnięcie celu.
Pamiętaj jednak, że każdy przypadek jest indywidualny i nic nie zastąpi prawdziwych badań.

Builder.io
Builder.io pomoże Ci przeprowadzić testy jeszcze szybciej, a to dlatego, że na bazie projektu z Figmy możesz wygenerować w kilka chwil w pełni interaktywny prototyp, który wystarczy przekazać do badań. Na bazie designu Builder.io tworzy kod, który w zasadzie działa jak prawdziwa aplikacja, więc jesteś w stanie ominąć wąskie gardło, którym często jest żmudne linkowanie między sobą ekranów w Figmie.

Podsumowanie
I to by było na tyle. Dodatków do Figmy jest oczywiście dużo więcej i pokrywają jeszcze więcej przypadków użycia. Mam nadzieję, że te zaproponowane w tekście przypadły Ci do gustu i być może dzięki ich wykorzystaniu Twój proces projektowy stanie się prostszy niż dotychczas. Chętnie dowiem się, z jakich rozwiązań Ty korzystasz, więc możesz śmiało napisać to w komentarzu pod tym artykułem 😊
***
Jeśli interesuje Cię obszar AI, wybrane narzędzia oraz praca UX, zajrzyj konicznie również do innych artykułów naszych specjalistów.
Bardzo fajne zestawienie pluginów AI do Figmy – będzie testowane 😉