Figma Make – Jak zacząć pracę z tym modułem AI

Jest to kolejne narzędzie z kategorii Vibe Code, które ma pomóc przenosić nam nasze makiety i pomysły na działające rozwiązania zakodowane. To rozwiązanie łączy sztuczną inteligencję z możliwościami projektowymi Figmy, Umożliwiając po prostu skopiowanie swojej magiety do okna rozmowy z czatem i wyplucie działającego potencjalnie rozwiązania. Żeby nie było, Figma nie ma żadnego swojego LLMa, Korzysta z modeli językowych Google oraz Anthropica.

Kluczowe możliwości Figma Make:

• Tworzenie prototypów z opisów tekstowych – wystarczy opisać pomysł słowami, a AI wygeneruje interaktywny projekt
• Integracja z bibliotekami Figma Design – automatyczne wykorzystanie systemu projektowego z zachowaniem spójności wizualnej
• Generowanie funkcjonalnego kodu – prototypy można przekształcić w rzeczywiste aplikacje webowe
• Połączenie z bazami danych (Supabase) – tworzenie aplikacji z prawdziwymi danymi, autoryzacją użytkowników i API
• Iteracyjne udoskonalanie projektów – możliwość precyzyjnej edycji i dopracowania wygenerowanych elementów
• Możliwość pobrania kodu – praca na nim w innym środowisku np. w Cursorze czy praca przez deweloperów.

Zalety Figma Make

• Szybkość prototypowania – Figma Make dramatycznie skraca czas potrzebny na stworzenie funkcjonalnego prototypu. To, co wcześniej wymagało godzin Na łączenie kropek i strzałek w trybie prototypu.
• Brak konieczności kodowania – Narzędzie demokratyzuje proces tworzenia aplikacji, umożliwiając projektantom, product managerom i innym specjalistom nietechnicznym samodzielne tworzenie funkcjonalnych prototypów.
• Zachowanie spójności projektowej – Przynajmniej taka jest obietnica, bo w zależności od promptu, który uszyjecie oraz modelu językowego, który wybierzecie, ta spójność może być naprawdę bardzo różna.
• Integracja z bazami danych – Możliwość połączenia z Supabase umożliwia tworzenie Bardziej zaawansowanych projektów i prototypów, które posiadają dane i pracują na nich. Figma obiecuje, że jest to gotowy kod i gotowe rozwiązanie, ale to nieprawda.
• Konwersja do kodu – Wygenerowane prototypy można wyeksportować jako warstwy projektowe lub gotowy kod, co ułatwia przekazanie projektu do wdrożenia.

Wady Figma Make

• Zależność od jakości promptów – Jakość wygenerowanego projektu silnie zależy od tego, jak dokładnie użytkownik opisze swój pomysł. Niedokładne polecenia mogą prowadzić do niezadowalających rezultatów. Pamiętajcie, że bazujemy tak naprawdę na LLM od zewnętrznego dostawcy i to jest klucz do naszego rozwiązania.
• Ograniczenia w zaawansowanych funkcjach – Dla złożonych aplikacji lub specyficznych wymagań technicznych, narzędzie może nie być wystarczające i wymagać uzupełnienia ręcznym kodowaniem. Powiem więcej, moim zdaniem nadaje się wyłącznie na taką inicjalną fazę. Dokończenie tego projektu moim zdaniem wymaga troszeczkę innego środowiska.
• Krzywa uczenia się – Chociaż narzędzie jest intuicyjne, opanowanie sztuki tworzenia efektywnych promptów i wykorzystania wszystkich funkcji wymaga czasu i praktyki.
• Dostępność funkcji – Niektóre zaawansowane funkcje, jak integracja z Supabase, są dostępne tylko w wyższych planach subskrypcyjnych.
• Potencjalne błędy AI – Jak każde narzędzie oparte na AI, Figma Make może czasami generować nieoczekiwane lub nieprawidłowe rezultaty wymagające korekty.

Zamiast czytać, możesz obejrzeć mój film na YouTube na ten temat?

Tutorial – Przewodnik po Interfejsie Figma Make krok po kroku

1 – Pole tekstowe do opisania pomysłu. Główne pole wprowadzania, w którym opisujesz swój pomysł na projekt. Tutaj wpisujesz polecenia tekstowe (prompty), które AI przekształci w funkcjonalny prototyp. Pamiętaj, że warto dobrze opisać projekt, opisać jego styl i tutaj dodać dokładną definicję poszczególnych sekcji. Wrzucenie samego hasła „zrób stronę z tego projektu” może spowodować duże odstępstwa.

