Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Style Guides
Webdesign

Gyors Tipp: Hogyan használjuk a Zeplint Stílus útmutatók létrehozásához

Difficulty:BeginnerLength:ShortLanguages:

Hungarian (Magyar) translation by Szabó Péter (you can also view the original English article)

Korábban lefedtük, hogyan tudnak a tervezők kollaborálni a dev csapattal Zeplin használatával, de van egy kicsit több ehhez; a Zeplin egy nagyszerű eszköz stílus útmutatók készítésére is. Ez biztosít arról, hogy a csapatod következetes tapasztalatokat készít egy naprakész online hozzáférhetőség birtoklásával bárkinek bárhova.

Ez lehetőséget nyújt menteni és átnevezni betűtípusokat és szín információkat, még CSS exportálását is. A stílus útmutató és az ellenőrzés lehetőség meg fog takarítani sok erőfeszítést, mikor eljön az idő a QA-hoz ( minőségbiztosítás). Nézzük gyorsan, hogy működik!

Stílusok hozzáadása

Először, válasszunk ki egy képernyőt a projekt műszerfalról.

Ezután válaszd ki az elemet aminek az ingatlanjait hozzá akarod adni a stílus útmutatóhoz (például: válaszd ki a H1 címet, hogy hozzáadd a betűtípusának családját, méretét és színét.

Ezután, lebegj az ellenőr eszköz felett és keresd az Aa+ ikont, ami meg fog jelenni a szövegstílusoknál, hogy hozzáadd őket a betűtípus könyvhöz:

selected titles properties in zeplin
Kiválasztott cím és a tulajdonságai az ellenőrben

Színek hozzáadása ugyanúgy működik. Kattints a csepp ikonra mindegyik mellett, hogy felépítsd a színpalettádat:

same deal with colours
Ugyanaz, színekkel

A stílus útmutatód

Hogy lásd a stílus útmutatódat akcióban, válaszd ki a második lap Stílusútmutatót az oldal tetején.

Az összes korábban hozzáadott elem itt lesz. Most mehetsz előre és adhatsz mindegyiknek egy sokkal illeszkedőbb nevet. Ahhoz hogy ezt csináljuk, lebegjünk az alapértelmezett szín név felett, és kattintsunk, hogy megváltoztassuk.

Megjegyzés: használj neveket és elnevezést amik ismeretesek az egész csapat számára):

Csináld ugyanezt a betűtípusokkal; fejleszd őket egy névvel amit a tervezők és a devek is ismernek. Ne feledd, hogy a dev átadással segítesz, de egy raktár készítése más tervezőknek használatra.

Amivel végzel, az valami ehhez hasonló:

Exportálás

Ezen a ponton, ha a dev művelet része vagy, talán másolni akarod a CSS a jobboldali oszlopból. Ezt elérhetőnek fogod találni bármelyik szintaxisban amit szeretsz; Sass, LESS, Stylus, vagy egyszerűen CSS.

Minden szabály egyenként kiválasztható letöltésre, amíg a Command + A ki fog választani mindent másolásra és beillesztésre.

Következtetés

Semmi több lejárt stílus útmutató elmentve valahol amit senki nem talál meg, nincs több e-mail lánc, hogy megtaláljuk a legújabb színt; a Zeplin segíthet az egész csapatodnak eredményesen tervezni. A termelékenység egészségére!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.