Mockups maken en toevoegen aan uw Figma-ontwerpen met behulp van plug-ins

Als je een ontwerper bent die je ontwerpen graag laat zien door mockups te gebruiken, kan het gemakkelijk zijn om ze in Figma te maken.

In plaats van je Figma-ontwerpen op te slaan en naar een ander programma te gaan om een ​​mockup te maken, kun je eenvoudig mockup-plug-ins downloaden in Figma. Er zijn veel plug-in-opties in verschillende stijlen, maar ze zijn allemaal eenvoudig te gebruiken en te integreren in grotere ontwerpen.

Figma-plug-ins zoeken en downloaden

Het downloaden en installeren van een plug-in in Figma is hetzelfde, of u nu de app of de browserversie gebruikt. Van De startpagina van de browser van Figma, Klik Community > Plug-ins en widgetsen doorzoek de lijst of gebruik de zoekbalk.

Van De app van Figma, biedt de startpagina dezelfde optie als de browser om naar de communitypagina te gaan. Maar als je op een ontwerppagina bent, kun je op het Figma-logo klikken, en dan Plug-ins. Als je al plug-ins hebt geïnstalleerd, zie je ze hier vermeld.

Om meer te vinden, kies Blader door plug-ins in de community.

Hiermee gaat u naar de communitypagina in de app waar u naar andere plug-ins kunt zoeken.

Op de communitypagina vindt u een kleine toelichting voor elke plug-in, de datum van de laatste update en hoe vaak elke plug-in is gedownload. Voor meer informatie over elke plug-in, zoals opmerkingen van gebruikers en gebruikershandleidingen, gaat u door op de naam te klikken naar de informatiepagina van die plug-in.

Zodra je een plug-in hebt gevonden die je wilt downloaden, klik je op de blauwe Installeren knop.

Als u niet zeker weet waar u op moet letten, vindt u hier onze top vijf van favoriete mockup-plug-ins. Er zijn er nog veel meer, maar het is goed om ergens te beginnen.

• Klei Mockups 3D
• Hoekmodellen
• MockRocket - 3D-modellen
• Mockup
• Vector 3D-elementen

Mockup-plug-ins gebruiken in Figma

Het proces voor het installeren van plug-ins is hetzelfde, ongeacht het type plug-in dat u gebruikt, maar er kunnen enkele verschillen zijn in de manier waarop ze worden gebruikt. Daarom is het altijd het beste om de communitypagina van de individuele plug-in te lezen voor extra details.

In Figma kun je kant-en-klare framematen kiezen voor specifieke schermen, zoals de iPhone 13 of een grote of kleine Android. U moet uw ontwerp maken voor de beoogde apparaatgrootte in plaats van te proberen het formaat van de ontwerpen te wijzigen later om in je mockup te passen, maar sommige mockups zorgen voor iets andere maten zonder vervorming.

Je zou zelfs een screenshot van je apparaat kunnen gebruiken, die perfect zal zijn voor een mockup van hetzelfde apparaat.

Mockups zijn meestal voor statische schermontwerpen, hoewel dat kan maak een videomodel in Photoshop. We gaan ons concentreren op Figma-mockups voor draagbare apparaten, maar dat kan maak een mockup helemaal opnieuw in Photoshop voor andere apparaten. Als uw schermontwerp is voltooid, kunt u doorgaan met het maken van de productmockup.

We laten u zien hoe u drie van onze voorgestelde plug-ins kunt gebruiken: Clay Mockups 3D, Angle Mockups en Vectory 3D Elements. Laten we er meteen in springen.

Klei Mockups 3D

Met je ontwerp open, selecteer het frame en ga dan naar Plug-ins en kies Klei Mockups 3D. Dit opent een venster waarin u het apparaat voor de mockup kunt kiezen. Uw ontwerp zou op het scherm van de mockup in dit venster moeten verschijnen.

U kunt de hoek van de mockup en de kleur in dit venster wijzigen. Als je tevreden bent met hoe het eruit ziet, klik je op Opslaan als afbeelding.

