Hvis du er en designer, der kan lide at fremvise dine designs ved at bruge mockups, kan det være nemt at skabe dem i Figma.

I stedet for at gemme dine Figma-designs og flytte til et andet program for at lave en mockup, kan du nemt downloade mockup-plugins i Figma. Der er mange plugin-muligheder i forskellige stilarter, men de er alle nemme at bruge og integreres i større designs.

Sådan finder og downloader du Figma-plugins

At downloade og installere et plugin i Figma er det samme, uanset om du bruger appen eller browserversionen. Fra Figmas browser-hjemmeside, klik Fællesskab > Plugins og widgets, og søg gennem listen eller brug søgelinjen.

Fra Figmas app, vil hjemmesiden tilbyde den samme mulighed som browseren for at komme til fællesskabssiden. Men hvis du er på en designside, kan du klikke på Figma-logoet Plugins. Hvis du allerede har installeret plugins, kan du se dem opført her.

For at finde mere, vælg Gennemse plugins i fællesskabet. Dette fører dig til fællesskabssiden i appen, hvor du kan søge efter andre plugins.

instagram viewer

På fællesskabssiden finder du en lille brochure for hvert plugin, datoen for den sidste opdatering og hvor ofte hvert plugin er blevet downloadet. For mere information om hvert plugin - såsom kommentarer fra brugere og brugsvejledninger - ved at klikke på dets navn føres du til plugins' informationsside.

Når du har fundet et plugin, du gerne vil downloade, skal du klikke på det blå Installere knap.

Hvis du ikke er sikker på, hvad du skal kigge efter, er her vores top fem foretrukne mockup-plugins. Der er mange flere, men det er godt at starte et sted.

  • Clay Mockups 3D
  • Vinkelmockups
  • MockRocket - 3D Mockups
  • Mockup
  • Vectary 3D-elementer

Sådan bruges Mockup-plugins i Figma

Processen med at installere plugins er den samme uanset hvilken type plugin du bruger, men der kan være nogle forskelle i, hvordan de bruges. Derfor er det altid bedst at læse det enkelte plugins community-side for ekstra detaljer.

I Figma kan du vælge færdige rammestørrelser til specifikke skærme, som iPhone 13 eller en stor eller lille Android. Du bør oprette dit design til dens tilsigtede enhedsstørrelse i stedet for at prøve at ændre størrelsen på designene senere for at passe til din mockup, men nogle mockups giver mulighed for lidt forskellige størrelser med nr forvrængning.

Du kan endda bruge et skærmbillede fra din enhed, som vil have en perfekt størrelse til en mockup af den samme enhed.

Mockups er normalt til statiske skærmdesigns, selvom du kan lave en videomockup i Photoshop. Vi vil fokusere på Figma mockups til håndholdte enheder, men du kan lav en mockup fra bunden i Photoshop til andre enheder. Med dit skærmdesign færdigt, kan du gå videre til at oprette produktmodellen.

Vi vil vise dig, hvordan du bruger tre af vores foreslåede plugins: Clay Mockups 3D, Angle Mockups og Vectory 3D Elements. Lad os springe lige ind.

Clay Mockups 3D

Med dit design åbent, vælg rammen og gå derefter til Plugins og vælg Clay Mockups 3D. Dette åbner et vindue, hvor du kan vælge enheden til mockup'et. Dit design skal vises på skærmen af ​​mockup'en i dette vindue.

Du kan ændre vinklen på mockup'en såvel som farven i dette vindue. Når du er tilfreds med, hvordan det ser ud, skal du klikke Gem som billede.

Du kan til enhver tid gå tilbage og ændre farven eller andre aspekter ved at klikke Rediger Mockup under Plugin i menuen til højre. Nu kan du tilføje dit plugin til større designs som præsentationer eller din portefølje.

Vinkelmockups

