Рабочий процесс между дизайнерами и разработчиками сломлен для компонентов пользовательского интерфейса? И будет ли это лучше в 2020 году?
Итак, какая часть вашей реальной системы проектирования?
Вот вопрос … ” Какая у вас система дизайна Действительно ? »
Спросите дизайнера , и они скажут, что это некоторые изображения и руководящие принципы. Помимо компонентов, он будет включать в себя руководящие принципы для шрифтов, размеров, маржи, позиций и других важных аспектов визуального опыта, который вы предоставляете людям.
Как разработчик и они скажут, что это библиотека на GitHub, написанная в React, Vue, Angular или просто JavaScript. И, может быть, упомяните Зеплин тоже.
Это настоящая проблема, так как разрыв между тем, на что вы представляете и надеетесь, и тем, что вы в конечном итоге имеете пару лет спустя, растет с каждым днем. Почему? Потому что некоторые вещи теряются в переводе между визуальными эффектами и кодом, и потому что со временем реальность заставляет разработчиков менять вещи. Это просто жизнь.
Итак, давайте уйдем на секунду от Sketch-> Zeplin-> github-> Apps Рабочий процесс, который мы знаем сегодня, и попытаться изучить, как может выглядеть будущее. Давайте также посетим некоторые инструменты, которые могут помочь в консолидации этого рабочего процесса сегодня.
Этот пост был написан на основе опыта более 30 команд, создающих систему проектирования компонентов на разных этапах процесса. Пожалуйста, не стесняйтесь комментировать ниже любые идеи, понимание или предложения. Это поможет другим людям учиться. Наслаждаться:)
Какая у вас система дизайна, на самом деле?
** Airbnb’s * компонент Система дизайна *
Единственная настоящая правда заключается в следующем:
Ваша настоящая система дизайна – это **, что получают ваши пользователи. * *Ничего более или менее.
Вы можете иметь самую удивительную группу компонентов на фигме или эскизе, а также лучшие руководящие принципы для потрясающей системы дизайна, когда -либо написанных. Если это не то, что используют ваши разработчики, а не то, что получают ваши пользователи, это не ваша система дизайна.
Вы можете иметь лучшую библиотеку компонентов пользовательского интерфейса, даже написанную в React, Vue или Angular. Если разработчики, создающие ваши приложения, просто копируют код вставки или изменяют вещи из вашей библиотеки, это не ваша система дизайна.
Вот почему практическая система проектирования должна приспособить разрыв между изображениями и кодом, а также разрыв между планами и эволюцией с течением времени. Используя правильное мышление и инструмент, вы можете найти практическое решение сегодня. Заглядывая в будущее, этот инструмент и рабочий процесс должны действительно быть консолидированным . Мы рассмотрим такие инструменты, как Бит , Framer и другие, которые могут сделать это.
Пробелы между дизайном и библиотекой пользовательского интерфейса
Многие компании, такие как Uber Design и Airbnbeng строят систему проектирования компонентов пользовательского интерфейса (см. Uber’s и Airbnb’s Визуальные языки).
Чтобы перевести эти системы в код, используемые в их приложениях, они реализуют библиотеки компонентов пользовательского интерфейса (см. Библиотеки по HP , Atlassian , Pinterest и другие). Эти библиотеки, в свою очередь, установлены и используются в разных приложениях.
Пробелы в строительстве библиотеки
Но когда разработчик должен перевести изображения в код, все может оказаться немного иначе, чем ожидалось. Инструменты, как Zeplin может сделать это проще, но изменения часто неизбежны. Например, относительное против абсолютного позиционирования является общей проблемой. Как и шрифты и использование шрифтов в ваших компонентах.
Когда дизайн должен вписаться в реальный применимый компонент, который будет использоваться в вашем приложении в реальном мире, разработчик обязательно должен сделать некоторые варианты. Даже во время консультации с дизайнером, различия связаны с формированием.
Пробелы, развивающиеся с течением времени
Со временем библиотека должна использоваться в 2 или 20 или 200 приложениях для 2 или 20 или 200 разработчиков. Некоторым нужно будет изменить вещи, чтобы библиотека была применима в проектах, над которыми они работают. В противном случае они просто не будут использовать его ( бит может очень помочь смягчить эту боль, мы доберемся туда позже).
Некоторые из этих изменений могут вернуться в библиотеку, изменив код, чтобы сделать его более применимым в приложениях, которые вы создаете. Затем разрыв между дизайном и кодом расширяется еще дальше.
Пробелы между библиотекой пользовательского интерфейса и разработчиками приложений
Компоненты пользовательского интерфейса также функционируют как компоненты UX, объединяя мощность для создания как функциональной, так и визуальной согласованности для ваших пользователей.
Система проектирования на основе компонентов может предоставить вашим приложениям как визуальную, так и функциональную согласованность, помогая заставить ваших пользователей чувствовать себя как дома и легко ориентироваться в их пути для завершения желаемого взаимодействия с вашим продуктом.
Иногда разработчик, создающий приложение, не может использовать библиотеку по разным причинам. Например, стиль или маржу компонента не подходит. Или, может быть, библиотека добавляет слишком много веса к приложению, которое должно быть легким и быстрым.
Когда разработчику нужно что-то изменить в библиотеке, им нужно сделать запрос, который может или не может быть принят в неизвестную дату. Это серьезный и очень распространенный блокатор для принятия таких библиотек.
Разработчики приложений не всегда будут использовать библиотеку
Тогда действительно происходит то, что некоторые разработчики не будут использовать библиотеку и вместо этого создают свои собственные компоненты. Или они могут скопировать код из библиотеки в свой собственный проект и внести некоторые изменения в таблице.
Вы не можете действительно обвинить разработчиков, так как им нужно выполнить работу. Вы не можете обеспечить соблюдение своей системы дизайна, так как она действительно должна быть практичной для принятия. Вы должны признать, что будут необходимы изменения, и предпочесть регулирование, прозрачность и сотрудничество в отношении правоприменения. Всегда.
Используя Кусочек Это становится намного проще, и любой разработчик может предложить обновления для компонентов прямо из любого проекта, который они строят, поэтому вы можете сотрудничать в изменениях и регулировать, чтобы отслеживать изменения, а не игнорировать их.
Консолидация дизайна и разработки?
Давайте объединим людей; Источник изображения
Как и во многих других вещах в жизни, вам нужно объединить людей для достижения больших вещей. В этом случае вам необходимо создать общие основания для 3 разных аудитории, чтобы создать и итерацию над вашими компонентами вместе:
Дизайнеры пользовательского интерфейса
Разработчики библиотеки библиотеки пользовательского интерфейса
Разработчики приложений (используя библиотеку)
Только если вы создаете консолидированное пространство для всех 3, чтобы сотрудничать, вы можете (надеяться) убедиться, что конечный опыт ваших пользователей согласуется с руководящими принципами проектирования и визуальными активами, установленными людьми, которые планируют их.
И вот мы вступаем в реальную проблему:
Дизайнеры не используют GitHub и не читают код в React/Vue/Angular. Разработчики библиотеки должны перевести, и вы никогда не сможете ожидать всего. Разработчики приложений просто хотят найти и использовать компоненты для создания приложений.
Ни эскиз, ни Zeplin, ни github не могут удовлетворить все эти потребности, и пока он не решит, нам придется испытать несколько сломанный рабочий процесс. Но есть ли сегодня инструменты, которые уже могут сделать это? Давай проверим.
Инструменты компонентов пользовательского интерфейса завтрашнего дня
Давайте быстро рассмотрим пару инструментов, которые, с нетерпением жду, могут помочь преодолеть разрыв с конца разработчика и с конца дизайнера.
Bit and bit.dev (для разработчиков)
Бит-это инструмент с открытым исходным кодом Для превращения компонентов в общие строительные блоки. Используя бит и bit.dev Платформа компонентов, разработчики мгновенно изолируют и делятся компонентами из своих библиотек и проектов в «сборную плейлиста», которая делает их визуально доступными для обнаружения и использования в любом месте.
Из этой коллекции могут быть установлены компоненты (NPM/пряжа) и даже разработать (бит -импорт) в разных проектах, поэтому разработчики и команды разработчиков могут легко делиться и сотрудничать в компонентах пользовательского интерфейса для создания приложений.
Через bit.dev фактические кодовые компоненты (React, Vue, Angular) отображаются и визуализируются так, что как разработчики, так и дизайнеры могут точно узнать, как их компоненты выглядят, ведут себя и чувствуют себя похожими на пользователей. Они могут даже играть с компонентами в любой момент, на редактируемой игровой площадке.
Когда разработчики вносят изменения и обновляют версию для определенного компонента, дизайнеры могут мгновенно увидеть новую версию и отслеживать изменения, чтобы убедиться, что фактические компоненты соответствуют их системе проектирования.
Это создает баланс, когда разработчики имеют возможность вносить изменения в компонент, когда они должны, и предлагают обновления из своих собственных проектов, и дизайнеры могут сотрудничать для пересмотра изменений с течением времени.
Framer and Framer (для дизайнеров)
Framerx является быстрым инструментом прототипирования, который позволяет дизайнерам создавать реалистичные компоненты в React и разработать расширенные взаимодействия для своих приложений.
Встроенное использование компонентов React позволяет дизайнерам приблизиться к прототипированию с высокой точки зрения. В большинстве инструментов дизайна дизайн в основном визуально – изображение кнопки, слайдера или переключения. Команда кадров Редактор означает, что дизайн теперь можно сделать более интерактивным. Сейчас возможны взаимодействия, такие как прокрутка, щелчок, перемещение и обработка, благодаря компонентам React.
Под капотом Framer X строится на вершине Framer.js, библиотеки с открытым исходным кодом, которая выполняет работу по преобразованию кода React в интерактивные конструкции. Компоненты React, которые могут создавать эти дизайнерские взаимодействия, могут быть закодированы с нуля (вами) или загружены из магазина дизайна In-App.
Также проверьте: ** Адрон **
Framerx и bit.dev вместе?
По Интеграция Framer и Bit Вы можете создать рабочий процесс, в котором вы используете Framerx для разработки компонентов React и поделиться ими на bit.dev. Вот Пример базового компонента кнопки React Разработанный с Framer и общий до bit.dev, так что теперь его можно легко обнаружить и использовать в разных приложениях.
В ближайшем будущем объединение этих двух силовых инструментов может преодолеть разрыв между проектированием и разработкой компонентов пользовательского интерфейса для консолидации рабочего процесса между дизайнерами и разработчиками. Круто, верно?
Вывод
Глядя в будущее, мы можем надеяться, что рабочий процесс проектирования и строительства компонентов будет консолидирован для дизайнеров и разработчиков.
Чем меньше места мы оставляем на ошибках в нашем наборе инструментов, тем лучше, чем мы строим для людей, взаимодействующих с нашими продуктами и приложениями. Это сотрудничество должно быть объединено с самого начала и со временем поддерживаться, поскольку и наша система дизайна, и наши компоненты растут и развиваются.
Надеюсь, мы увидим это раньше, чем позже. До тех пор, пожалуйста, не стесняйтесь поделиться своими собственными взглядами на то, как справиться с этим сложным рабочим процессом и как, по вашему мнению, это можно сделать лучше. Спасибо за чтение, и надеюсь, что вам понравилось:)
Оригинал: “https://dev.to/giteden/ui-design-system-and-component-library-where-things-break-4n1d”