Преодолявайте разликата в дизайна и разработката, за да си сътрудничите и да създавате продукти по-добре заедно.
Успешното ръкостискане между разработчици и дизайнери е основен ключ към успешна, навременна и висококачествена доставка на продукти.
Успешното ръкостискане, за разлика от просто предаване, означава взаимен процес, при който дизайнерите и другите заинтересовани страни могат да бъдат включени в самия процес на разработка. Това е свещеният граал за работния процес на изграждане на продуктовия екип.
Моят собствен екип използва супермощна комбинация от Figma + Zeplin + Bit. Figma се използва за проектиране на компоненти, дефиниране на зависимости и организиране на обхвати. Bit се използва за превръщане на дизайни в компоненти на React, дефиниране на зависимости, организиране на обхвати и лесното им управление в проекти. Zeplin се използва за създаване на прост и плавен преход между двете. Действа като магия.
За да съставя този списък, разговарях с десетки дизайнери, разработчици и създатели на продукти в екипи, вариращи от малки стартиращи фирми до компании от Fortune-100. Също така тествах и играх на практика с всеки инструмент от списъка сам, за да усетя по-добре как работи и какво предлага. По този начин се сдобих с някои много вълнуващи нови инструменти като Abstract и Avocode. Списъкът не е класиран, така че, моля, продължете и го проучете, за да изпробвате някой от инструментите.
Чувствайте се свободни да коментирате по-долу и да добавяте/коментирате вашите собствени инструменти!.
1. Бит
Повечето инструменти се справят с предаването от дизайна до разработката. Но какво да кажем за обратното? Как могат дизайнерите да инспектират и да вземат активно участие в процеса на разработване на потребителския интерфейс? В крайна сметка кодът е това, което потребителите получават.
Bit е единственият инструмент за предаване от програмист към дизайнер в списъка. Това е промяна в начина, по който дизайнерите могат да си сътрудничат при разработването на потребителски интерфейс. Само си представете, вашите дизайни на Figma са вградени точно в MDX документите на всеки React компонент. Вижте дали дизайнът и кодът са еднакви, визуално! Разгледайте тук:
С Bit вашият екип за разработчици получава споделена екосистема от компоненти, които се споделят и синхронизират във всички ваши проекти. Страхотен страничен ефект е, че всички ваши компоненти винаги се визуализират в облака, за да могат всички да ги видят.
Bit помага на разработчиците да изграждат модулни приложения от независими компоненти. Той предоставя мощни инструменти за разработване и публикуване на компоненти и за съвместна работа върху споделени компоненти като екип.
Като част от работата с Bit, компонентите се визуализират и документират. Тези визуализации са естествена част от всеки компонент и винаги представят точното състояние на всяка версия на компонент във вашата кодова база.
Всичките ви компоненти се споделят в компонентния облак,където разработчиците могат лесно да ги използват в нови проекти, а дизайнерите могат визуално да видят точното визуално състояние на UI кода. Дизайнерите виждат какво наистина изграждат разработчиците.
Лесно е да търсите и изследвате всеки компонент във вашата кодова база.
Дизайнерите могат да взаимодействат с компонентите, да играят с примерите и дори да запазват визуални примери, за да ги внедрят в нови версии на компоненти.
Тъй като Bit отключва „независимо управление на версии за компоненти“, дизайнерите могат лесно да виждат и наблюдават визуални промени във всяка нова версия на компонент.
Можете дори да автоматизирате този процес, така че всеки път, когато излезе нова версия на компонент, дизайнерите да получат задача от Asana, за да проверят промените!
„Bit“ е силен начин за преодоляване на празнината между дизайн и разработка от страна на разработчиците, което също го прави страхотна комбинация с инструменти като Zeplin, които правят същото от страна на дизайнера. Интеграцията предстои през 2021 г.
Научете повече:
2. Цеплин
Обичам Zeplin. Не е перфектен, но е „инструментът за предаване между дизайнери и програмисти“, избран от нашия екип – и ние наистина му се наслаждаваме. Zeplin спестява голяма част от усилията около предаването на дизайни на разработчиците, автоматизирайки много малки, но болезнени детайли, от които разработчиците се нуждаят, за да реализират проекти.
Zeplin улеснява дизайнерите да експортират файлове с едно кликване с помощта на нашите плъгини Sketch, Figma, Adobe XD, Adobe Photoshop CC. Zeplin ще генерира предимно точни персонализирани спецификации, активи и кодови фрагменти за разработчиците.
Друга страхотна функция на Zeplin е „Свързани компоненти“. Той позволява на всеки да има достъп до компоненти във вашата кодова база направо върху дизайните, с връзки към GitHub или друг източник на истина. Веднага след като това може да бъде интегрирано с Bit, който контролира действителните компоненти в кода, тогава целият ви екип ще може да си сътрудничи директно върху промените на кода на потребителския интерфейс по визуален начин в един плавен унифициран работен процес за дизайн и код. 2021 трябва да е годината.
3. Дизайн токени
Дизайнерските жетони съществуват от известно време и излязоха на челна сцена „когато бяха представени“ в системата за дизайн „Lightning“ на Salesforce Experience and Design. Днес те могат да бъдат намерени в много системи за проектиране като Spectrum на Adobe Design Lab и Photon на Mozilla Open Design ».
„Дизайн токените“ помагат на продуктовите екипи да „си сътрудничат и да подобрят“ последователността на марката. Те са символи, използвани в кода на програмиста, които представляват част от информация за потребителския интерфейс като цвят или шрифт, която се контролира от дизайнер. Дизайнерът може да замени стойността на откраднатото с различна стойност, а разработчиците ще трябва само да изтеглят актуализация. Това дава възможност на дизайнерите самостоятелно да правят някои визуални промени в потребителския интерфейс и да изпращат тези промени до всички засегнати екрани и платформи. Звучи яко, нали?
И така, защо все още не всички работят с дизайн токени? Ами най-вече защото все още се нуждаете от Generator на Design Token, като Salesforce’s Theo, който всъщност не комуникира по естествен начин с повечето инструменти за проектиране (Sketch ви позволява да генерирате JSON файл, който не е много удобен за дизайнери).
Тази технология едва сега започва да става масова и е първата стъпка към включването на дизайнерите в процеса на разработка по начин на наистина сътрудничество. Следете внимателно Design Tokens, когато изграждате вашата система за проектиране, особено ако се комбинира със следващия инструмент в списъка.
4. Платформа за разработчици на Figma (API на Figma)
Така че Figma е любимият ми инструмент за проектиране по много причини, главно заради това колко добре ви позволява да работите с компоненти и да управлявате връзките между тях. В много отношения Figma за UI дизайн е като Bit for code, тъй като е съвместен начин за създаване на модулни приложения в модерен уеб стек. Ето защо нашият собствен екип изгражда едни и същи компоненти и в двете, за да остане синхронизиран.
Функции като проверки на кодове, измервания на оформлението и споделени стилове правят Figma предпочитано оръжие за много продуктови екипи, ориентирани към сътрудничество.
Освен че е широко популярен и страхотен инструмент за проектиране, Figma предоставя и REST API за разработчици. Този API например захранва галерията с дизайн „ShowCase“ на Uber Design, което е много готино.
При подход, обърнат към разработчиците, можете да създавате добавки за автоматизиране на задачи и подобряване на работния ви процес и да публикувате добавки за вашия екип или за света.
Друга полезна функция е, че можете да вграждате живи проекти и прототипи на Figma, където имате нужда. И куп интеграции ви позволяват да свържете Figma с други инструменти във вашия работен процес за проектиране, за да работите по-добре.
Едно нещо, което Figma забрави, беше да добави изображение и описание към техните OG карти за споделяне на Medium 😆 — но все пак щракнете върху тази връзка, ако искате да проучите повече как Figma може да подобри сътрудничеството за вашите екип.
- Вижте Figma to React, който е много готин проект, който демонстрира API на Figma за конвертиране на документ на Figma в React Components. Той е ДАЛЕЧ (!) от производствения клас, но все пак е страхотен.
- Figma също е мощна комбинация с Bit и Zeplin. Можете да проектирате компоненти на Figma и да кодирате с Bit. Организирайте обхвати с Figma и с Bit. Дефинирайте и управлявайте всички зависимости с Figma и Bit. Една система, дизайн и код, винаги актуални. Ще пиша за това скоро.
5. Разработчици на скици
Така че, когато погледна Sketch от гледна точка на предаването между дизайнер и разработчик, съм изненадан да видя колко усилено са работили тези момчета, за да се присъединят към предната линия.
Две вълнуващи характеристики на Sketch го поставят точно в челната линия на сътрудничество между дизайнери и разработчици. Първият е „Cloud Inspector»“, който, честно казано, ми напомня много на Zeplin от ранните дни и улеснява разработчиците да получат информацията, от която се нуждаят, за да превърнат пикселите в код – всички в браузъра и, най-важното, безплатно. И има дори измерване на слоевете!
А ето и кратка видео демонстрация:
По-страхотни функции на Sketch за ръкостискане между дизайнер и разработчик са Sketch API, Sketch Plugins и Sketch Assistants. По принцип можете да напишете приставка за Sketch в JavaScript (с ES6!), да имате достъп до рамки на macOS и да използвате API на Sketch, за да създавате и автоматизирате интелигентни работни потоци около работата в екип.
- Разгледайте React Sketch App от AirbnbEngкоето е страхотен (игра на думи) страхотен начин за изобразяване на компоненти на React за скициране :)
6. Invision Inspect
Inspect е решение за прехвърляне между дизайнери и програмисти на InVision.
Той превежда стойностите на дизайна във файлове като Invision Studio, Sketch или дори Photoshop в спецификации на код за разработчици (измервания на стойности, дефиниране на потребителски променливи и други). Той също така позволява на разработчиците да коментират дизайни, за да сигнализират на дизайнерите какво трябва да бъде изменено, променено или повторено.
Inspect на Invision предлага интеграции с инструменти като Jira, Confluence, Trello и дори Storybook. Все още не бих, но определено трябва да има и такъв.
И Inspect върви ръка за ръка с Invision's Design System Manager, така че полезни пояснения и кодови стойности да могат да бъдат доставени на разработчиците за всички компоненти във вашата система за проектиране. Честно казано, екипът ми изобщо не използва инвазия, но аз си играх с нея и изглежда и се чувства доста страхотно.
7. Резюме
Използван от екипи като Cisco при разработването на системата за проектиране „momentum“, „Abstract“ е инструмент, който добавя мощни възможности в допълнение към работния процес на проектиране и инструменталната верига (т.е. Sketch). Например Abstract добавя подобен на git контрол на версията с разклонения за проектиране, което позволява на дизайнерите да обединяват промените в дизайна в един файл, както правят разработчиците с кода. Вълшебно, нали?
Особено страхотна функция е разработчик-предаване. Тъй като Abstract е вдъхновен от Git и въвежда контрол на версиите в дизайна, той помага на разработчиците да се ангажират с най-новите и най-точни версии на дизайни.
И точно както в GitHub, историята на ангажиментите, коментарите и анотациите улесняват тълкуването на „защо“ зад дизайнерските решения. И дори превежда стойностите на дизайна в код, така че разработчиците да могат просто да копират и поставят кода, както правят на Zeplin и подобни инструменти. Git за дизайнери – интересно, нали? Бих искал да видя версията на всеки компонент, съобразена с неговата битова версия в кода, така че когато сблъскате версия на дизайн, разработчикът да сблъска версията на кода 🙏
8. FramerX
Framer Team е много готин продукт, който предизвика много шум. По същество това е мощен инструмент за създаване на прототипи, който предоставя много функции за стимулиране на сътрудничество, редактиране на много играчи, лесно споделяне, вградени коментари, компоненти за многократна употреба, мобилна визуализация и предаване на разработчици. Доста готин IMO.
Работи с файлове, импортирани от всеки инструмент за проектиране на потребителски интерфейс, или можете да продължите и да проектирате направо във Framer. Проектирането във Framer има някои големи предимства като „магически“ дизайн на анимация на движение, направен много опростен, и възможността да проектирате и добавяте интерактивни бутони и елементи към вашия дизайн.
Това последно допълнение въведено във FramerX означава, че можете да проектирате напълно интерактивни компоненти, които са модулни и могат да се използват повторно. И „има магазин за компоненти“, където можете да търсите компоненти за многократна употреба.
9. Авокод
Целта на Avocode е да „спести време при работа с дизайнерски файлове“. Той предлага богат набор от решения за предаване на дизайнерски файлове по по-лесен начин за разработчици, които получават всички кодови стойности и измервания, от които се нуждаят, със стандартни възможности за проверка, за дизайнери, които могат да спестят режийни разходи около създаването на сложни слоеве на Sketch, и за всички друг, който може да взаимодейства и дори да променя неща като текстове направо в дизайна по начин, който няма да наруши самия дизайн.
За разработчиците Avocode ще генерира автоматично спецификации от Sketch, Figma, XD, PS и AI файлове в един инструмент. Това означава, че можете да отваряте и проверявате дизайни, включително размери, разстояния, цветове, персонализирани променливи и други без инструменти за проектиране, което е голям плюс. И можете да експортирате слоеве с едно кликване. страхотно
И както при някои от любимите ми инструменти, Avocode ви позволява да добавяте анотации точно където и когато имате нужда от тях, за да комуникирате директно върху дизайна!
10. Animaapp
Anima App е „супер иновативен инструмент“, който изтласква самата граница на пресечната точка на дизайна и разработката. Помага ви да преминете от висококачествени прототипи към лесен за разработчици код, който инженерите могат бързо да надграждат.
Той предлага функции като интерактивни прототипи, които безпроблемно трансформират вашите статични екранни дизайни в напълно реагиращи, интерактивни, анимирани прототипи директно в Sketch, Figma или Adobe XD.
След това можете да експортирате Sketch, Figma и Adobe XD в HTML или React. Получете чисти, отзивчиви кодови компоненти, съобразени с конвенциите на вашия екип, с нулеви зависимости и минимално преработване на кода.
Може би най-удивителното в това е, че извежда код, който разработчиците действително могат да използватс поддръжка за TS, SCSS, LESS и т.н., така че разработчиците да могат да го приемат в своя стек и работен процес.
Умопомрачително, нали?
11. Supernova.io
Supernova все още е в затворена бета версия. Въпреки това, „този нов инструмент“ се стреми да заковава самата същност на дизайна към работния процес на разработка.
Разработчиците могат да използват активирани с код компоненти, токени, теми и стилове от Supernova в тяхната производствена среда по избор — докато дизайнерите могат да използват същите тези дизайнерски елементи, за да създават нови прототипи в реално време.
Supernova се стреми да генерира код, което винаги е било ужасяваща задача за инструментите за проектиране (или всеки друг инструмент). За по-голяма сигурност предлага сливане между генериран код и ръкописен код. Можете също така да разширите износителите на Supernova с webhooks и API извиквания, за да автоматизирате работния си процес. Освен това има стандартна инфраструктура за управление на цели системи за проектиране.
Определено интересно, ако ще оправдае обещанието си. „Вижте тук“.
12. Висли
Visly е друг инструмент, който има за цел да ви позволи да създавате React компоненти, визуално. Това означава, че можете бързо да проектирате и изграждате компоненти, готови за производство, без да пишете код.
Той въвежда възникнали от код концепции като подпори, състояние и взаимодействия в процеса на проектиране, за да гарантира, че кодът може да бъде генериран.
И подобно на други инструменти в списъка, Visly има за цел да помогне на вашия екип да управлява система за проектиране. Можете да управлявате своите токени за приложения, компоненти и автоматично генерирано ръководство за стил на едно място. Или можете да започнете да добавяте генерирани от Visly компоненти във всяка съществуваща кодова база и Ui система.
13. Webflow
Webflow е инструмент A+ за създаване на уебсайтове по визуален начин, като абстрахира всички CSS и стилови манипулации в мощен визуален редактор. Всички екстри на CSS като CSS Grid и Flexbox се поддържат, така че изживяването е като писане на CSS, но без писане на CSS, което е невероятно, след като хванете малко сложния редактор.
Това поставя Webflow в списъка, въпреки факта, че всъщност не е инструмент за сътрудничество и не е подходящ за пълноценни продукти със сложни инженерни системи зад тях. Вижте тези 7 причини, поради които трябва да обмислите Webflow като front-end разработчик и тази публикация за как Webflow може да помогне за преодоляване на празнините между дизайн и разработка. Готин инструмент.
14. StoryBook & Styleguidist
StoryBook и StyleGuidist са два OSS инструмента, които помагат за разработването на компоненти в изолация, докато визуално ги изобразяват и документират.
StoryBookе среда за разработка на UI компоненти. Тя ви позволява да преглеждате „библиотека с компоненти“, да преглеждате различни състояния на компоненти и интерактивно да разработвате компоненти. Добавките улесняват интегрирането с различни инструменти и работни процеси. Разработчиците могат да използват визуалните документи, създадени от Storybook, за да позволят на дизайнерите и другите хора да разглеждат примери за компоненти.
StyleGuidist е среда за разработка на изолиран React компонент с ръководство за жизнен стил. Той предоставя горещо презареден сървър за разработка и ръководство за стил на живот, което изброява компонент propTypes и показва редактируеми примери за използване, базирани на .md файлове. Той поддържа ES6, Flow и TypeScript и работи с Create React App веднага. Автоматично генерираните документи за използване могат да помогнат на Styleguidist да функционира като портал за документация за различните компоненти на вашия екип.
- Вижте също UI Zoo от Ноам Елбойм.
15. Codesandbox, Stackblitz и Codepen
„Компонентните игрища“ са чудесен начин да играете с компоненти и да научите как работят. Когато можете да ги комбинирате като част от вашата документация, игрищата ви помагат бързо да научите как работи кодът и да видите как изглежда.
Codesandbox е онлайн редактор за бързо създаване и игра с малки проекти като компоненти. След като създадете нещо интересно, можете да го покажете на другите, като просто споделите URL адреса. CodeSandbox разполага с предварителен преглед на живо, за да покаже резултата от кода, докато пишете, и има разширения, изградени за интегриране в различните ви инструменти и работния ви процес на разработка.
Stackblitz е „онлайн IDE за уеб приложения“, захранван от Visual Studio Code. Подобно на Codesnadbox, StackBlitz е онлайн IDE, където можете да създавате Angular & React проекти, които могат да се споделят чрез URL връзка. Подобно на Codesandbox, той автоматично се грижи за инсталиране на зависимости, компилиране, групиране и горещо презареждане, докато пишете.
Codepenе широко популярна онлайн среда за разработка за FrontEnd разработчици, за да играят и споделят фрагменти по визуален начин. Ето един полезен Cheatsheet за настройка на React playground на Codepen.
16. Sketch2React
Sketch2React е много готин инструмент, който предлага страхотно обещание: Просто плъзнете и пуснете вашите Sketch2React Sketch файлове в нашия нов зареждащ инструмент и той незабавно ще ги преобразува в код — React & HTML! Просто така.
Въпреки че тази идея извежда прототипите за React на следващото ниво, очевидно магическото създаване на логически кодови изрази от визуални елементи далеч не е идеално. И все пак, не можете да не се възхищавате на тези страхотни момчета, че поеха това предизвикателство и се справиха с пропастта между дизайнерите и разработчиците възможно най-напред.
Така че поздравления и стискайте палци за този инструмент и опитайте сами!
17. Свържете се
„Relate“ е интересна нова идея от Eden Vidal всъщност не е инструмент за сътрудничество, а наистина един инструмент, който се стреми да прави и двете — код и дизайн.
Това е много смело твърдение и ще са необходими много иновации, за да се създаде инструмент за проектиране или визуален инструмент, който извежда код, приет от разработчиците. Все пак такъв вдъхновяващ опит е трудно да се пренебрегне и е много интересен за изследване.
Докато проектирате, Relate има за цел да изведе четлив презентационен код, който можете да синхронизирате с кодова база и да споделите с вашата производствена среда. Това на теория означава, че няма предаванемежду дизайнери и разработчици.
Въпреки че продуктът наскоро излезе от затворена бета версия, определено си струва да го проверите и да го следите отблизо. Това е стъпка в правилния път.
