Hur man konverterar Figma till WordPress (Beginner’s Guide)

Figma är ett molnbaserat designverktyg som gör att du kan skapa ett attraktivt användargränssnitt för din webbplats. Det låter dig snabbt testa idéer genom prototyper och stöder även samarbete i realtid.

Genom att konvertera dessa designer till WordPress kan du göra din webbplats mer visuellt tilltalande för användarna. Tänk dock på att denna process kan vara lite utmanande.

Under årens lopp har vi sett många webbplatser använda Figma för att skapa en estetiskt tilltalande och unik layout för sina företag. Detta har hjälpt oss att bättre förstå styrkorna och svagheterna med detta tillvägagångssätt för att anpassa webbplatsens utseende.

I den här artikeln kommer vi att visa dig hur du enkelt konverterar Figma till WordPress, steg för steg.

Varför konvertera Figma till WordPress?

Figma låter dig skapa beautiful layouts för din website och erbjuder fantastiska tools som gillar animationseffekter, prototyping, vektorredigering och mycket mer.

If you have a WordPress website, then using this tool to create a layout for your site will allow multiple designers and developers to work on the same Figma file. Detta kan förbättra samarbetet och minska behovet av fram- och återgående email.

Dessutom kan du skapa interaktiva mockups av din blogg för att testa användarflöden och få återkoppling innan din site börjar utvecklas.

Du kan också använda Figmas avancerade verktyg som rutnät, guider, lager och automatiska layouter för att skapa visuellt tilltalande sidor och mallar, inklusive:

• Landing pages
• Homepage, blogg eller produktsidor (pages)
• Ett helt theme
• Layouts för mobila websites
• Dashboards och användargränssnitt
• Templates för e-post och nyhetsbrev

Tänk dock på att Figma inte integreras med WordPress som standard, så du måste använda ett konverteringsverktyg. Med det sagt, låt oss se hur du enkelt skapar en Figma-design och konverterar den till WordPress, steg för steg:

Step 1: Skapa ett Figma-konto

För att designa en page med Figma måste du först skapa ett account på the website.

För att göra det, besök Figmas website och klicka på knappen ”Kom igång gratis” högst upp till höger på vyn.

Detta öppnar en new tab i ditt fönster, där du måste ange din email address och password.

Därefter klickar du på knappen ”Create Account”.

När du har gjort det kommer du att få ett verifierings email skickat till dig.

Öppna bara detta email från din inbox och click the ”Verify email” button.

You will now be taken to the Figma website, where you will be asked for your name.

Efter det måste du ange några detaljer om hur du planerar att använda verktyget och sedan klicka på knappen ”Fortsätt” längst ner.

You kommer sedan att bli ombedd att välja en plan för priser. You can select the ’Starter’ plan, which is free, and click the ’Continue’ button.

Step-by-Step 2: Designa en page på Figma

You will now be directed to your Figma dashboard

När du väl är där, gå vidare och klicka på knappen ”Design File” högst upp till höger för att skapa en Figma page.

Figma Builder kommer nu att öppnas på din vy. Här måste du välja alternativet ”Frame” högst upp.

Detta kommer att öppna en lista över designramar i den högra colonnen, där du måste välja alternativet ”Desktop”. Detta beror på att det plugin vi kommer att använda för att konvertera Figma till WordPress för närvarande endast stöder desktop canvas.

Därefter kan du add to images genom att clicka på the square icon högst upp och välja alternativet ”Place image/video”.

Detta öppnar din dator folder, där du kan uploada en image eller videoklipp som du väljer.

Du kan också add to text till din page genom att click på ”T” iconen högst upp på vyn.

När du har gjort det kan du justera textstorlek, justering, font och avstånd från inställningarna i den högra colonnen.

Du kan också använda gratis tools som ”Pen” och ”Pencil” högst upp, lägga till frågor om återkoppling, skapa fler lager och pages, ändra bakgrundsfärg och mycket mer.

Om du är en utvecklare och vill add to CSS-kod till page, kan du också göra det genom att byta till ”Dev Mode” med hjälp av toggle i det övre högra hörnet av vyn.

Step 3: Kopiera Figma Pages API Key

När du är nöjd med din Figma pages customize är det dags att få dess API key. Denna nyckel kommer att allow pluginet att embedda Figma page i WordPress.

För att göra detta, klicka på ikonen ”Figma” i det övre vänstra hörnet av skärmen. Detta öppnar en meny där du måste välja alternativet Hjälp och konto ” Kontoinställningar .

En new prompt kommer nu att öppnas på vyn.

Här rullar du ner till sectionen ”Personal access tokens” och clickar på länken ”Generate new token”.

Detta kommer att öppna några new settings, där du måste ange ett namn och ett datum då token löper ut för den token som du skapar. Vi rekommenderar att du väljer alternativet ”No Expiration” för token om du inte vill att Figma-sidan ska försvinna från din website efter en viss tidsperiod.

Efter det kan du ställa in alla omfattningar utom File Content till ”Write” och sedan klicka på knappen ”Generate token”.

You will now be taken back to the ”Personal access tokens” section.

Härifrån kan du kopiera den nyligen genererade token och klistra in den i Notepad eller en annan plain text editor.

Step-by-Step 4: Konvertera Figma till WordPress

När du har fått API key är det nu dags att konvertera din Figma page till WordPress.

För att göra detta måste du installera och aktivera plugin-programmet Animation and Design Converter for Gutenberg Block. För detaljerade instruktioner, se vår guide om hur du installerar ett WordPress-plugin.

