In het streven naar het optimaliseren van workflows komt Fignel, een bedrijf dat voorop loopt op het gebied van ontwerpinnovatie, naar voren als een oplossing die Figma-bestanden moeiteloos omzet in functionele Elementor- websites.
Deze unieke tool vindt weerklank bij professionals die de ontwerpmogelijkheden van Figma willen combineren met de vaardigheid van Elementor om websites te bouwen. Fignel bestaat uit Figma en Elementor, en deze tool werkt perfect om uw WordPress-website-ervaring een fluitje van een cent te maken. In dit artikel zullen we meer zien over Fignell en hoe u het kunt gebruiken.
Inleiding tot Fignell
Fignel is een vroege bètatool die ontwerpers kunnen gebruiken om een Figma-ontwerp automatisch om te zetten in een op Elementor gebaseerde WordPress-website. Het is beschikbaar als plug-in voor Figma via de Fignel-website en op de Fignel-plug-incommunitypagina bij Figma.
Het bevat Auto Layout-eigenschappen voor componenten, waardoor pagina's of individuele componenten met één klik kunnen worden geconverteerd. Fignel biedt momenteel verschillende widgets, waaronder secties, kolommen, tekst, koppen, afbeeldingen (momenteel worden er geen afbeeldingen geüpload), video (plak een link van YouTube of elders) en formulieren. Er is een gratis abonnement beschikbaar voor gebruikers die tijd willen besparen tijdens het werken met Elementor.
Maak geweldige websites
Met de beste gratis paginabuilder Elementor
Begin nuFignel helpt ontwikkelaars en ontwerpers tijd te besparen door ontwerpen om te zetten naar Elementor. Het is de bedoeling dat gebruikers meer dan 60 krachtige widgets, onbeperkte creatiemogelijkheden, door ontwerpers gemaakte sjablonen om te downloaden, dynamische inhoudsondersteuning en VIP-klantenservice-opties kunnen converteren.
Volgens hun website: “Helpt Fignel u om uw Figma-ontwerp met slechts een paar klikken om te zetten in een live Elementor-website. Gebruik eenvoudig Auto Layout-eigenschappen voor uw componenten en converteer met één klik naar een live WordPress-website. Met onze plug-in kun je een volledige pagina of afzonderlijke componenten converteren.”
Gebruik Fignell om Figma naar Elementor te converteren
Installatie en installatie van plug-ins
Eerst en vooral is toegang tot het Figma-account en navigeren naar het gedeelte met plug-ins essentieel. Hier komt Fignel naar voren als een cruciaal instrument.
Om het proces te starten, moet u een e-mailadres en licentiecode opgeven.
Interessant is dat Fignel een gratis optie uitbreidt, waardoor gebruikers maximaal vijf ontwerpen kunnen converteren zonder enige kostenimplicaties.
Het canvas selecteren
Na de installatie selecteert u het frame dat u wilt converteren. U kunt zelfs het hele tekengebied selecteren.
Vervolgens ziet u dat een segment met de naam "Crypto Website Versie 4" een bevestiging ondergaat voordat u doorgaat met downloaden.
U ziet een knop "Elementor-sjabloon downloaden", klik hierop om de download te starten.
Verfijning voor optimale resultaten
Een dieper begrip van bepaalde ontwerpnuances wordt op dit moment essentieel. Beheersing van de automatische layout binnen Figma blijkt onmisbaar. Deze functionaliteit weerspiegelt nauw de container- en lay-outstructuur van Elementor, waardoor een naadloze conversie mogelijk wordt.
Een zorgvuldige vergelijking tussen de ontwerp- en automatische lay-outinstellingen blijkt een cruciale stap te zijn, die de effectiviteit van het proces garandeert.
Widget-interpretaties
Hoe Fignel widgets interpreteert is een fundamenteel aspect. Om een nauwkeurige vertaling te garanderen, is een voorbereidende basis binnen Figma absoluut noodzakelijk.
Als u bijvoorbeeld een knop labelt als "[Knop]" tussen haakjes, krijgt u de benodigde context voor de plug-in. Soortgelijke conventies begeleiden de interpretatie van verschillende widgets, waardoor het conversieproces wordt gestroomlijnd.
Conversieproces en resultaten
Bij het starten van de conversie genereert Fignel een JSON-bestand.
Dit bestand dient als kanaal voor het naadloos importeren van het ontwerp in Elementor, waar het vorm en vorm aanneemt. Het is echter relevant om op te merken dat het proces bepaalde uitdagingen met zich meebrengt.
Importeren in Elementor
Ga naar uw website en voeg een nieuwe pagina toe. En open het met Elementor.
Klik nu op de bibliotheekknop en selecteer uploaden.
Importeer nu het JSON-bestand.
Nu ziet u hier meerdere opties die wachten om te worden geïmporteerd. Selecteer de verwachte sectie en klik op importeren en toepassen.
Veranderingen maken
Zodra het bestand is geïmporteerd, ziet u dat er verschillende secties in de war zijn. Dit komt omdat Fignel slechts 60+ widgets ondersteunt en degene die we hebben geïmporteerd elementen bevat die meer vereisen dan wat deze tool biedt. Maak je dus geen zorgen. Je kunt die dingen handmatig toevoegen.
Overzicht van Fignel
Hoewel het onderliggende concept van Fignel revolutionair is, kent de uitvoering ervan momenteel beperkingen. Ondanks minutieuze inspanningen om zich te houden aan de principes van automatische lay-out en nauwkeurige containerconfiguraties, ontstaan er discrepanties in de interpretatie van Fignel. De neiging van de plug-in naar op pixels gebaseerde aanpassingen resulteert in variaties, vooral wat betreft opvulling en uitlijning. Op het gebied van mobiel ontwerp neemt de doeltreffendheid van Fignel af, wat leidt tot verschillen in typografie en opmaak. Opmerkelijk ingewikkelde ontwerpen met achtergrondafbeeldingen en geavanceerde elementen stuiten op obstakels in de overgang.
Conclusie
Vanuit het perspectief van een doorgewinterde ontwerper die zich inzet voor het synergetische potentieel van Elementor en Figma, biedt Fignel een unieke waardepropositie. Hoewel verfijningen gerechtvaardigd zijn, is de verwachting van Fignels groei en rijping voelbaar. Vanaf nu behouden beproefde workflows hun kracht. Het traject van Fignel zou echter het landschap van ontwerptools kunnen hervormen en een pad kunnen banen naar een naadloze conversie van Figma naar Elementor. De reis naar dit doel gaat verder, waarbij Fignel een aanzienlijke stap in de goede richting betekent.
