figma-implement-design

Skill do automatycznego tłumaczenia projektów Figmy na kod produkcyjny. Pobiera węzły, zrzuty ekranu i zasoby bezpośrednio z Figmy, a następnie generuje kod zgodny z Twoimi konwencjami projektu. Wystarczy podać URL Figmy lub ID węzła — reszta robi się sama. Wymaga połączenia z serwerem Figma MCP.

1. Upewnij się, że masz skonfigurowany serwer Figma MCP. Jeśli jeszcze go nie dodałeś, uruchom codex mcp add figma --url https://mcp.figma.com/mcp, następnie włącz klienta zdalnego ustawiając [features].rmcp_client = true w pliku konfiguracyjnym lub poleceniem codex --enable rmcp_client. Na koniec zaloguj się przez OAuth: codex mcp login figma i zrestartuj codex.

2. Przygotuj URL projektu Figmy w formacie https://figma.com/design/:fileKey/:fileName?node-id=1-2, gdzie :fileKey to klucz pliku, a 1-2 to ID węzła komponentu, który chcesz zaimplementować. Alternatywnie, jeśli używasz figma-desktop MCP, możesz wybrać węzeł bezpośrednio w aplikacji Figmy bez potrzeby URL.

3. Podaj URL lub ID węzła skillowi — może to być bezpośrednio w wiadomości lub jako odpowiedź na pytanie o lokalizację projektu.

4. Skill automatycznie pobierze kontekst projektu, zrzuty ekranu, zasoby i tokeny projektowe z Figmy.

5. Kod zostanie wygenerowany z uwzględnieniem Twojego systemu projektowego i konwencji kodowania, z gwarancją zgodności wizualnej 1:1 z projektem.

6. Przejrzyj wygenerowany kod, dostosuj go jeśli potrzeba, i zintegruj z Twoim projektem.