Kako koristiti UI komplete u Adobe XD
Miscelanea / / November 29, 2021
Za one koje zanima web dizajn, UI setovi in Adobe XD su izvrstan način za početak novog dizajnerskog projekta. Pomoću ovih kompleta dobivate pristup nekim praktičnim resursima koje možete mijenjati i koristiti za dizajn svoje web stranice ili aplikacije.
![Kako koristiti Ui komplete u Adobe Xd Istaknuto](/f/f51170c6fd33f6c4baf00d0f31b7e986.jpg)
Ako ste novi u softveru i niste sigurni kako koristiti UI komplete Adobe XD, onda ste došli na pravo mjesto. U ovom članku ću vam pokazati kako možete instalirati UI komplete u softver, a zatim koristiti uključene resurse za svoj projekt.
Kako preuzeti UI komplete u Adobe XD
Prvo, pogledajmo kako možete preuzeti UI komplete u Adobe XD, izravno iz softvera. Samo slijedite ove korake za početak:
Korak 1: Kliknite na gumb izbornika hamburgera u gornjem lijevom kutu softvera.
![Koristite Ui komplete Adobe Xd 1](/f/f1bffbb779ef4fd40491b1e0f84990b2.jpg)
Korak 2: U izborniku se pomaknite prema dolje do opcije Get UI Kits, a zatim kliknite na bilo koju od tri dostupne opcije.
![Koristite Ui komplete Adobe Xd 2](/f/369cca942baeb1e49d27d7df725582d7.jpg)
Za ovaj članak odabrat ću Google Material UI kit. Međutim, ovisno o vašem projektu, možete odabrati ili Apple iOS ili Microsoft Windows setove. To će otvoriti službenu web stranicu s koje možete besplatno preuzeti UI komplete.
3. korak: Pronađite Adobe XD UI kit na sljedećoj web stranici i preuzmite ga na svoj sustav.
![Koristite Ui komplete Adobe Xd 3](/f/d410a96c2f89ce63c75c0016b7149637.jpg)
4. korak: Sada otvorite preuzetu datoteku u Adobe XD i dočekat će vas hrpa umjetničkih ploča koje sadrže resurse korisničkog sučelja za dotičnu platformu.
![Koristite Ui komplete Adobe Xd 4](/f/0a022b90f7e063aa7f14b881f0e5948b.jpg)
Možete držati tipku Ctrl i pomicati kotačić za pomicanje da biste povećali/umanjili prikaz kako biste vidjeli sve pojedinačne ploče.
![Koristite Ui komplete Adobe Xd 5](/f/afb3a79877063680bc53801a776f2fb7.jpg)
Ako umjesto toga želite preuzeti Wireframes, možete kliknuti na Wireframes opciju u izborniku Get UI Kits.
![Koristite Ui komplete Adobe Xd 8](/f/fa1f5f65ea9837da53ac54f9fc8a283f.jpg)
Također možete potražiti dodatne komplete korisničkog sučelja na Adobeovoj web stranici klikom na opciju More UI Kits u izborniku Get UI Kits.
![Koristite Ui komplete Adobe Xd 9](/f/5def953e1423a258a0fed27106875072.jpg)
Web stranica ima nekoliko sjajnih opcija za odabir, uključujući ovaj stvarno cool Movie Magic UI kit koji izgleda kao heads-up zaslon.
![Koristite Ui komplete Adobe Xd 11](/f/1ae757b9ced7e4961b570bcc131cdb3c.jpg)
Sada kada znate kako preuzeti UI komplete, pogledajmo kako ih možete koristiti u svojim projektima.
Kako koristiti UI komplete u Adobe XD
Za korištenje UI kompleta u svom projektu, samo slijedite ove jednostavne korake:
Korak 1: Povećajte UI element koji želite koristiti u svom projektu i kliknite na njegov naslov da biste ga odabrali.
![Koristite Ui komplete Adobe Xd 12](/f/1dbb8b41af84750bc4defa03ad2682df.jpg)
Korak 2: Sada kopirajte element pomoću prečaca Ctrl+C.
![Koristite Ui komplete Adobe Xd 13](/f/7e8ddf2f2bec27ba8a1365dfef37df3a.jpg)
3. korak: Zatim otvorite novi Adobe XD projekt iz izbornika.
![Koristite Ui komplete Adobe Xd 14](/f/048450fc117d9b77769cff68666f9957.jpg)
4. korak: Ovdje zalijepite UI element pomoću prečaca Ctrl+V.
![Koristite Ui komplete Adobe Xd 15](/f/0cb6e0263ce854b648c14a6c3ca98b57.jpg)
Za ovaj članak koristit ću Mobile Dark element iz Google Material UI kita. Element uključuje vodiče koji će vam pomoći da postavite više slojeva, ali ako ih ne želite koristiti, možete ih jednostavno ukloniti slijedeći sljedeći korak.
5. korak: Da biste uklonili vodilice, kliknite na ikonu katanca u gornjem lijevom kutu, a zatim pritisnite Delete. Možete preskočiti ovaj korak ako želite koristiti vodiče za točno postavljanje više objekata u element.
![Koristite Ui komplete Adobe Xd 16](/f/31660de2ec71ef5dd678d1711002b66d.jpg)
6. korak: Sada se vratite na UI komplet da odaberete drugi element za dodavanje na ovu stranicu. Još jednom kliknite na naslov elementa i kopirajte ga pomoću prečaca Ctrl+C.
![Koristite Ui komplete Adobe Xd 17](/f/e66fe262da12751c28cd236c2ccdc59a.jpg)
Napravit ću osnovnu zdravicu za ovaj članak za koji ću koristiti jedan od dijaloga.
7. korak: Zalijepite novi element na prethodni element i zatim ga poravnajte prema vodilicama.
![Koristite Ui Kits Adobe Xd 18](/f/d49d63d1f3ee987e479de42f75972ff4.jpg)
Korak 8: Sada da biste uredili svaki element u tostu, dvaput kliknite na tekstni okvir, a zatim unesite tekst koji želite koristiti. Prvo, promijenimo naslov zdravice.
![Koristite Ui komplete Adobe Xd 19](/f/76f303a45c5aea4a08046ca04e7b1463.jpg)
Zatim promijenite sadržaj tijela tako da dvaput kliknete na tekstni okvir i upišete što god želite dodati.
![Koristite Ui komplete Adobe Xd 20](/f/6ca789b52cb0b59b94795f9e6e58e3a5.jpg)
Također možete promijeniti tekst gumba na isti način. Kada završite s uređivanjem teksta, možete promijeniti boju i neprozirnost teksta. Da biste promijenili neprozirnost, samo pomaknite klizač ispod opcije Opacity na alatnoj traci udesno.
![Koristite Ui komplete Adobe Xd 21](/f/8fe2f9d2c6b5b88f2c34f9ceb0cde2bb.jpg)
Da biste promijenili boju teksta, kliknite na pravokutnik pored opcije Ispuna, a zatim odaberite novu boju iz birača boja.
![Koristite Ui komplete Adobe Xd 23](/f/b502a75f404baa39d2d8892e2d4d8157.jpg)
I nije samo tekst koji možete uređivati na ovaj način. Također možete promijeniti boju i neprozirnost gotovo svih stavki u dijaloškom okviru, što je sjajno ako želite jedinstvenu shemu boja.
![Koristite Ui komplete Adobe Xd 24](/f/991134a4b93ef0ef5864ddad3a7fd40e.jpg)
Nakon što ste zadovoljni rezultatom, samo nastavite i spremite datoteku klikom na opciju Spremi kao u izborniku ili korištenjem prečaca Shift+Ctrl+S.
Usavršite svoj dizajn pomoću kompleta korisničkog sučelja
Sada kada znate kako preuzeti i koristiti UI komplete u Adobe XD, siguran sam da ćete početi stvarati nevjerojatne dizajne u trenu. Ovi kompleti korisničkog sučelja definitivno su vrlo praktični i pomažu vam da prijeđete izravno na svoj projekt bez brige o dizajnu svakog elementa korisničkog sučelja.
sljedeće: Dovršili ste projekt na Adobe XD i ne znate kako ga izvesti u HTML? Pogledajte sljedeći članak za jednostavan vodič korak po korak.