Uprość przejście od szkicu do kodu Visual Studio dzięki Indigo.Design

(To jest artykuł sponsorowany.) Jeśli się nad tym zastanowić, zespoły programistyczne są bardzo podobne do zespołów sportowych. Podczas gdy każdy członek zespołu dąży do tego samego celu, role, które odgrywają i podejmowane przez nich działania, znacznie się od siebie różnią.

Dlatego tak ważne jest płynne przenoszenie piłki od jednego członka zespołu do drugiego.

Niestety, przekazanie, które ma miejsce w zespołach programistycznych, nie jest naturalnie tak płynne, jak to, co widać na boisku sportowym. Jednym z głównych powodów takiego stanu rzeczy są różne systemy i podejścia stosowane do tworzenia produktów.

Projektanci tworzą doskonałe interfejsy użytkownika w programie Sketch, tylko po to, aby przetłumaczyć je na język, którego deweloperzy mogą używać podczas tworzenia aplikacji w środowisku IDE programu Visual Studio Code. Bez płynnego przenoszenia projektów produktów przez potok te nieefektywności prowadzą do kosztownych przeróbek i debugowania po przeniesieniu aplikacji od projektanta do programisty.

Nie trzeba dodawać, że rozwiązanie problemu przekazywania szkiców do IDE nadchodziło od dawna. Nie chodzi o to, że zespoły programistyczne nie wiedzą, jak współpracować lub dobrze się ze sobą komunikować. Po prostu ich odmienne systemy i strategie sprawiają, że przejście z jednego zespołu do drugiego jest niezgrabne, czasochłonne i obarczone błędami.

Dzisiaj przyjrzymy się, dlaczego tak się dzieje i jak Twoja agencja może rozwiązać problem za pomocą dwóch wtyczek i prototypowej platformy chmurowej od Indigo.Design.

Gdzie się nie udaje przekazanie przez projektanta i programistę?

Po pierwsze, to, o co naprawdę powinniśmy zapytać, to:

Dlaczego przekazanie przez projektanta-dewelopera jest takim problemem?

Nick Babich napisał niedawno o tym, jak projektanci dokładają wszelkich starań, aby stworzyć cyfrowe rozwiązania, które są doskonale zmierzone i konsekwentnie wykonane. Ale systemy projektowe nie przekładają się płynnie na systemy programistyczne.

Im więcej projektant robi z interfejsem, tym więcej musi faktycznie komunikować się z programistą. Nie wystarczy więc przekazać plik projektu Sketch i pozostawić programistę, aby z nim pracował. Projektanci muszą dostarczyć specyfikacje projektowe, które wyjaśniają, w jaki sposób wszystkie ruchome elementy muszą być ułożone, rozmieszczone, stylizowane, pokolorowane, zaangażowane i tak dalej.

To jedyny sposób, aby upewnić się, że aplikacja kończy się perfekcyjnie co do piksela. Nawet wtedy nadal wymaga wiele implementacji ze strony programisty, gdy znajdzie się on w swoim IDE.

Jak możesz sobie wyobrazić, cały ten proces zajmuje projektantowi dużo czasu. Ale bez specyfikacji projektowych programiści muszą grać w ryzykowną grę w zgadywanie.

Co więcej, programiści zazwyczaj nie mają zwyczaju kodowania za pomocą HTML i CSS, co jest żmudną pracą i reprezentuje tylko interfejs użytkownika. Za kulisami jest dużo więcej kodu, który sprawia, że ​​aplikacja internetowa działa, a nie wszyscy programiści są biegli lub zainteresowani nauką pisania znaczników interfejsu użytkownika. Kiedy są zmuszeni do tej pozycji, stroma krzywa uczenia się wydłuża czas projektów, a wynikające z tego przeróbki i debugowanie sprawiają, że koszty wymykają się spod kontroli.

Czyli naprawdę przekazanie przez projektanta-dewelopera stało się kwestią czyjego czasu możemy sobie pozwolić na marnowanie?

“

Czy to projektant musi wszystko przerysować, aby deweloper wiedział, jak zamienić projekt w rzeczywistość?

Lub:

Czy to programista musi przyjrzeć się projektowi, ręcznie zmierzyć wszystko na ekranie i mieć nadzieję, że uzyska właściwą specyfikację, patrząc na niego?

W żadnym scenariuszu nikt nie wygrywa. I w tym procesie będziesz pożerać swoje marże zysku.

