Hur man konverterar Figma till WordPress (4 enkla sätt, inklusive AI)

Vårt designteam planerar sidlayouter i Figma innan de bygger dem i WordPress. Att designa först låter dig bestämma den exakta layouten och sedan återskapa den på din webbplats.

I den här guiden visar vi dig fyra sätt att konvertera Figma till WordPress, med början i AI-metoden som vi själva testade.

Innan du börjar: Förbered din Figma-ram

En ram är en enda duk med fast storlek i Figma som rymmer en skärm eller en sida av din design.

AI-metoden och konverteringsplugins läser din ram direkt. En ren ram sparar dig en omgång med korrigeringar senare.

Figma:s kostnadsfria Starter-plan räcker för allt i den här guiden, så du behöver inget betalkonto för Figma för att följa med.

Välj först din ram och tryck på Shift + A, eller klicka på knappen Auto layout i panelen till höger.

Auto Layout talar om för Figma att ordna och stapla element enligt regler snarare än fasta positioner. Det hjälper din design att konvertera för mobila enheter senare.

Byt sedan namn på dina lager för att beskriva deras innehåll, till exempel "Hero Image" eller "CTA Button" istället för "Rectangle 47".

AI-verktyg och konverteringsplugins använder dessa namn för att förstå varje lager. Tydliga namn innebär färre korrigeringar efteråt.

Om du har tid, designa en mobil ram bredvid din skrivbordsram. Det ger alla verktyg en verklig referens för hur sidan ska staplas på en telefon istället för att lämna det åt gissningar.

Slutligen behöver du länken till den specifika ramen. Högerklicka på ramen, gå till 'Kopiera/Klistra in som' och välj 'Kopiera länk till markering'.

Länken du får innehåller node-id=, som talar om för verktyget vilken ram det ska läsa. En vanlig fil-länk utan node-id= pekar på hela filen istället för din valda ram och fungerar inte med AI- eller konverteringsplugins som visas nedan.

Metod 1: Konvertera Figma till WordPress med AI

Det snabbaste sättet att omvandla en Figma-design till en WordPress-sida är att låta AI läsa din ram och bygga om den åt dig. Du behöver tre saker, och alla tre har gratisplaner.

Den första är Claude, AI-assistenten som utför arbetet. Den andra är Figmas officiella koppling, som är den del som ger Claude tillåtelse att läsa din Figma-fil.

Den tredje är WPVibe, ett gratis plugin som kopplar din WordPress-sida till Claude och bygger sidan direkt på din sida.

På Figmas kostnadsfria Starter-plan får du upp till 20 AI-läsningar per månad. Det räcker för ett fåtal sidor. Betalda planer ger Dev- och Full-säten upp till 200 läsningar per dag, medan View- och Collab-säten förblir på 20 per månad.

För att komma igång måste du först koppla Figma. I Claude-appen, gå till Inställningar » Kopplingar, hitta Figma och logga in med ditt Figma-konto.

Om du använder Claude Code, kör kommandot /mcp och välj Figma från listan.

Installera och aktivera sedan WPVibe på din WordPress-sida på samma sätt som du installerar vilket plugin som helst. För steg-för-steg-instruktioner, se vår guide om hur man installerar ett WordPress-plugin.

När det är aktivt, guidar WPVibe-skärmen dig genom tre korta steg. Kopiera MCP-serverns URL som den visar, lägg till den i Claude som en koppling och verifiera din e-postadress med den sexsiffriga koden som pluginet skickar till dig.

Be sedan Claude att koppla din sida och godkänn det med ett klick inifrån wp-admin. Du kopierar aldrig ett lösenord någonstans i den här processen.

När du framgångsrikt har kopplat WPVibe till Claude, klistra in din ramlänk i Claude med den här prompten.

Read this Figma frame: [paste your link]. Rebuild it as a new DRAFT page using native WordPress blocks only (group, columns, heading, paragraph, buttons, image). Upload the images to the media library. Match the colors, fonts and spacing. Do not publish.

Frasen 'inbyggda block' i prompten betyder standardblocken som följer med WordPress, så sidan du får förblir redigerbar i den vanliga blockredigeraren och behöver inget extra plugin för att visas.

Ordet UTKAST är också viktigt, eftersom det håller sidan borta från din live-webbplats tills du har granskat den.

När vi körde detta på vår testwebbplats gav en enda läsning av ramen Claude de exakta hexfärgerna, teckenstorlekarna, radhöjderna, stoppningsvärdena och hörnradierna från designen.

Det första utkastet kom på 3 minuter och 20 sekunder, och de värdena kom igenom i inbyggda block.

Layouten var det som behövde fixas innan sidan såg ut som vår Figma-ram. Claude laddade också upp våra bilder med WPVibes verktyg för medieuppladdning.

Detta fungerar bara när din design innehåller riktiga bilder. En platshållarrektangel i Figma ger ingen bild alls, och du får ingen varning om det.

Fyra saker gick fel i vårt test. Två knappblock sparades i ett tillstånd som WordPress behandlade som ogiltigt, och redigeraren visade ett meddelande om "Försök återställa block" för dem.

