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

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

Difficulty:BeginnerLength:ShortLanguages:

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 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 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
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.