Hur man skapar och lägger till mockups till dina Figma-designer med hjälp av plugins

Om du är en designer som gillar att visa upp dina mönster genom att använda mockups, kan det vara enkelt att skapa dem i Figma.

Istället för att spara dina Figma-designer och flytta till ett annat program för att skapa en mockup, kan du enkelt ladda ner mockup-plugins i Figma. Det finns många plugin-alternativ i olika stilar, men de är alla enkla att använda och integreras i större design.

Hur man hittar och laddar ner Figma-plugins

Att ladda ner och installera ett plugin i Figma är detsamma oavsett om du använder appen eller webbläsarversionen. Från Figmas webbläsarhemsida, klick Community > Plugins och widgets, och sök igenom listan eller använd sökfältet.

Från Figmas app, kommer hemsidan att erbjuda samma alternativ som webbläsaren för att komma till communitysidan. Men om du är på en designsida kan du klicka på Figma-logotypen Plugins. Om du redan har installerat plugins kommer du att se dem listade här.

För att hitta mer, välj Bläddra bland plugins i gemenskapen. Detta tar dig till communitysidan i appen där du kan söka efter andra plugins.

På communitysidan hittar du en liten text för varje plugin, datum för senaste uppdatering och hur ofta varje plugin har laddats ner. För mer information om varje plugin – som kommentarer från användare och användningsguider – kommer du till pluginens informationssida genom att klicka på dess namn.

När du har hittat ett plugin du vill ladda ner klickar du på den blå Installera knapp.

Om du inte är säker på vad du ska leta efter, här är våra fem bästa mockup-plugins. Det finns många fler, men det är bra att börja någonstans.

• Clay Mockups 3D
• Vinkelmockups
• MockRocket - 3D-modeller
• Mockup
• Vectary 3D-element

Hur man använder Mockup Plugins i Figma

Processen för att installera plugins är densamma oavsett vilken typ av plugin du använder, men det kan finnas vissa skillnader i hur de används. Det är därför det alltid är bäst att läsa den enskilda plugins community-sida för extra detaljer.

I Figma kan du välja färdiga ramstorlekar för specifika skärmar, som iPhone 13 eller en stor eller liten Android. Du bör skapa din design för dess avsedda enhetsstorlek snarare än att försöka ändra storlek på designen senare för att passa din mockup, men vissa mockups tillåter lite olika storlekar med nr förvrängning.

Du kan till och med använda en skärmdump från din enhet, som kommer att ha en perfekt storlek för en mockup av samma enhet.

Mockups är vanligtvis för statiska skärmdesigner, även om du kan göra en videomockup i Photoshop. Vi kommer att fokusera på Figma-modeller för handhållna enheter, men du kan skapa en mockup från grunden i Photoshop för andra enheter. Med din skärmdesign färdig kan du gå vidare till att skapa produktmodellen.

Vi kommer att visa dig hur du använder tre av våra föreslagna plugins: Clay Mockups 3D, Angle Mockups och Vectory 3D Elements. Låt oss hoppa direkt in.

Clay Mockups 3D

Med din design öppen, välj ramen och gå sedan till Plugins och välj Clay Mockups 3D. Detta öppnar ett fönster där du kan välja enhet för mockupen. Din design bör visas på skärmen av mockupen i det här fönstret.

Du kan ändra vinkeln på mockupen såväl som färgen i det här fönstret. När du är nöjd med hur det ser ut klickar du Spara som bild.

Du kan när som helst gå tillbaka och ändra färg eller andra aspekter genom att klicka Redigera Mockup under Plugin i menyn till höger. Nu kan du lägga till din plugin till större design som presentationer eller din portfölj.

Vinkelmockups

För att använda Angle Mockups måste du skapa ett Angle-konto för att ladda ner mockup-biblioteket från deras webbplats. På Angles hemsida, klick Logga in, vilket kommer att få upp en popup där du kan klicka Bli Medlem och lägg till dina uppgifter för att skapa ett gratis konto.

När du har loggat in klickar du för att ladda ner mockuperna Mockups > Ladda ner prov. För en mer omfattande uppsättning mockups kan du betala för premiumåtkomst, men provet som erbjuds med gratiskontot är tillräckligt bra.

När du har laddat ned, packa upp filen. Det här innehåller exempel som du kan använda i Figma, Sketch och Adobe XD, samt några gratis bakgrundsbilder. Öppna VinkelFigma. Du hittar två videor som hjälper dig att använda mockuperna, samt fyra uppsättningar Figma-filer med olika mockups.

För att importera filerna till ditt Figma-konto, gå till Figma-webbläsaren och klicka på din profil. Du kommer åt detta från appen genom att gå till Arkiv > Öppna filläsare. Dra och släpp varje Angle-fil i Figma. Öppna sedan Angle-filen genom att dubbelklicka på den från Figma webbläsarsidan.

Hitta enhetsvinkeln du vill använda för din mockup och kopiera den (Cmd + C för Mac eller Ctrl + C för Windows). Klistra in det (Cmd + V för Mac eller Ctrl + V för Windows) till samma rityta som din huvuddesign.

I lagerpaletten expanderar du lagren på mockup-skärmen tills du ser lagret med en bildikon med titeln Placera Artboard här. Välj det lagret. Gå sedan till Plugins > Angle Mockups och välj din ursprungliga design i popup-fönstret.

Detta bör visas i förhandsgranskningsfönstret i vinkeln på din mockup, men det kommer inte att visa enheten för mockupen. Klick Tillämpa och din skärm bör nu vara på enhetens mockup i rätt vinkel.

Vectary 3D-element

Vectary 3D fungerar på samma sätt som Clay Mockups 3D, även om det har färre alternativ för enhetsmockups eftersom det också erbjuder en mängd olika 3D-tillgångar. Öppna din design, välj ramen och gå till Plugins > Vectary 3D Elements.

Hitta den mockup du vill använda i popup-biblioteket och klicka sedan Ladda ram. När din design har dykt upp på enhetens skärm, klicka Exportera bild.

Nu har du en 3D-mockup av din design på den enhet du väljer. Du kan enkelt lägga till den i en annan design.

När din mockup är klar kan du spara den som en PNG-fil för att enkelt kunna användas i en annan design. Klick Arkiv > Exportera. Välj din valda bild att exportera och klicka sedan Exportera för din sista PNG.

Lägg till realism till dina mönster med Figma Mockups

Det finns otaliga användningsområden för att skapa mockups för dina mönster. Med olika Figma-plugins kan du hitta en mängd olika stilar att arbeta med som du kan lägga till i dina presentationer, portfolio eller skapa bara för skojs skull för att visa upp ditt designarbete.

Med några skillnader i applikationen är Figma mockup-plugins lätta att komma åt och använda, så varför inte prova det?

Hur man skapar mastermallar för presentationer i Figma

Läs Nästa