Mga Rating ng Editor: Mga Rating ng User: [Kabuuan: 0 Average: 0/5].ilfs_responsive_below_title_1 {lapad: 300px; } @media (min-lapad: 500px) {.ilfs_responsive_below_title_1 {lapad: 300px; }} @media (min-lapad: 800px) {.ilfs_responsive_below_title_1 {lapad: 336px; }}
Ang Desech Studio ay tumutulong sa iyo makabuo ng HTML/CSS mula sa Figma, Sketch, XD Designs nang libre . Tumatagal ito ng isang Figma file o isang proyekto ng Sketch mula sa iyo at bumubuo ng kaukulang HTML at CSS code. Para sa madalas na mga proyekto, hindi talaga ito nakakabuo ng tumpak na fronted code, dahil kakailanganin mo ring baguhin ito nang kaunti. At iyon ang dahilan kung bakit nag-aalok ito sa iyo ng isang malakas na visual HTML editor din.
Dadalhin lamang ang file at ginagawa ang pinaka-gumagana sa sarili nito. Kapag lumilikha ito ng huling code, binubuksan nito iyon sa isang editor, kung saan maaari mong baguhin ang mga elemento ng HTML upang magkasya sa iyong mga pangangailangan. Maaari mong i-configure ang bawat elemento sa WYSIWYG mode at makita ang preview ng pangwakas na disenyo sa desktop pati na rin ang mode ng mobile. Maaari kang magtrabaho sa tukoy na uri ng mga elemento at kapag tapos ka na, maaari mong i-export ang anumang proyekto bilang ZIP file din. Dumating ito kasama ang suporta ng magaan at madilim na tema at mai-e-edit ang anumang file at mai-save ang mga pagbabago pabalik sa proyekto. /2021/07/Generate-HTMLâCSS-from-Figma-Sketch-XD-Designs-Free-Desech-Studio.png”width=”550″taas=”298″>Bumuo ng HTML/CSS mula sa Figma, Sketch, XD Designs Libre: Desech Studio
Maaari kang mag- i-download ang Desech Studio mula dito at pagkatapos ay i-install ito. Ito ay isang cross-platform software, kaya’t hindi mahalaga kung ikaw ay nasa Linux, MAC, o Windows; madali mo itong magagamit. Matapos ang pag-download at pag-install nito, magkakaroon ka ring lumikha ng isang libreng account sa pangunahing website din. Sinusuportahan nito ang Adobe XD, Sketch, Figma bilang default at maaari kang mag-import ng anuman sa iyong prototype ng UI o wireframe mula sa sinuman sa kanila. Para sa post na ito, gagamit ako ng Figma, kaya na-paste ko lamang ang Figma file URL upang ma-download ito. Hintaying i-download nito ang lahat ng mga assets at pagsama-samahin ang mga ito.
.png”width=”523″taas=”759″>Matapos itong gawin, bubuksan nito ang disenyo sa editor. Maaari mo na ngayong mai-edit ang halos lahat ng aspeto ng disenyo dito. Nabuo ang code at nag-click ka lamang sa anumang elemento upang mai-edit o mabago ito. Gayunpaman, ang panghuling HTML ay maaaring hindi tumpak, ngunit magagawa mo ito sa pamamagitan ng pag-edit ng ilang mga bagay nang manu-mano.
2021/07/Desech-Studio-editor.png”width=”550″taas=”276″>Maaari mong makita ang file browser sa kaliwang bahagi. At ang editor sa kanang pane. Piliin lamang ang isang file mula sa browser at pagkatapos ay gumawa ng mga pagbabago sa kanang pane. Maaari mong baguhin ang mga pangunahing aspeto ng HTML tulad ng lapad, taas, padding, atbp.-Studio-Sidebars.png”taas=”669″>
Panghuli, kapag tapos ka nang mag-tweak ng disenyo, maaari mo lamang itong mai-export. Gamitin ang pagpipiliang File> I-export upang mai-save ang kasalukuyang binubiling proyekto bilang isang ZIP file. Ito ay kasing simple ng iyan.
349″taas=”310″>Sa ganitong paraan, maaari mong gamitin ang simple at malakas na software na ito upang mai-convert ang iyong mga disenyo sa gumaganang code. Ito ay hindi perpekto at tiyak na makatipid sa iyo ng maraming oras. Gayundin, inaasahan kong sa mga hinaharap na pag-update, ito ay magpapabuti at makakabuo ng huling HTML/CSS code nang mas tumpak.
