Могут ли дизайнеры и инженеры использовать единый источник правды? Часть 2.

Теперь, когда вы понимаете постоянную борьбу между дизайнерами и разработчиками (прочитайте первую часть этой статьи здесь), давайте поговорим о том, как это исправить.

Проектирование систем и единый источник истины (часть 2 из 2)

Последние 10 лет принесли много зрелости в мир веб-технологий. CSS стал чрезвычайно мощным и вырос в инструментах, которые обеспечили предсказуемые и устойчивые рабочие процессы (от препроцессоров до модулей и шаблонов стиля). JavaScript стал стандартом разработки для различных платформ. В него добавлены функции, повышающие удобочитаемость (карты, функции стрелок…) и модульность кода (модули ES6). Он даже получил удивительные инструменты, которые вывели экосистему на новый уровень (NPM, Webpack, React.js).

Оба, прогресс в CSS и JavaScript, привели к быстро растущей популярности модульной архитектуры веб-приложений. Как следствие, это также привело к резкой популярности систем проектирования. Потребность в системах проектирования возникла из-за хаоса, дорогостоящего обслуживания и непоследовательного опыта ранней сети. Быстрый рост популярности дизайнерских систем стал возможен благодаря прогрессу веб-технологий.

Проектирование систем дало много обещаний:

  • Объединение источников истины
  • Предсказуемость процесса разработки продукта
  • Повышение качества пользовательского опыта
  • Снижение стоимости обслуживания

Как и революция рабочего процесса, начатая производственной системой Toyota, системы проектирования предложили облегчение усилий по разработке современных продуктов благодаря систематизации процессов.

Пока еще рано судить об общем эффекте бума системы проектирования. Тем не менее, становится все более очевидным, что нынешнее поколение систем проектирования отлично подходит для систематизации внешнего проектирования и лишь частично успешно устраняет разрыв между дизайном и проектированием.

Возьмем, к примеру, жетоны дизайна, которые являются фундаментальной частью многих замечательных систем дизайна. Их можно использовать для создания сложных наборов таблиц стилей и цветовых палитр для инструментов дизайна, но интерактивные компоненты, необходимые для любой системы дизайна, останутся отключенными от инструментов дизайна.

Немногие попытки восполнить этот разрыв не получили ни массовой популярности, ни значительного влияния. Лучший из них, HTML Sketchapp, предлагает импорт элементов HTML в Sketch. К сожалению, все состояния и взаимодействия теряются в пути. Sketch, в конечном итоге инструмент векторной иллюстрации, не предлагает состояния или взаимодействия на уровне компонентов.

Не обвиняйте системы проектирования в этом недостатке. Виноваты инструменты дизайна. Пока инструменты проектирования применяют векторный формат для дизайнеров пользовательского интерфейса, реализация единого источника правды останется невозможной.

Вопрос об одном источнике истины звучит теоретически, но подумайте о практических последствиях.

Что если дизайнеры могут использовать те же компоненты, которые используются инженерами, и все они хранятся в общей системе проектирования (с точной документацией и тестами)? Многие из разочаровывающих и дорогих недоразумений между дизайнерами и инженерами прекратились бы.

Пересмотрите историю двух противоречивых сборщиков дат из первой части этой статьи. Если у разработчика был доступ к интерактивному компоненту, синхронизированному с производственной базой данных, он мог бы принять обоснованное проектное решение об опыте выбора данных и повторного использования существующего компонента. Весь конфликт исчезнет, ​​что приведет к более быстрому процессу проектирования, ускоренному процессу разработки и менее разочаровывающему опыту для всей команды.

Полагаться на ручную перерисовку компонентов с производственным кодированием в инструменте векторной иллюстрации не только дорого, но и подвержено критическим ошибкам.

В идеальной реализации системы проектирования дизайнеры и инженеры используют единый источник правды, чтобы охватить все аспекты рабочего процесса. Как только дизайнеры откажутся от своих старых инструментов векторных иллюстраций (неизбежно потеряв все проблемы, связанные с этой старой парадигмой), этот уровень интеграции и зрелости процесса станет возможным.

Унифицированный дизайн - Инженерное сотрудничество с UXPin Merge

