Figma är ett bra verktyg som snabbt blir en favorit bland UX/UI och webbdesigners. Du kan skapa responsiva webbdesigner snabbt och enkelt med detta gratis webbläsarbaserade verktyg.
Medan de flesta skapar sina mönster från grunden i Figma, kan du inspireras av riktiga webbplatser och enkelt skapa en Figma-design direkt från en befintlig HTML-sida. Så här gör du.
Varför du ska skapa Figma-designer från HTML
Det finns många anledningar till att du kanske vill replikera en befintlig webbdesign som en Figma-design. Att göra detta via Figma-pluginet sparar tid, vilket gör att du kan fokusera på att finjustera din design.
Att öva webbdesign genom att återskapa befintliga webbsidor är ett bra sätt att lära av mästarna. Du kan också använda designverktyget HTML till Figma om du tidigare har designat och publicerat en webbsida som du har tappat åtkomst till. Istället för att göra om den från grunden kan du spara tid genom att konvertera tillbaka den till Figma för att arbeta med den igen.
Nu när du vet varför det här verktyget kan vara praktiskt är det dags att lära dig hur det fungerar.
Hur man konverterar vilken webbplats som helst till en Figma-design
För att påbörja något Figma-baserat designarbete måste du öppna Figma och logga in eller registrera dig. Du kan använda webbläsarversionen, Figma, eller ladda ner skrivbordsappen; de båda arbetar på samma sätt för det här projektet.
Öppna a Ny designfil för att påbörja ditt HTML till Figma designprojekt.
Steg 1: Ladda ner plugin-programmet html.to.design
För att direkt kunna konvertera en livewebbplats till en Figma-design behöver du ett plugin. Det finns otaliga plugins på Figma som hjälper dig med din design, inklusive plugins för att skapa mockups för telefoner och enheter. Du kan lägga till din konverterade webbdesign till en mockup senare om du vill.
För att ladda ner plugin, välj Figma meny (Figma logotyp) > Plugins > Hitta fler plugins. Alternativt kan du välja Resurser > Plugins. Från något av alternativen skriver du i sökfältet html.to.design.
Hitta alternativet som tillhandahålls av divRIOTS och välj Springa. Detta öppnar plugin-programmet som en dialogruta på din Figma-duk.
Steg 2: Klistra in webbadressen till webbplatsen
Insticksprogrammet html.to.design är gratis, men det erbjuder en proversion. Du kan slutföra din designprocess helt och hållet med gratisversionen.
Hitta webbplatsen du vill göra en Figma-design av. Du bör använda en offentlig webbplats – inte en webbsida som bara kan nås genom att logga in. Vi kommer att använda vår hemsida, MakeUseOf.com.
Kopiera hela URL: en och klistra in den i importrutan på Figma och ersätt platshållaren för Apples webbplats.
Steg 3: Ladda din design
Efter att ha klistrat in webbplatsens URL, öppna inställningar under importrutan för att välja storleken på designen. Du kan importera designen för en mängd olika enheter, men du kommer att ha bättre framgång med att välja en stationär enhet om du använde en webbadress för skrivbordet och bättre framgång med att använda en mobil URL för mobila enheter.
Det finns också anpassade alternativ för enheter eller storlekar som inte är tillgängliga som standardalternativ. Vi väljer MacBook Pro 14" med en Ljus tema.
När du har angett din enhet och visa inställningar väljer du Importera för att ge din HTML-design liv i Figma. Vänta tills belastningsstången är klar för att Figma-designen ska fyllas.
Beroende på vilken webbplats du har använt kan du märka en popup-ruta som förklarar att vissa typsnitt måste bytas ut. Detta kommer att bero på upphovsrätt för licensierade typsnitt. Figma kommer att ersätta dem med typsnitt som du har tillgång till.
Gå ur alla popup-fönster och avsluta sedan plugin-dialogrutan för att se din nya design i sin fullständiga form.
Steg 4: Redigera din Figma-design
Härifrån kan du börja redigera din Figma-webbsida på vilket sätt du vill. Som nämnts låter denna HTML till Figma-funktion dig lära dig hur befintliga webbsidor utformades för att inspirera dig att skapa dina egna från grunden. Du kan använda grunddesignen från webbplatsen och skapa en presentation med övergångar i Figma, eller helt enkelt lära dig hur webbsidor konfigureras av andra designers.
På menyn till vänster hittar du lagren. Eftersom detta har konverterats direkt från HTML kan lagren vara mer detaljerade – eller till och med förvirrande – än vad du är van vid när du designar dig själv. Välj ett avsnitt i designen för att hitta de markerade lagren på menyn till vänster.
Du kan ersätta bilder, skriva om rubriker och brödtext eller flytta saker i layouten genom att dubbelklicka på designaspekten. Insticksprogrammet html.to.figma replikerar inte animerings- eller övergångsinställningar när man klickar på länkar eller byter sida. Du kan lägga till dem på egen hand.
Hur man konverterar en privat webbsida
Majoriteten av processen för att skapa en privat webbplats – en som kräver ett konto för att få åtkomst – jämfört med en offentlig webbsida är densamma. Men istället för att klistra in webbadressen måste du istället använda ett Chrome-tillägg som genererar en fil.
För att börja, öppna Figma och html.to.figma plugin på samma sätt som tidigare.
Steg 1: Ladda ner och kör Chrome-tillägget
Du kan bara använda det här tillägget med Google Chrome, så öppna Chrome för att börja. I dialogrutan Figma plugin väljer du Chrome-tillägg-eller öppna tillägget här i din Chrome-webbläsare.
Välj Lägg till i Chrome > Lägg till tillägg för att lägga till tillägget i din webbläsare.
Med tillägget lagt till, navigera till den privata webbplats eller sida du vill replikera designen av – vi använder en Instagram-sida – och välj tillägget. Komprimerade tillägg finns under pusselbitsikonen i din webbläsare.
Den kommer att fråga om du vill fånga hela sidan eller bara vad som visas. Gör ditt val och sedan kommer infångningen att visas i dina nedladdningar som en .h2d-fil.
Steg 2: Dra den genererade filen till Figma Plugin
Gå till din Figma-app eller Figma-webbplatsen i din webbläsare och dra din nedladdade .h2d-fil till rutan. Filen kommer att laddas och genereras på samma sätt som alternativet för den offentliga webbplatsen.
Precis som med versionen av den offentliga webbsidan kan du dubbelklicka på aspekter av designen för att redigera dem eller klicka dig igenom menyn till vänster för att se var de visas i layouten.
Du kanske vill lägga till nya designelement till webbsidans design, till exempel en Figma frostat glaseffekt, eller så kan du till och med replikera delar av webbsidans design som en mastermall för Figma-presentationer. År 2022, Adobe förvärvade Figma, så vi kan förvänta oss fler roliga sätt att använda Figma i framtiden.
Använd vilken webbplats som helst för inspiration i dina Figma-designer
Medan Figma främst är till för att designa webbplatser eller UX/UI-sidor från början, är det ett utmärkt tillfälle att fylla på befintliga webbsidor för att se hur de byggdes. Du kan också göra din webbdesign till en kopia av en befintlig webbplats om du inte är säker på var du ska börja från ett tomt blad.
En annan bra anledning till att du bör använda plugin-programmet html.to.figma är om du redan har designat en webbplats som du har tappat åtkomst till. Du kan fylla på sidan i Figma och börja om utan att faktiskt behöva börja om.
