Sådan bruges UI-kits i Adobe XD
Miscellanea / / November 29, 2021
For dem, der er interesseret i webdesign, kan UI-sæt indsættes Adobe XD er en fantastisk måde at sætte gang i et nyt designprojekt. Med disse sæt får du adgang til nogle praktiske ressourcer, som du kan ændre og bruge til dit websted eller din app-design.
Hvis du er ny i softwaren og ikke er sikker på, hvordan du bruger UI-kits i Adobe XD, så er du kommet til det rigtige sted. I denne artikel viser jeg dig, hvordan du kan installere UI-kits i softwaren og derefter bruge de inkluderede ressourcer til dit projekt.
Sådan downloades UI-sæt i Adobe XD
Lad os først se på, hvordan du kan downloade UI-kits i Adobe XD direkte fra softwaren. Bare følg disse trin for at komme i gang:
Trin 1: Klik på hamburgermenuknappen i øverste venstre hjørne af softwaren.
Trin 2: Rul ned til indstillingen Hent UI-sæt i menuen, og klik derefter på enten tre af de tilgængelige muligheder.
Til denne artikel vil jeg vælge Google Material UI-sættet. Afhængigt af dit projekt kan du dog vælge enten Apple iOS eller Microsoft Windows-sættet. Det åbner en officiel webside, hvorfra du kan downloade UI-sættene gratis.
Trin 3: Find Adobe XD UI-sættet 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ætter, 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 individuelle tegnebrætter.
Hvis du ønsker at downloade Wireframes i stedet, kan du klikke på Wireframes-indstillingen i menuen Get UI Kits.
Du kan også søge 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 fantastiske muligheder at vælge imellem, inklusive dette virkelig seje Movie Magic UI-kit, der ligner en heads-up-skærm.
Nu hvor du ved, hvordan du downloader UI-sæt, lad os tage et kig på, hvordan du kan bruge dem i dine projekter.
Sådan bruges UI-kits i Adobe XD
For at bruge UI-sæt i dit projekt skal du blot 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 Ctrl+C-genvejen.
Trin 3: Åbn derefter et nyt Adobe XD-projekt fra menuen.
Trin 4: Her skal du indsætte UI-elementet ved hjælp af Ctrl+V-genvejen.
Til denne artikel vil jeg bruge Mobile Dark-elementet fra Google Material UI-sættet. Elementet inkluderer guider, der hjælper dig med at placere mere lag, men hvis du ikke vil bruge dem, kan du nemt fjerne dem ved at følge næste trin.
Trin 5: For at fjerne hjælpelinjer 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 hjælpelinjerne til at placere flere objekter nøjagtigt i elementet.
Trin 6: Gå nu tilbage til UI-sættet for at vælge et andet element, der skal tilføjes til denne side. Endnu en gang skal du klikke på titlen på elementet og kopiere det ved hjælp af Ctrl+C-genvejen.
Jeg laver en grundlæggende skål for 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 i henhold til guiderne.
Trin 8: For nu at redigere hvert element i toasten skal du dobbeltklikke på tekstboksen og derefter indtaste den tekst, du vil bruge. Lad os først ændre titlen på toasten.
Derefter skal du ændre indholdet af brødteksten ved at dobbeltklikke på tekstboksen og indtaste det, du ønsker at 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 farven og opaciteten af teksten. For at ændre opaciteten skal du blot flytte skyderen under Opacitet-indstillingen i værktøjslinjen til højre.
For at ændre farven på teksten skal du klikke på rektanglet ved siden af Fyld-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 farven og opaciteten af næsten alle elementer i dialogboksen, hvilket er fantastisk, hvis du går efter et unikt farveskema.
Når du er tilfreds med resultatet, skal du bare gå videre og gemme din fil ved at klikke på indstillingen Gem som i menuen eller ved at bruge Shift+Ctrl+S-genvejen.
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 finde fantastiske designs på ingen tid. Disse UI-sæt er helt sikkert ret praktiske og hjælper dig med at komme direkte til dit projekt uden at bekymre dig om at designe hvert UI-element.
Næste: Fuldførte 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.