UI-kits gebruiken in Adobe XD

Voor degenen die geïnteresseerd zijn in webdesign, zijn UI-kits in Adobe XD een geweldige manier om een ​​nieuw ontwerpproject een vliegende start te geven. Met deze kits krijgt u toegang tot enkele handige bronnen die u kunt aanpassen en gebruiken voor uw website- of app-ontwerp.

Als de software nieuw voor u is en niet zeker weet hoe u UI-kits in Adobe XD moet gebruiken, bent u hier aan het juiste adres. In dit artikel laat ik je zien hoe je UI-kits in de software kunt installeren en vervolgens de meegeleverde bronnen voor je project kunt gebruiken.

UI-kits downloaden in Adobe XD

Laten we eerst eens kijken hoe u UI-kits in Adobe XD kunt downloaden, rechtstreeks vanuit de software. Volg deze stappen om aan de slag te gaan:

Stap 1: Klik op de hamburgermenuknop in de linkerbovenhoek van de software.

Stap 2: Scrol in het menu omlaag naar de optie UI-kits ophalen en klik vervolgens op een van de drie beschikbare opties.

Voor dit artikel kies ik de Google Material UI-kit. Afhankelijk van uw project kunt u echter kiezen voor de Apple iOS- of de Microsoft Windows-kits. Dat opent een officiële webpagina van waaruit u de UI-kits gratis kunt downloaden.

Stap 3: Zoek de Adobe XD UI-kit op de volgende webpagina en download deze op uw systeem.

Stap 4: Open nu het gedownloade bestand in Adobe XD en je wordt begroet met een aantal tekengebieden met UI-bronnen voor het betreffende platform.

U kunt de Ctrl-knop ingedrukt houden en het scrollwiel bewegen om in/uit te zoomen om alle afzonderlijke tekengebieden te zien.

Als u in plaats daarvan Wireframes wilt downloaden, kunt u op de optie Wireframes in het menu Get UI Kits klikken.

U kunt ook zoeken naar extra UI-kits op de website van Adobe door te klikken op de optie Meer UI-kits in het menu UI-kits ophalen.

De website heeft een aantal geweldige opties om uit te kiezen, waaronder deze echt coole Movie Magic UI-kit die eruitziet als een heads-up display.

Nu u weet hoe u UI-kits kunt downloaden, gaan we eens kijken hoe u deze in uw projecten kunt gebruiken.

UI-kits gebruiken in Adobe XD

Volg deze eenvoudige stappen om UI-kits in uw project te gebruiken:

Stap 1: Zoom in op het UI-element dat u in uw project wilt gebruiken en klik op de titel om het te selecteren.

Stap 2: Kopieer nu het element met de sneltoets Ctrl+C.

Stap 3: Open vervolgens een nieuw Adobe XD-project vanuit het menu.

Stap 4: Plak hier het UI-element met de sneltoets Ctrl+V.

Voor dit artikel gebruik ik het Mobile Dark-element uit de Google Material UI-kit. Het element bevat hulplijnen waarmee u meer lagen kunt plaatsen , maar als u ze niet wilt gebruiken, kunt u ze eenvoudig verwijderen door de volgende stap te volgen.

Stap 5: Om handleidingen te verwijderen, klikt u op het slotpictogram in de linkerbovenhoek en vervolgens op verwijderen. U kunt deze stap overslaan als u de hulplijnen wilt gebruiken om meer objecten nauwkeurig in het element te plaatsen.

Stap 6: Ga nu terug naar de UI-kit om een ​​ander element te selecteren om aan deze pagina toe te voegen. Klik nogmaals op de titel van het element en kopieer het met de sneltoets Ctrl+C.

Ik zal een basistoast maken voor dit artikel waarvoor ik een van de dialogen zal gebruiken.

Stap 7: Plak het nieuwe element op het vorige element en lijn het uit volgens de hulplijnen.

Stap 8: Om nu elk element in de toast te bewerken, dubbelklikt u op het tekstvak en voert u vervolgens de tekst in die u wilt gebruiken. Laten we eerst de titel van de toast veranderen.

Wijzig vervolgens de inhoud van de body door te dubbelklikken op het tekstvak en in te typen wat u wilt toevoegen.

Op dezelfde manier kunt u ook de tekst van de knoppen wijzigen. Als u klaar bent met het bewerken van de tekst, kunt u de kleur en dekking van de tekst wijzigen. Om de dekking te wijzigen, verplaatst u de schuifregelaar onder de optie Dekking in de werkbalk naar rechts.

Om de kleur van de tekst te wijzigen, klikt u op de rechthoek naast de optie Opvulling en selecteert u vervolgens een nieuwe kleur in de kleurenkiezer.

En het is niet alleen de tekst die u op deze manier kunt bewerken. U kunt ook de kleur en dekking van bijna alle items in het dialoogvenster wijzigen, wat geweldig is als u voor een uniek kleurenschema gaat.

Als je tevreden bent met het resultaat, ga je gang en sla je je bestand op door op de optie Opslaan als in het menu te klikken of door de sneltoets Shift+Ctrl+S te gebruiken.

Perfectioneer uw ontwerp met UI-kits

Nu je weet hoe je UI-kits in Adobe XD moet downloaden en gebruiken, weet ik zeker dat je in een mum van tijd geweldige ontwerpen zult maken. Deze UI-kits zijn zeker heel handig en helpen je om meteen naar je project te gaan zonder je zorgen te maken over het ontwerpen van elk UI-element.

Volgende: Heb je een project op Adobe XD voltooid en weet je niet hoe je het naar HTML moet exporteren? Bekijk het volgende artikel voor een eenvoudige stapsgewijze zelfstudie.