Od No-Code do AI: Wtyczka Figma dla designerów

Jako projektant produktów zawsze fascynowało mnie tworzenie narzędzi, które usprawniają pracę i wprowadzają porządek w chaosie procesu rozwoju. Jednak jedna umiejętność była mi obca: kodowanie. Pisanie choćby jednej linijki JavaScriptu wydawało mi się tak trudne, jak opanowanie nowego języka w ciągu jednej nocy. Do niedawna wydawało mi się to niemożliwe. Przecież żeby zacząć programować, trzeba nauczyć się podstaw, składni i wybrać odpowiedni język spośród wielu dostępnych. A jednak, jestem tutaj, by podzielić się historią o tym, jak stworzyłem swoją pierwszą wtyczkę do Figmy – Summary Sprint – dzięki wsparciu dużych modeli językowych (LLM), takich jak Cloude Sonnet 3.5 i ChatGPT. Wtyczka ta upraszcza planowanie sprintów, automatycznie podsumowując punkty przypisane do zadań, bez konieczności ręcznych obliczeń czy korzystania z zewnętrznych narzędzi.

Skąd pomysł?

W naszym zespole spędzamy piątkowe popołudnia na zamykaniu tygodniowych sprintów. W teorii do tego momentu wszystkie zadania powinny być ukończone. W praktyce często dopiero w piątek grupujemy „zbłąkane” taski i spotkanie się przedłuża. Zliczanie punktów, grupowanie zadań i podsumowywanie postępów jest kluczowe – pozwala zweryfikować działania i lepiej zaplanować kolejny sprint. Jednak zliczanie punktów bywa nużące. Zadania się piętrzą, karteczki mnożą, a Ty toniesz w ręcznych kalkulacjach, starając się nie pomylić, zwłaszcza przy większej liczbie zadań. Było jasne, że ten proces da się zautomatyzować. Nasz zespół potrzebował rozwiązania, a ja jako osoba bez umiejętności programistycznych musiałem znaleźć sposób, by je wdrożyć. Więc rozpocznijmy nasz eksperyment: Tworzenie wtyczki za pomocą Cloude i „gptsów”

Jak wyglądało tworzenie wtyczki?

Zacząłem od przestudiowania dokumentacji Figmy dotyczącej widgetów i pluginów, a następnie „nakarmiłem” nią dwa modele: Cloude Sonnet 3.5 oraz ChatGPT, zapewniając im potrzebny kontekst technologiczny. Dodatkowo, ChatGPT zaoferował mi coś, co nazwałem „gptsy” – specjalne role nadawane mu za pomocą odpowiednich promptów oraz danych (np. z PDF-ów czy notatek). Pozwoliło mi to przypisać różne specjalizacje w ramach ChatGPT:

• Jeden „gpts” do rozdzielenia funkcjonalności wtyczki na mniejsze elementy.

• Kolejny „gpts” do wsparcia przy implementacji i debugowaniu. Dzięki temu najpierw rozbiłem wtyczkę na drobne moduły, a następnie CloudE Sonnet 3.5 mógł po kolei dodawać kolejne elementy. Inny „gpts” wspierał mnie przy rozwiązywaniu problemów z kodem.

  

  Spróbujcie sami, prompt poniżej :)

You are Developer GPT, a professional programming assistant who helps UX/UI
designers in writing code for plugins and widgets for Figma. You are an expert
in writing clean, efficient code for figma plugin and providing implementation
advice. Occasionally, you also offer UX/UI tips when relevant.

GOAL: Today, you will become my virtual programming assistant. Your task is to
help me write code for a plugin by offering suggestions, solutions, and code
examples. You will be responsible for supporting me in implementation and
providing practical advice.

CRITERIA FOR THE BEST PROGRAMMING ASSISTANT:

- You are specific and practical.
- You avoid generalities and lengthy sentences.
- You help me in writing code by providing examples and explanations.
- You suggest better solutions in terms of implementation and code optimization.
- Occasionally, you provide UX/UI advice when it's pertinent.
- You make task execution easier for me, knowing that I might not be an expert
  in programming.
- You assist me with valuable tips and comprehensive checklists.

STRUCTURE OF OUR SESSION:

- I will set the context of our work. I will choose one challenge to focus on.
  You will generate specific solutions or code snippets/whole code to solve it.
  You will give me a practical action plan with key steps and code if necessary.
- You will share best practices and common mistakes to help me with the
  implementation.

FORMAT OF OUR INTERACTION:

- I will inform you when we can proceed to the next step. Do not move forward
  without my command.
- You will rely on the context of this session at every stage.

INFORMATION ABOUT ME:

- My project: I am creating plugins for Figma that streamline designers
  workflows. We are building a sprint summary tool in Figjam.
- My value proposition: Figjam users can work more efficiently and creatively
  thanks to these tools.
- My target audience: people using Figjam who are looking for tools to
  facilitate their workflow and sprints.
- My current stage: I have several ideas and prototypes but need help refining
  them and effectively implementing the code.

Cloude Sonnet 3.5: Mój Szeptacz Kodów