Att klicka på det meddelandet åtgärdade båda knapparna, men det ser oroande ut om du inte förväntar dig det.

Det andra problemet uppstod på skrivbordet. Claude byggde våra sektioner med temat normala innehållsbredd.

Designen satt i en smal kolumn mitt på skärmen, och de tre funktionskorten bröts upp med ett ord per rad. Det såg ingenting ut som Figma-ramen.

Vi bad Claude att fixa sektionen och det fungerade. Att bara ändra full bredd var dock inte tillräckligt och den inre innehållsbredden fick också breddas.

Du kan också ta en skärmdump av området som behöver fixas och be Claude att justera bredden.

Det tredje problemet var kosmetiskt. Rundade hörn på bilder överfördes inte i vårt test. Du måste ställa in dem själv efteråt.

Det fjärde problemet var mobilvyn, där Claude hade kopierat designens fasta sidostoppning på 120px utan att ändra den.

På en 390px bred telefon lämnade det bara 150px utrymme för innehållet.

Ett uppföljande meddelande åtgärdade telefonvyn. Vi bad om att sidostoppningen och huvudrubriken skulle skalas med skärmen istället för att behålla fasta storlekar, och det fungerade.

Innan du publicerar, öppna utkastet på en dator och på din telefon. Om något ser fel ut, beskriv fixen för Claude med enkla ord, kontrollera sedan båda vyerna igen.

När allt ser rätt ut, publicera sidan från WordPress-redigeraren.

Om din design har flera sidor eller komplexa layouter kan du behöva upprepa dessa steg några gånger för att få allt rätt.

Metod 2: Bygg den i SeedProd

Om du hellre inte vill lämna din Figma-fil till ett verktyg, kan du bygga om designen direkt i WordPress med SeedProd, den bästa byggaren för WordPress-teman och landningssidor på marknaden.

Gratisversionen har dra-och-släpp-byggaren som den här metoden behöver, och den körs på över 600 000 webbplatser.

SeedProd har ingen Figma-import. Det betyder att du återskapar designen själv och kontrollerar varje element från början.

Öppna din Figma-ram på ena sidan av skärmen och SeedProd-byggaren på den andra, dra sedan block till arbetsytan för att matcha det du ser.

Du kan dra bilder, rubriker, videor, knappar, optin-formulär och stycke-block från den vänstra kolumnen.

Att klicka på ett block du har lagt till öppnar dess inställningar, där du kan matcha teckenstorlek, färg, justering och avstånd till din design.

Vi byggde om vår testlandningssida på detta sätt i gratisversionen av SeedProd, och skärmdumpen ovan visar resultatet.

För hela processen, se vår handledning om hur man skapar en landningssida i WordPress.

Om din design är ganska standard, erbjuder SeedProd också en AI-webbplatsbyggare som kan generera en hel webbplats från en kort beskrivning av din verksamhet, vilket ger dig en utgångspunkt att matcha din Figma-design.

Du kan generera upp till tre webbplatser gratis och ladda ner var och en som en temafil. För att redigera resultatet i WordPress behöver du en SeedProd Pro-plan.

Du justerar sedan det resultatet för att matcha din Figma-design istället för att börja från en tom arbetsyta. För detaljer, se vår guide om hur man skapar en webbplats med AI.

Metod 3: Använd ett Figma till WordPress-konverteringsplugin

Om du vill stanna kvar i Figma och konvertera din design utan att AI bygger den, är ett konverteringsplugin det bästa alternativet.

UiChemy är det bästa Figma till WordPress-konverteringspluginet vi har hittat, och det är aktivt på över 8 000 webbplatser.

Vad vi gillar mest med UiChemy är att det fungerar med sidbyggare som Elementor och Bricks, inte bara blockredigeraren. De flesta Figma-plugins byggda för WordPress matar bara ut kod för blockredigeraren.

För att använda det installerar du två delar, UiChemy-pluginet på din WordPress-webbplats och UiChemy-pluginet inuti Figma. Det kräver WordPress 6.9 eller nyare, så kontrollera att din webbplats uppfyller det innan du börjar.

I din WordPress-instrumentpanel, öppna UiChemy och gå till fliken 'Figma Plugin'.

Under 'Page builder', välj Elementor, Gutenberg eller Bricks. Hitta sedan 'Connection link' nedanför och klicka på 'Copy'.

Den länken innehåller din inloggning och ett säkert applikationslösenord inbyggt. Behandla den som ett lösenord och håll den för dig själv.

UiChemy har ett separat Figma-plugin för varje byggare det stöder, ett för Elementor, Gutenberg och Bricks. I Figma, öppna menyn 'Tools', sök efter UiChemy och kör pluginet som matchar byggaren du valde i WordPress. Stegen är desamma i alla tre.

Om det är första gången du använder UiChemy, skapa ett konto och följ installationsguiden.

Välj sedan 'Quick Conversion' och välj ditt måbibliotek, som Kadence, WordPress Core eller Nexter.

