Hvordan lage og legge til Mockups til Figma-designene dine ved å bruke plugins

Hvis du er en designer som liker å vise frem designene dine ved å bruke mockups, kan det være enkelt å lage dem i Figma.

I stedet for å lagre Figma-designene og flytte til et annet program for å lage en mockup, kan du enkelt laste ned mockup-plugins i Figma. Det er mange plugin-alternativer i forskjellige stiler, men de er alle enkle å bruke og integreres i større design.

Hvordan finne og laste ned Figma-plugins

Nedlasting og installasjon av en plugin i Figma er den samme enten du bruker appen eller nettleserversjonen. Fra Figmas nettleserhjemmeside, klikk Fellesskap > Plugins og widgets, og søk gjennom listen eller bruk søkefeltet.

Fra Figmas app, vil hjemmesiden tilby det samme alternativet som nettleseren for å komme til fellesskapssiden. Men hvis du er på en designside, kan du klikke på Figma-logoen Plugins. Hvis du allerede har installert plugins, vil du se dem oppført her.

For å finne mer, velg Bla gjennom plugins i fellesskapet. Dette tar deg til fellesskapssiden i appen hvor du kan søke etter andre plugins.

På fellesskapssiden finner du en liten tekst for hver plugin, dato for siste oppdatering og hvor ofte hver plugin har blitt lastet ned. For mer informasjon om hver plugin - for eksempel kommentarer fra brukere og bruksveiledninger - klikker du på navnet for å ta deg til pluginens informasjonsside.

Når du har funnet en plugin du vil laste ned, klikker du på den blå Installere knapp.

Hvis du ikke er sikker på hva du skal se etter, her er våre topp fem favoritt-mockup-plugins. Det er mange flere, men det er godt å begynne et sted.

• Clay Mockups 3D
• Vinkelmodeller
• MockRocket - 3D-modeller
• Mockup
• Vectary 3D-elementer

Hvordan bruke Mockup Plugins i Figma

Prosessen med å installere plugins er den samme uavhengig av type plugin du bruker, men det kan være noen forskjeller i hvordan de brukes. Derfor er det alltid best å lese fellesskapssiden til den enkelte plugin for ekstra detaljer.

I Figma kan du velge ferdige rammestørrelser for spesifikke skjermer, som iPhone 13 eller en stor eller liten Android. Du bør lage designet for den tiltenkte enhetsstørrelsen i stedet for å prøve å endre størrelsen på designene senere for å passe til mockupen din, men noen mockups vil tillate litt forskjellige størrelser med nr forvrengning.

Du kan til og med bruke et skjermbilde fra enheten din, som vil ha en perfekt størrelse for en mockup av den samme enheten.

Mockups er vanligvis for statisk skjermdesign, selv om du kan lage en videomockup i Photoshop. Vi skal fokusere på Figma-modeller for håndholdte enheter, men du kan lage en mockup fra bunnen av i Photoshop for andre enheter. Når skjermdesignet er ferdig, kan du gå videre til å lage produktmodellen.

Vi skal vise deg hvordan du bruker tre av våre foreslåtte plugins: Clay Mockups 3D, Angle Mockups og Vectory 3D Elements. La oss hoppe rett inn.

Clay Mockups 3D

Med designet åpent, velg rammen og gå til Plugins og velg Clay Mockups 3D. Dette åpner et vindu der du kan velge enheten for mockupen. Designet ditt skal vises på skjermen til mockupen i dette vinduet.

Du kan endre vinkelen på mockupen så vel som fargen i dette vinduet. Når du er fornøyd med hvordan den ser ut, klikker du Lagre som bilde.

Du kan gå tilbake og endre fargen eller andre aspekter når som helst ved å klikke Rediger Mockup under Plugg inn i menyen til høyre. Nå kan du legge til plugin-en til større design som presentasjoner eller porteføljen din.

Vinkelmodeller

For å bruke Angle Mockups, må du opprette en Angle-konto for å laste ned mockup-biblioteket fra nettsiden deres. På Angles nettside, klikk Logg inn, som vil få opp en popup der du kan klikke Melde deg på og legg til detaljene dine for å opprette en gratis konto.

Når du er logget på, klikker du for å laste ned modellene Mockups > Last ned prøve. For et mer omfattende sett med mockups kan du betale for premium-tilgang, men prøven som tilbys med gratiskontoen er god nok.

Når den er lastet ned, pakk ut filen. Denne inneholder eksempler du kan bruke i Figma, Sketch og Adobe XD, samt noen gratis bakgrunnsbilder. Åpen VinkelFigma. Du finner to videoer for å hjelpe deg med å bruke mockupene, samt fire sett med Figma-filer med forskjellige mockups.

For å importere filene til Figma-kontoen din, gå til Figma-nettleseren og klikk på profilen din. Du får tilgang til dette fra appen ved å gå til Fil > Åpne filleser. Dra og slipp hver Angle-fil i Figma. Åpne deretter Angle-filen ved å dobbeltklikke på den fra Figma-nettlesersiden.

Finn enhetsvinkelen du vil bruke for mockupen og kopier den (Cmd + C for Mac eller Ctrl + C for Windows). lim den inn (Cmd + V for Mac eller Ctrl + V for Windows) til samme tegnebrett som hoveddesignet ditt.

I lagpaletten utvider du lagene på mockup-skjermen til du ser laget med et bildeikon med tittelen Plasser tegnebrettet her. Velg det laget. Gå deretter til Plugins > Angle Mockups og velg ditt originale design i popup-vinduet.

Dette skal vises i forhåndsvisningsvinduet i vinkelen til mockupen din, men det vil ikke vise enheten til mockupen. Klikk Søke om og skjermen din skal nå være på enhetsmodellen i riktig vinkel.

Vectary 3D-elementer

Vectary 3D fungerer på samme måte som Clay Mockups 3D, selv om den har færre alternativer for enhetsmodeller, da den også tilbyr en rekke 3D-ressurser. Åpne designet ditt, velg rammen og gå til Plugins > Vectary 3D Elements.

Finn mockupen du vil bruke i popup-biblioteket, og klikk deretter Lasteramme. Når designet ditt har dukket opp på enhetens skjerm, klikker du Eksporter bilde.

Nå har du en 3D-mockup av designet ditt på enheten du velger. Du kan enkelt legge den til et annet design.

Når mockupen er fullført, kan du lagre den som en PNG-fil for enkel bruk i et annet design. Klikk Fil > Eksporter. Velg bildet du har valgt å eksportere, og klikk deretter Eksport for din siste PNG.

Legg realisme til designene dine med Figma Mockups

Det er utallige bruksområder for å lage mockups for designene dine. Med ulike Figma-plugins kan du finne et stort utvalg stiler å jobbe med som du kan legge til presentasjonene dine, porteføljen eller lage bare for moro skyld for å vise frem designarbeidet ditt.

Med noen få forskjeller i applikasjonen er Figma mockup-plugins enkle å få tilgang til og bruke, så hvorfor ikke prøve det?

Hvordan lage mastermaler for presentasjoner i Figma

Les Neste