Mogą istnieć agencje, które uważają, że zmuszenie projektantów i programistów do pracy na tej samej platformie jest najlepszym rozwiązaniem. W ten sposób nie ma potrzeby wykonywania wszystkich tych tłumaczeń lub interpretacji podczas przekazywania ze Sketch do Visual Studio Code. Ale to często skutkuje stłumioną kreatywnością projektanta lub utrudnioną zdolnością do budowania efektywnych rozwiązań programowych po stronie programisty.

Więc jaka jest odpowiedź?

Popraw współpracę projektanta z programistą dzięki Indigo.Design

To nie jest tak, że Indigo.Design jest pierwszą platformą, która próbuje rozwiązać problemy związane z przekazywaniem przez zespoły programistyczne. InVision i Zeplin zaproponowały swoje własne rozwiązania.

Każda z tych platform sprawiła, że ​​specyfikacje wizualne są bardziej dostępne dla programistów, jednocześnie poprawiając wydajność zespołów projektant-deweloper. Konkretnie:

• Projektanci nie muszą już oznaczać interfejsu użytkownika, ponieważ platformy radzą sobie z czerwonymi liniami.
• Deweloperzy mogą ręcznie wyodrębnić specyfikacje projektu bez pomocy projektantów.

To powiedziawszy, w przypadku platform takich jak InVision i Zeplin programiści nadal muszą sprawdzać każdy element i ręcznie go kodować na podstawie wyodrębnionych specyfikacji. Platformy te również nie stworzyły jeszcze płynnego pomostu między programem Sketch a Visual Studio Code.

Jeśli więc projektanci i programiści chcą jak najefektywniej współpracować ze sobą, Indigo.Design opracowało odpowiedź na ich problem:

Krok 1: Projektuj w szkicu

Tak naprawdę tylko jedna rzecz w tej fazie musi się zmienić dla projektanta. Aplikacja, strony i przepływ będą nadal projektowane jak zwykle w Sketch, przy użyciu komponentów z zestawu Indigo.Design UI Kit.

Jednak nie ma już potrzeby kompilowania czerwonych linii ani specyfikacji aplikacji. Indigo.Design zadba o to za Ciebie.

Aby to wykorzystać, twój projektant musi porzucić system prototypowania, którego używał wcześniej. Dzięki temu nowemu usprawnionemu i bezbłędnemu systemowi Twój projektant może z łatwością przesyłać swoje projekty do chmury za pomocą wtyczki Indigo.Design.

Dostęp do tego można uzyskać w Plugins menu > Indigo.Design > Publish Prototype :

Projektant nie musi eksportować plików i przesyłać ich do innego systemu, aby klienci mogli je przeglądać lub pracować z programistami. Mogą pozostać tam, gdzie mają opublikować prototyp.

Cały proces zajmuje tylko około minuty. Projektant otrzymuje następnie łącze do chmury, które może udostępniać klientom i innym osobom w celu przejrzenia i skomentowania prototypu.

Krok 2: Pracuj w chmurze Indigo.Design

Wciągnięcie innych do chmury jest łatwe. Podany link przeniesie ich do chmury doświadczeń, w której można przejrzeć projekt:

Łatwo jest też dodawać komentarze na górze projektu. Wszystko, co użytkownicy muszą zrobić, to otworzyć panel komentarzy, przypiąć pinezkę i dołączyć do niego swój komentarz:

Jednak w tym oprogramowaniu do współpracy jest coś więcej. Prototyp można również edytować z chmury.

Aby uzyskać do tego dostęp, projektant, programista i każda inna osoba z dostępem grupowym zlokalizuje projekt z biblioteki prototypów:

Kliknij „Edytuj prototyp”, aby wejść do edytora Indigo.Design:

Po wybraniu ekranu projektant może dodać hotspot, aby utworzyć nową interakcję w aplikacji.

Możesz również użyć edytora Indigo.Design, aby sprawdzić specyfikacje interfejsu aplikacji:

Najechanie kursorem na element ujawnia względne specyfikacje odstępów. Kliknięcie elementu ujawnia znacznie więcej szczegółów:

Deweloper może również edytować lub kopiować czysto napisany i wyprowadzony kod CSS z tego panelu. (Chociaż nie powinni, jak wyjaśnię w następnym kroku).

Widzisz, co mam na myśli o oszczędzaniu czasu projektantów podczas generowania specyfikacji? Wystarczy umieścić ten projekt w chmurze Indigo.Design, a specyfikacje są generowane automatycznie.

Krok 3: Wbuduj kod programu Visual Studio

