Design systems w erze AI – co Figma pokazała na Schema 2025 #EN344

Nota: Ten artykuł powstał na podstawie notatek z keynote Schema by Figma 2025. Wszystkie przemyślenia, obserwacje i wnioski pochodzą od prelegentów: Loredany Chrisan, Paige Costello oraz zespołu produktowego Figma.

TL;DR

Extended Collections rozwiązują problem duplikacji – zamiast 32,000 wartości wystarczy 6,000 dzięki dziedziczeniu
Slots pozwalają edytować komponenty bez detachowania – jak React children, ale w Figma
Check Designs automatycznie wykrywa odstępstwa od design systemu za pomocą custom ML modelu
Code Connect 2.0 + MCP eliminują search steps – AI wie dokładnie, które komponenty użyć
Make Kits eksportują biblioteki Figma do React – prototypy z prawdziwymi komponentami
Variable modes: 10 dla Pro, 20 dla Organization – koniec z limitem 4 modów
Design Systems Remodel – jedna z największych przebudów w historii Figma umożliwiła wszystkie nowe funkcje

Schema 2025 w San Francisco nie była kolejną konferencją o design systems. Wydarzenie pokazało radykalną zmianę w podejściu do zarządzania systemami projektowymi.

Loredana Chrisan, Chief Design Officer, Figma, otworzyła keynote przekazem o transformacji design systems. Według Chrisan systemy przestają być statycznymi bibliotekami, a stają się żywym organizmem łączącym design, kod i AI.

Chrisan dołączyła do Figma kilka tygodni przed konferencją, po niemal dekadzie prowadzenia messaging i AI w Meta. Jako przykład nowej ery pokazała AI outfit generator zbudowany w Figma Make – inspirowany filmem „Clueless”. Podkreśliła przy tym, że sama nie jest programistką. To właśnie ilustruje główny punkt: narzędzia AI mają rozszerzać możliwości, nie tylko automatyzować istniejące procesy.

Chrisan skierowała do designerów mocne wezwanie: „Nie tylko dostosowujcie się do tego momentu. Kształtujcie go.” Zachęcała do takiego wykorzystania narzędzi, które rozszerza możliwości, a nie jedynie automatyzuje rutynowe zadania. Według prelegentki nie ma nic bardziej ludzkiego niż potrzeba tworzenia, a jednocześnie nic potężniejszego niż narzędzia, które to odblokowują.

Design systems jako fundament jakości

Paige Costello, VP of Product w Figma, przedstawiła design systems jako kręgosłup najlepszych produktów na świecie. Jednak jej wizja wykracza poza standardowe rozumienie efektywności. Costello podkreśliła, że celem jest budowanie świetnych produktów z wysokim poziomem craftu – przy jednoczesnym przyspieszeniu procesu.

Skala wyzwań jest imponująca. Zespoły zarządzają setkami bibliotek w organizacjach, przy czym Figma obserwuje variant sety z 17,000 wariantami oraz biblioteki zawierające milion warstw.

Costello przedstawiła trzy kierunki ewolucji design systems:

Adaptacyjność stanowi pierwszą oś rozwoju. Systemy muszą nie tylko nadążać, ale wyprzedzać sposób, w jaki zespoły eksplorują pomysły.

Kontekst z kodu to drugi wymiar. Design i engineering mogą w końcu działać jako jeden organizm, dzięki czemu eliminowana jest bariera komunikacyjna między tymi dyscyplinami.

Dostępność dla całego zespołu zamyka tę triadę. Systemy powinny być wbudowane w narzędzia używane nie tylko przez designerów, ale również przez PM-ów i researchers.

Aby osiągnąć te cele, Figma musiała jednak przebudować fundamenty platformy.

Design Systems Remodel – fundament przyszłości

Naomi Jung i Edward Im z zespołu engineeringu Figma rozpoczęli prezentację od opisu tego, co działo się pod maską systemu. Design Systems Remodel to jedna z największych przebudów w historii Figma.

Przez ostatni rok zespół przepisał architekturę dla komponentów, variables i shared assets. Wysiłek ten koncentrował się na trzech głównych celach:

Smarter caching logic sprawia, że editor jest bardziej responsywny nawet w największych, najbardziej złożonych plikach.