For at bruge Angle Mockups skal du oprette en Angle-konto for at downloade mockup-biblioteket fra deres hjemmeside. På Angles hjemmeside, klik Log ind, som åbner en popup, hvor du kan klikke Tilmelde og tilføj dine oplysninger for at oprette en gratis konto.

Når du er logget ind, skal du klikke for at downloade mockup'erne Mockups > Download prøve. For et mere omfattende sæt mockups kan du betale for premium-adgang, men prøven, der tilbydes med den gratis konto, er god nok.

Når den er downloadet, skal du udpakke filen. Dette indeholder eksempler, du kan bruge i Figma, Sketch og Adobe XD, samt nogle gratis wallpapers. Åben VinkelFigma. Du finder to videoer til at hjælpe med at bruge mockups, samt fire sæt Figma-filer med forskellige mockups.

For at importere filerne til din Figma-konto skal du gå til Figma-browseren og klikke på din profil. Du kan få adgang til dette fra appen ved at gå til Fil > Åbn filbrowser. Træk og slip hver Angle-fil i Figma. Åbn derefter Angle-filen ved at dobbeltklikke på den fra Figma-browsersiden.

Find den enhedsvinkel, du vil bruge til din mockup, og kopier den (Cmd + C til Mac eller Ctrl + C Til Windows). Indsæt det (Cmd + V til Mac eller Ctrl + V for Windows) til det samme tegnebræt som dit hoveddesign.

I lagpaletten skal du udvide lagene på mockup-skærmen, indtil du ser laget med et billedikon med titlen Placer tegnebrættet her. Vælg det lag. Så gå til Plugins > Angle Mockups og vælg dit originale design i pop op-vinduet.

Dette bør vises i forhåndsvisningsvinduet i vinklen på din mockup, men det vil ikke vise mockup'ets enhed. Klik ansøge og din skærm skulle nu være på enhedens mockup i den korrekte vinkel.

Vectary 3D-elementer

Vectary 3D fungerer på samme måde som Clay Mockups 3D, selvom det har færre muligheder for enhedsmockups, da det også tilbyder en række 3D-aktiver. Åbn dit design, vælg rammen, og gå til Plugins > Vectary 3D Elements.

Find den mockup, du gerne vil bruge, i popup-biblioteket, og klik derefter Indlæs ramme. Når dit design er dukket op på enhedens skærm, skal du klikke Eksporter billede.

Nu har du en 3D mockup af dit design på den enhed, du vælger. Du kan nemt tilføje det til et andet design.

Når din mockup er færdig, kan du gemme den som en PNG-fil, så den nemt kan bruges i et andet design. Klik Fil > Eksporter. Vælg dit valgte billede til eksport, og klik derefter Eksport til din endelige PNG.

Tilføj realisme til dine designs med Figma Mockups

Der er utallige anvendelser til at skabe mockups til dine designs. Med forskellige Figma-plugins kan du finde en lang række stilarter at arbejde med, som du kan tilføje til dine præsentationer, portefølje eller oprette bare for sjov for at vise dit designarbejde frem.

Med nogle få forskelle i applikationen er Figma mockup-plugins nemme at få adgang til og bruge, så hvorfor ikke prøve det?

Sådan opretter du masterskabeloner til præsentationer i Figma

Læs Næste

DelTweetDelE-mail

Relaterede emner

  • Kreativ
  • Design
  • Grafisk design
  • Online værktøjer

Om forfatteren

Ruby Helyer (36 artikler udgivet)

Ruby er skribent i MUOs kreative kategori, med fokus på at skrive om designsoftware. Efter at have arbejdet som designer, illustrator og fotograf, har Ruby også en BA i grafisk kommunikation og en MA i engelsk med kreativ skrivning.

Mere fra Ruby Helyer

Abonner på vores nyhedsbrev

Tilmeld dig vores nyhedsbrev for tekniske tips, anmeldelser, gratis e-bøger og eksklusive tilbud!

Klik her for at abonnere