Najefektywniejszy sposób na połączenie typografii z Figmy z Tailwind CSS to odczytanie zmiennych przez Figma MCP, a następnie zapisanie ich w tailwind.config.js. Dzięki temu AI nie przepisuje ręcznie wartości fontów, rozmiarów i interlinii, tylko buduje konfigurację na podstawie Design Tokens.
Dlaczego ręczne przenoszenie typografii prowadzi do problemów?
Ręczne kopiowanie wartości z Figmy do kodu wygląda niewinnie, dopóki projekt nie zacznie się zmieniać. Wystarczy, że projektant skoryguje rozmiar nagłówka, interlinię albo grubość fontu, a konfiguracja Tailwind i komponenty mogą zacząć używać starych danych.
Tak powstaje dryf między designem a kodem. Pojawiają się podobne, lecz różne wartości, przypadkowe nazwy klas i lokalne nadpisania. Figma MCP ogranicza ten problem, ponieważ pozwala narzędziu AI odczytać zmienne z pliku Figmy i wykorzystać je w repozytorium. Nadal potrzebna jest kontrola człowieka, ale odpada najbardziej podatne na błędy ręczne przepisywanie.
Jak przygotować typografię w Figmie?
Figma MCP nie naprawi nieuporządkowanego pliku. Jeśli wartości są wpisane ręcznie, nazwy warstw są przypadkowe, a style mieszają się ze zmiennymi, AI może odczytać niepełny albo niejednoznaczny system.
Przed podłączeniem edytora sprawdź, czy plik zawiera następujące elementy:
- Zmienne typograficzne – osobne tokeny dla
font-size,line-heightifont-weight. - Style tekstowe – nazwy opisujące rolę, na przykład
heading/display,body/regularlublabel/small. - Spójne nazewnictwo – unikaj nazw typu
Text 123, które nie mówią, gdzie dany styl powinien być użyty. - Brak wartości hardcoded – komponenty powinny korzystać ze zmiennych zamiast z przypadkowych wartości wpisanych bezpośrednio w polu tekstowym.
- Informacje o fontach – nazwa rodziny, dostępne grubości oraz sposób ładowania fontu w aplikacji.
Dobrym punktem wyjścia jest model, w którym token opisuje wartość, a styl tekstowy opisuje zastosowanie. Na przykład font-size/heading-xl może określać rozmiar, natomiast text/hero-title łączyć rozmiar, interlinię i grubość dla konkretnego elementu interfejsu.
Jak przenieść zmienne z Figmy do Tailwind przez MCP?
Remote Figma MCP można podłączyć do Cursora lub Claude Code. Dokładne opcje mogą zależeć od aktualnej wersji narzędzia, dlatego konfigurację warto sprawdzić w bieżącej dokumentacji Figma MCP. W opisanym workflow używasz linku do zaznaczonej ramki albo strony w Figmie.
- Podłącz Figma MCP – w Cursorze możesz skorzystać z instalacji serwera MCP przez ustawienia integracji. W Claude Code dodaj serwer poleceniem
claude mcp add --transport http figma https://mcp.figma.com/mcp, a następnie przeprowadź autoryzację. - Otwórz repozytorium – pracuj w projekcie zawierającym konfigurację Tailwind i komponenty interfejsu.
- Skopiuj link do ramki – w Figmie zaznacz widok albo stronę, której tokeny chcesz przeanalizować, i użyj opcji kopiowania linku do zaznaczenia.
- Pobierz definicje zmiennych – poproś agenta o użycie
get_variable_defs. Narzędzie może zwrócić między innymi tokeny typografii, kolorów, odstępów i promieni. - Zweryfikuj mapowanie – sprawdź, czy nazwy z Figmy zostały poprawnie przypisane do kluczy Tailwind. Dopiero potem pozwól agentowi zmienić konfigurację.
Możesz użyć takiego promptu:
Użyj Figma MCP i narzędzia get_variable_defs dla tego adresu:
FIGMA_URL: [wklej link do zaznaczonej ramki]
Wyciągnij wyłącznie dane typograficzne:
- font family
- font size
- line height
- font weight
- letter spacing
- nazwy zmiennych i ich ścieżki
Zwróć wynik jako JSON zgodny z mapowaniem dla Tailwind CSS.
Nie zgaduj brakujących wartości. Oznacz je jako missing.
Najpierw pokaż proponowane mapowanie Figma → Tailwind,
a dopiero po mojej akceptacji zaktualizuj tailwind.config.js.Po akceptacji agent może zapisać tokeny w konfiguracji. Przykładowy fragment dla Tailwind w wersji opartej na pliku konfiguracyjnym może wyglądać tak:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./src/**/*.{js,ts,jsx,tsx}',
'./index.html'
],
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif']
},
fontSize: {
'display-xl': ['4rem', { lineHeight: '1.05', letterSpacing: '-0.02em' }],
'heading-lg': ['2.25rem', { lineHeight: '1.15', letterSpacing: '-0.01em' }],
'body-md': ['1rem', { lineHeight: '1.5', letterSpacing: '0' }],
'label-sm': ['0.875rem', { lineHeight: '1.25', letterSpacing: '0.01em' }]
},
fontWeight: {
regular: '400',
medium: '500',
semibold: '600',
bold: '700'
}
}
},
plugins: []
};Warto traktować ten plik jako Single Source of Truth dla typografii używanej w kodzie. Figma pozostaje źródłem decyzji projektowych, ale repozytorium powinno zawierać zatwierdzoną, testowalną wersję tokenów, z której korzystają komponenty.
Uwaga na nazewnictwo: Figma może przechowywać token jako typography.heading.large.size, a Tailwind oczekuje mapy zapisanej w JavaScript. Nie zakładaj, że agent poprawnie odgadnie znaczenie każdej ścieżki. Przed zapisem sprawdź szczególnie jednostki, grubości fontów i interlinię.
Ręczne mapowanie czy automatyzacja MCP?
| Cecha | Ręczne mapowanie | Automatyzacja MCP |
|---|---|---|
| Czas wykonania | Rośnie wraz z liczbą tokenów i widoków. | Szybkie pobranie danych z wybranego zakresu Figmy. |
| Podatność na błędy | Wysoka przy przepisywaniu nazw, jednostek i wartości. | Mniejsza, ale wymaga weryfikacji mapowania. |
| Aktualizacja systemu | Każdą zmianę trzeba nanieść osobno. | Można ponownie pobrać tokeny i przygotować diff konfiguracji. |
| Kontrola nad wyjątkami | Pełna od początku. | Wymaga ręcznej decyzji przy nietypowych fontach i nadpisaniach. |
MCP najlepiej sprawdza się jako warstwa ekstrakcji i pierwszego mapowania. Nie powinien bez pytania nadpisywać całej konfiguracji, zwłaszcza gdy repozytorium zawiera już własne rozszerzenia, pluginy albo niestandardowe fonty.
Jak utrzymać spójność typografii?
Synchronizacja nie kończy się na pierwszym eksporcie. Design system będzie ewoluował, dlatego zmiany powinny przechodzić przez powtarzalny proces:
- Trzymaj tokeny Tailwind w jednym, jasno wskazanym miejscu.
- Przy większej zmianie pobierz z Figmy aktualne definicje i porównaj je z poprzednią wersją.
- Aktualizuj najpierw konfigurację, a dopiero potem komponenty korzystające z tokenów.
- Nie twórz lokalnych wartości dla każdego widoku, jeśli istnieje już token systemowy.
- Po zmianie uruchom test wizualny i porównaj najważniejsze widoki w Figmie oraz przeglądarce.
Jeśli projekt korzysta z niestandardowego fontu, MCP może odczytać jego nazwę, ale nie zastąpi konfiguracji @font-face, plików fontu ani ustawień hostingu. Przy dużych systemach komponentów można rozważyć także Code Connect, który pomaga mapować komponenty z Figmy na istniejące komponenty w repozytorium.
Najlepszy workflow łączy automatyzację z kontrolą: Figma MCP pobiera Design Tokens, AI przygotowuje mapowanie, a tailwind.config.js staje się zatwierdzonym źródłem typografii dla kodu.