Consistent behavior gwarantuje, że komponenty, variables i styles działają spójnie oraz dzielą underlying architecture tam, gdzie to możliwe.

Unified platform oznacza, że wszystkie funkcje design systems działają na jednej platformie, co umożliwia budowanie połączonych, dynamicznych funkcji.

Rezultaty tej pracy są mierzalne. Basic editing (np. mode switch) jest szybsze o 60%, podczas gdy prototyping interactions (state switch) przyspieszył trzykrotnie. Publishing trwa teraz sekundy zamiast minut, z mniejszą liczbą nieudanych publikacji.

Jung podkreśliła kluczowy fakt: „Funkcje, które ogłaszamy dzisiaj, nie mogłyby powstać bez tego ogromnego wysiłku u podstaw.” Ta przebudowa była ceną wejścia do wszystkich kolejnych innowacji.

Extended Collections – eliminacja duplikacji wartości

Zespoły borykały się z poważnym problemem: kolekcje z 40 modami wymagały aktualizacji setek, czasem tysięcy wartości przy każdej zmianie bazowej wartości. Modal przypominał chaotyczną tabelkę, a konsumpcja była myląca i frustrująca.

Extended Collections działają na zasadzie dziedziczenia i nadpisywania. Mechanizm przypomina instance overrides, jednak dotyczy Variables.

Proces wygląda następująco: tworzysz bazową kolekcję (np. Astra Video), następnie używasz Right-click → Extend Collection. Wszystkie variables, modes i wartości dziedziczą się automatycznie. Nadpisujesz tylko te elementy, które wymagają dostosowania (np. brand colors). W rezultacie zmiany w bazie automatycznie trafiają do extended collections, podczas gdy overrides pozostają nietknięte. Co więcej, możesz niezależnie przełączać modes w każdej collection.

Co istotne, nadpisania można w każdej chwili cofnąć – wystarczy je zaznaczyć i przywrócić wartość dziedziczoną z bazy.

Figma wewnętrznie zmniejszyła liczbę unikalnych wartości z 32,000 do poniżej 6,000. To nie teoria, lecz rzeczywiste wyniki z produkcji, które dowodzą efektywności tego rozwiązania.

Extended Collections będą dostępne od przyszłego miesiąca dla planów Enterprise.

Checklist: Setup Extended Collections dla multi-brand

Wyznacz kolekcję bazową i prymitywy współdzielone
Utwórz kolekcje rozszerzone per brand
Nadpisz tylko różnice (brand colors, specyficzne wartości)
Ustal tryby per kolekcja (light/dark niezależnie)
Sprawdź propagację zmian z bazy
Przetestuj możliwość cofnięcia nadpisań

Slots – elastyczność bez konieczności detachowania

Edward Im przedstawił funkcję, na którą czekało wielu użytkowników: Slots. Są to konfigurowalne regiony wewnątrz komponentów, które można swobodnie edytować bez detachowania. Im porównał je do React children properties, jednak dostosowanych do środowiska komponentów Figma.

Setup Slots składa się z kilku kroków: wybierasz frame w main component, następnie używasz Right-click → Convert to Slot. Dodajesz nazwę i description, a później ustawiasz preferred values (sugerowane komponenty). Użytkownicy mogą klikać plus i wybierać z listy przygotowanych opcji.

Alternatywnie możesz przeciągać content bezpośrednio do slotu. Wszystko pozostaje connected do main component, podczas gdy Slots respektują Extended Collections i modes. Command + Enter umożliwia AI replacement bezpośrednio w slocie.

Figma już wykorzystuje Slots wewnętrznie. Rezultat? Mniejszy rozmiar komponentów oraz lepsze wyniki z Figma Make, ponieważ Slots mapują się czyściej do kodu.

Early access startuje już teraz. Slots będą dostępne na wszystkich planach.

Check Designs – inteligentna walidacja systemu

Tara Nadella, Product Manager, zaprezentowała nowy linter wbudowany bezpośrednio w Figma. Scenariusz jest znajomy: designer eksploruje szybko, używając magic values. Przed handoffem konieczne jest uporządkowanie wszystkiego, co stanowi żmudną, powtarzalną robotę.

Nadella ostrzega: „Sama prędkość bez kierunku prowadzi do rozjazdu.” Check Designs ma być odpowiedzią na ten problem.

