Plasmic - co to jest i do czego służy?

Plasmic to wizualny edytor do budowania stron i aplikacji, który działa na kodzie firmy, zamiast go zastępować. Krótka odpowiedź na pytanie, co to jest i do czego służy: programiści przygotowują w React zestaw komponentów, takich jak sekcja z ofertą, formularz czy karta produktu, a osoby z marketingu lub projektanci układają z nich nowe strony w przeglądarce, metodą przeciągnij i upuść. Gotowe widoki trafiają do aplikacji, na przykład w Next.js, bez czekania na kolejny sprint.

Projekt jest otwartoźródłowy. Kod źródłowy leży na GitHubie, gdzie zebrał ponad 7 tys. gwiazdek, a główną część platformy udostępniono na licencji AGPL. Wśród firm, które wypowiadają się o narzędziu na stronie producenta, są Intuit, GitHub i Zapier.

Plasmic - co to jest i do czego służy w praktyce

Producent opisuje Plasmic jako otwartą platformę do wizualnej edycji i zarządzania treścią, która integruje się z istniejącym kodem, zamiast zamykać użytkownika we własnym ekosystemie. W praktyce spotyka się trzy zastosowania. Pierwsze to strony marketingowe: landing page, strony kampanii, sekcje strony głównej. To najczęstszy scenariusz, bo tam zmiany są częste, a logika prosta. Drugie to interfejsy w aplikacjach: panele klienta, ekrany w produkcie SaaS, formularze, które projektant chce dopracować bez angażowania programisty. Trzecie to proste narzędzia wewnętrzne połączone z danymi przez gotowe integracje.

Sercem systemu jest Plasmic Studio, czyli edytor działający w przeglądarce. Przypomina narzędzia do projektowania, ale wynikiem pracy nie jest obrazek, tylko działająca strona. Do Studio można też zaimportować projekt z Figmy przez wtyczkę producenta i dalej pracować na nim jak na kodzie.

Kolejka zmian, którą Plasmic ma skrócić

W wielu firmach wygląda to podobnie. Dział marketingu potrzebuje nowej strony pod kampanię. Projektant przygotowuje ją w Figmie, zadanie trafia do zespołu programistów, czeka na wolne okno w sprincie, potem na wdrożenie. Zmiana nagłówka po tygodniu kampanii to kolejne zgłoszenie. Standardowe odpowiedzi na ten problem mają swoje ograniczenia. Headless CMS pozwala marketingowi zmieniać treści, ale nie układ strony. Narzędzia no-code dają pełną swobodę układu, ale strona żyje wtedy poza aplikacją i jej kodem. Plasmic próbuje połączyć oba światy: swobodę układania stron z kontrolą programistów nad tym, z czego są one zbudowane.

Marketer: nowa strona bez zgłoszenia do IT

Dla osoby z marketingu Plasmic to edytor, w którym widzi stronę dokładnie tak, jak zobaczy ją klient. Może dodać sekcję, zmienić kolejność bloków, podmienić zdjęcie, przygotować wersję językową i opublikować zmiany bez udziału programisty. Producent podkreśla właśnie ten model pracy: twórcy treści budują strony, programiści zajmują się kodem. W droższych planach dochodzą funkcje typowo marketingowe: testy A/B, harmonogram publikacji, pokazywanie różnych treści różnym grupom odbiorców i uproszczony tryb dla twórców treści, który ogranicza, co można zmienić. To ważne. Swoboda bez granic szybko kończy się stroną, na której każda sekcja ma inny odstęp i inny odcień przycisku.

Z tego samego powodu dobrze działający Plasmic zawsze zaczyna się od pracy programistów i projektanta. Marketing dostaje klocki. Ktoś musi je najpierw zaprojektować i zbudować tak, żeby trudno było z nich ułożyć coś brzydkiego. Ta sama zasada dotyczy każdego landing page'a, niezależnie od technologii: ograniczony zestaw sekcji, które dobrze działają razem, daje lepsze strony niż pełna swoboda.

Programista: własne komponenty zamiast cudzych klocków

Dla zespołu technicznego najważniejsza jest funkcja nazywana komponentami kodu. To komponenty React z kodu aplikacji, które po zarejestrowaniu pojawiają się w Studio obok wbudowanych elementów. Formularz zapisu do newslettera, kalkulator ceny czy lista produktów z API działają w edytorze tak samo jak w aplikacji, bo to ten sam kod. Technicznie wygląda to tak, że Studio uruchamia się wewnątrz aplikacji firmy, na specjalnej stronie nazywanej app host. Dzięki temu ma dostęp do wszystkich komponentów, które aplikacja zna. Programista decyduje, które właściwości komponentu marketing może zmieniać w edytorze, a których nie.

To podejście dobrze współgra z firmowym design systemem. Jeśli przyciski, karty i formularze są już zbudowane w kodzie i opisane na przykład w Storybooku, w Plasmic wystarczy je udostępnić. Nie trzeba odtwarzać ich drugi raz w narzędziu wizualnym. Plasmic najgłębiej wspiera frameworki oparte na React: Next.js, Gatsby i Remix. Do danych podłącza się przez gotowe integracje, m.in. z Supabase, Contentful i Shopify, albo przez dowolne API w REST lub GraphQL.

Dwa sposoby podłączenia: Headless API i generowanie kodu

