Hogyan kell használni az ui készleteket az Adobe xd fájlban

Azoknak, akik érdeklődnek a webes tervezés iránt, az Adobe XD felhasználói felület-készletei nagyszerű lehetőséget kínálnak egy új tervezési projekt elindításához. Ezekkel a készletekkel hozzáférhet néhány hasznos erőforráshoz, amelyeket módosíthat és felhasználhat webhelye vagy alkalmazásának kialakításához.

Ha még nem ismeri a szoftvert, és nem biztos abban, hogyan kell használni az UI-készleteket az Adobe XD-ben, akkor a megfelelő helyre jött., Megmutatom, hogyan telepítheti a felhasználói felületkészleteket a szoftverbe, majd felhasználhatja a mellékelt erőforrásokat a projekthez.

A -en is

Fotók sorozatának konvertálása az Adobe Bridge segítségével

Hogyan lehet letölteni a felhasználói felületkészleteket az Adobe XD-ben

Először vessünk egy pillantást arra, hogyan tölthetjük le az UI készleteket az Adobe XD-ben, közvetlenül a szoftverből. Az induláshoz kövesse ezeket a lépéseket:

1. lépés: Kattintson a hamburger menü gombjára a szoftver bal felső sarkában.

2. lépés: A menüben görgessen le a UI-készlet beszerzése opcióhoz, majd kattintson a rendelkezésre álló lehetőségek bármelyikére.

A cikkhez a Google Material UI készletet választom. A projekttől függően azonban kiválaszthatja az Apple iOS vagy a Microsoft Windows készleteket is. Ez megnyit egy hivatalos weboldalt, ahonnan ingyenesen letölthető a felhasználói felület készletek.

3. lépés: Keresse meg az Adobe XD UI készletet a következő weboldalon, és töltse le a rendszerére.

4. lépés: Most nyissa meg a letöltött fájlt az Adobe XD-ben, és egy csomó rajztábla köszönt bennünket, amelyek az adott platform felhasználói felületének erőforrásait tartalmazzák.

Tartsa lenyomva a Ctrl gombot, és mozgassa a görgetőgombot a nagyításhoz / kicsinyítéshez, hogy az összes rajztábla megjelenjen.

Ha ehelyett a Huzalkereteket szeretné letölteni, akkor kattintson a Huzalkeretek lehetőségre a UI-készletek letöltése menüben.

További felhasználói felület-készleteket az Adobe webhelyén is kereshet, ha rákattint a További felhasználói felület-készletek lehetőségre a UI-készletek letöltése menüben.

A weboldal számos remek lehetőség közül választhat, köztük egy igazán hűvös Movie Magic UI készlet, amely head-up képernyőnek tűnik.

Most, hogy tudod, hogyan kell letölteni az UI-készleteket, nézzük meg, hogyan használhatjuk ezeket a projektekben.

A felhasználói felület-készletek használata az Adobe XD-ben

Az UI-készletek használatához a projektben csak kövesse az alábbi egyszerű lépéseket:

1. lépés: Zárja be a felhasználói felület elemet, amelyet használni szeretne a projektben, és kattintson a címére annak kiválasztásához.

2. lépés: Most másolja az elemet a Ctrl + C parancsikon segítségével.

3. lépés: Ezután nyisson meg egy új Adobe XD projektet a menüből.

4. lépés: Itt illessze be az UI elemet a Ctrl + V parancsikon segítségével.

A cikkhez a Google Material UI készlet Mobile Dark elemét fogom használni. Az elem tartalmaz útmutatásokat, amelyek segítségével több réteget helyezhet el, de ha nem akarja használni őket, akkor könnyen eltávolíthatja őket a következő lépés végrehajtásával.

5. lépés: Az útmutatók eltávolításához kattintson a bal felső sarokban lévő lakat ikonra, majd nyomja meg a törlés gombot. Ezt a lépést kihagyhatja, ha útmutatók segítségével szeretne több objektumot pontosan az elembe helyezni.

6. lépés: Most térjen vissza az UI készlethez, és válasszon ki egy másik elemet, amelyet hozzá kell adni ehhez az oldalhoz. Kattintson ismét az elem címére, és másolja át a Ctrl + C parancsikon segítségével.

Készítek egy alapvető pirítóst ehhez a cikkhez, amelyre az egyik párbeszédpanelt felhasználom.

7. lépés: Illessze be az új elemet az előző elemre, majd igazítsa azt az útmutatók szerint.

8. lépés: Most a toast egyes elemeinek szerkesztéséhez kattintson duplán a szövegmezőre, majd írja be a használni kívánt szöveget. Először változtassuk meg a pirítós címét.

Ezután módosítsa a törzs tartalmát: kattintson duplán a szövegmezőre, és írja be a hozzáadni kívánt elemet.

A gombok szövegét ugyanúgy megváltoztathatja. Miután elkészült a szöveg szerkesztésével, megváltoztathatja a szöveg színét és átlátszóságát. Az átlátszóság megváltoztatásához mozgassa jobbra az eszköztár Opacitás opciója alá tartozó csúszkát.

A szöveg színének megváltoztatásához kattintson a Töltés opció melletti téglalapra, majd válassza ki a színválasztóból egy új színt.

És nem csak a szöveget lehet ilyen módon szerkeszteni. Meg lehet változtatni a párbeszédpanel szinte összes elemének színét és átlátszóságát is, ami nagyszerű, ha egyedi színsémát választott.

Miután elégedett volt az eredménnyel, csak menjen tovább, és mentse el a fájlt a Mentés másként lehetőségre kattintva a menüben, vagy a Shift + Ctrl + S parancsikon segítségével.

A -en is

# grafikai tervezés

Kattintson ide, hogy megtekintse a grafikai cikkek oldalunkat

Tökéletesítse a formatervezési felületet a felhasználói felületek használatával

Most, hogy tudja, hogyan kell letölteni és használni az UI készleteket az Adobe XD-ben, biztos vagyok benne, hogy hamarosan elkezdi csodálatos mintáinak kidolgozását. Ezek az UI-készletek feltétlenül nagyon praktikusak, és segítenek egyenesen a projekthez jutni anélkül, hogy minden egyes felhasználói felület elemének tervezésekor kellene aggódnia.

Következő lépések: Befejezte a projektet az Adobe XD-n, és nem tudja, hogyan exportálhatja azt HTML-re? Nézze meg a következő cikket egy egyszerű lépésről lépésre.