Check Designs skanuje frame i automatycznie wykrywa odstępstwa od design systemu. Pod maską działa custom ML model, trenowany na danych konkretnego design systemu.

Model waży kilka kluczowych czynników: similarity (jak podobna jest sugerowana wartość do obecnej), frequency (jak często variable jest używany w pliku), recency (jak niedawno był użyty) oraz team usage (jak często zespół używa go w innych plikach). Co istotne, model uczy się z czasem – im więcej zespół go używa, tym lepsze generuje sugestie.

Check Designs wykrywa różne typy problemów:

Hard-coded values obejmują color variables, typography, corner radius, padding i spacing.

Accessibility to wykrywanie low fill color contrast z sugestiami accessible alternatives. Flyout pokazuje, które values są accessible, a które nie spełniają wymagań kontrastowych.

Style coverage dotyczy niezgodności z tekstylami oraz detached text styles.

W demo Nadella pokazała 44 zmiany wprowadzone w kilka chwil. Na przykład padding 19 został zamieniony na 16. Jej komentarz był znaczący: nie można pokazywać wartości niepodzielnej przez 8 w pokoju pełnym designerów. Hard-coded „close but never pure black” zamieniono na color secondary, podczas gdy contrast issues zostały wykryte i poprawione.

Funkcja wchodzi do early access i będzie dostępna dla planów Organization i Enterprise.

Checklist: Przygotowanie pliku do handoffu z Check Designs

Przed oddaniem designu do developmentu:

Zaznacz frame i kliknij „Mark as ready for dev”
Uruchom Check Designs – przeskanuje automatycznie
Przejrzyj zgrupowane sugestie w navigation panel
Dla powtarzających się elementów – użyj bulk apply
Sprawdź preview przed zaaplikowaniem zmian
Zwróć uwagę na contrast warnings (accessibility)
Zweryfikuj czy wszystkie hard-coded values zostały zamienione
Apply changes – gotowe do handoffu

Code Connect 2.0 i MCP Server – rewolucja w AI workflows

Jake Alba, Developer Advocate, przedstawił sposób, w jaki design systems stają się kluczowe dla AI workflows.

Nowa biblioteka UI w Code Connect sugeruje właściwe pliki i komponenty z repo. Można połączyć component z kodem w kilka kliknięć – bezpośrednio z GitHub. Co ważniejsze, możesz teraz dodawać instructions. Jeśli zespół używa specyficznej składni (np. composed syntax zamiast slot property), przekazujesz to Figma, dzięki czemu AI generuje kod według ustalonych reguł.

MCP (Model Context Protocol) Server przechodzi do GA, co zmienia sposób, w jaki AI narzędzia konsumują kontekst z Figma.

W MCP settings (dostępne w native app) można skonfigurować sposoby obsługi images (placeholders vs media assets) oraz sprawdzić token count estimate – przybliżoną liczbę tokenów potrzebnych do przekazania panelu do AI.

MCP Tools udostępniają AI następujące elementy z Figma: Git metadata (high-level skeleton struktury), Git Screenshot (image data respektujące light/dark mode), CodeConnect Map (React context dla wszystkich komponentów), Variables (nazwy variables do użycia w kodzie), Text styles (typography context) oraz Git design context (wszystko razem plus annotations).

Demo było przekonujące. Alba użył GitHub Copilot z VS Code, wydając prosty prompt: „implement my Figma selection”.

Copilot nie przeszukiwał codebase ani nie wykonywał wildcard searches. Figma dostarczyła precyzyjnie: które komponenty, gdzie są zlokalizowane oraz jakie variables użyć. W rezultacie panel został zaimplementowany w ciemnym motywie, mimo że design był w light mode. Wszystko działało z prawdziwymi danymi, a zmiana ujęć w UI modyfikowała model danych.

Praktyczny aspekt: Alba pracował z włączonym trybem ciemnym w IDE, a jednocześnie implementował panel w trybie jasnym z Figma. Decyzje kolorystyczne przechodziły przez tokeny, więc preferencje osobiste nie wpływały na rezultat.

Alba podkreślił kluczowy aspekt: dosłownie eliminujemy search steps. To nie tylko oszczędność czasu, lecz również redukcja kosztów LLM i wyższa pewność wyników.

