Cum să utilizați kiturile UI în Adobe XD
Miscellanea / / November 29, 2021
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.
![Cum să utilizați kiturile Ui în Adobe Xd](/f/f51170c6fd33f6c4baf00d0f31b7e986.jpg)
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.
![Utilizați kiturile Ui Adobe Xd 1](/f/f1bffbb779ef4fd40491b1e0f84990b2.jpg)
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.
![Utilizați kiturile Ui Adobe Xd 2](/f/369cca942baeb1e49d27d7df725582d7.jpg)
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.
![Utilizați kiturile Ui Adobe Xd 3](/f/d410a96c2f89ce63c75c0016b7149637.jpg)
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ă.
![Utilizați kiturile Ui Adobe Xd 4](/f/0a022b90f7e063aa7f14b881f0e5948b.jpg)
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.
![Utilizați kiturile Ui Adobe Xd 5](/f/afb3a79877063680bc53801a776f2fb7.jpg)
Dacă doriți să descărcați Wireframes în schimb, puteți face clic pe opțiunea Wireframes din meniul Obține kituri UI.
![Utilizați kiturile Ui Adobe Xd 8](/f/fa1f5f65ea9837da53ac54f9fc8a283f.jpg)
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.
![Utilizați kiturile Ui Adobe Xd 9](/f/5def953e1423a258a0fed27106875072.jpg)
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.
![Utilizați kiturile Ui Adobe Xd 11](/f/1ae757b9ced7e4961b570bcc131cdb3c.jpg)
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.
![Utilizați kiturile Ui Adobe Xd 12](/f/1dbb8b41af84750bc4defa03ad2682df.jpg)
Pasul 2: Acum copiați elementul folosind comanda rapidă Ctrl+C.
![Utilizați kiturile Ui Adobe Xd 13](/f/7e8ddf2f2bec27ba8a1365dfef37df3a.jpg)
Pasul 3: Apoi deschideți un nou proiect Adobe XD din meniu.
![Utilizați kiturile Ui Adobe Xd 14](/f/048450fc117d9b77769cff68666f9957.jpg)
Pasul 4: Aici, inserați elementul UI folosind comanda rapidă Ctrl+V.
![Utilizați kiturile Ui Adobe Xd 15](/f/0cb6e0263ce854b648c14a6c3ca98b57.jpg)
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.
![Utilizați kiturile Ui Adobe Xd 16](/f/31660de2ec71ef5dd678d1711002b66d.jpg)
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.
![Utilizați kiturile Ui Adobe Xd 17](/f/e66fe262da12751c28cd236c2ccdc59a.jpg)
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.
![Utilizați kiturile Ui Adobe Xd 18](/f/d49d63d1f3ee987e479de42f75972ff4.jpg)
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.
![Utilizați kiturile Ui Adobe Xd 19](/f/76f303a45c5aea4a08046ca04e7b1463.jpg)
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.
![Utilizați kiturile Ui Adobe Xd 20](/f/6ca789b52cb0b59b94795f9e6e58e3a5.jpg)
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.
![Utilizați kiturile Ui Adobe Xd 21](/f/8fe2f9d2c6b5b88f2c34f9ceb0cde2bb.jpg)
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.
![Utilizați kiturile Ui Adobe Xd 23](/f/b502a75f404baa39d2d8892e2d4d8157.jpg)
Ș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.
![Utilizați kiturile Ui Adobe Xd 24](/f/991134a4b93ef0ef5864ddad3a7fd40e.jpg)
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.