Kako koristiti ui setove u adobe xd

Za one koji su zainteresirani za web dizajn, UI setovi u Adobe XD odličan su način za brzo pokretanje novog dizajnerskog projekta. Pomoću ovih setova dobivate pristup nekim zgodnim resursima koje možete izmijeniti i koristiti za izradu web stranica ili aplikacija.

Ako ste novi u softveru i niste sigurni kako koristiti UI setove u Adobe XD, onda ste došli na pravo mjesto., Pokazat ću vam kako možete instalirati UI komplete u softver i zatim koristiti uključene resurse za svoj projekt.

Također na

Kako skupiti pretvaranje fotografija pomoću Adobe Bridgea

Kako preuzeti UI setove u Adobe XD

Prvo, pogledajmo kako možete preuzeti UI setove u Adobe XD-u, izravno iz softvera. Samo započnite ove korake da biste započeli:

1. korak: Kliknite gumb izbornika hamburgera u gornjem lijevom kutu softvera.

Korak 2: U izborniku se pomaknite prema dolje do opcije Get UI Kits i zatim kliknite bilo koju od tri opcije.

Za ovaj ću članak odabrati komplet sučelja Google Material UI. Međutim, ovisno o vašem projektu, možete odabrati ili Apple iOS ili Microsoft Windows komplete. To će otvoriti službenu web stranicu s koje možete besplatno preuzeti UI komplete.

Korak 3: Na sljedećoj web stranici pronađite Adobe XD UI kit i preuzmite ga na svoj sustav.

Korak 4: Sada otvorite preuzetu datoteku u Adobe XD i dočekat će vas gomila artboards-a koji sadrže resurse korisničkog sučelja za odgovarajuću platformu.

Možete držati tipku Ctrl i pomaknuti kotačić za pomicanje kako biste povećali / smanjili kako biste vidjeli sve pojedinačne ploče.

Ako želite umjesto toga preuzeti Wireframes, možete kliknuti na opciju Wireframes u izborniku Get UI Kits.

Dodatne UI setove možete potražiti i na Adobeovoj web stranici klikom na opciju More UI Kits u izborniku Get UI Kits.

Web stranica ima nekoliko sjajnih opcija koje možete odabrati, uključujući ovaj stvarno cool Movie Magic UI komplet koji izgleda poput head-up prikaza.

Sada kada znate kako preuzeti UI setove, pogledajmo kako ih možete koristiti u svojim projektima.

Kako se koriste UI setovi u Adobe XD

Za upotrebu korisničkih sučelja u projektu jednostavno slijedite ove jednostavne korake:

Korak 1: Povećajte UI element koji želite koristiti u svom projektu i kliknite njegov naslov da biste ga odabrali.

Korak 2: Sada kopirajte element pomoću prečaca Ctrl + C.

Korak 3: Zatim otvorite novi Adobe XD projekt s izbornika.

Korak 4: Ovdje zalijepite UI element pomoću prečaca Ctrl + V.

Za ovaj članak koristit ću element Mobile Dark iz korisničkog sučelja Google Material. Element uključuje vodiče koji će vam pomoći da postavite više slojeva, ali ako ih ne želite koristiti, lako ih uklonite slijedeći sljedeći korak.

Korak 5: Da biste uklonili vodiče, kliknite ikonu zaključavanja u gornjem lijevom kutu, a zatim pritisnite Delete. Ovaj korak možete preskočiti ako želite koristiti vodiče za precizno postavljanje više objekata u element.

Korak 6: Vratite se na UI komplet kako biste odabrali još jedan element koji ćete dodati ovoj stranici. Još jednom kliknite naslov elementa i kopirajte ga pomoću prečaca Ctrl + C.

Napravit ću osnovni tost za ovaj članak za koji ću upotrijebiti jedan dijaloški okvir.

Korak 7: Zalijepite novi element na prethodni element i zatim ga poravnajte prema vodilicama.

Korak 8: Sada uredite svaki element tosta, dvaput kliknite na tekstni okvir, a zatim unesite tekst koji želite koristiti. Prvo promijenimo naslov tosta.

Zatim promijenite sadržaj tijela dvostrukim klikom na tekstni okvir i upisivanjem onoga što želite dodati.

Na isti način možete promijeniti i tekst gumba. Nakon što 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 desno.

Da biste promijenili boju teksta, kliknite na pravokutnik pored opcije Fill i zatim odaberite novu boju s alata za odabir boja.

I ne možete samo tekst uređivati ​​na ovaj način. Također možete promijeniti boju i neprozirnost gotovo svih stavki u dijaloškom okviru, što je odlično ako se za jedinstvenu shemu boja.

Nakon što ste zadovoljni rezultatom, idite naprijed i spremite datoteku klikom na opciju Spremi kao na izborniku ili pomoću prečaca Shift + Ctrl + S.

Također na

#Grafički dizajn

Kliknite ovdje da vidite našu stranicu s člancima o grafičkom dizajnu

Savršite svoj dizajn koristeći UI setove

Sada kada znate kako preuzeti i koristiti UI setove u Adobe XD-u, siguran sam da ćete za trenutačno početi stvarati nevjerojatne dizajne. Ovi setovi UI-a su definitivno zgodni i pomažu vam da se izravno prebacite na svoj projekt bez brige oko dizajniranja svih UI elemenata.

Sljedeće: Završili ste projekt na Adobe XD i ne znate kako ga izvesti u HTML? Pogledajte sljedeći članak za jednostavan korak po korak vodič.