Utvecklare skapar Figma-plugin med Claude Code

En utvecklare har nyligen publicerat ett plugin för Figma, vilket möjliggör överföring av skärmar från Claude Design till Figma som redigerbara lager. Pluginet använder en standalone-export från Claude Design och kan hantera text, typsnitt, vektorer, fyllningar, gradienter och skuggor, vilket gör det möjligt för användare att arbeta med verkliga projektdata istället för generiska exempel.

Utvecklaren började arbeta med AI-verktyg för att förstå hur man ska leva och arbeta som designer i en värld där AI-verktyg ständigt utvecklas. Efter att ha kämpat med att använda Claude Design, som initialt verkade komplicerat, insåg utvecklaren att verktyget är mer effektivt för att skapa större och mer systematiska projekt, såsom administrationspaneler och CRM-system.

Trots att Claude Design kunde skapa gränssnitt, stötte utvecklaren på problem när det kom till att exportera dessa projekt till Figma för redigering. Det blev tydligt att nuvarande metoder för att koppla Figma till Claude, via MCP, inte var optimala och ledde till för många resurskrävande begärningar. Utvecklaren ville ha ett mer direkt sätt att överföra projekt, vilket ledde till behovet av ett nytt verktyg.

Genom att spara projekt i Claude som standalone-filer, kunde utvecklaren skapa ett plugin som hämtar och analyserar dessa filer utan att använda token-resurser. Pluginet extraherar skärmar och återuppbygger gränssnittet i Figma, vilket har lett till en mer strömlinjeformad och effektiv arbetsprocess.

Utvecklaren har nu arbetat på att förbättra pluginets funktionalitet genom att åtgärda buggar och anpassa den till olika projektstrukturer. Den initiala versionen av pluginet har genomgått flera iterationer för att säkerställa att det fungerar med olika typer av projekt och scenarier.