To decyzja, którą trzeba podjąć na początku wdrożenia, a jej skutki widać przez cały czas życia projektu. Plasmic oferuje dwa tryby.

W trybie Headless API aplikacja pobiera projekt z Plasmic w trakcie budowania lub działania strony. W repozytorium nie ma wygenerowanego kodu. Marketing publikuje zmianę, strona przebudowuje się automatycznie, a programista nie musi nic robić. Dokumentacja wprost zaleca ten tryb, chyba że jest dobry powód, by wybrać inny.

W trybie generowania kodu Plasmic tworzy pliki React, które programista pobiera do repozytorium. Każda zmiana w edytorze przechodzi przez przegląd kodu, historię zmian i normalny proces wdrożenia. To wolniejsze, ale lepiej sprawdza się w aplikacjach z dużą ilością logiki, gdzie projektant układa interfejs, a zachowanie piszą programiści.

Uproszczona reguła: strony marketingowe - Headless API, ekrany aplikacji z logiką - generowanie kodu. Producent deklaruje też, że kod można w każdej chwili wyeksportować w całości, co ogranicza ryzyko uzależnienia od dostawcy.

Projektant i właściciel firmy: Plasmic na tle innych narzędzi

Projektant patrzy na Plasmic przede wszystkim jako na alternatywę dla Webflow i Figmy, a właściciel firmy jako na kolejną pozycję w budżecie. Dla obu przydatne jest porównanie z rozwiązaniami, które najczęściej wchodzą w grę.

Webflow jest prostszy, jeśli strona firmowa jest samodzielnym serwisem. W projekcie dla HR Hints zbudowaliśmy na nim stronę z CMS, którą zespół klienta obsługuje samodzielnie, bez wsparcia technicznego. Plasmic ma przewagę wtedy, gdy strony marketingowe mają być częścią aplikacji w React i korzystać z jej komponentów oraz danych. Najbliższym konkurentem jest Builder.io, który działa w podobnym modelu. Z kolei klasyczny headless CMS, taki jak Strapi, daje marketingowi kontrolę nad treściami, ale nie nad układem. Dla wielu firm to wystarcza i jest prostsze w utrzymaniu. Przegląd innych systemów tego typu daje zestawienie popularnych headless CMS.

Koszty, licencja i rzeczy, które łatwo przeoczyć

Plasmic ma plan darmowy na stałe, z 3 współpracownikami i nieograniczoną liczbą projektów. Płatne plany według cennika producenta, przy płatności rocznej (Plasmic, cennik):

• Starter - 39 USD miesięcznie, bez znaku Plasmic na stronie;
• Pro - 103 USD miesięcznie, dla 4–10 współpracowników, z nielimitowanym dostępem do funkcji AI;
• Scale - 399 USD miesięcznie, dla 8–30 osób, z testami A/B, harmonogramem treści i trybem dla twórców treści;
• Enterprise - wycena indywidualna, z logowaniem firmowym i własnymi rolami.
   

Licencja to druga sprawa do sprawdzenia. Większość pakietów jest na licencji MIT, ale katalog z samą platformą na AGPL, która nakłada obowiązki przy udostępnianiu zmodyfikowanej wersji jako usługi. Dla firm korzystających z Plasmic w chmurze nie ma to zwykle znaczenia. Dla tych, które chcą postawić edytor na własnych serwerach i go modyfikować, dobrze skonsultować to z prawnikiem przed startem. Trzecia kwestia to wydajność. Strona złożona z wielu sekcji w edytorze wizualnym łatwo puchnie: duże obrazy, zbędne elementy, ciężkie skrypty. Producent deklaruje optymalizację obrazów, budowanie statyczne i serwowanie z CDN, ale ostatecznie wynik w Core Web Vitals zależy od komponentów i dyscypliny zespołu. Warto mierzyć go po każdej większej kampanii.

Największym kosztem nie jest jednak licencja, tylko przygotowanie komponentów. Dobrze zrobiona biblioteka klocków dla marketingu to praca programistów i projektanta, którą trzeba wycenić tak samo jak zwykły projekt strony.

Pięć pytań przed decyzją

Plasmic nie jest narzędziem dla każdej firmy. Zanim firma zdecyduje się na wdrożenie, dobrze odpowiedzieć na kilka pytań, które zwykle rozstrzygają sprawę:

1. Czy strona lub aplikacja jest już w React lub Next.js, czy dopiero powstaje? W pierwszym przypadku Plasmic dokłada się do istniejącego kodu, w drugim warto porównać go z Webflow i headless CMS.
2. Jak często marketing potrzebuje nowych układów stron, a nie tylko nowych treści? Przy kilku kampaniach rocznie zwykły CMS wystarczy.
3. Czy firma ma uporządkowany design system albo jest gotowa go zbudować?
4. Kto będzie odpowiadał za bibliotekę komponentów po wdrożeniu?
5. Czy strony muszą korzystać z danych aplikacji, na przykład cen, stanów magazynowych czy kont użytkowników?

Jeśli odpowiedzi wskazują na Plasmic, najrozsądniej zacząć od jednej strony lub jednego typu strony, na przykład szablonu landing page'a. Producent sam zachęca do takiego stopniowego wdrażania, a zespół szybko sprawdza, czy marketing faktycznie korzysta z nowej swobody.