Code Connect 2.0 i MCP w GA są dostępne od tego tygodnia dla planów Organization i Enterprise.

Make Kits – design system w prototypach

Ethan Ma, Product Designer, pokazał kolejny krok dla Figma Make. Największym zapytaniem od użytkowników był import design systems do Make.

Ma był szczery w ocenie: pierwsze podejście do design systems w Make przynosiło visual details (color, typography, spacing). Generacje zaczęły wyglądać jak design system, jednak nie dawały pełnego odczucia produktu. To była iteracja na podstawie feedbacku.

Figma odpowiada teraz dwutorowo:

Make Kits eksportują bibliotekę z Figma Design i konwertują do React components + CSS. W Component Showcase widoczne są wszystkie warianty, podczas gdy interakcje można dodawać za pomocą promptów. Split view pokazuje preview i working code side by side. Small tag działa jako filter – Make wie, że ma zmieniać tylko wybrany component. Po publikacji kitu cały zespół może z niego korzystać.

Ma zademonstrował video player z komponentami: selectors, buttons, avatars, controls. Dodał interaction: „change cursor to pointer on hover”, co Make wygenerowało automatycznie. Następnie stworzył prototyp z załączonego screena – z pełną interaktywnością pochodzącą z kitu.

NPM packages pozwalają importować bezpośrednio production components do Make. Dotyczy to zarówno publicznych, jak i prywatnych packages. Wszystkie fine-tuning i interactions pozostają zachowane, dzięki czemu prototypy korzystają z production-ready React components.

Make Kits przechodzą do early access (później w tym roku), natomiast NPM packages będą dostępne od przyszłego miesiąca. Publiczne packages działają na wszystkich planach, podczas gdy prywatne wymagają Pro+.

Pozostałe usprawnienia systemu

Variable modes otrzymują znaczące rozszerzenie już od dzisiaj: Professional dysponuje teraz 10 modami (wcześniej 4), podczas gdy Organization otrzymuje 20 modów (wcześniej 4).

Ulepszenia Variables authoring (wdrożenie od przyszłego tygodnia) obejmują szereg funkcji. Import/export Variables umożliwia łatwiejszą migrację i backup, nowy left nav zapewnia dostęp do assets i AI jednym kliknięciem. Full-screen modal Variables staje się domyślnym trybem pracy. Wszystkie subscribed collections są widoczne w authoring modal, co eliminuje konieczność przełączania kontekstu. Tworzenie variables inline przyspiesza workflow podczas projektowania.

Kierunek rozwoju i harmonogram

Costello była jasna: to nie wszystko, nad czym Figma pracuje. Część funkcji nie była gotowa na main stage, jednak zespół prosi o feedback. Design systems stanowią priorytet, a intensywny rozwój trwa.

Ten tydzień:

Aktualizacje Code Connect (sugestie, podgląd fragmentów, instrukcje dla MCP)
Code Connect 2.0 i MCP dostępne dla planów Organization i Enterprise

Od przyszłego tygodnia:

Wdrożenie nowego lewego panelu z dostępem do assets i AI

Przyszły miesiąc:

Extended Collections (Enterprise)
Serwer MCP w GA
Import NPM (publiczne – wszystkie plany, prywatne – Pro+)

Wczesny dostęp:

Slots (wszystkie plany – już dostępne)
Check Designs (EA z rollout dla Organization i Enterprise)
Make Kits (zapisy otwarte)

W przygotowaniu:

Prompting bezpośrednio w Figma Design działa w limited alpha. Styles i components funkcjonują, natomiast Variables są w przygotowaniu.

Nadella wspomniała o rozwoju Check Designs: więcej accessibility checks, effects i style coverage oraz enforce standards wykraczające poza obecny zakres.

Deep dives na konferencji pokrywały szczegóły dotyczące MCP, Code Connect, Extended Collections oraz Slots. Stacje demonstracyjne były dostępne dla zainteresowanych early access.

Design systems w kontekście historycznym

Costello zamknęła swoją część mocnym kontekstem historycznym. Design systems zawsze zmieniały sposób budowania produktów.

Rozpoczęło się od Swiss Grid, który zmienił sposób, w jaki konsumujemy i czytamy informację. Następnie pojawiły się Apple’s Human Interface Guidelines, po czym frameworks takie jak Material Design i Bootstrap.