Cloude Sonnet 3.5 stał się moim głównym narzędziem do generowania bazowego kodu. Pozwoliło mi to skupić się na tym, co robię najlepiej – projektowaniu doświadczeń użytkowników i definiowaniu celu wtyczki – podczas gdy model zajmował się logiką programistyczną. Początkowo próbowałem wygenerować całą wtyczkę za jednym podejściem. Nie był to dobry pomysł. Po kilku nieudanych próbach zdecydowałem się działać iteracyjnie, korzystając z pomocy gptsa do podziału prac na mniejsze kroki: Iteracyjne podejście obejmowało m.in.

• Obsługę różnych metod estymacji (Fibonacci, godziny, wartości niestandardowe).
• Odnajdywanie wartości punktowej przypisanej do karteczki.
• Automatyczne sumowanie punktów i grupowanie zadań.
• Dodanie wyjątków, komunikatów o błędach i wizualnego oznaczania nieplanowanych zadań.

ChatGPT i „gptsy”: Mój Pomocnik w Debugowaniu

Gdy miałem już wstępny kod, natrafiłem na problem: interfejs wtyczki się nie ładował. Tu wkroczył kolejny „gpts”, wyspecjalizowany w debugowaniu. Dzięki niemu, przy użyciu odpowiednich promptów i fragmentów kodu, w krótkim czasie uzyskałem:

• Wskazówki dotyczące dodania logów i komunikatów błędów, ułatwiających namierzenie problemu.
• Pomoc w dopracowaniu sposobu, w jaki wtyczka odnajduje i sumuje punkty.
• Udoskonalenie metody identyfikacji zadań oraz sekcji.

ChatGPT z „gptsem” nie tylko dał mi rozwiązania, ale wytłumaczył również, dlaczego działają. Dzięki temu mogłem myśleć bardziej jak programista – choć na chwilę.

Co potrafi wtyczka?

Po wielu testach i udoskonaleniach powstała Summary Sprint. Oto jej kluczowe funkcje:

• Automatyczne Podsumowania Sprintów: Natychmiastowe generowanie podsumowań planowanych, wykonanych i niewykonanych zadań w FigJam, bez ręcznych kalkulacji czy zewnętrznych narzędzi.
• Kolorowe rozróżnienie planowanych i nieplanowanych zadań Wtyczka rozpoznaje, które zadania nie były zaplanowane (cenne podczas retrospektyw).
• Elastyczna Estymacja Zadań: Niezależnie od tego, czy zespół korzysta z punktów Fibonacciego, estymacji godzinowych czy wartości niestandardowych, wtyczka się dostosowuje. Nie ma ograniczeń co do liczby zadań czy członków zespołu.
• Wyjątek dla Notatek i Komunikaty: Możliwość dodawania neutralnych karteczek z notatkami, pomysłami czy blokadami bez wpływu na metryki sprintu, a także wyświetlanie komunikatów o błędach lub informujących o efektach działania wtyczki.

Wnioski

Projektanci Nie Muszą Kodować Od Zera: Dzięki narzędziom takim jak CloudE Sonnet 3.5, ChatGPT oraz „gptsy” osoby nietechniczne mogą tworzyć wartościowe narzędzia. Kluczem jest iteracyjne podejście, zaczynanie od MVP i skupienie się na potrzebach użytkowników.

Moc Jasnej Informacji Zwrotnej - proces recenzji w Figmie zwrócił uwagę na problem: wtyczka „nigdy się nie ładuje”, jeśli użytkownik nie wybierze sekcji. Dodałem więc komunikat: „Nie wybrano sekcji. Proszę pogrupować zadania w sekcji, aby kontynuować.” Drobna poprawka, a znaczna poprawa użyteczności.

Jeden Krok od Błędu Podczas rozwoju wtyczka przeszła przez dziesiątki wersji. Łatwo było o „fatal error”. LLM-y pełnią rolę mentora, doradcy, a nawet asystenta od burzy mózgów, lecz trzeba nimi zarządzać świadomie. To narzędzia, a nie automatyczne rozwiązanie każdego problemu.

Co dalej?

Wtyczka jest już dostępna w społeczności Figmy, wraz z materiałami demonstrującymi jej działanie. Każda zmiana z mojej perspektywy była tak naprawdę o krok od niedziałającego kodu – doszlifowywanie wyglądu wtyczki zajęło mi zbliżoną ilość czasu co stworzenie jednej funkcjonalności. Ciężkie, złożone zadania programistyczne pozostawię jednak mojemu doświadczonemu zespołowi, który poradzi sobie z każdym problemem. Mimo to, jako ktoś, kto od lat projektuje interfejsy, miło było stworzyć coś samemu. (Wybacz, AI, za zabranie wszystkich zasług!)

Narzędzia AI pozwalają nam przekraczać własne ograniczenia. Nie trzeba być inżynierem, by stworzyć coś wartościowego – wystarczą odpowiednie nastawienie, wiedza oraz narzędzia, w tym specjalnie przystosowane „gptsy”.