Figma er et fantastisk værktøj, der hurtigt er ved at blive en favorit blandt UX/UI og webdesignere. Du kan oprette responsive webdesigns hurtigt og nemt ved hjælp af dette gratis browserbaserede værktøj.
Mens de fleste mennesker skaber deres design fra bunden i Figma, kan du lade dig inspirere af rigtige hjemmesider og nemt lave et Figma-design direkte fra en eksisterende HTML-side. Sådan gør du det.
Hvorfor du skal oprette Figma-designs fra HTML
Der er mange grunde til, at du måske ønsker at kopiere et eksisterende webdesign som et Figma-design. At gøre dette via Figma-plugin'et sparer tid, så du kan fokusere på at finjustere dit design.
At øve webdesign ved at genskabe eksisterende websider er en fantastisk måde at lære af mestrene på. Du kan også bruge HTML til Figma-designværktøjet, hvis du tidligere har designet og udgivet en webside, som du har mistet adgang til. I stedet for at redesigne det fra bunden, kan du spare tid ved at konvertere det tilbage til Figma for at arbejde på det igen.
Nu hvor du ved, hvorfor dette værktøj kan være praktisk, er det tid til at lære, hvordan det fungerer.
Sådan konverteres ethvert websted til et Figma-design
For at begynde et Figma-baseret designarbejde skal du åbne Figma og logge ind eller tilmelde dig. Du kan bruge browserversionen, Figma, eller download desktop-appen; de arbejder begge på samme måde for dette projekt.
Åbn a Ny designfil for at starte dit HTML til Figma-designprojekt.
Trin 1: Download html.to.design Plugin
For at være i stand til direkte at konvertere et live-websted til et Figma-design, skal du bruge et plugin. Der er utallige plugins på Figma til at hjælpe med dine designs, herunder plugins til at lave mockups til telefoner og enheder. Du kan tilføje dit konverterede webstedsdesign til en mockup senere, hvis du vil.
For at downloade pluginnet skal du vælge Figma menu (Figma-logo) > Plugins > Find flere plugins. Alternativt kan du vælge Ressourcer > Plugins. Skriv i søgefeltet fra begge muligheder html.to.design.
Find indstillingen fra divRIOTS, og vælg Løb. Dette åbner plugin'et som en dialogboks på dit Figma-lærred.
Trin 2: Indsæt webstedets URL
html.to.design-plugin'et er gratis, men det tilbyder en pro-version. Du kan fuldføre din designproces helt med den gratis version.
Find den hjemmeside, du vil lave et Figma-design af. Du bør bruge et offentligt websted - ikke en webside, der kun kan tilgås ved at logge ind. Vi kommer til at bruge vores hjemmeside, MakeUseOf.com.
Kopier den fulde URL og indsæt den i importboksen på Figma, og erstatter Apple-webstedets pladsholder.
Trin 3: Indlæs dit design
Når du har indsat webstedets URL, skal du åbne Indstillinger under importboksen for at vælge størrelsen på designet. Du kan importere designet til en række forskellige enheder, men du vil have bedre succes med at vælge en desktop-enhed, hvis du brugte en desktop-URL og bedre succes med at bruge en mobil-URL til mobile enheder.
Der er også brugerdefinerede muligheder for enheder eller størrelser, der ikke er tilgængelige som standardindstillinger. Vi vælger MacBook Pro 14" med en Lys tema.
Når du har angivet din enhed og se indstillinger, skal du vælge Importere at bringe dit HTML-design til live i Figma. Vent, indtil belastningsstangen er færdig, så Figma-designet udfyldes.
Afhængigt af hvilket websted du har brugt, vil du muligvis bemærke en pop-up-boks, der forklarer, at nogle skrifttyper skulle udskiftes. Dette vil være på grund af copyright for licenserede skrifttyper. Figma vil erstatte dem med skrifttyper, du har adgang til.
Afslut alle pop op-vinduer, og forlad derefter plugin-dialogen for at se dit nye design i sin fulde form.
Trin 4: Rediger dit Figma-design
Herfra kan du begynde at redigere din Figma-webside på den måde, du vil. Som nævnt giver denne HTML til Figma-funktion dig mulighed for at lære, hvordan eksisterende websider blev designet til at inspirere dig til at skabe dine egne fra bunden. Du kan bruge basisdesignet fra hjemmesiden og oprette en præsentation ved hjælp af overgange i Figma, eller bare lær hvordan websider er sat op af andre designere.
I menuen til venstre finder du lagene. Da dette er blevet konverteret direkte fra HTML, kan lagene være mere detaljerede - eller endda forvirrende - end hvad du er vant til, når du designer dig selv. Vælg en sektion i designet for at finde de fremhævede lag i venstre menu.
Du kan erstatte billeder, genindtaste titler og brødtekst eller flytte ting i layoutet ved at dobbeltklikke på designaspektet. html.to.figma-plugin'et replikerer ikke animations- eller overgangsindstillinger, når du klikker på links eller skifter sider. Du kan tilføje dem selv.
Sådan konverteres en privat webside
Størstedelen af processen med at oprette et privat websted - et der kræver en konto for at få adgang - versus en offentlig webside er det samme. I stedet for at indsætte URL'en skal du dog i stedet bruge en Chrome-udvidelse, der genererer en fil.
For at begynde skal du åbne Figma og html.to.figma plugin på samme måde som før.
Trin 1: Download og kør Chrome-udvidelsen
Du kan kun bruge denne udvidelse med Google Chrome, så åbn Chrome for at begynde. Fra Figma-plugin-dialogboksen skal du vælge Chrome-udvidelse-eller åbn udvidelsen her i din Chrome-browser.
Vælg Føj til Chrome > Tilføj udvidelse for at tilføje udvidelsen til din browser.
Når udvidelsen er tilføjet, skal du navigere til den private hjemmeside eller side, du ønsker at kopiere designet af - vi bruger en Instagram-side - og vælge udvidelsen. Skjulede udvidelser findes under puslespilsbrikikonet i din browser.
Den vil spørge, om du vil fange hele siden eller bare det, der er i udsigt. Foretag dit valg, og derefter vil optagelsen vises i dine downloads som en .h2d-fil.
Trin 2: Træk den genererede fil ind i Figma-plugin'et
Gå til din Figma-app eller Figma-webstedet i din browser, og træk din downloadede .h2d-fil ind i boksen. Filen indlæses og genereres på samme måde som muligheden for den offentlige hjemmeside.
Ligesom med den offentlige websideversion kan du dobbeltklikke på aspekter af designet for at redigere dem eller klikke gennem menuen til venstre for at se, hvor de vises på layoutet.
Du vil måske tilføje nye designelementer til websidedesignet, f.eks en Figma matteret glaseffekt, eller du kan endda kopiere dele af websidens design som en masterskabelon til Figma-præsentationer. I 2022, Adobe købte Figma, så vi kan forvente flere sjove måder at bruge Figma på i fremtiden.
Brug et hvilket som helst websted til inspiration i dine Figma-designs
Mens Figma primært er til at designe websteder eller UX/UI-sider fra bunden, er det en fantastisk mulighed for at udfylde eksisterende websider for at se, hvordan de blev bygget. Du kan også gøre dit webdesign til en kopi af et eksisterende websted, hvis du ikke er sikker på, hvor du skal starte fra en tom tavle.
En anden god grund til, hvorfor du bør bruge html.to.figma-pluginet, er, hvis du allerede har designet et websted, du har mistet adgang til. Du kan udfylde siden i Figma og starte igen uden at skulle starte igen.