Każda generacja design systems podnosiła poziom produktów oraz skalowała craft w taki sposób, że ludzie codziennie stykają się z czymś lepszym, bardziej dopracowanym.

Jednak z AI design systems stają się czymś więcej. To sposób na zapewnienie, że gdy więcej ludzi buduje – jakość nie tylko się utrzymuje, lecz faktycznie rośnie.

Design systems rozszerzają swoją rolę i ewoluują. Stają się kontekstem, w którym cały brand się rozwija i jest doświadczany. To kontekst, dzięki któremu zespoły mogą się różnicować i wydawać lepsze produkty szybciej.

To jest przyszłość. Jest jasne, że przyszłość budowania jest obiecująca.

Konkluzja z keynote

Chrisan podsumowała na początku keynote: design wchodzi w najbardziej wzmocniony etap swojego rozwoju.

AI nie jest taśmą produkcyjną dla pixeli. To narzędzie, które czyni ludzi bardziej kreatywnymi, przyspieszając proces bez przejmowania kontroli. Jak podkreśla Chrisan: „AI nie jest linią montażową pikseli, lecz mnożnikiem kreatywności.” To multiplier, który daje kontrolę, zamiast ją odbierać.

Design systems w tej wizji stanowią kontekst, który sprawia, że więcej osób może budować bez obniżania jakości. To język, którym komunikują się design, kod i AI. To przestrzeń, w której brand się rozwija i jest doświadczany.

Figma stawia jasno: design systems muszą podnosić jakość w miarę, jak więcej ludzi dołącza do procesu budowania. Przyszłość to nie tylko efektywność, lecz świetne produkty z wysokim poziomem craftu – dostarczone szybciej.

Kluczowe zasady promptowania z design systems

Na podstawie pokazanych demo można wyciągnąć kilka wzorców:

1. Zawsze wskazuj na design system

Dodaj „Use my design system” w promptach
Wybierz Make Kit przed generowaniem
Upewnij się, że MCP ma dostęp do CodeConnect

2. Bądź specyficzny co do plików i lokalizacji

Wskaż konkretne pliki „In these two files” (React + CSS)
Określ komponenty, jeśli potrzebne

3. Dodaj kontekst dla AI narzędzi

Alba pokazał, że można dodać meta-instrukcje dla narzędzia
„Show all features of MCP server” pomogło AI użyć wszystkich dostępnych tools

4. Iteruj na komponentach

Najpierw wygeneruj base component w Make Kit
Następnie dodawaj interakcje osobnymi promptami
Split view pozwala weryfikować rezultat na bieżąco

Kluczowy insight

Jakość rośnie, gdy zawężasz wybór

Standardowe podejście: Najpierw pełna swoboda eksploracji, a dopiero na końcu dopasowanie do systemu. Design powstaje w izolacji, a porządki odkładane są na moment przed handoffem.

Praktyka pokazuje co innego: Wczesne włączenie Check Designs, Slots oraz Code Connect/MCP przyspiesza eksplorację i podnosi jakość, ponieważ AI i deweloperzy dostają jednoznaczny kontekst od samego początku. Przy rosnącej liczbie twórców system staje się akceleratorem jakości, a nie tylko efektywności.

Dlaczego to ma znaczenie: Standardowe podejście zakłada, że swoboda eksploracji i zgodność z systemem to competing forces. Tymczasem nowe narzędzia Figma pokazują, że wczesne zawężenie do systemu nie ogranicza kreatywności – daje jej strukturę, która przyspiesza iteracje i eliminuje późniejsze przepisywanie.

Test na jutro: Gdy przygotowujesz ekran do przekazania, zamiast odkładać porządki na koniec, od razu oznacz ramkę „ready for dev”, uruchom Check Designs, podepnij tokeny, zdefiniuj Slots i połącz komponenty w Code Connect. Następnie użyj polecenia „implement my Figma selection…” i porównaj czas poprawek oraz liczbę wyszukiwań w IDE z poprzednimi projektami, gdzie system był dodawany na końcu.

Ten wpis jest częścią mojej kolekcji notatek z ciekawych podcastów, webinarów i innych treści, które uważam za wartościowe i do których sam chcę wracać. Jeśli chcesz sprawdzić oryginalne źródło: keynote Schema by Figma 2025