Polecane i przydatne pluginy do Figmy

Figma Community jest wypełnione pluginami do mniejszych i większych zadań. Poniżej prezentuje te, z których korzystam i odczułabym ich brak.

Lista polecanych przeze mnie pluginów do Figmy

Workflow i typowo do projektów

Export/Import Variables - żeby nie duplikować draftów z variables dopasowanych pod nasz sposób pracy lub design systemu. Plugin eksportuje oraz importuje variables w formie plików json.

Detach Component - przydatny, kiedy Figma odmawia współpracy gdy chcę pozbawić elementu funkcji Componentu (co się zdarza).

Insert Big Image - obowiązkowy plugin jeśli wrzucasz do instrukcji, moodbordu lub w podglądzie dla klienta duże pliki obrazów - figma lubi redukować ich jakość. Plugin dzieli obrazy na części, co umożliwia zachowanie jakości obrazu.

Font Preview - przy doborze fontów bezpośrednio w Figmie plugin pozwala na podgląd z uwzględnieniem wpisanego tekstu.

Coolors - ulubiony przez NFU generator palet od razu w Figmie.

Tailwind Color Palettes - generuje style (nie variables) wybranej palety od Tailwind.

Color Shades - prosty plugin pozwalający na podgląd odcieni jednego koloru (od najjaśniejszej do najciemniejszej) z uwzględnieniem informacji, czy zachowany jest kontrast między odcieniami. Przydatny plugin przy tworzeniu design systemów.

Stark - złożony plugin do testowania projektu pod względem dostępności w celu przetestowania między innymi czytelności i kontrastu.

Porządkowanie

Automatic Style Guide- niezbędny plugin jeśli potrzebujesz wyciągnąć kolorystykę i typografię do Handoff. Obsługuje eksport z Variables. Tworzy dodatkową stronę (page) w projekcie, przejrzyście prezentuje potrzebne dane.

Styler - najczęściej używam funkcji "extract styles", generuje na środku otwartej strony (polecam otwierać na innej niż finalny projekt) uproszczony widok kolorów oraz typografii (tutaj - generując nazwę z styli lokalnych i przypisując go). Nie eksportuje variables, ale jest przydatny do skróconego podglądu typografii, stylów i efektów (cienie, ring).

Wektorowe bajery

Easometric - prosty plugin do tworzenia izometrycznych grafik, pomaga szybko zmienić kąt nachylenia przygotowanych przez nas elementów. Może być również używany na obrazach wprowadzonych do projektu.

Fast Isometric - to samo co wyżej ale z dodatkowymi opcjami takimi jak gotowe kształty, palety kolorów.

Arc - plugin do układania tekstów (nie kształtów) na linii łuki. Czasami wymaga prób i błędów, wyniki nie są identyczne z podglądem, ale nadal bywa przydatny.

Pixels - pozwala na dodanie efektu pikselozy i wektoryzację wyniku, działa na zdjęciach oraz kształtach wektorowych.

Pixel Princess - plugin do dodawania wektorowym kształtom pikselowego wyglądu. Nowo powstałe kwadraty tworzą się tylko na obrysie (stroke).

Blend (autor Gleb) - pozwala na ułożenie konkretnego, powielonego kształtu po utworzonej przez siebie ścieżce (path). Ścieżka może być na żywo edytowana już po złączeniu z wybranym kształtem.

Blend (autor Ian Cox) - umożliwia tworzenie przejść między dwoma obiektami (podobnie jak Blend tool w illustratorze). Ważne jest, aby obiekty miały taką samą ilość punktów (z uzględnieniem tych, na których są aktywne krzywe Beziera). Przy bardziej skomplikowanych kształtach warto ostatnią fazę kształtu stworzyć ze zmodyfikowanego kształtu początkowego, aby plugin poprawnie działał i dał pożądane efekty.

Inne oraz aktualnie testowane

html.to.design - wrzucony link strony zmienia w projekt Figmy. Przydatne, aby wygodniej móc przestudiować budowę stron (nadal polecam używania dev mode w przeglądarce). Otrzymasz layout oparty na frame'ach, nieostylowanych kolorach. Miewa problemy z niektórymi sekcjami oraz tam, gdzie wystepuje animacja, ale do statycznych stron nadaje się idealnie.

LottieFiles - aktualnie testowany. Naszym pierwszym wyborem jest Rive, ale ten ma potencjał na skrócenie czasu pracy przy mniej zaawansowanych animacjach.

Automator - aktualnie testowany plugin do automatyzacji powtarzalnych czynności.

Używane kiedyś

Pluginy warte wspomnienia z sentymentu.

Tokens Studio for Figma - mniej używane przeze mnie po wprowadzeniu Variables. Dla niektórych może okazać się wygodniejsze.

Style Organizer - przed erą Variables był to bardzo przydatny plugin w celu szybkiego sprawdzenia, którym elementom w projekcie nie nadano stylów. Miał wadę - po automatycznym przypisywaniu kolorów potrafił dodać stroke z kolorem tam, gdzie go nie było (zwłaszcza na fontach).

Auto Documentation - taka sama funkcja jak wspomniane pluginy w "Porządkowaniu projektów". Tworzył component (fontu lub coloru ze stylów lokalnych), który był podstawą pod wygenerowane informacje. Niestety nie działa tak dobrze jak kiedyś, elementy tworzą się długo, w losowym miejscu lub niepełne.

Na koniec

Szukanie pluginów na własną rękę pozwala na znalezienie perełek, jednak warto używać sprawdzonych rozwiązań. Mam nadzieję, że znajdziesz w tej liście swój nowy ulubiony plugin.