Wtyczka Zeplin Sketch — pomost pomiędzy projektowaniem a inżynierią

Zeplin to potężne narzędzie do współpracy, które wypełnia lukę między projektantami i programistami, tworząc połączoną przestrzeń dla zespołów produktowych.

Dlaczego Zeplin?

Kluczowym elementem każdej układanki związanej z rozwojem produktu jest miejsce, w którym design spotyka się z rozwojem. Kiedy projekt jest gotowy do przejścia w fazę rozwoju („przekazanie”), inżynierowie potrzebują sposobu, aby go zrozumieć i przetłumaczyć na kod.

Zeplin ułatwia przekazywanie, biorąc projekty z programów Sketch, Adobe XD, Figma i Photoshop i eksportując je do formatu, który umożliwia łatwe generowanie fragmentów kodu, wskazówek dotyczących stylu, specyfikacji i zasobów.

Pożegnaj się z czasami „redliningu”. Zeplin koncentruje się wyłącznie na poprawie współpracy między projektantami produktów a zespołami programistycznymi i jest używany przez wiodące zespoły produktowe w Airbnb, Dropbox, Pinterest, Microsoft i wielu innych.

Z Zeplinem nie ma potrzeby ręcznego wypisywania rozmiarów lub marginesów, wpisywania kopii, eksportowania ikon. Jest po prostu niesamowity i pozwala oszczędzić mnóstwo czasu na skupienie się na eksploracji projektu. – Alex Potrivaev, projektant produktu @Intercom

W jednym z naszych poprzednich artykułów Toptal Designer Micah Bowers mówił o znaczeniu posiadania ustandaryzowanego systemu języka projektowania w celu efektywnej komunikacji w różnych funkcjach zespołów produktowych pracujących nad produktami cyfrowymi.

Dzięki wersjonowaniu zasobów projektowych, tworzeniu bibliotek komponentów i generowaniu przewodników po stylu życia, projekt przeniesiony do Zeplina może służyć jako „pojedyncze źródło prawdy” dla zespołów produktowych.

Zasadniczo uważamy, że Zeplin jest naszym źródłem prawdy we współpracy z inżynierią. Jeśli nie ma go w Zeplinie, to nie jest oficjalne. – Jason Stoff, starszy projektant, produkty cyfrowe @Starbucks

Ograniczenia Zeplina

Chociaż Zeplin ma wiele przydatnych funkcji, nie jest doskonały. Zeplin oferuje darmowy plan, ale w ramach tego planu jest ograniczony do jednego projektu. W przypadku projektowania zarówno dla systemu iOS, jak i Android, wymagane będą dwa oddzielne projekty. W tym momencie potrzebny byłby płatny plan.

Po zrozumieniu przepływu pracy z Zeplin i Sketch (lub innymi wymienionymi powyżej aplikacjami), przepływ pracy staje się łatwy. Jednak Zeplin ma trochę krzywej uczenia się, która wymaga trochę czasu i uwagi. Aby zobaczyć ogólny przegląd i dowiedzieć się więcej o tym, jak z niego korzystać, zobacz poniższy film demonstracyjny Zeplin:

Praca ze Sketch i Zeplin: kroki i wskazówki

1. Zacznij korzystać z Zeplina.

• Utwórz konto Zeplin, jeśli jeszcze go nie masz. Możesz zarejestrować się za darmo: https://app.zeplin.io/register
• Pobierz aplikację komputerową Zeplin na komputery Mac lub Windows.
• Pobierz wtyczkę Zeplin do programu Sketch.

2. Przygotuj plik szkicu.

• Teraz, gdy mamy gotowy Sketch i Zeplin, skonfigurujemy nasz plik Sketch w celu bezproblemowego eksportu do Zeplina.
• W programie Sketch uporządkuj zasoby i warstwy, stosując spójne konwencje nazewnictwa. Jeśli współpracujesz z innymi projektantami, ustal konwencje, które pasują do wszystkich członków Twojego zespołu. W zależności od typu projektu (np. iOS, Android lub web), Zeplin automatycznie dostosuje konwencję nazewnictwa zasobów, czyniąc ich eksportowanie procesem jednoetapowym.
• Twórz symbole dla wspólnych elementów i zasobów w programie Sketch. Umożliwi to skonfigurowanie komponentów w Zeplin.
• Zapisz kolory w palecie „Kolory dokumentu” i czcionki jako „Style tekstu” w pliku szkicu. Pojawią się one w przewodniku stylu wygenerowanym przez Zeplin.

3. Udostępnij zasoby w programie Sketch.

• To bardzo ważny krok. Po zgrupowaniu zasobów w symbole otwórz stronę Symbole w pliku Sketch.
• Kliknij grupę w obrębie symbolu, np. „ic-menu” (ikona folderu)
• Po podświetleniu grupy znajdź akcję „Make Exportable” w prawym dolnym rogu „Inspektora” w Sketch i kliknij tę opcję. Obok nazwy grupy powinna teraz pojawić się ikona plasterka.
• Ten krok pozwoli inżynierom na eksport zasobów bezpośrednio z Zeplina.

4. Utwórz nowy projekt w Zeplinie.

• Wybierz typ projektu, który budujesz. Pamiętaj, że powinieneś mieć osobne projekty dla iOS i Androida, nawet jeśli projekty są identyczne. Dzieje się tak, ponieważ Zeplin wygeneruje inny kod w zależności od typu projektu.
• Wybierz rozdzielczość projektu, która odpowiada Twoim obszarom roboczym Sketch (np. 1x, 320px).

5. Eksportuj obszary robocze Sketch do Zeplina.

