Hoe je Figma naar WordPress converteert (gids voor beginners)

Hoe converteer je Figma naar WordPress (Beginnersgids)

Waarom Figma converteren naar WordPress?

Figma is een cloud-based ontwerptool waarmee je een aantrekkelijke gebruikersinterface voor je website kunt maken. Met Figma kun je snel ideeën testen door middel van prototyping en het ondersteunt ook real-time samenwerking. Door deze ontwerpen om te zetten naar WordPress kun je je website visueel aantrekkelijker maken voor gebruikers. Houd er echter rekening mee dat dit proces een beetje uitdagend kan zijn.In de loop der jaren hebben we gezien dat talloze websites Figma gebruiken om een esthetisch aantrekkelijke en unieke lay-out voor hun bedrijven te creëren. Dit heeft ons geholpen om beter inzicht te krijgen in de sterke en zwakke punten van deze benadering om de look van je site aan te passen.

In dit artikel laten we je stap voor stap zien hoe je Figma eenvoudig kunt omzetten naar WordPress.

Stap 1: Maak een Figma-account aan

Met Figma kun je prachtige lay-outs voor jouw website maken en biedt het geweldige tools zoals animatie-effecten, prototyping, vectorbewerking en meer.

Als jij een WordPress-website hebt, dan kun je deze tool gebruiken om een lay-out voor jouw site te maken, zodat meerdere ontwerpers en ontwikkelaars aan hetzelfde Figma-bestand kunnen werken. Dit kan de samenwerking verbeteren en de noodzaak van heen en weer e-mails verminderen.

Bovendien kun je interactieve mock-ups van jouw blog maken om gebruikersstromen te testen en feedback te krijgen voordat jouw site in ontwikkeling gaat.

Je kunt ook gebruikmaken van Figma’s geavanceerde tools zoals grids, gidsen, lagen en automatische lay-outs om visueel aantrekkelijke pagina’s en sjablonen te maken, waaronder:

– Landingspagina’s
– Homepage, blogpagina of productpagina’s
– Een volledig thema
– Lay-outs voor mobiele websites
– Dashboards en gebruikersinterfaces
– E-mailsjablonen en nieuwsbrieven

Houd er echter rekening mee dat Figma standaard niet integreert met WordPress, dus je zult een conversietool moeten gebruiken. Dat gezegd hebbende, laten we stap voor stap bekijken hoe je eenvoudig een Figma-ontwerp kunt maken en converteren naar WordPress:

– Stap 1: Maak een Figma-account aan
– Stap 2: Ontwerp een pagina in Figma
– Stap 3: Kopieer de API-sleutel van de Figma-pagina
– Stap 4: Converteer Figma naar WordPress
– Alternatief: Gebruik Seahawk Media Services om Figma naar WordPress te converteren
– Bonus: Gebruik SeedProd om een visueel aantrekkelijke website te bouwen
– Veelgestelde vragen over het converteren van Figma naar WordPress

Stap 2: Ontwerp een pagina in Figma

Om een pagina te ontwerpen met Figma, moet je eerst een account aanmaken op de website. Ga naar de Figma-website en klik op de knop ‘Gratis aan de slag’ in de rechterbovenhoek van het scherm. Dit opent een nieuw tabblad in je venster, waar je je e-mailadres en wachtwoord moet invoeren. Klik daarna op de knop ‘Account aanmaken’. Nadat je dat hebt gedaan, ontvang je een verificatie-e-mail. Open gewoon deze e-mail in je inbox en klik op de knop ‘E-mail verifiëren’. Je wordt nu naar de Figma-website gebracht, waar je wordt gevraagd naar je naam. Daarna moet je wat details geven over hoe je van plan bent de tool te gebruiken en klik je op de knop ‘Doorgaan’ onderaan. Vervolgens wordt je gevraagd om een prijsplan te kiezen. Je kunt het ‘Starter’-plan selecteren, dat gratis is, en op de knop ‘Doorgaan’ klikken.

Stap 3: Kopieer de API-sleutel van de Figma-pagina.

Je wordt nu naar ons Figma-dashboard geleid. Eenmaal daar, klik je op de knop ‘Ontwerpbestand’ in de rechterbovenhoek om een Figma-pagina te maken. De Figma-builder opent nu op je scherm. Hier moet je de optie ‘Frame’ selecteren in de bovenste balk. Dit opent een lijst met ontwerpkaders in de rechterkolom, waar je de optie ‘Desktop’ moet selecteren. Dit komt doordat de plugin die we gebruiken om Figma naar WordPress om te zetten momenteel alleen het desktopcanvas ondersteunt. Vervolgens kun je afbeeldingen aan het canvas toevoegen door op het vierkante pictogram bovenaan te klikken en de optie ‘Afbeelding/video plaatsen’ te kiezen. Dit opent je computermap, waar je een afbeelding of video van jouw keuze kunt uploaden.