Załóżmy teraz, że Twój projekt jest wystarczająco dobry, aby przejść do rozwoju. Przeniesienie prototypu Indigo.Design do Visual Studio Code jest tak samo proste, jak przejście ze Sketcha.

Pobierz oryginalny link do chmury dostarczony przez wtyczkę Indigo.Design w Sketch. Jeśli już go nie masz, w porządku. Możesz go pobrać z ekranu bibliotek w Indigo.Design:

Teraz programista musi tylko zainstalować rozszerzenie Indigo.Design Code Generator. To umożliwia programowi Visual Studio Code bezpośrednią komunikację z Indigo.Design w celu pobrania prototypu.

Po skonfigurowaniu rozszerzenia programista wykona następujące czynności:

Otwórz powłokę aplikacji, która została już opracowana. Następnie uruchom Indigo.Design Code Generator. Tutaj wprowadzisz łącze do chmury:

Spowoduje to wyświetlenie wyskakującego okienka z projektami aplikacji, które żyją w chmurze, a także z poszczególnymi komponentami, z których się składają.

Deweloper ma możliwość wygenerowania kodu dla wszystkich komponentów aplikacji lub przejścia komponent po komponencie, sprawdzając tylko te, których potrzebują. Jest to szczególnie przydatne, gdy aplikacja jest w toku, a programista musi tylko zaimportować nowe komponenty do VSC.

Klikając „Generuj zasoby kodu”, wybrane komponenty zostaną dodane do Angulara jako czytelny i semantyczny kod HTML i CSS.

Deweloper nie musi się teraz martwić o przebudowywanie stylów lub konfigurowanie innych specyfikacji. Zamiast tego mogą poświęcić swój czas na budowanie funkcjonalności biznesowej i naprawdę udoskonalanie produktu.

Uwaga na temat tego procesu

Należy podkreślić, że ten przepływ pracy Sketch — chmura — Visual Studio Code nie działa tylko z pierwszą iteracją projektu. Deweloperzy mogą tworzyć, podczas gdy projektanci pracują na podstawie informacji zwrotnych z klientami lub badań użyteczności z użytkownikami — coś, za co uwzględniło Indigo.Design.

Załóżmy więc, że projektant przeniósł interfejs użytkownika formularza logowania przez Indigo.Design, a programista wygenerował kod, aby ruszyć z miejsca.

Podczas pracy nad formularzem deweloper zaimplementował kod uwierzytelniający w pliku TypeScript.

W międzyczasie jednak projektant otrzymał wiadomość od klienta, informującą o konieczności wdrożenia nowego logowania uniwersalnego z Google. Co oznacza, że ​​UX musi się zmienić.

Gdy aktualizacja jest gotowa, a prototyp zsynchronizowany z Indigo.Design, projektant wysyła wiadomość do programisty, aby poinformować go o zmianach. Dlatego deweloper ponownie uruchamia Visual Studio Code Generator. Jednak podczas ponownego generowania ekranu logowania wybierają opcję „Nie zastępuj” w pliku TypeScript. W ten sposób mogą zachować kod, który napisali, jednocześnie importując nowy kod HTML i CSS.

Deweloper może następnie wprowadzić niezbędne poprawki na podstawie zaktualizowanego projektu.

Zakończyć

Indigo.Design skutecznie stworzyło wydajne i wolne od błędów przekazywanie dla projektantów pracujących w Sketch i programistów pracujących w Visual Studio Code.

Projektanci nie tracą czasu na projektowanie na jednej platformie i tworzenie prototypów na innej, opracowywanie specyfikacji projektu lub zajmowanie się eksportem plików. Deweloperzy nie tracą czasu na próby odtworzenia intencji projektu z pliku statycznego.

Jak powiedział Jason Beres, starszy wiceprezes ds. rozwoju produktu w Indigo.Design:

Dzięki generowaniu kodu Indigo.Design wszystkie te błędy są w 100% unikane. Zachowano nie tylko ducha projektu, ale także tworzony jest doskonały HTML i CSS, dzięki czemu programista nie jest w niefortunnej sytuacji, gdy musi ręcznie dopasowywać projekt.

A dzięki wypracowaniu technicznych zagięć w przepływach pracy projektant-programista i przekazaniu, Twoja agencja znacznie zmniejszy koszty przeróbek i debugowania. Zwiększysz również zyski, zapewniając zespołowi programistycznemu wydajniejszy i szybszy sposób na przechodzenie aplikacji przez cały proces w idealnym stanie.