Paano gamitin ang ui kit sa adobe xd

Para sa mga interesado sa pagdidisenyo ng web, ang mga kit ng UI sa Adobe XD ay isang mahusay na paraan upang tumalon sa isang bagong proyekto ng disenyo. Sa mga kit na ito, nakakakuha ka ng access sa ilang mga madaling gamiting mapagkukunan na maaari mong baguhin at magamit para sa iyong website o disenyo ng app.

Kung bago ka sa software at hindi sigurado kung paano gamitin ang mga kit ng UI sa Adobe XD, pagkatapos ay napunta ka sa tamang lugar., Ipapakita ko sa iyo kung paano mo mai-install ang mga kit ng UI sa software at pagkatapos ay gamitin ang mga kasama na mapagkukunan para sa iyong proyekto.

Gayundin sa Gabay na Tech

Paano Mag-Batch Convert Larawan gamit ang Adobe Bridge

Paano Mag-download ng Mga Kit ng UI sa Adobe XD

Una, tingnan natin kung paano mo mai-download ang mga kit ng UI sa Adobe XD, mula mismo sa loob ng software. Sundin lamang ang mga hakbang na ito upang makapagsimula:

Hakbang 1: Mag-click sa pindutan ng menu ng hamburger sa tuktok na kaliwang sulok ng software.

Hakbang 2: Sa menu, mag-scroll pababa sa pagpipilian na Kumuha ng Mga Kit ng UI at pagkatapos ay mag-click sa alinman sa tatlo sa magagamit na mga pagpipilian.

Para sa artikulong ito, pipiliin ko ang kit ng Material ng Google Material. Gayunpaman, depende sa iyong proyekto maaari kang pumili ng alinman sa Apple iOS o sa Microsoft Windows kit. Magbubukas iyon ng isang opisyal na web page kung saan maaari mong i-download nang libre ang mga UI kit.

Hakbang 3: Hanapin ang kit ng X X UI UI sa sumusunod na web page, at i-download ito sa iyong system.

Hakbang 4: Ngayon buksan ang nai-download na file sa Adobe XD at bibigyan ka ng pagbati ng isang grupo ng mga artboards na naglalaman ng mga mapagkukunan ng UI para sa kani-kanilang platform.

Maaari mong hawakan ang pindutan ng Ctrl at ilipat ang scroll wheel upang mag-zoom in / out upang makita ang lahat ng mga indibidwal na artboards.

Kung nais mong i-download ang mga Wireframes sa halip, maaari kang mag-click sa pagpipilian ng Wireframes sa menu ng Get UI Kits.

Maaari ka ring maghanap para sa mga karagdagang mga kit ng UI sa website ng Adobe sa pamamagitan ng pag-click sa opsyon na Higit pang mga UI Kits sa menu na Kumuha ng UI.

Ang website ay may ilang mga magagandang pagpipilian upang pumili mula sa, kasama na ang talagang cool na Star Magic UI kit na mukhang isang head-up display.

Ngayon alam mo kung paano i-download ang mga kit ng UI, tingnan natin kung paano mo magagamit ang mga ito sa iyong mga proyekto.

Paano Gumamit ng Mga Kit ng UI sa Adobe XD

Upang magamit ang mga kit ng UI sa iyong proyekto, sundin lamang ang mga simpleng hakbang na ito:

Hakbang 1: Mag-zoom in sa elemento ng UI na nais mong gamitin sa iyong proyekto at mag-click sa pamagat nito upang piliin ito.

Hakbang 2: Ngayon kopyahin ang elemento gamit ang Ctrl + C shortcut.

Hakbang 3: Pagkatapos ay buksan ang isang bagong proyekto ng Adobe XD mula sa menu.

Hakbang 4: Dito, i-paste ang elemento ng UI gamit ang Ctrl + V na shortcut.

Para sa artikulong ito, gumagamit ako ng elementong Madilim na Madilim mula sa kit ng Material ng Google Material. Ang elemento ay nagsasama ng mga gabay upang matulungan kang maglagay ng maraming mga layer, ngunit kung hindi mo nais na gamitin ang mga ito madali mong alisin ang mga ito sa pamamagitan ng pagsunod sa susunod na hakbang.

Hakbang 5: Upang alisin ang mga gabay, mag-click sa icon ng lock sa tuktok na kaliwang sulok at pagkatapos ay pindutin ang tanggalin. Maaari mong laktawan ang hakbang na ito kung nais mong gamitin ang mga gabay upang ilagay nang mas tumpak ang elemento.

Hakbang 6: Ngayon bumalik sa UI kit upang pumili ng isa pang elemento upang idagdag sa pahinang ito. Muli, mag-click sa pamagat ng elemento at kopyahin ito gamit ang Ctrl + C shortcut.

Gumagawa ako ng isang pangunahing toast para sa artikulong ito kung saan gagamitin ko ang isa sa mga diyalogo.

Hakbang 7: I- paste ang bagong elemento sa nakaraang elemento at pagkatapos ay ihanay ito bilang bawat gabay.

Hakbang 8: Ngayon upang i-edit ang bawat elemento sa toast, i-double click sa kahon ng teksto at pagkatapos ay ipasok ang teksto na nais mong gamitin. Una, baguhin natin ang pamagat ng toast.

Susunod, baguhin ang nilalaman ng katawan sa pamamagitan ng pag-double click sa kahon ng teksto at pag-type sa anumang nais mong idagdag.

Maaari mo ring baguhin ang teksto ng mga pindutan sa parehong paraan. Kapag tapos ka na sa pag-edit ng teksto, maaari mong baguhin ang kulay at opacity ng teksto. Upang mabago ang opacity, ilipat lamang ang slider sa ilalim ng opsyon na Opacity sa toolbar sa kanan.

Upang mabago ang kulay ng teksto, mag-click sa parihaba sa tabi ng pagpipilian ng Punan at pagkatapos ay pumili ng isang bagong kulay mula sa tagapili ng kulay.

At hindi lamang ang teksto na maaari mong mai-edit sa paraang ito. Maaari mo ring baguhin ang kulay at opacity ng halos lahat ng mga item sa kahon ng diyalogo, na mahusay kung pupunta ka para sa isang natatanging scheme ng kulay.

Kapag nasiyahan ka sa kinalabasan, magpatuloy ka lamang at i-save ang iyong file sa pamamagitan ng pag-click sa pagpipilian na I-save Bilang sa menu o sa pamamagitan ng paggamit ng Shift + Ctrl + S na shortcut.

Gayundin sa Gabay na Tech

#graphic na disenyo

Mag-click dito upang makita ang aming pahina ng mga artikulo ng graphic na disenyo

Perpekto ang Iyong Disenyo Gamit ang Mga Kit ng UI

Ngayon alam mo kung paano mag-download at gumamit ng mga kit ng UI sa Adobe XD, sigurado akong sisimulan mo ang mga kamangha-manghang mga disenyo nang hindi sa anumang oras. Ang mga UI kit ay tiyak na madaling gamitin at matulungan kang makakuha ng diretso sa iyong proyekto nang hindi nababahala tungkol sa pagdidisenyo ng bawat elemento ng UI.

Susunod up: Natapos ang isang proyekto sa Adobe XD at hindi alam kung paano i-export ito sa HTML? Suriin ang susunod na artikulo para sa isang simpleng hakbang-hakbang na tutorial.