2 – Attach a design. Pozwala załączyć istniejący projekt Figma jako wzór wizualny dla AI. To Najważniejsza zaleta Figma Make na tle konkurencji do vibowania rozwiązań, która jest na rynku. Dodanie projektu pozwala na zebranie wszystkich informacji na temat projektu przez AI, Dzięki czemu mamy większą szansę na dokładność projektu i jego wykonania.

3 – Upload Image. Opcja wgrania zrzutu ekranu, szkicu lub istniejącego projektu, który posłuży jako wzór wizualny. W przeciwieństwie do twojego projektu z Figmy, kiedy dodasz tutaj grafikę, nie masz bardzo wielu informacji takich jak tokeny, kolory, fonty, odległości, które normalnie LLM dostanie z automatu. Tutaj musi się ich domyślić, więc masz dużo większe prawdopodobieństwo odstępstw od tego graficznego projektu. To nie zmienia faktu, że możesz dosyć szybko zainspirować się tym projektem i zacząć na nim pracować.

4 – Connectors (Konektory). Opcja pozwalająca na połączenie projektu z zewnętrznymi usługami i bazami danych, takimi jak Supabase. Dzięki temu możesz tworzyć aplikacje z prawdziwymi danymi, autoryzacją użytkowników i funkcjami backendu.

5 – Przykładowe projekty społeczności. Gotowe szablony projektów, takie jak „Interactive Grocery Mobile App”, „Minimalist sidebar component” czy „Design System SaaS Landing Page”. Możesz je otworzyć, aby zobaczyć przykładowe możliwości narzędzia i użyć jako inspiracji.

6 – Start from an example. Link do galerii przykładowych projektów stworzonych w Figma Make. To świetny sposób na poznanie możliwości narzędzia i znalezienie inspiracji. Przykłady obejmują różne typy aplikacji – od prostych landing page’ów po złożone dashboardy.

1- Czat. Pole do rozmowy z AI na temat naszego projektu.

2 – Tryb wskazywania. Po kliknięciu w tą ikonę macie możliwość wskazywania elementów w swoim projekcie, dzięki czemu możecie dokładnie wskazać element, który chcecie poprawić. Ponadto kliknięcie w tym trybie w jakiś element strony pozwala Ci ją edytować za pomocą mini panelu, który się pojawia. O tym więcej opowiadam przy kolejnym screenie.

3 – A design system. Tutaj możesz podpiąć design system. Jeżeli masz już jakiś gotowy projekt i np. chcesz podpiąć inny design system niż miałeś do tej pory, to możesz to zrobić za pomocą właśnie tego buttona i wskazać bibliotekę library w Figmie.

4 – Dodawanie plików. Tutaj możesz dodać dodatkowe pliki, wskazać jakąś grafikę, inspirację, którą chciałbyś/chciałabyś wkleić do projektu, aby uwzględniono ją w trakcie projektowania.

5 – Ikona przywracania stanu. Wskazana tutaj ikona pozwala Ci przywrócić poprzednią wersję swojego projektu. Gdy AI zbłądzi, bardzo często będziesz i będziesz cofała i cofał się do poprzedniego kroku, aby zdefiniować, sprecyzować w inny sposób swoje oczekiwania.

6 – Zmiana trybu. W projekcie możesz zmienić podgląd z podglądu takiego wizualnego Twojego zbudowanego projektu na tryb kodu, czyli możesz podejrzeć kod, zobaczyć co w nim się znajduje i nawet dokonać zmiany, które będą potencjalnie widoczne w podglądzie.

7 – Kopiowanie warstw. Bardzo istotna funkcja pozwalająca na zmianę Twojego vajbowanego projektu w makiety w Figmie. Szczególnie kiedy korzystasz z jakiejś inspiracji graficznej, którą przerobiłeś na działające rozwiązanie, mimo wszystko możesz zmienić w działającą makietę w Figmie, którą potem możesz edytować.

8 – Ustawienia. Tutaj można dokonać kilku poprawek i ustawień. Jedno z ważniejszych ustawień to wybór domyślnego modelu językowego. Aktualnie model językowy Cloude Opus jest całkiem dobrym rozwiązaniem.

