Cum să utilizați kiturile UI în Adobe XD

Pentru cei interesați de design web, kiturile UI în Chirpici XD sunt o modalitate excelentă de a porni un nou proiect de design. Cu aceste kituri, aveți acces la câteva resurse utile pe care le puteți modifica și utiliza pentru designul site-ului sau al aplicației dvs.

Dacă sunteți nou în software și nu sunteți sigur cum să utilizați kiturile UI în Chirpici XD, atunci ai ajuns la locul potrivit. În acest articol, vă voi arăta cum puteți instala kiturile UI în software și apoi utilizați resursele incluse pentru proiectul dvs.

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

În primul rând, să aruncăm o privire la modul în care puteți descărca kituri de interfață de utilizare în Adobe XD, chiar din cadrul 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 Obține kituri UI și apoi faceți clic pe oricare dintre cele trei opțiuni disponibile.

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

Pasul 3: Găsiți kitul 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 tablouri de artă care conțin resurse UI pentru platforma respectivă.

Puteți să țineți apăsat butonul Ctrl și să mutați rotița 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 Obține kituri UI.

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 kituri UI.

Site-ul web are câteva opțiuni grozave din care să alegeți, inclusiv acest kit Movie Magic UI cu adevărat grozav, care arată ca un afișaj heads-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 să utilizați kiturile UI în Adobe XD

Pentru a utiliza kiturile UI în proiectul dvs., 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 acestuia pentru a-l selecta.

Pasul 2: Acum copiați elementul folosind comanda rapidă Ctrl+C.

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

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

Pentru acest articol, voi folosi elementul Mobile Dark din kitul Google Material UI. Elementul include ghiduri pentru a vă ajuta 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 pe ștergere. Puteți sări peste acest pas dacă doriți să utilizați ghidajele pentru a plasa mai multe obiecte în element cu precizie.

Pasul 6: Acum întoarceți-vă la kitul UI pentru a selecta un alt element de adăugat 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 casetele de dialog.

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 toastului.

Apoi, modificaț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 același mod. Odată ce ați terminat cu editarea textului, puteți modifica culoarea și opacitatea textului. Pentru a modifica opacitatea, trebuie doar să mutați glisorul de sub opțiunea Opacitate din bara de instrumente la dreapta.

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

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

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

Perfecționează-ți designul folosind kiturile UI

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

Urmatorul: Ați finalizat un proiect pe Adobe XD și nu știți cum să-l exportați în HTML? Consultați următorul articol pentru un tutorial simplu pas cu pas.