7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Style Guides

Krótka wskazówka: jak wykorzystać Zeplin do generowania wytycznych stylu

Scroll to top
Read Time: 2 mins

Polish (Polski) translation by Mateusz Kurlit (you can also view the original English article)

Wcześniej omówiliśmy jak projektanci mogą współpracować z zespołem deweloperów za pomocą Zeplin, ale istnieje jeszcze coś; Zeplin to również świetne narzędzie do generowania wytycznych stylu. W ten sposób, zespół może stworzyć spójny projekt, mając aktualne wytyczne online dostępne dla każdego z dowolnego miejsca na ziemi.

Umożliwia zapisywanie i zmienianie nazw czcionek oraz kolorów, a nawet eksportowanie kodu CSS. Wytyczne stylu i funkcja inspekcji z pewnością oszczędzi wiele wysiłku, gdy przyjdzie czas na QA (zapewnienie jakości). Zobaczmy jak to działa!

Dodawanie stylów

Najpierw wybierz ekran w panelu projektu.

Potem zaznacz element, którego właściwości chcesz dodać do wytycznych stylu (na przykład: wybierz tytuł H1, aby dodać jego czcionkę, rozmiar i kolor).

Następnie najedź kursorem na narzędzie inspektora i znajdź ikonę Aa+, która pojawi się obok stylów tekstu, aby dodać je do zbioru czcionek:

selected titles properties in zeplinselected titles properties in zeplinselected titles properties in zeplin
Wybrany tytuł i jego właściwości w inspektorze

Dodawanie kolorów działa w podobny sposób. Kliknij ikonę kropli po prawej stronie, aby zbudować paletę kolorów:

same deal with colourssame deal with colourssame deal with colours
Taka sama sytuacja z kolorami

Twoje wytyczne stylu

Aby zobaczyć własne wytyczne stylu, wybierz drugą kartę Styleguide w górnej części strony:

Będą tam wszystkie wcześniej dodane elementy. Możesz teraz przejść dalej i nadać każdemu stylowi odpowiednią nazwę. Aby to zrobić, najedź na domyślną nazwę koloru i kliknij, aby ją zmienić.

Uwaga: skorzystaj z nazewnictwa, które jest dobrze znane całemu zespołowi:

Wykonaj to samo dla czcionek; nadaj im nazwy, które są dobrze znane projektantom i deweloperom. Nie zapominaj, że pomagasz deweloperom, ale również tworzysz repozytorium dla innych projektantów.

Efekt końcowy będzie wyglądał mniej więcej tak:

Eksportowanie

W tym momencie, jeśli jesteś deweloperem, zapewne zainteresuje cię kod CSS znajdujący się w kolumnie po prawej stronie.  Masz do dyspozycji dowolną składnię; Sass, LESS, Stylus lub zwykły kod CSS.

Każda reguła może być indywidualnie pobrana, jednak możesz zaznaczyć cały kod za pomocą klawiszy CTRL + A.

Podsumowanie

Nigdy więcej nieaktualnych wytycznych stylu, których nikt nie może znaleźć, nigdy więcej wiadomości na temat ostatniego koloru; Zeplin pomaga całemu zespołowi w efektywnym projektowaniu. Produktywność górą!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.