1 – Zaznaczony element „h1”. Fragment tekstu nagłówka został zaznaczony do edycji. Niebieska ramka wskazuje aktywny element, który można modyfikować. To pokazuje, że Wiele elementów może być modyfikowanych za pomocą dodatkowego menu kontekstowego, które pojawia się po kliknięciu.

2 – Pasek formatowania tekstu. Wskazany element będzie oznaczony niebieską ramką i widoczny. Może to się przydać również do opisu problemu wybranego elementu, który potem AI poprawi za Ciebie.

3 – Kontekstowe menu. Rozwijane menu, które będzie posiadało różne funkcje w zależności od wybranego elementu. Z momentu pisania tego artykułu nie zawsze działa to dobrze i nie zawsze wszystkie funkcje są dostępne.

1 – URL opublikowanego projektu. Wyświetla adres internetowy projektu. To automatycznie wygenerowany URL, pod którym projekt jest dostępny online. Adres można skopiować i udostępnić innym osobom Nawet takim, które nie mają dostępu do Figmy ani nie mają założonego tam konta.

2 – Informacja o ostatniej publikacji. Status „Published” wraz z informacją „5 days ago – Piotr Marszalkows” pokazuje, kiedy projekt został opublikowany i przez kogo. To pomaga śledzić historię zmian i wiedzieć, czy przeglądasz najnowszą wersję.

3 – Ustawienia widoczności „Who can view”. Opcja „Anyone on the web” oznacza, że projekt jest publicznie dostępny dla każdego, kto zna link. Można to zmienić na bardziej restrykcyjne ustawienia, takie jak:

• Dostęp tylko dla określonych użytkowników
• Dostęp tylko dla członków organizacji
• Dostęp chroniony hasłem

4 – Przycisk „Update”. Służy do opublikowania najnowszej wersji projektu. Gdy wprowadzisz zmiany w projekcie, kliknięcie tego przycisku zaktualizuje opublikowaną wersję i udostępni ją wszystkim użytkownikom.

5 – Opcja „Connect a domain”. Pozwala połączyć własną domenę zamiast używania domyślnego adresu figma.site. To szczególnie ważne dla projektów produkcyjnych, które mają być dostępne pod profesjonalnym adresem (np. www.twoja-firma.pl).

1 – Zmiana trybu podglądu. To tutaj możesz wybrać oczko, jeżeli chcesz zobaczyć zbudowany projekt albo ikonę kodu, aby podejrzeć kod i strukturę kodu Twojego projektu. Możesz tam też dokonywać drobnych i większych zmian, które będą potem widoczne na Twoim projekcie bez używania tokenów.

2 – Ikona pobrania projektu. To tutaj możesz pobrać ten projekt na dysk, a następnie pracować na nim np. w Visual Studio Code czy w Cursor Code, aby dopracować projekt. Z uwagi na to, że Figma Make nie jest rozwiązaniem, które ma budować docelowe rozwiązanie, Ważne jest, aby mieć możliwość dalszego dopracowania projektu w innych możliwych środowiskach. Ponadto to pozwala Ci uwolnić się od rozwiązania, które zbudowała Ci Figma i po zakończeniu subskrypcji nadal móc korzystać z wygenerowanego kodu.

Podsumowanie

Figma Make to nowe narzędzie, które zmienia sposób, w jaki projektanci i twórcy produktów cyfrowych pracują nad prototypami i aplikacjami. Dzięki połączeniu możliwości AI z ekosystemem Figmy, proces tworzenia staje się nie tylko szybszy, ale również bardziej dostępny dla osób bez zaawansowanej wiedzy technicznej.

Na ten moment jest to rozwijany moduł. I posiada on wiele ograniczeń jak i wad. Funkcjonalnościach menu kontekstowe zmiany potrafią nie zmieniać projektu i nie działać tak jak zamierzała sobie to Figma.

Figma Make pozwala na całkiem fajny zamiennik w stosunku do prototypowania, bo uwalnia to trochę czasu. Nie jest to jednak rozwiązanie, które pozwala Ci zrobić gotowe i docelowe rozwiązanie. Nadaje się do prostych stron statycznych dla portfolio, które chcesz wygenerować. Jak najbardziej można to zrobić i będzie to działało.  Jednakże dla bardziej zaawansowanych rozwiązań z logiką, Figma Make może przydać się tylko na etapie wstępnym, koncepcyjnym. Następnie i tak trzeba będzie zabrać ten projekt i pracować na nim gdzieś na zewnątrz. Na ten moment ma wiele ograniczeń.