U kunt op elk moment teruggaan en de kleur of andere aspecten wijzigen door te klikken op Mock-up bewerken onder Inpluggen in het rechtermenu. Nu kunt u uw plug-in toevoegen aan grotere ontwerpen zoals presentaties of uw portfolio.

Hoekmodellen

Om Angle Mockups te gebruiken, moet u een Angle-account maken om de mockup-bibliotheek van hun website te downloaden. Op De website van Angle, Klik Log in, die een pop-up zal openen waar u kunt klikken op Aanmelden en voeg uw gegevens toe om een ​​gratis account aan te maken.

Eenmaal aangemeld, om de mockups te downloaden, klik op Mockups > Voorbeeld downloaden. Voor een uitgebreidere set mockups kun je betalen voor premium toegang, maar het voorbeeld dat wordt aangeboden met het gratis account is goed genoeg.

Eenmaal gedownload, unzip het bestand. Dit bevat voorbeelden die u kunt gebruiken in Figma, Sketch en Adobe XD, evenals enkele gratis achtergronden. Open HoekFigma. Je vindt twee video's om je te helpen bij het gebruik van de mockups, evenals vier sets Figma-bestanden met verschillende mockups.

Om de bestanden naar uw Figma-account te importeren, gaat u naar de Figma-browser en klikt u op uw profiel. U kunt dit vanuit de app openen door naar. te gaan Bestand > Bestandsbrowser openen. Sleep elk Angle-bestand naar Figma en zet het daar neer. Open vervolgens het Angle-bestand door erop te dubbelklikken vanaf de Figma-browserpagina.

Zoek de apparaathoek die u voor uw mockup wilt gebruiken en kopieer deze (Cmd + C voor Mac of Ctl + C voor ramen). Plak het (Cmd + V voor Mac of Ctrl + V voor Windows) in hetzelfde tekengebied als uw hoofdontwerp.

Vouw in het lagenpalet de lagen van het mockup-scherm uit totdat je de laag ziet met een afbeeldingspictogram met de titel Plaats tekengebied hier. Selecteer die laag. Ga dan naar Plug-ins > Hoekmodellen en selecteer uw originele ontwerp in het pop-upvenster.

Dit zou in het voorbeeldvenster in de hoek van uw mockup moeten worden weergegeven, maar het apparaat van de mockup wordt niet weergegeven. Klik Van toepassing zijn en je scherm zou nu in de juiste hoek op het apparaatmodel moeten staan.

Vector 3D-elementen

Vectary 3D werkt op dezelfde manier als Clay Mockups 3D, hoewel het minder opties heeft voor apparaatmodellen omdat het ook een verscheidenheid aan 3D-middelen biedt. Open je ontwerp, selecteer de lijst en ga naar Plug-ins > Vector 3D-elementen.

Zoek de mockup die je wilt gebruiken in de pop-upbibliotheek en klik vervolgens op Laadframe. Zodra uw ontwerp op het scherm van het apparaat is verschenen, klikt u op Afbeelding exporteren.

Nu heb je een 3D-mockup van je ontwerp op het apparaat dat je kiest. U kunt het eenvoudig aan een ander ontwerp toevoegen.

Zodra je mockup klaar is, kun je het opslaan als een PNG-bestand om het gemakkelijk in een ander ontwerp te gebruiken. Klik Bestand > Exporteren. Selecteer de door u gekozen afbeelding om te exporteren en klik vervolgens op Exporteren voor uw definitieve PNG.

Voeg realisme toe aan uw ontwerpen met Figma Mockups

Er zijn talloze toepassingen voor het maken van mockups voor uw ontwerpen. Met verschillende Figma-plug-ins kun je een grote verscheidenheid aan stijlen vinden om mee te werken die je kunt toevoegen aan je presentaties, portfolio of gewoon voor de lol kunt maken om te pronken met je ontwerpwerk.

Met een paar verschillen in toepassing, zijn Figma mockup-plug-ins gemakkelijk toegankelijk en te gebruiken, dus waarom zou u het niet proberen?

Hoofdsjablonen maken voor presentaties in Figma

Lees volgende