Устранение разрыва дизайна и разработки, чтобы сотрудничать и вместе создавать продукты лучше.
Успешное рукопожатие между разработчиками и дизайнерами - фундаментальный ключ к успешной, своевременной и высококачественной доставке продукта.
Успешное рукопожатие, в отличие от простой передачи, означает совместный процесс, в котором дизайнеры и другие заинтересованные стороны могут быть включены в сам процесс разработки. Это святой Грааль для рабочего процесса создания продуктовой команды.
Моя собственная команда использует сверхмощную комбинацию Figma + Zeplin + Bit. Figma используется для разработки компонентов, определения зависимостей и организации областей видимости. Бит используется для превращения дизайна в компоненты React, определения зависимостей, организации областей видимости и простого управления ими в разных проектах. Zeplin используется для создания простого и плавного перехода между ними. Это работает как по волшебству.
Чтобы составить этот список, я поговорил с десятками дизайнеров, разработчиков и разработчиков продуктов в группах, от небольших стартапов до компаний из списка Fortune-100. Я также лично протестировал и опробовал каждый инструмент из списка, чтобы лучше понять, как он работает и что предлагает. Таким образом я познакомился с некоторыми очень интересными новыми инструментами, такими как Аннотация и Авокод. Список не ранжирован, поэтому, пожалуйста, изучите его, чтобы опробовать любой из инструментов.
Не стесняйтесь комментировать ниже и добавлять / комментировать свои собственные инструменты !.
1. Бит
Большинство инструментов обеспечивают переход от проектирования к разработке. Но как насчет другого? Как дизайнеры могут проверить и принять активное участие в процессе разработки пользовательского интерфейса? В конце концов, код - это то, что получают пользователи.
Bit - единственный инструмент для передачи от разработчика к дизайнеру в списке. Это кардинально меняет то, как дизайнеры могут сотрудничать при разработке пользовательского интерфейса. Только представьте, ваши проекты Figma встроены прямо в документы MDX каждого компонента React. Посмотрите, совпадают ли дизайн и код визуально! Взгляните сюда:
С Bit ваша команда разработчиков получает общую экосистему компонентов, которые совместно используются и синхронизируются во всех ваших проектах. Удивительный побочный эффект заключается в том, что все ваши компоненты всегда визуализируются в облаке для всеобщего обозрения.
Bit помогает разработчикам создавать модульные приложения из независимых компонентов. Он предоставляет мощные инструменты для разработки и публикации компонентов, а также для совместной работы над общими компонентами в одной команде.
В рамках работы с Bit компоненты визуализируются и документируются. Эти визуальные элементы являются неотъемлемой частью каждого компонента и всегда представляют точное состояние любой версии компонента в вашей кодовой базе.
Все ваши компоненты размещены в облаке компонентов, где разработчики могут легко использовать их в новых проектах, а дизайнеры могут визуально видеть точное визуальное состояние кода пользовательского интерфейса. Дизайнеры видят, что на самом деле создают разработчики.
Легко искать и исследовать любой компонент в вашей кодовой базе.
Дизайнеры могут взаимодействовать с компонентами, играть с примерами и даже сохранять визуальные примеры для реализации в новых версиях компонентов.
Поскольку Bit открывает независимое управление версиями для компонентов, дизайнеры могут легко видеть и отслеживать визуальные изменения в каждой новой версии компонента.
Вы даже можете автоматизировать этот процесс, чтобы каждый раз, когда выходит новая версия компонента, дизайнеры получали задачу Asana для аудита изменений!
Bit - это надежный способ преодолеть разрыв между дизайном и разработкой со стороны разработчика, что также делает его отличным сочетанием с такими инструментами, как Zeplin, которые делают то же самое со стороны дизайнера. Интеграция намечена на 2021 год.
Подробнее:
2. Цеплин
Обожаю Zeplin. Он не идеален, но это инструмент передачи от дизайнера к разработчику, выбранный нашей командой, и нам он очень нравится. Zeplin экономит большую часть усилий, связанных с передачей дизайнов разработчикам, автоматизируя множество мелких, но болезненных деталей, которые нужны разработчикам для реализации дизайна.
Zeplin позволяет дизайнерам легко экспортировать файлы одним щелчком мыши с помощью наших плагинов Sketch, Figma, Adobe XD, Adobe Photoshop CC. Zeplin будет генерировать в основном точные индивидуальные спецификации, ресурсы и фрагменты кода для разработчиков.
Еще одна крутая функция Zeplin - Connected Components. Он позволяет каждому получить доступ к компонентам в вашей кодовой базе прямо в дизайне, со ссылками на GitHub или любой другой источник правды. Как только это можно будет интегрировать с Bit, который контролирует фактические компоненты в коде, тогда вся ваша команда сможет совместно работать над изменениями кода пользовательского интерфейса визуально в одном плавном унифицированном рабочем процессе для дизайна и кода. 2021 год должен быть годом.
3. Жетоны дизайна
Жетоны дизайна существуют уже некоторое время и вышли на первый план когда были представлены в системе дизайна Lightning от Salesforce Experience and Design. Сегодня их можно найти во многих дизайн-системах, таких как Spectrum от Adobe Design Lab и Mozilla Open Design 'Photon .
Дизайнерские токены помогают продуктовым командам сотрудничать и улучшать согласованность бренда. Это символы, используемые в коде разработчика, которые представляют часть информации пользовательского интерфейса, такую как цвет или шрифт, которая контролируется дизайнером. Дизайнер может заменить значение украденного на другое значение, а разработчикам останется только загрузить обновление. Это дает дизайнерам возможность независимо вносить некоторые визуальные изменения пользовательского интерфейса и отправлять эти изменения на все затронутые экраны и платформы. Звучит круто, правда?
Итак, почему еще не все работают с токенами дизайна? В основном потому, что вам все еще нужен генератор токенов дизайна, такой как Salesforce’s Theo, который на самом деле не взаимодействует естественным образом с большинством инструментов дизайна (Sketch позволяет создавать файл JSON, что не очень удобно для дизайнеров).
Эта технология только сейчас начинает становиться мейнстримом, и это первый шаг к вовлечению дизайнеров в процесс разработки на основе настоящего сотрудничества. Внимательно следите за токенами дизайна при построении системы дизайна, особенно в сочетании со следующим инструментом в списке.
4. Платформа разработчиков Figma (API Figma)
Итак, Figma - мой любимый инструмент дизайна по многим причинам, в основном из-за того, насколько хорошо он позволяет вам работать с компонентами и управлять отношениями между ними. Во многих отношениях Figma для дизайна пользовательского интерфейса похожа на Bit for code, поскольку это совместный способ создания модульных приложений в современном веб-стеке. Вот почему наша собственная команда создает одни и те же компоненты в обоих, чтобы оставаться синхронизированными.
Такие функции, как проверка кода, измерение макета и общие стили, делают Figma предпочтительным оружием для многих групп разработчиков, ориентированных на сотрудничество.
Помимо того, что Figma является широко популярным и классным инструментом дизайна, он также предоставляет разработчикам REST API. Этот API, например, поддерживает галерею дизайна «ShowCase» в Uber Design, что очень круто.
В подходе, ориентированном на разработчиков, вы можете создавать плагины для автоматизации задач и улучшения рабочего процесса, а также публиковать плагины для своей команды или для всего мира.
Еще одна полезная функция - вы можете встраивать живые дизайны и прототипы Figma везде, где они вам нужны. Кроме того, множество интеграций позволяет связать Figma с другими инструментами в рабочем процессе проектирования, чтобы работать лучше.
Одна вещь, о которой Figma забыла, - это добавить изображение и описание к своим картам OG для совместного использования Medium 😆 - но, тем не менее, щелкните по этой ссылке, если вы хотите узнать больше о том, как Figma может улучшить сотрудничество для ваших команда.
- Посмотрите Figma to React, очень крутой проект, демонстрирующий API Figma для преобразования документа Figma в компоненты React. Это ДАЛЕКО (!) От промышленного уровня, но все же круто.
- Figma также является мощной комбинацией с Bit и Zeplin. Вы можете создавать компоненты на Figma и кодировать с помощью Bit. Организуйте области с помощью Figma и Bit. Определяйте и управляйте всеми зависимостями с Figma и Bit. Единая система, дизайн и код, всегда актуальные. Я скоро об этом напишу.
5. Разработчики эскизов
Поэтому, когда я смотрю на Sketch с точки зрения взаимодействия дизайнера и разработчика, я удивляюсь, как усердно работали эти ребята, чтобы присоединиться к передовой.
Две захватывающие функции Sketch ставят его на передний план сотрудничества дизайнеров и разработчиков. Первым из них является Cloud Inspector, который, честно говоря, во многом напоминает мне ранний Zeplin и позволяет разработчикам легко получать информацию, необходимую для преобразования пикселей в код - все в браузере и, главное, бесплатно. И есть даже измерение слоя!
А вот и короткое демонстрационное видео:
Еще более интересными функциями Sketch для рукопожатия дизайнера и разработчика являются Sketch API, Sketch Plugins и Sketch Assistant. По сути, вы можете написать плагин Sketch на JavaScript (с ES6!), Получить доступ к фреймворкам macOS и использовать Sketch API, чтобы создавать и автоматизировать интеллектуальные рабочие процессы для совместной работы.
- Попробуйте React Sketch App от AirbnbEng, который представляет собой отличный (каламбур) отличный способ рендеринга компонентов React в скетч :)
6. Invision Inspect
Inspect - это решение от дизайнера InVision к разработчику.
Он переводит проектные значения в файлах, таких как Invision Studio, Sketch или даже Photoshop, в спецификации кода для разработчиков (измерения значений, определение пользовательских переменных и т. Д.). Это также позволяет разработчикам комментировать проекты, чтобы указать дизайнерам, что следует исправить, изменить или повторить.
Invision’s Inspect предлагает интеграцию с такими инструментами, как Jira, Confluence, Trello и даже Storybook. Пока не в Bit, но он обязательно должен быть.
Кроме того, Inspect идет рука об руку с Invision’s Design System Manager, так что полезные аннотации и значения кода могут быть доставлены разработчикам для всех компонентов в вашей дизайн-системе. Честно говоря, моя команда вообще не использует вторжение, но я играл с ним, и оно выглядит и ощущается довольно круто.
7. Аннотация
Abstract, используемый такими командами, как Cisco, при разработке системы дизайна импульс, представляет собой инструмент, который добавляет мощные возможности поверх рабочего процесса проектирования и набора инструментов (например, Sketch). Например, Abstract добавляет элемент управления версиями, подобный git, с ветвями для дизайна, что позволяет дизайнерам объединять изменения дизайна в один файл, как разработчики делают с кодом. Волшебный, правда?
Особенно крутая функция - передача разработчикам. Поскольку Abstract вдохновлен Git и обеспечивает контроль версий в дизайне, он помогает разработчикам работать с последними и наиболее точными версиями дизайна.
И, как и на GitHub, история коммитов, комментарии и аннотации упрощают интерпретацию почему дизайнерских решений. И он даже переводит проектные значения в код, чтобы разработчики могли просто скопировать и вставить код, как они это делают в Zeplin и подобных инструментах. Git для дизайнеров - интересно, правда? Я хотел бы, чтобы версия каждой компоненты была согласована с ее битовой версией в коде, чтобы, когда вы поднимаете проектную версию, разработчик подталкивает версию кода 🙏
8. FramerX
Framer Team - это очень крутой продукт, наделавший много шума. По сути, это мощный инструмент для создания прототипов, который предоставляет множество функций для совместной работы, многопользовательское редактирование, простой обмен, встроенное комментирование, многократно используемые компоненты, предварительный просмотр на мобильных устройствах и передачу функций разработчикам. Довольно круто, ИМО.
Он работает с файлами, импортированными из любого инструмента дизайна пользовательского интерфейса, или вы можете продолжить разработку прямо во 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 с помощью веб-перехватчиков и вызовов API, чтобы автоматизировать рабочий процесс. Кроме того, он имеет стандартную инфраструктуру для управления целыми системами проектирования.
Определенно интересно, если он оправдает свои обещания. Посмотрите здесь.
12. Вислы
Visly - еще один инструмент, который позволяет визуально создавать компоненты React. Это означает, что вы можете быстро проектировать и создавать готовые к производству компоненты без написания кода.
Он привносит в процесс проектирования концепции, основанные на коде, такие как свойства, состояние и взаимодействия, чтобы гарантировать, что код может быть сгенерирован.
И, как и другие инструменты в списке, Visly призван помочь вашей команде управлять системой дизайна. Вы можете управлять токенами приложений, компонентами и автоматически созданным руководством по стилю в одном месте. Или вы можете начать добавлять компоненты, созданные Visly, в любую существующую кодовую базу и систему пользовательского интерфейса.
13. Webflow
Webflow - это инструмент A + для визуального создания веб-сайтов, абстрагирующий все CSS и манипуляции со стилями в мощный визуальный редактор. Поддерживаются все преимущества CSS, такие как CSS Grid и Flexbox, так что опыт похож на написание CSS, но без написания CSS, что удивительно, если вы освоите немного сложный редактор.
Это помещает Webflow в список, несмотря на то, что на самом деле это не инструмент для совместной работы, и он не подходит для полноценных продуктов со сложными инженерными системами. Ознакомьтесь с этими 7 причинами, по которым вам следует рассматривать Webflow как фронтенд-разработчиком, и этой статьей о том, как Webflow может помочь преодолеть разрыв между дизайном и разработкой. Классный инструмент.
14. StoryBook и Styleguidist
StoryBook и StyleGuidist - это два инструмента OSS, которые помогают разрабатывать компоненты изолированно, визуально визуализируя и документируя их.
StoryBook - это среда разработки компонентов пользовательского интерфейса. Это позволяет вам просматривать библиотеку компонентов, просматривать различные состояния компонентов и интерактивно разрабатывать компоненты. Надстройки упрощают интеграцию с различными инструментами и рабочими процессами. Разработчики могут использовать визуальные документы Storybook, чтобы позволить дизайнерам и другим людям просматривать примеры компонентов.
StyleGuidist - это среда разработки изолированных компонентов React с живым руководством по стилю. Он предоставляет горячую перезагрузку сервера разработки и живое руководство по стилю, в котором перечислены компоненты propTypes и показаны редактируемые примеры использования на основе файлов .md. Он поддерживает ES6, Flow и TypeScript и работает с приложением Create React из коробки. Автоматически сгенерированные документы по использованию могут помочь Styleguidist функционировать как портал документации для различных компонентов вашей команды.
- Также ознакомьтесь с UI Zoo Ноамом Эльбоймом.
15. Codesandbox, Stackblitz и Codepen
Компонентные площадки - это отличный способ поиграть с компонентами и узнать, как они работают. Когда вы можете объединить их как часть своей документации, игровые площадки помогут вам быстро узнать, как работает код, и посмотреть, как он выглядит.
Codesandbox - это онлайн-редактор для быстрого создания небольших проектов, таких как компоненты, и игры с ними. Создав что-то интересное, вы можете показать это другим, просто поделившись URL-адресом. CodeSandbox имеет предварительный просмотр в реальном времени, чтобы показать результат кода, пока вы печатаете, и имеет встроенные расширения для интеграции в ваши различные инструменты и рабочий процесс разработки.
Stackblitz - это онлайн-среда разработки для веб-приложений на базе Visual Studio Code. Как и Codesnadbox, StackBlitz - это онлайн-среда IDE, в которой вы можете создавать проекты Angular и React, которыми можно делиться через URL-ссылку. Как и Codesandbox, он автоматически заботится об установке зависимостей, компиляции, объединении и горячей перезагрузке по мере ввода.
Codepen - широко популярная среда онлайн-разработки для FrontEnd-разработчиков, позволяющая визуально воспроизводить и обмениваться фрагментами кода. Вот полезная Шпаргалка по настройке игровой площадки React на Codepen.
16. Sketch2React
Sketch2React - это очень крутой инструмент, который предлагает всем великолепное обещание: просто перетащите файлы Sketch2React Sketch в наш новый загрузчик, и он мгновенно преобразует их в код - React и HTML! Просто так.
Хотя эта идея выводит прототипирование React на новый уровень, очевидно, что волшебное создание логических кодовых выражений из визуальных элементов далеко от идеала. Тем не менее, вы не можете не восхищаться этими замечательными ребятами за то, что они взяли на себя эту задачу и решительно преодолели разрыв между дизайнером и разработчиком.
Так что похвалы и пальцы скрещены за этот инструмент, и попробуйте его сами!
17. Связать
Relate - новая интересная идея от Идена Видала, на самом деле не инструмент для совместной работы, а единый инструмент, который стремится делать и то, и другое - код и дизайн.
Это очень смелое заявление, и потребуется много инноваций, чтобы создать инструмент дизайна или визуальный инструмент, который выводит код, принятый разработчиками. Тем не менее, такую вдохновляющую попытку трудно не заметить, и ее очень интересно исследовать.
В процессе проектирования Relate стремится выводить разборчивый презентационный код, который вы можете синхронизировать с базой кода и делиться с производственной средой. Теоретически это означает, что между дизайнерами и разработчиками нет никакой передачи.
Хотя продукт совсем недавно вышел из закрытого бета-тестирования, его обязательно стоит проверить и внимательно следить. Это шаг в правильном направлении.