В UXPin мы провели последние 8 лет, создавая совместный редактор дизайна на основе кода. Благодаря точной визуализации, компонентам с состоянием, расширенным взаимодействиям на уровне компонентов (условные взаимодействия, переменные, интеграция с API…) нам удалось избежать многих недостатков инструментов векторных иллюстраций, таких как Sketch, Figma или XD. Вместо того чтобы полагаться на сотни статичных артбордов, UXPin позволяет дизайнерам создавать полностью интерактивные и повторно используемые компоненты с состоянием. Разработка форм с полной проверкой становится легкой даже для дизайнеров, которые не пишут код.

Всякий раз, когда дизайнер создает что-либо в UXPin, наш движок рендеринга создает HTML CSS и JavaScript (для всех сложных взаимодействий). Таким образом, дизайнеры и инженеры могут быть уверены, что будет 100% соответствие между проектами, созданными в UXPin, и конечной производственной реализацией. Недоразумения относительно анимации или рендеринга шрифтов, упомянутые в первой статье, не существуют во вселенной UXPin.

Мы не решили все проблемы сразу. Даже наш редактор на основе кода, который, судя по всему, является самым сильным на широком рынке средств проектирования, столкнулся с проблемой объединения источников истины. Наш инструмент помог дизайнерам избежать многих недоразумений, но у нас не было способа создать прочную связь с закодированными компонентами, существующими в системе проектирования. У нас не было этого ... до сих пор.

Почти 2 года назад мы начали работать над созданием прочной связи между дизайном и проектированием. Изучив несколько идей, мы решили использовать следующий рабочий процесс:

  • UXPin подключается к Git-репозиторию (инструмент командной строки устанавливается как зависимость уровня проекта)
  • UXPin изучает код компонентов, хранящихся в хранилище, и сериализует его содержимое
  • UXPin запускает процесс сборки и доставляет рабочий код в редактор дизайна UXPin, где все компоненты идентичны производственной среде, полностью интерактивны и доступны для дизайнеров (даже если они не знают, как кодировать)
  • UXPin позволяет подключаться к серверу непрерывной интеграции, чтобы включить автоматическую синхронизацию между Git-репозиторием и нашим редактором проекта (каждое изменение в рабочем коде автоматически отражается в компонентах в редакторе дизайна UXPin)
  • UXPin показывает точные спецификации для всех дизайнерских проектов, которые будут показывать информативные фрагменты кода, чтобы рассказать разработчикам, как реализовать данный дизайн

Этот подход был чрезвычайно амбициозным и гораздо более широким по своему охвату, чем любое конкурентное решение. С самого начала мы хотели избежать:

  • Создание функции трюка, способной привлечь некоторое внимание на рынке, но не решающей ключевые проблемы рабочего процесса проектирования и проектирования
  • Заставить дизайнеров учиться кодировать (что характеризует подход, принятый Фреймером)
  • Вынуждая команды, внедряющие наше решение для рабочих процессов, создавать код только для UXPin (вместо этого мы верили в подход «включай и работай», где UXPin может использовать немодифицированный производственный код).

Это заняло у нас более 18 месяцев, но я рад сообщить, что UXPin Merge только что предоставила решение, которое действительно объединяет дизайн и разработку в единый непрерывный рабочий процесс.

Merge легко подключается к любому репозиторию GIT, импортирует компоненты React.js (поддержка большего количества библиотек и фреймворков в будущем!) В редактор дизайна UXPin и поддерживает синхронизацию всех версий благодаря интеграции CI. Все, что существует в коде, существует в UXPin, предоставляя дизайнерам доступ к реальным кодированным компонентам, не заставляя их изучать кодирование.

Благодаря интеграции CI UXPin Merge заботится о синхронизации инструмента разработки кода.

С помощью UXPin Merge дизайнеры и инженеры используют единый источник правды и, наконец, могут работать вместе без ненужных недоразумений и разочарований. Угадай, что? Возможна идеальная реализация системы дизайна.

Сложные компоненты, такие как указатели даты, сразу же доступны для дизайнеров.

UXPin Merge в настоящее время находится в закрытой бета-версии. Подпишитесь на ранний доступ ниже. Наши клиенты и самые страстные сторонники единого рабочего процесса (если это вы, дайте нам знать ваши мысли в Twitter!) Будут предложены доступ в первую очередь. Увидимся на другой стороне.

Получите ранний доступ к слиянию UXPin