Hvordan bruke ui-sett i Adobe xd

For de som er interessert i nettdesign er UI-sett i Adobe XD en fin måte å starte et nytt designprosjekt på. Med disse settene får du tilgang til noen nyttige ressurser som du kan endre og bruke til design av nettstedet eller appen din.

Hvis du er ukjent med programvaren og ikke er sikker på hvordan du bruker UI-sett i Adobe XD, så har du kommet til rett sted., Viser jeg deg hvordan du kan installere brukergrensesnitt i programvaren og deretter bruke ressursene som er inkludert i prosjektet.

Også på

Hvordan konvertere bilder med Adobe Bridge

Hvordan laste ned UI-sett i Adobe XD

La oss først se på hvordan du kan laste ned brukergrensesnitt i Adobe XD, rett fra programvaren. Bare følg disse trinnene for å komme i gang:

Trinn 1: Klikk på hamburger-menyknappen i øverste venstre hjørne av programvaren.

Trinn 2: Bla ned til menyen Get UI Kits på menyen og klikk deretter på tre av de tilgjengelige alternativene.

For denne artikkelen velger jeg Google Material UI-settet. Avhengig av prosjektet ditt kan du imidlertid velge Apple iOS eller Microsoft Windows-settene. Det vil åpne for en offisiell webside hvor du kan laste ned UI-settene gratis.

Trinn 3: Finn Adobe XD UI-settet på følgende webside, og last det ned på systemet ditt.

Trinn 4: Åpne nå den nedlastede filen i Adobe XD, og ​​du vil bli møtt med en haug med tavler som inneholder UI-ressurser for den respektive plattformen.

Du kan holde Ctrl-knappen og flytte rullehjulet for å zoome inn / ut for å se alle de enkelte tegnebrettene.

Hvis du ønsker å laste ned Wireframes i stedet, kan du klikke på Wireframes-alternativet i Get UI Kits-menyen.

Du kan også se etter flere UI-sett på Adobes nettsted ved å klikke på alternativet Flere UI-sett i Get UI Kits-menyen.

Nettstedet har noen gode alternativer å velge mellom, inkludert dette virkelig kule Movie Magic UI-settet som ser ut som en heads-up-skjerm.

Nå som du vet hvordan du laster ned UI-sett, la oss se på hvordan du kan bruke dem i prosjektene dine.

Hvordan bruke UI-sett i Adobe XD

Følg disse enkle trinnene for å bruke UI-sett i prosjektet ditt:

Trinn 1: Zoom inn på brukergrensesnittet du vil bruke i prosjektet, og klikk på tittelen for å velge det.

Trinn 2: Kopier nå elementet ved å bruke snarveien Ctrl + C.

Trinn 3: Åpne deretter et nytt Adobe XD-prosjekt fra menyen.

Trinn 4: Her lim inn brukergrensesnittet ved å bruke snarveien Ctrl + V.

For denne artikkelen bruker jeg Mobile Dark-elementet fra Google Material UI-settet. Elementet inkluderer guider som hjelper deg å plassere flere lag, men hvis du ikke vil bruke dem, kan du enkelt fjerne dem ved å følge neste trinn.

Trinn 5: For å fjerne guider, klikk på låseikonet øverst i venstre hjørne og trykk deretter på slett. Du kan hoppe over dette trinnet hvis du vil bruke guidene til å plassere flere objekter i elementet nøyaktig.

Trinn 6: Gå tilbake til UI-settet for å velge et annet element du vil legge til på denne siden. Klikk igjen på tittelen på elementet og kopier det ved å bruke snarveien Ctrl + C.

Jeg skal lage en grunnleggende toast for denne artikkelen som jeg skal bruke en av dialogene for.

Trinn 7: Lim inn det nye elementet på det forrige elementet, og juster det deretter etter guidene.

Trinn 8: Nå for å redigere hvert element i toasten, dobbeltklikker du på tekstboksen og skriver deretter inn teksten du vil bruke. La oss først endre tittelen på toasten.

Deretter endrer du innholdet på kroppen ved å dobbeltklikke på tekstboksen og skrive inn hva du vil legge til.

Du kan også endre teksten på knappene på samme måte. Når du er ferdig med å redigere teksten, kan du endre fargen og opaciteten til teksten. For å endre uklarhet, bare flytt glidebryteren under Opacity-alternativet på verktøylinjen til høyre.

For å endre fargen på teksten, klikk på rektangelet ved siden av Fyll-alternativet og velg deretter en ny farge fra fargevalgeren.

Og det er ikke bare teksten du kan redigere på denne måten. Du kan også endre farge og opacitet for nesten alle elementene i dialogboksen, noe som er flott hvis du ønsker et unikt fargevalg.

Når du er fornøyd med resultatet, kan du bare lagre filen ved å klikke på Lagre som-alternativet på menyen eller ved å bruke snarveien Shift + Ctrl + S.

Også på

#grafisk design

Klikk her for å se siden med grafisk design

Perfekt design ved bruk av UI-sett

Nå som du vet hvordan du laster ned og bruker UI-sett i Adobe XD, er jeg sikker på at du vil begynne å kaste deg ut fantastiske design på kort tid. Disse UI-settene er definitivt ganske nyttige og hjelper deg med å komme rett til prosjektet ditt uten å bekymre deg for å utforme hvert UI-element.

Neste opp: Fullførte et prosjekt på Adobe XD og vet ikke hvordan du eksporterer det til HTML? Sjekk ut den neste artikkelen for en enkel trinnvis opplæring.