Dessa tillhandahåller block som du kan använda för att bygga sidor i WordPress-redigeraren snarare än separata sidbyggare. Välj WordPress Core för standardutdata från blockredigeraren, eller välj det bibliotek som din webbplats redan använder.

Välj sedan din Figma-ram och klicka på 'Import'.

När du uppmanas att välja en metod för att exportera din design till WordPress, välj ‘Lägg till en annan webbplats’ under ‘Webbplatsanslutning’.

Klistra in anslutningslänken du kopierade från din WordPress-instrumentpanel och klicka på ‘Anslut’. Din webbplats kommer sedan att visas i listan ‘Välj webbplats’ när du konverterar en design.

UiChemy visar dig nu två importalternativ.

‘Direktimport’ skickar hela designen till din WordPress-webbplats som ett utkast, medan ‘Kopiera till Urklipp’ låter dig kopiera en sektion i taget och klistra in den i en befintlig sida.

Gratisplanen täcker ett litet projekt bekvämt, ger dig 1 000 krediter per månad, en Figma-plats, ett webbplatsprojekt och fem sidor per webbplats.

Betalda planer börjar på 8 USD per månad, faktureras årligen, när du behöver mer.

UiChemy kräver att din design använder ‘Auto Layout’ och följer vissa regler för att fungera korrekt. Att konvertera en äldre design kan innebära att du måste justera den först.

Figma till WordPress Block gör en smalare version av samma jobb. Detta Figma-plugin konverterar en ram till blockredigeringskod. Gratisversionen begränsar hur många ramar du kan exportera, och en betald licens tar bort den begränsningen.

Du väljer din ram, öppnar menyn ‘Verktyg’ från vänster kolumn och söker efter pluginet. När du hittar det klickar du på knappen ‘Kör’.

Detta öppnar ett popup-fönster där du kan klicka på ‘Konvertera till WordPress’ och kopiera resultatet. Klistra sedan in det i blockredigeraren på valfri sida för att få din design som block.

Metod 4: Anlita en WordPress-byrå

För en hel webbplats eller en design med komplex funktionalitet är det oftast bättre att anlita en utvecklare.

Figma hanterar endast designen, vilket innebär att en utvecklare måste bygga allt som behöver fungera på din webbplats, som dynamiskt innehåll, anpassade inläggstyper eller en kassaflöde.

En bra byrå ser också till att designen fungerar på telefoner och surfplattor. Du bör fortfarande kontrollera de färdiga sidorna på din egen telefon innan du godkänner arbetet.

Se vår lista över de bästa WordPress-utvecklingsbyråerna för att hitta en som passar ditt projekt.

Figma till WordPress vanliga frågor

Kan jag göra om min Figma-design till en webbplats?

Ja, du kan förvandla en Figma-design till en fungerande WordPress-webbplats, och det finns fyra sätt att göra det på. Du kan låta AI bygga om den åt dig, återskapa den i en sidbyggare som SeedProd, köra den genom ett konverteringsplugin eller anlita en byrå. De tre första kräver ingen kodning alls.

Finns det ett Figma-plugin för WordPress?

Det finns flera, och UiChemy och Figma till WordPress Block är de två vi skulle rekommendera först. Figma har ingen inbyggd WordPress-export, så du behöver alltid ett av dessa verktyg eller en metod som AI-metoden ovan för att flytta en design.

Kan AI konvertera Figma-designer till WordPress?

Ja, och vi testade det för den här guiden med Claude med Figmas anslutning och WPVibe-pluginet.

Den matchade färgerna, teckenstorlekarna och avstånden från en enda genomläsning av designen, men den förstörde mobilvyn genom att kopiera designens fasta sidmarginaler oförändrade.

Metod 1 ovan har hela kontot, inklusive meddelandet som åtgärdade det.

Hur konverterar jag Figma-designer till Elementor?

UiChemy är verktyget för detta, eftersom det konverterar en Figma-ram till en redigerbar Elementor-layout snarare än platt kod. Det fungerar också med Bricks och blockredigeraren så att du inte är låst till en enda byggare.

Är WordPress bättre än Figma?

Ingen av dem är bättre, eftersom de gör olika jobb. Figma är där du designar hur en sida ska se ut, och WordPress är vad som driver din webbplats och serverar den till besökare.

De flesta webbplatser använder båda, med designen först fastställd i Figma och sedan byggd i WordPress.

Skadar konvertering från Figma till WordPress SEO?

Att konvertera en Figma-design till WordPress kommer generellt sett inte att skada ditt innehåll eller dina backlinks.

Automatiserade konverteringsverktyg kan ibland lägga till extra kod som utvecklare kallar bloat, och den tyngre koden kan sakta ner din sida jämfört med ett handkodat tema.

Vi rekommenderar att köra ett hastighetstest efter en konvertering för att se var du står.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du konverterar Figma till WordPress. Du kanske också vill se vår guide om hur du enkelt skapar ett anpassat WordPress-tema utan någon kod.

Om du gillade den här artikeln, prenumerera gärna på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.