Plugin Zeplin dla Adobe XD, czyli płynne handoff
Poziom trudności: Łatwy (1/6)
Platforma: PC/MAC
Praca z deweloperami…. Cóż można o niej powiedzieć? Często bywa tak, że nasi kochani mistrzowie kodu (szczególnie frontendowcy) marudzą na przekazane pliki. A to format nie ten, a to na ekranie czegoś nie widać… A gdzie kolor w hex? Ty kolejny raz się głowisz, jak sobie (oraz im) ułatwić życie. Ja w moich poszukiwaniach znalazłam wtyczkę Zeplin, która spełniła moje oczekiwania i ukróciła parodię wysyłania tysięcy plików, trzymania ich na dysku jako „kopia_final_final_naPewno.(tu wybierz format)”. Sama wtyczka stanowi również doskonałe archiwum dla projektu oraz naszej pracy – wiemy, która cześć kiedy została wykonana, a dodatkowo możemy dopiąć wybrane ekrany do taska w Jirze.
Zacznijmy jednak od samego początku i zróbmy to na przykładzie. Stworzymy sobie bardzo prosty ekran logowania dla szkoły języka japońskiego „Kitsune”.
Otwieramy program Adobe i tworzymy nowy plik o domyślnych wymiarach (1920 x 1080) z wybraną przez siebie nazwą. Nazwę zawsze możemy potem zmienić, klikając na nią na samej górze programu. Po kliknięciu pokazuje nam się ekran z dodatkowymi opcjami. Nas najbardziej interesuje „Save as” (1). Jeśli w danym projekcie planujemy tworzyć więcej niż jeden plik, warto ustalić sobie jakiś system do nazewnictwa folderów w Adobe. Pomocne mogą się okazać poszczególne narzędzia po prawej stronie, naprzeciwko nazwy „Cloud document” (1a). Za pomocą pierwszej możemy stworzyć nowy folder, dwie następne odpowiadają za widok. Klikamy „Save” (1b).
Kolejnym krokiem jest nazwanie naszej warstwy, klikamy więc dwukrotnie na samą warstwę (2a). Po zapisie powinniśmy zaplanować, jak nasza strona będzie się wyświetlać. Tutaj na pewno przyda się grid – siatka zawsze pojawia się w panelu po prawej stronie, jeśli mamy zaznaczony dowolny ekran w zakładce Design (2b). Przechodzimy następnie do prawej strony ekranu, gdzie występuje się Grid (2c) – tu możemy wybrać, czy korzystamy ze standardowej siatki (Layout), czy z kratki (Square). Dalej możemy wybrać kolor wraz z jego przezroczystością oraz liczbę kolumn (Columns). Potem mamy jeszcze do dyspozycji odstępy między kolumnami (Gutter Width) oraz szerokość kolumn (Column Width). Na samym końcu mamy wybór marginesów oraz ich zapis jako domyślny. W przypadku tego tutoriala wybrałam domyślny Grid zaproponowany przez Adobe (12 Column, 16 Gutter Width oraz 122 Column Width) oraz marginesy 140.
Następnie określamy zasady wyświetlania poszczególnych elementów takiego menu. Zanim wrzucimy sobie inne elementy najlepiej wcześniej przygotować je w osobnym programie. Warto, żeby pliki wektorowe były scalone jako jedno, a w przypadku zdjęć należy stworzyć odpowiednie proporcje pliku. Zawsze należy pamiętać o nazywaniu danego elementu. Zaczynamy od stworzenia poszczególnych elementów, które będą nam potrzebne do stworzenia ekranu logowania. W przypadku tego konkretnego zadania mamy już określone zdjęcia oraz logo, które możesz pobrać z pliku .xd.
Zacznijmy od buttonów. Klikając po lewej stronie w narzędzie Rectangle (R) (3a), tworzymy pierwszy element, umieszczając go już bezpośrednio na Gridzie (3b). Po prawej stronie możemy edytować rozmiar w Transform (3c). Nasz przycisk powinien mieć W: 398 oraz H: 54. W Appearance (3d) ustawiamy zaokrąglenie na 30.
Teraz przechodzimy do fontu. Wybieramy narzędzie Text (T), a po prawej stronie mamy więcej ustawień. Wybieramy font Roboto oraz rozmiar 14. Narzędzie zachowuje się analogicznie do poprzedniego. Dodajemy znak Google z paczki i grupujemy go wraz z tekstem, klikając prawy przycisk myszy (Group = Ctrl + G) (4a). Wyrównujemy zgrupowany element oraz element pod spodem za pomocą Align Center Horizontal (Shift + C) (4b). Grupujemy cały element oraz ustawiamy go jako komponent – klikamy prawym przyciskiem myszy i wybieramy Make Component (Ctrl + K) (4a). Następnie importujemy logo szkoły językowej z paczki File > Import >.
Otwieramy Libraries (Shift + Ctrl + Y ), gdzie mamy Document Assets i klikamy na nasz komponent, przeciągając go na ekran. Edytujemy zdublowany komponent i wstawiamy logo Facebooka. Następnie tworzymy nowy element, który będzie naszym inputem – analogicznie do poprzedniego, jedyną różnicą będzie zaokrąglenie, które ustawiamy na 10 po prawej stronie (w części Appearance). Tekst w środku ustawiamy na 14, a tekst powyżej na 16. Tak stworzonego elementu używamy do zaprojektowania wpisywania loginu i hasła. Do hasła importujemy jeszcze znaczek zakrytego oka. Następnie tworzymy button CTA do zalogowania – tym przypadku zmieniamy kolor całego buttona (w Appearance) na czarny. Dodajemy jeszcze zaraz pod logo „Kitsune” tekst „Logowanie” o rozmiarze 24. Teraz warto wybrać sobie pionową przestrzeń i odstępy między elementami. Ustawiamy je na 28. Dwa razy większej przestrzeni użyjemy do odstępu pomiędzy kategoriami. Jako ostatni element dodajemy grafikę z liśćmi (poprzez importowanie).
Tak przygotowany ekran możemy eksportować do pluginu Zeplin. Plugin instalujemy w Plugins > Browse Plugins… i wyszukujemy „Zeplin”. Klikamy zainstaluj i w międzyczasie przechodzimy na stronę https://zeplin.io/, do części Get stated po utworzeniu konta. Przy jednym projekcie program jest darmowy, bez ograniczeń, co do liczby dodanych ekranów. Musimy jeszcze zainstalować samego Zeplina. Najprościej jest zjechać na sam dół strony i w stopce odnaleźć instalację na swój system operacyjny. Po instalacji programu należy utworzyć nowy projekt (po prawej stronie w aplikacji).
Teraz wracamy do samego Adobe Xd i wybieramy narzędzie Plugin (Shift+Ctrl+P), następnie klikamy Export > Selected… i w oknie, które właśnie się pojawiło, wybieramy folder, do którego chcemy dodać nasz projekt.
Automatycznie przechodzimy do Zeplina i wybieramy nasz projekt. Po otwarciu widzimy wszystkie ekrany, które dodaliśmy do danego projektu. Po prawej stronie decydujemy o udostępnianiu plików innym osobom za pomocą przycisku Share. Klikając w nasz projekt, a potem w wybrany ekran, przechodzimy do widoku szczegółów. Po zaznaczeniu dowolnego elementu (6a) po prawej stronie pojawią się nam dane (6b). Możemy je dołączyć do naszego style guide, który posłuży przy zbieraniu właściwości naszego designu. W tym oknie możemy dodawać komentarze, klikając u dołu ekranu, zaraz po lewej stronie emotki małpki (6c).
Mamy finalny projekt, który możemy oddać naszym programistom. Co jeszcze warto wiedzieć o samym pluginie? Jeśli pracujemy wraz z zespołem w Jirze, możemy dodać tam projekt z podglądem w danym tasku. Co ważne: projekt aktualizuje się automatycznie – wystarczy tylko ponownie wyeksportować plik z Adobe Xd. W programie mamy także dostępne różne języki programowania, które możemy wybrać, a program będzie później przetwarzał część naszych projektów na wybrany kod. Zeplin na tym nie poprzestaje i cały czas rozwija swoje narzędzia, tak że możliwości jest naprawdę ogrom i warto się z nimi zapoznać!
