Figma is een geweldige tool die hard op weg is een favoriet te worden onder UX/UI- en webdesigners. U kunt snel en eenvoudig responsieve webontwerpen maken met deze gratis browsergebaseerde tool.
Hoewel de meeste mensen hun ontwerpen helemaal opnieuw maken in Figma, kunt u zich laten inspireren door echte websites en eenvoudig een Figma-ontwerp maken, rechtstreeks vanaf een bestaande HTML-pagina. Hier is hoe het te doen.
Waarom u Figma-ontwerpen van HTML zou moeten maken
Er zijn veel redenen waarom u een bestaand webontwerp wilt repliceren als een Figma-ontwerp. Door dit via de Figma-plug-in te doen, bespaart u tijd, zodat u zich kunt concentreren op het verfijnen van uw ontwerp.
Het oefenen van webdesign door bestaande webpagina's opnieuw te maken, is een geweldige manier om van de meesters te leren. U kunt ook de HTML naar Figma-ontwerptool gebruiken als u eerder een webpagina heeft ontworpen en gepubliceerd waartoe u geen toegang meer had. In plaats van het helemaal opnieuw te ontwerpen, kunt u tijd besparen door het terug te converteren naar Figma om er opnieuw aan te werken.
Nu je weet waarom deze tool handig kan zijn, is het tijd om te leren hoe het werkt.
Hoe u elke website omzet in een Figma-ontwerp
Om met op Figma gebaseerd ontwerpwerk te beginnen, moet u Figma openen en inloggen of aanmelden. U kunt de browserversie gebruiken, figuur, of download de desktop-app; ze werken allebei op dezelfde manier voor dit project.
Open een Nieuw ontwerpbestand om uw HTML naar Figma-ontwerpproject te starten.
Stap 1: Download de html.to.design-plug-in
Om een live website direct om te zetten in een Figma-ontwerp, heb je een plug-in nodig. Er zijn talloze plug-ins op Figma om te helpen met uw ontwerpen, waaronder plug-ins om mockups voor telefoons en apparaten te maken. U kunt uw geconverteerde website-ontwerp later aan een mockup toevoegen als u dat wilt.
Om de plug-in te downloaden, selecteert u het Figma-menu (Figma-logo) > Plug-ins > Vind meer plug-ins. Als alternatief kunt u selecteren Bronnen > Plug-ins. Typ bij beide opties in de zoekbalk html.naar.design.
Zoek de optie van divRIOTS en selecteer Loop. Dit opent de plug-in als een dialoogvenster op uw Figma-canvas.
Stap 2: Plak de website-URL
De html.to.design-plug-in is gratis, maar biedt wel een pro-versie. Met de gratis versie kun je je ontwerpproces helemaal afronden.
Zoek de website waarvan je een Figma-ontwerp wilt maken. Gebruik een openbare website, niet een webpagina die alleen toegankelijk is door in te loggen. We gaan onze startpagina gebruiken, MakeUseOf.com.
Kopieer de volledige URL en plak deze in het importvak op Figma, ter vervanging van de tijdelijke aanduiding voor de Apple-website.
Stap 3: laad uw ontwerp
Nadat u de URL van de website hebt geplakt, opent u Instellingen onder het importvak om de grootte van het ontwerp te selecteren. U kunt het ontwerp voor verschillende apparaten importeren, maar u zult meer succes hebben bij het kiezen van een desktopapparaat als u een desktop-URL gebruikt en meer succes hebben bij het gebruik van een mobiele URL voor mobiele apparaten.
Er zijn ook aangepaste opties voor apparaten of formaten die niet beschikbaar zijn als standaardopties. We kiezen MacBookPro 14" met een Licht thema.
Nadat u uw apparaat en weergave-instellingen hebt opgegeven, selecteert u Importeren om uw HTML-ontwerp tot leven te brengen in Figma. Wacht tot de laadbalk compleet is om het Figma-ontwerp te vullen.
Afhankelijk van welke website u hebt gebruikt, ziet u mogelijk een pop-upvenster waarin wordt uitgelegd dat sommige lettertypen moesten worden vervangen. Dit komt door copyright voor gelicentieerde lettertypen. Figma zal ze vervangen door lettertypen waartoe u toegang hebt.
Verlaat alle pop-ups en verlaat vervolgens het dialoogvenster van de plug-in om uw nieuwe ontwerp in zijn volledige vorm te zien.
Stap 4: bewerk uw Figma-ontwerp
Vanaf hier kunt u beginnen met het bewerken van uw Figma-webpagina op elke gewenste manier. Zoals eerder vermeld, kunt u met deze HTML naar Figma-functie leren hoe bestaande webpagina's zijn ontworpen om u te inspireren om uw eigen webpagina's helemaal opnieuw te maken. Je zou het basisontwerp van de website kunnen gebruiken en maak een presentatie met behulp van overgangen in Figma, of leer gewoon hoe webpagina's zijn opgezet door andere ontwerpers.
In het linkermenu vind je de lagen. Omdat dit rechtstreeks vanuit HTML is geconverteerd, kunnen de lagen gedetailleerder of zelfs verwarrend zijn dan wat u gewend bent bij het ontwerpen van uzelf. Selecteer een sectie in het ontwerp om de gemarkeerde lagen in het linkermenu te vinden.
U kunt afbeeldingen vervangen, titels en hoofdtekst opnieuw typen of dingen binnen de lay-out verplaatsen door te dubbelklikken op het ontwerpaspect. De html.to.figma-plug-in repliceert geen animatie- of overgangsinstellingen bij het klikken op links of het wijzigen van pagina's. Die kun je zelf toevoegen.
Hoe een privéwebpagina te converteren
Het grootste deel van het proces van het maken van een privéwebsite - een website waarvoor een account nodig is om toegang te krijgen - versus een openbare webpagina is hetzelfde. In plaats van de URL te plakken, moet u echter een Chrome-extensie gebruiken die een bestand genereert.
Open om te beginnen Figma en de html.to.figma-plug-in op dezelfde manier als hiervoor.
Stap 1: Download en voer de Chrome-extensie uit
Je kunt deze extensie alleen gebruiken met Google Chrome, dus open Chrome om te beginnen. Selecteer in het dialoogvenster van de Figma-plug-in Chrome-extensie-of open de extensie hier in uw Chrome-browser.
Selecteer Toevoegen aan Chrome > Uitbreiding toevoegen om de extensie aan uw browser toe te voegen.
Nadat de extensie is toegevoegd, navigeert u naar de privéwebsite of -pagina waarvan u het ontwerp wilt repliceren (we gebruiken een Instagram-pagina) en selecteert u de extensie. Samengevouwen extensies vindt u onder het puzzelstukje in uw browser.
Er wordt gevraagd of u de hele pagina wilt vastleggen of alleen wat u ziet. Maak uw keuze en de opname verschijnt in uw downloads als een .h2d-bestand.
Stap 2: Sleep het gegenereerde bestand naar de Figma-plug-in
Ga naar uw Figma-app of de Figma-site in uw browser en sleep uw gedownloade .h2d-bestand naar het vak. Het bestand wordt op dezelfde manier geladen en gegenereerd als de openbare website-optie.
Net als bij de openbare webpagina-versie kunt u dubbelklikken op aspecten van het ontwerp om ze te bewerken of door het linkermenu klikken om te zien waar ze in de lay-out verschijnen.
Misschien wilt u nieuwe ontwerpelementen toevoegen aan het ontwerp van de webpagina, zoals een Figma matglas effect, of u kunt zelfs delen van het webpagina-ontwerp repliceren als een hoofdsjabloon voor Figma-presentaties. 2022, Adobe heeft Figma overgenomen, dus we kunnen in de toekomst meer leuke manieren verwachten om Figma te gebruiken.
Gebruik elke website voor inspiratie in uw Figma-ontwerpen
Hoewel Figma in de eerste plaats bedoeld is voor het helemaal opnieuw ontwerpen van websites of UX/UI-pagina's, is het een geweldige kans om bestaande webpagina's te vullen om te zien hoe ze zijn gebouwd. U kunt uw webontwerp ook een replica van een bestaande site maken als u niet zeker weet waar u met een lege lei moet beginnen.
Een andere goede reden waarom je de html.to.figma-plug-in zou moeten gebruiken, is als je al een website hebt ontworpen waartoe je geen toegang meer hebt. U kunt de pagina in Figma vullen en opnieuw beginnen zonder dat u daadwerkelijk opnieuw hoeft te beginnen.
