Ui-kits gebruiken in Adobe XD

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

Als je nieuw bent in de software en niet zeker weet hoe je UI-kits in Adobe XD moet gebruiken, dan ben je hier aan het juiste adres., Laat ik je zien hoe je UI-kits in de software kunt installeren en vervolgens de meegeleverde bronnen voor je project kunt gebruiken.

Ook op

Hoe foto's converteren met Adobe Bridge

Hoe UI-kits te 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 te beginnen:

Stap 1: Klik op de hamburger-menuknop in de linkerbovenhoek van de software.

Stap 2: Blader 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 de Apple iOS- of Microsoft Windows-kits selecteren. 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 u wordt begroet met een aantal tekengebieden met UI-bronnen voor het respectieve platform.

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

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 eruit ziet als een heads-up display.

Nu u weet hoe u UI-kits kunt downloaden, gaan we eens kijken hoe u ze 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 behulp van de sneltoets Ctrl + V.

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

Stap 5: Om gidsen te verwijderen, klikt u op het vergrendelingspictogram in de linkerbovenhoek en drukt u 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 maak een eenvoudige toast voor dit artikel waarvoor ik een van de dialoogvensters gebruik.

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

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

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

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

Om de kleur van de tekst te wijzigen, klikt u op de rechthoek naast de optie Vulling 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 op zoek bent naar een uniek kleurenschema.

Als u tevreden bent met het resultaat, gaat u gewoon door en slaat u uw bestand op door op de optie Opslaan als in het menu te klikken of door de sneltoets Shift + Ctrl + S te gebruiken.

Ook op

#grafisch ontwerp

Klik hier om onze pagina met grafisch ontwerpartikelen te bekijken

Perfectioneer uw ontwerp met behulp van UI-kits

Nu je weet hoe je UI-kits in Adobe XD kunt downloaden en gebruiken, weet ik zeker dat je in een mum van tijd geweldige ontwerpen begint te maken. Deze UI-kits zijn absoluut heel handig en helpen je direct naar je project te gaan zonder je zorgen te maken over het ontwerpen van elke UI-elementen.

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