Cum se utilizează kiturile ui în adobe xd

Pentru cei interesați de proiectarea web, kiturile UI din Adobe XD sunt o modalitate excelentă de a porni un nou proiect de design. Cu aceste kituri, veți avea acces la unele resurse utile pe care le puteți modifica și utiliza pentru designul site-ului sau al aplicației.

Dacă sunteți nou în software și nu sunteți sigur cum să utilizați kiturile UI în Adobe XD, atunci ați ajuns la locul potrivit., Vă voi arăta cum puteți instala kituri UI în software și apoi să folosiți resursele incluse pentru proiectul dvs.

De asemenea, pe Ghiding Tech

Cum se pot converti fotografii cu Adobe Bridge

Cum să descărcați kiturile UI în Adobe XD

Mai întâi, să aruncăm o privire la modul în care puteți descărca kituri UI în Adobe XD, chiar din interiorul software-ului. Urmați acești pași pentru a începe:

Pasul 1: Faceți clic pe butonul de meniu hamburger din colțul din stânga sus al software-ului.

Pasul 2: în meniu, derulați în jos la opțiunea Get UI Kits și apoi faceți clic pe oricare dintre opțiunile disponibile.

Pentru acest articol, voi alege kitul UI pentru materialele Google. Cu toate acestea, în funcție de proiectul dvs., puteți selecta kiturile Apple iOS sau kiturile Microsoft Windows. Aceasta va deschide o pagină web oficială de pe care puteți descărca kiturile UI gratuit.

Pasul 3: localizați kit-ul Adobe XD UI în următoarea pagină web și descărcați-l pe sistemul dvs.

Pasul 4: Acum deschideți fișierul descărcat în Adobe XD și veți fi întâmpinat cu o grămadă de planșe care conțin resurse UI pentru platforma respectivă.

Puteți ține butonul Ctrl și muta roata de defilare pentru a mări / micșora pentru a vedea toate tablourile de artă individuale.

Dacă doriți să descărcați Wireframes în schimb, puteți face clic pe opțiunea Wireframes din meniul Get UI Kits.

De asemenea, puteți căuta kituri UI suplimentare pe site-ul Adobe, făcând clic pe opțiunea Mai multe kituri UI din meniul Obțineți kituri UI.

Site-ul web are câteva opțiuni grozave din care puteți alege, inclusiv acest kit UI Movie Magic UI, care arată ca un display head-up.

Acum că știți cum să descărcați kiturile UI, să aruncăm o privire la modul în care le puteți utiliza în proiectele dvs.

Cum se utilizează kiturile UI în Adobe XD

Pentru a utiliza kituri UI în proiectul dvs., trebuie doar să urmați acești pași simpli:

Pasul 1: măriți elementul UI pe care doriți să îl utilizați în proiectul dvs. și faceți clic pe titlul său pentru a-l selecta.

Pasul 2: Copiați acum elementul folosind comanda rapidă Ctrl + C.

Pasul 3: apoi deschideți un nou proiect Adobe XD din meniu.

Pasul 4: Aici, lipiți elementul UI folosind comanda rapidă Ctrl + V.

Pentru acest articol, voi folosi elementul Mobile Dark din kit-ul Google Material UI. Elementul include ghiduri care vă ajută să plasați mai multe straturi, dar dacă nu doriți să le utilizați, le puteți elimina cu ușurință urmând pasul următor.

Pasul 5: Pentru a elimina ghidurile, faceți clic pe pictograma de blocare din colțul din stânga sus și apoi apăsați ștergeți. Puteți sări peste acest pas dacă doriți să utilizați ghidurile pentru a plasa mai multe obiecte în element cu exactitate.

Pasul 6: Acum întoarceți-vă la kitul UI pentru a selecta un alt element pe care să îl adăugați la această pagină. Încă o dată, faceți clic pe titlul elementului și copiați-l folosind comanda rapidă Ctrl + C.

Voi crea un toast de bază pentru acest articol pentru care voi folosi unul dintre dialoguri.

Pasul 7: Lipiți noul element pe elementul anterior și apoi aliniați-l conform ghidurilor.

Pasul 8: Acum pentru a edita fiecare element din toast, faceți dublu clic pe caseta de text și apoi introduceți textul pe care doriți să îl utilizați. Mai întâi, să schimbăm titlul pâine prăjită.

Apoi, schimbați conținutul corpului făcând dublu clic pe caseta de text și tastând orice doriți să adăugați.

De asemenea, puteți modifica textul butoanelor în aceeași manieră. După ce ați terminat cu editarea textului, puteți modifica culoarea și opacitatea textului. Pentru a schimba opacitatea, trebuie doar să deplasați glisorul sub opțiunea Opacitate din bara de instrumente spre dreapta.

Pentru a schimba culoarea textului, faceți clic pe dreptunghiul de lângă opțiunea Completare și apoi selectați o nouă culoare din selectorul de culori.

Și nu este doar textul pe care îl puteți edita în acest mod. Puteți schimba, de asemenea, culoarea și opacitatea aproape toate elementele din caseta de dialog, ceea ce este excelent dacă doriți o schemă de culori unică.

După ce sunteți mulțumit de rezultat, pur și simplu mergeți mai departe și salvați-vă fișierul făcând clic pe opțiunea Salvare ca din meniu sau utilizând comanda rapidă Shift + Ctrl + S.

De asemenea, pe Ghiding Tech

#design grafic

Faceți clic aici pentru a vedea pagina noastră de articole de design grafic

Perfectează-ți designul folosind kituri UI

Acum că știți cum să descărcați și să folosiți kituri UI în Adobe XD, sunt sigur că veți începe să generați designuri uimitoare în cel mai scurt timp. Aceste kituri UI sunt cu siguranță destul de la îndemână și vă ajută să vă orientați direct la proiectul dvs., fără să vă faceți griji cu privire la proiectarea fiecărui element UI.

Urmărit: Ați finalizat un proiect pe Adobe XD și nu știți cum să îl exportați în HTML? Consultați articolul următor pentru un simplu tutorial pas cu pas.