A UI tervező szoftverek egyik nagy előnye, hogy a benne elkészített design elemeinek a CSS kódja kinyerhető. Az alábbi cikkben és videóban bemutatjuk, hogy milyen könnyen lehet egy Sketchben elkészített design egyes elemeinek a CSS értékeit kimásolni.
A példa kedvéért megnyitottunk egy banki alkalmazás design tervét Sketchben, amiben láthatóan különféle grafikai elem van. Nézzünk elősször egy szöveget. Rákattintva látható a jobb oldali panelen hogy milyen betűtípus családot használ, mekkora a mérete és színe.
Ha weboldalt fejlesztünk, akkor minden ilyen értékek, tulajdonságok fontosak, viszont sok idő lenne ezeket kézzel beírni. Ha jobb egérgombbal kattintasz a kijelölt szövegre, akkor a felugró menü közepén találod a Copy CSS Attributes opciót, ami rögtön vágólapra másolja az értékeket, amit aztán be tudsz illeszteni oda, ahol használni szeretnéd.
Ugyan ez a művel bármilyen más alakzaton, például gombon, vagy szövegen. Még az színátmenetet, vagy az átlátszóságot is kimásolja. Sőt, ha csoportosítva vannak elemek, például egy gomb esetében, akkor az összes benne lévő szöveg, grafikai elem értékeit kimásolja.
Ugye, hogy nem volt bonyolult? Próbáld ki Te is, kisérletezgess, legyen sikerélményed.
