Sådan bruges ui-sæt i Adobe xd

For dem, der er interesseret i webdesign, er UI-sæt i Adobe XD en fantastisk måde at starte et nyt designprojekt på. Med disse sæt får du adgang til nogle nyttige ressourcer, som du kan ændre og bruge til dit websted eller app-design.

Hvis du er ny på softwaren og ikke er sikker på, hvordan du bruger UI-sæt i Adobe XD, er du kommet til det rigtige sted., Viser jeg dig, hvordan du kan installere UI-sæt i softwaren og derefter bruge de inkluderede ressourcer til dit projekt.

Også på

Sådan batches konvertering af fotos med Adobe Bridge

Sådan downloades UI-sæt i Adobe XD

Lad os først se på, hvordan du kan downloade UI-sæt i Adobe XD lige fra softwaren. Følg blot disse trin for at komme i gang:

Trin 1: Klik på knappen Hamburger-menu i øverste venstre hjørne af softwaren.

Trin 2: Rul ned til menuen Hent UI-sæt i menuen, og klik derefter på en af ​​tre af de tilgængelige indstillinger.

I denne artikel vælger jeg Google Material UI-sæt. Afhængigt af dit projekt kan du dog vælge enten Apple iOS eller Microsoft Windows-sæt. Det åbner en officiel webside, hvorfra du kan downloade UI-sæt gratis.

Trin 3: Find Adobe XD UI-sæt på den følgende webside, og download det på dit system.

Trin 4: Åbn nu den downloadede fil i Adobe XD, og ​​du vil blive mødt med en masse tegnebræt, der indeholder UI-ressourcer til den respektive platform.

Du kan holde Ctrl-knappen nede og flytte rullehjulet for at zoome ind / ud for at se alle de enkelte tegnebræt.

Hvis du i stedet ønsker at downloade Wireframes, kan du klikke på indstillingen Wireframes i menuen Hent UI-sæt.

Du kan også se efter yderligere UI-sæt på Adobes websted ved at klikke på indstillingen Flere UI-sæt i menuen Hent UI-sæt.

Hjemmesiden har nogle gode muligheder at vælge imellem, herunder dette rigtigt seje Movie Magic UI-kit, der ligner et heads-up display.

Nu hvor du ved, hvordan du downloader UI-sæt, lad os se på, hvordan du kan bruge dem i dine projekter.

Sådan bruges UI-sæt i Adobe XD

For at bruge UI-sæt i dit projekt skal du bare følge disse enkle trin:

Trin 1: Zoom ind på det UI-element, du vil bruge i dit projekt, og klik på dets titel for at vælge det.

Trin 2: Kopier nu elementet ved hjælp af genvej Ctrl + C.

Trin 3: Åbn derefter et nyt Adobe XD-projekt fra menuen.

Trin 4: Her indsæt UI-elementet ved hjælp af Ctrl + V-genvejen.

Til denne artikel bruger jeg Mobile Dark-elementet fra Google Material UI-kittet. Elementet inkluderer guider, der hjælper dig med at placere flere lag, men hvis du ikke ønsker at bruge dem, kan du nemt fjerne dem ved at følge det næste trin.

Trin 5: For at fjerne guider skal du klikke på låseikonet i øverste venstre hjørne og derefter trykke på slet. Du kan springe dette trin over, hvis du ønsker at bruge guiderne til nøjagtigt at placere flere objekter i elementet.

Trin 6: Gå tilbage til UI-kittet for at vælge et andet element, der skal føjes til denne side. Klik igen på elementets titel og kopier det ved hjælp af genvej Ctrl + C.

Jeg opretter en grundlæggende toast til denne artikel, som jeg vil bruge en af ​​dialogerne til.

Trin 7: Indsæt det nye element på det forrige element, og juster det derefter efter guiderne.

Trin 8: Nu for at redigere hvert element i skålen, skal du dobbeltklikke på tekstfeltet og derefter indtaste den tekst, du vil bruge. Lad os først ændre titlen på skålen.

Derefter skal du ændre indholdet af kroppen ved at dobbeltklikke på tekstfeltet og skrive det, du vil tilføje.

Du kan også ændre teksten på knapperne på samme måde. Når du er færdig med at redigere teksten, kan du ændre farve og opacitet på teksten. For at ændre opaciteten skal du bare flytte skyderen under indstillingen Opacity i værktøjslinjen til højre.

For at ændre farven på teksten skal du klikke på rektanglet ved siden af ​​Fill-indstillingen og derefter vælge en ny farve fra farvevælgeren.

Og det er ikke kun teksten, du kan redigere på denne måde. Du kan også ændre farve og opacitet for næsten alle elementer i dialogboksen, hvilket er godt, hvis du ønsker et unikt farveskema.

Når du er tilfreds med resultatet, skal du bare gå videre og gemme din fil ved at klikke på funktionen Gem som i menuen eller ved at bruge Shift + Ctrl + S genvej.

Også på

#grafisk design

Klik her for at se vores side om grafisk designartikler

Perfekt dit design ved hjælp af UI-sæt

Nu hvor du ved, hvordan du downloader og bruger UI-sæt i Adobe XD, er jeg sikker på, at du vil begynde at afværge fantastiske designs på kort tid. Disse UI-sæt er bestemt ganske handy og hjælper dig med at komme direkte til dit projekt uden at bekymre dig om at designe hver UI-elementer.

Next up: Færdiggjorde et projekt på Adobe XD og ved ikke, hvordan man eksporterer det til HTML? Tjek den næste artikel for en enkel trin-for-trin-tutorial.