Efter aktivering öppnar du sidan eller posten där du vill lägga till Figma-sidan. När du är där klickar du helt enkelt på knappen ”Importera från Figma” högst upp på vyn.

Detta kommer att öppna en prompt där du måste klistra in Figma-sidans åtkomsttoken som du kopierade tidigare.

Därefter måste du add to URL:en till Figma page i fältet ”FIGMA FILE URL”.

För att få denna URL, öppna din Figma-fil och kopiera länken i webbläsarens tabs. Tänk på att skrivbordsramen ska vara vald innan du kopierar URL:en.

När du har klistrat in länken i WordPress klickar du på knappen ”Starta import”.

Pluginet kommer sedan att konvertera din Figma page till Group blocket. Du kan nu customize blockets justering, position, typografi och färg från blockets panel.

Därefter klickar du på knappen ”Publicera” eller ”Update” för att lagra dina settings.

Så här ser den konverterade Figma-filen ut på vår demo website.

Alternativ: Använd Seahawk Media Services för att konvertera Figma till WordPress

Om du har skapat hela din website med Figma kommer metoden ovan ej att vara lämplig eftersom pluginet endast fungerar med skrivbordsramen.

Dessutom kan insticksprogrammet ha problem med att överföra komplexa mönster korrekt eftersom Figma endast fokuserar på design, medan WordPress kräver kodning för dynamiskt innehåll och funktionalitet. Det innebär att vissa av de element som du har lagt till i Figma kanske inte fungerar i WordPress.

Det är därför vi rekommenderar att du använder Seahawk Media tjänster för att konvertera Figma till WordPress eftersom de tar hänsyn till alla dessa faktorer under konverteringen.

Seahawk Media är ett ledande tjänsteföretag inom WordPress som erbjuder många olika tjänster, bland annat utveckling, design, underhåll, flytt, support och mycket mer.

De är betrodda av över 1000+ företag och kommer att utföra en helt responsiv, rent kodad, sökmotorsoptimering och pixelperfekt Figma till WordPress konvertering för you.

All you behöver göra är att skicka your Figma-filer till verksamheten.

Efter att ha förstått dina obligatoriska krav kommer Seahawk att fastställa en ungefärlig timeline och konvertera dina Figma-filer till en WordPress-webbplats på bara några dagar.

Du kan också använda företagets tjänster för en sökmotorsoptimering, tjänster för att skriva content, white label-tjänster, support och reparation av hackade webbplatser.

Bonus: Använd SeedProd för att bygga en visuellt tilltalande website

Om du gillar att bygga pages med Figma och sedan konvertera dem till WordPress, kan du använda SeedProd istället.

Det är den bästa WordPress-temabyggaren och sidbyggaren på marknaden. När du använder det kan du enkelt bygga anpassade teman och målsidor med enkel dra-och-släpp-teknik.

SeedProd levereras med en användarvänlig drag-and-drop-byggare, 300+ färdiga templates, avancerade WooCommerce-block och integrationer med e-postmarknadsföringstjänster.

Du kan enkelt dra and drop images, headings, videos, CTA, optin-formulär, giveaways eller paragraph blocks från den vänstra colonnen i buildern för att skapa en attraktiv page builder.

När du har gjort det klickar du bara på blocket du har lagt till för att öppna dess inställningar i den vänstra colonnen. Härifrån kan du infoga dynamisk text och ändra fontstorlek, justering, färg med mera.

Klicka slutligen på knapparna ”Save” och ”Publicera” högst upp för att spara dina settings och göra dina ändringar live. För detaljerade instruktioner kan du se vår tutorial om hur du skapar en landing page i WordPress.

För mer information om pluginet i allmänhet, se vår SeedProd review.

Vanliga frågor om att konvertera Figma till WordPress

Här är några frågor som våra läsare ofta ställer om Figma och WordPress.

Fungerar Figma och WordPress tillsammans?

Som standard kan Figma och WordPress inte integreras direkt. Du kan dock använda tools och tillägg som UiChemy, pxCode eller Animation and Design Converter för Gutenberg Block för att konvertera en Figma-design till WordPress.

Om den här metoden är för komplex för dig kan du helt enkelt anställa en utvecklare eller ett dedikerat företag som Seahawk Media för denna konvertering.

Måste jag kunna kodning för att konvertera Figma till WordPress?

Du behöver inte kunna koda för att skapa och konvertera Figma-design till WordPress eftersom du enkelt kan göra det med ett tillägg eller anlita en utvecklare.

Men om du vill göra det själv utan ett plugin måste du kunna HTML, CSS och eventuellt PHP för att handkoda din website. Detta beror på att vissa av Figmas designelement måste kodas för att ge funktionalitet i WordPress.

För mer details, se vår guide om hur man kodar en website.

Skadar konvertering från Figma till WordPress sökmotorsoptimering (Search Engine Optimization)?

Om du konverterar en Figma-design till WordPress påverkas inte ditt content eller dina backlinks. Figma-design kan dock ha en negativ inverkan på din websites struktur, page speed och images.

Det är därför vi rekommenderar att du använder Seahawk Medias tjänster för en Figma till WordPress konvertering eftersom de kommer att se till att din website är helt responsiv, rent kodad och sökmotorsoptimerad efter konverteringen.

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 Beginner’s guide om hur man lägger ut WordPress-utveckling och våra toppval för de bästa platserna för att få en customize logga för din website.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.