figma
Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.
How to use
Przygotuj dostęp do serwera Figma MCP — skonfiguruj zmienne środowiskowe i parametry połączenia zgodnie z dokumentacją w references/figma-mcp-config.md.
Gdy zaczniesz pracę nad zadaniem zawierającym URL Figmy lub ID węzła, uruchom get_design_context, aby pobrać strukturalną reprezentację konkretnego węzła lub węzłów, które chcesz zaimplementować.
Jeśli odpowiedź jest zbyt duża lub skrócona, użyj get_metadata, aby uzyskać mapę węzłów na wysokim poziomie, a następnie ponownie pobierz tylko potrzebne węzły za pomocą get_design_context.
Uruchom get_screenshot, aby uzyskać wizualny podgląd wariantu węzła, który implementujesz — to pomoże Ci zweryfikować dokładność.
Po zebraniu zarówno danych z get_design_context, jak i zrzutu ekranu, pobierz niezbędne zasoby (ikony, obrazy, czcionki) i zacznij implementację kodu, dostosowując wyjście (zwykle React + Tailwind) do konwencji, stylów i frameworka Twojego projektu.
Zweryfikuj wynik względem Figmy, aby upewnić się, że wygląd i zachowanie są identyczne, zanim oznaczysz zadanie jako ukończone.