• W Szkicu zaznacz wszystkie obszary robocze, które chcesz wyeksportować do Zeplina.
• Przejdź do Wtyczki > Zeplin > Eksportuj zaznaczone… lub naciśnij ⌃⌘E na klawiaturze.
• Następnie wyeksportujemy Symbole ze Szkicu. Otwórz stronę Symbole w Sketch i zaznacz wszystkie obszary robocze. Eksport do Zeplina.

6. Zorganizuj projekt w Zeplinie.

• Teraz, gdy obszary robocze Sketch znajdują się w Zeplin, zorganizujmy grafikę w sekcje.
• W widoku Dashboard projektu wybierz podobne ekrany, aby pogrupować je w kategorie. Po podświetleniu kliknij prawym przyciskiem myszy i wybierz „Nowa sekcja z wyboru”. Powtarzaj to, aż plik Zeplin zostanie prawidłowo zorganizowany.

7. Wykorzystaj komponenty w Zeplin.

Być może jedną z najbardziej użytecznych funkcji Zeplina jest możliwość organizowania zasobów w biblioteki komponentów. Jest to ważne, gdy projekty projektu są opracowywane dla wielu platform przez różnych członków zespołu. Ujednolicenie projektu jest niezbędne, jak podkreśla projektant Airbnb Karri Saarinen w „Budowaniu języka wizualnego”:

Ujednolicony system projektowania jest niezbędny do lepszego i szybszego budowania; lepsze, ponieważ spójne środowisko jest łatwiej zrozumiałe dla naszych użytkowników i szybsze, ponieważ daje nam wspólny język do pracy.

• Wybierz zakładkę „Przewodnik po stylach” w górnej środkowej części Zeplina (obok „Pulpitu nawigacyjnego”).
• W zakładce „Przewodnik po stylach” wybierz dodatkową zakładkę „Komponenty”. Tutaj zobaczysz wszystkie swoje symbole wyeksportowane ze Sketch.
• Uporządkuj je w sekcje, takie jak „Ikony”, „Obrazy”, „Wspólne elementy” itp. Możesz dowiedzieć się więcej o karcie Komponenty w przewodniku po stylu projektu w Zeplin tutaj.

8. Eksportuj przewodniki stylu z Zeplin.

• W widoku Dashboard projektu Zeplin znajdź przycisk „Udostępnij” w prawym górnym rogu aplikacji.
• Wybierz „Udostępnij”, a następnie znajdź „Scena” na dole menu. Wybierz „Włącz”, a następnie „Otwórz”. Spowoduje to wygenerowanie dynamicznego przewodnika stylu dla twojego projektu. Udostępnij adres URL swojemu zespołowi.

9. Dodaj adnotacje do swoich projektów w Zeplinie.

• Dodawanie notatek do projektów jest łatwe dzięki Zeplin. Ze szczegółowego widoku ekranu wybierz ikonę dodawania notatki i przypnij notatkę do komponentu.
• Możesz dodać notatkę, przytrzymując Cmd ( Ctrl dla użytkowników Windows i Linux) i klikając w dowolnym miejscu na ekranie.
• Możesz nawet wspomnieć o innych członkach drużyny za pomocą „@”, a oni otrzymają powiadomienie.

10. Współpracuj, udostępniaj i korzystaj z kontroli wersji.

• Teraz, gdy Twój plik Zeplin jest gotowy do udostępnienia Twojemu zespołowi, zaproś użytkowników za pośrednictwem ich adresów e-mail lub wyślij im adres URL projektu.
• Kontynuuj aktualizację pliku Zeplin, eksportując obszary robocze z programu Sketch.
• Zeplin automatycznie kontroluje wersje Twoich plików i możesz kontynuować współpracę z członkami zespołu, korzystając z tego dynamicznego „źródła prawdy”.

Wniosek

Tworzenie dynamicznego, zorganizowanego i opartego na współpracy przepływu pracy między zespołami projektowymi i programistycznymi jest niezbędne do tworzenia doskonałych produktów cyfrowych. Posiadanie mostka przepływu pracy, takiego jak Zeplin, umożliwia projektantom dodawanie adnotacji do ekranów i ułatwia często przerażającą fazę przekazywania dzięki kompletnym i precyzyjnym specyfikacjom.

Elastyczność dynamicznego aktualizowania zasobów z jednego centralnego źródła, takiego jak symbol w programie Sketch wyeksportowany do komponentu w Zeplin, zapewnia ogromną elastyczność. Inżynierowie mogą następnie łatwo eksportować zasoby do kodu natywnego, oszczędzając czas i nudę.

Chociaż przemyślany UX i estetycznie piękne projekty są podstawą udanego produktu, proces przekazywania tego projektu w ręce użytkowników ma kluczowe znaczenie.

Projektanci, którzy chcą być wydajni i polegać na jednym „źródle prawdy”, powinni rozważyć opisany powyżej przepływ pracy Sketch to Zeplin. Moc kryjąca się za solidną relacją oprogramowania między tymi dwoma narzędziami do projektowania pomoże projektantom i zespołom programistów dotrzeć do mety z większą łatwością i satysfakcją.

• • •

Dalsza lektura na blogu Toptal Design:

• Adobe XD kontra Sketch – które narzędzie UX jest dla Ciebie odpowiednie?
• Jak zbudować efektywną strukturę projektowania (zawiera bezpłatną strukturę interfejsu użytkownika szkicu)
• Rzeczy, których możesz nie wiedzieć o typografii w szkicu
• Zapoznanie się z tworzeniem wtyczek Sketch
• Tworzenie oszałamiających ilustracji za pomocą Sketch and Looper w mgnieniu oka