Je kunt ook tekst aan je pagina toevoegen door op het ‘T’-pictogram bovenaan het scherm te klikken. Zodra je dat doet, kun je de tekstgrootte, uitlijning, lettertype en tussenruimte aanpassen via de instellingen in de rechterkolom. Je kunt ook gebruikmaken van vrij tekenhulpmiddelen zoals ‘Pen’ en ‘Potlood’ bovenaan, feedbackvragen toevoegen, meer lagen en pagina’s maken, de achtergrondkleur wijzigen en nog veel meer. Als je een ontwikkelaar bent en CSS-code aan de pagina wilt toevoegen, dan kun je dat ook doen door naar ‘Dev Mode’ te schakelen met behulp van de schakelaar in de rechterbovenhoek van het scherm.

Stap 4: Converteer Figma naar WordPress

Als je tevreden bent met de aanpassingen op je Figma-pagina, is het tijd om de API-sleutel te verkrijgen. Deze sleutel stelt de plugin in staat om de Figma-pagina in WordPress in te sluiten.

1. Klik hiervoor op het ‘Figma’-pictogram in de linkerbovenhoek van het scherm. Dit opent een menu waar je de optie ‘Help en Account’ moet selecteren.
2. Er opent nu een nieuw venster op het scherm. Scroll naar beneden naar het gedeelte ‘Persoonlijke toegangssleutels’ en klik op de link ‘Nieuwe sleutel genereren’.
3. Dit opent nieuwe instellingen, waar je een naam en vervaldatum voor de sleutel moet opgeven. We raden aan om de optie ‘Geen vervaldatum’ te selecteren als je niet wilt dat de Figma-pagina na een bepaalde periode van je website verdwijnt.
4. Daarna kun je alle machtigingen behalve ‘Bestandsinhoud’ instellen op ‘Schrijven’ en vervolgens op de knop ‘Sleutel genereren’ klikken.
5. Je wordt nu teruggebracht naar het gedeelte ‘Persoonlijke toegangssleutels’. Hier kun je de zojuist gegenereerde sleutel kopiëren en plakken in Kladblok of een andere teksteditor.

Nadat je de API-sleutel hebt gekregen, is het nu tijd om je Figma-pagina om te zetten naar WordPress.

1. Om dit te doen, moet je de Animation and Design Converter for Gutenberg Block-plugin installeren en activeren. Voor gedetailleerde instructies, zie onze handleiding over hoe je een WordPress-plugin installeert.
2. Na activering open je de pagina of het bericht waar je de Figma-pagina wilt toevoegen. Eenmaal daar, klik je eenvoudigweg op de knop ‘Importeren vanuit Figma’ bovenaan het scherm.
3. Dit opent een venster waar je de Figma-pagina toegangstoken moet plakken die je eerder hebt gekopieerd.
4. Daarna moet je de Figma-pagina-URL toevoegen aan het veld ‘FIGMA FILE URL’.
5. Om deze URL te krijgen, open je je Figma-bestand en kopieer je de link in de browserbalk. Houd er rekening mee dat het bureaubladkader moet zijn geselecteerd voordat je de URL kopieert.
6. Nadat je de link in WordPress hebt geplakt, klik je op de knop ‘Start importeren’.
7. De plugin zal vervolgens je Figma-pagina omzetten naar de Groep-blok. Je kunt nu de uitlijning, positie, typografie en kleur van het blok aanpassen in het blokpaneel.
8. Daarna klik je op de knop ‘Publiceren’ of ‘Bijwerken’ om je instellingen op te slaan.

Als je je hele website hebt gemaakt met Figma, dan is de bovenstaande methode niet geschikt omdat de plugin alleen werkt met het desktop frame. Bovendien kan de plugin moeite hebben om complexe ontwerpen nauwkeurig over te zetten omdat Figma zich alleen richt op ontwerp, terwijl WordPress codering vereist voor dynamische inhoud en functionaliteit. Dit betekent dat sommige elementen die je hebt toegevoegd in Figma mogelijk niet werken in WordPress.

Als aternatief kun je SHOUT Media inhuren om jouw design om te zetten in een goed converterende website. Het enige wat je hoeft te doen is je Figma-bestanden naar ons te sturen. Neem contact op voor de mogelijkheden.