Mijn favoriete Adobe XD Plug-ins

Adobe XD wordt met de tijd steeds uitgebreider. Toch moet je als ontwerper sommige handelingen nog repetitief handmatig uitvoeren – denk hierbij aan het toevoegen van een placeholder-tekst. Sommige functionaliteiten bestaan helemaal nog niet in Adobe XD – het toevoegen van een QR code bijvoorbeeld. De afgelopen tijd heb ik een aantal gratis plug-ins voor Adobe XD in gebruik genomen. Deze deel ik graag met je zodat ook jouw interfaces sneller en beter ontworpen kunnen worden. Al deze gratis plug-ins kun je installeren voor Adobe XD in het menu onder ‘Plugins > Manage Plugins…’

Artboard for PDF

Een zeer simpele plug-in die een artboard (werkblad) voor je aanmaakt in het formaat van een A4 PDF. Deze standaardmaat is nog niet beschikbaar in Adobe XD. Het ontwerpen van een A4-blad kan soms handig zijn in Adobe XD, omdat je wilt visualiseren hoe een webpagina geprint wordt of hoe een downloadbaar document er uit gaat zien.

Change Case

Een handige plug-in als je tekst kopieert en hiervan de kapitalisatie (het gebruik van hoofd- en standaardletters) wilt aanpassen. Ook is deze plug-in handig om letters in hoofdletters vorm te geven. Met deze plug-in hoef je alleen maar de tekst te selecteren waarvan je de kapitalisatie wilt aanpassen en in de plug-in het type te selecteren.

UI Faces

In je interface wil je vaak foto’s van gezichten toevoegen, bijvoorbeeld voor gebruikers. Het kost echter vaak veel tijd om een geschikte foto met een open licentie te vinden. Met UI Faces kun je gemakkelijk foto’s toevoegen op basis van de parameters die je instelt. Zo kun je bijvoorbeeld leeftijd, geslacht en haarkleur opgeven. Deze foto’s hebben een open licentie, wat inhoudt dat je deze gratis voor commercieel gebruik kunt inzetten. De foto’s zijn van prachtige kwaliteit en voegen net dat stukje menselijkheid aan je ontwerp toe.

QR Code Maker

QR Code Maker doet wat de titel zegt – het genereert een QR code op basis van een link die je opgeeft. Heel erg makkelijk om een echte QR Code toe te voegen aan je ontwerp – stakeholders zullen bij het zien van een QR code het graag gelijk willen uitproberen! Als ze dan worden doorgeleid naar het daadwerkelijke doel dan wordt het daadwerkelijke gebruikerspad duidelijk gecommuniceerd.

Convert to shape

Een zeer handige plug-in waarmee je een vorm kunt selecteren om deze om te zetten naar een andere vorm (rechthoek, cirkel of driehoek). Deze plug-in is zeer handig voor de driehoekvorm, omdat deze niet standaard in Adobe XD te tekenen is.

Web export

Met web export kun je je XD ontwerp omzetten naar HTML-code om deze in een browser te bekijken. Dit kan handig zijn voor de ontwikkelaars die je ontwerp gaan implementeren. De html die hierbij wordt gegenereerd is helaas niet van de hoogste kwaliteit en dus niet direct te gebruiken in het eindproduct. Wel is het handig voor een ontwikkelaar om CSS van over te nemen.

Copy CSS

Copy CSS lijkt op web export, maar werkt iets anders. Met Copy CSS wordt de opmaak van het huidig geselecteerde object in Adobe XD omgezet naar valide CSS code. Deze code wordt op het plakbord geplaatst, waardoor je het direct kunt plakken in de ontwikkelomgeving van je site. Dit zorgt er voor dat het eindproduct exact er uit ziet als het ontwerp.

Lorem Ipsum

‘Lorem ipsum dolor sit amet consectetur adipiscing elit’ – Een tekst die ik zo even vanuit mijn hoofd uittyp, omdat ik deze zo vaak handmatig heb moeten uittypen. Lorem Ipsum is de naam voor een standaard placeholder-tekst waarmee de vormgeving van een tekst gevisualiseerd kan worden zonder dat de uiteindelijke tekst bekend is. Lorem ipsum wordt al eeuwen lang gebruikt als placeholder-tekst en ook in web design is dit een handig gereedschap om je ontwerp mee te maken. Met de Adobe XD plug-in van dezelfde naam kun je deze placeholder-tekst gemakkelijk toevoegen aan een tekstvlak. Deze wordt dan volledig met Lorem Ipsum gevuld. Je kunt dit ook van de website lipsum.com kopiëren, maar deze plug-in versnelt dit proces drastisch.

Ik nodig je uit om deze plug-ins te installeren en uit te proberen – ze hebben mijn workflow versneld en verbeterd. Mocht ik meer handige Adobe XD plug-ins vinden dan zal ik ze met je delen in een volgend blog!