Отстаивать свою дизайн-систему сложно. Глядя на дизайн, узнают ли все в вашей команде основные строительные блоки? Смогут ли разработчики определить, какие компоненты в кодовой базе они представляют? Размещение вашей команды на одной странице в вашей дизайн-системе - это не спринт, это марафон.

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

Мы невероятно рады объявить о бета-тестировании Connected Components, которое позволит разработчикам получать доступ к компонентам в их кодовой базе прямо в дизайне - со ссылками на Storybook, GitHub и любой другой источник документации в зависимости от вашего рабочего процесса.

☝ Обновление за февраль 2020 г .: с Zeplin 3.0 добавлены подключенные компоненты, узнать больше.

Добавляйте контекст разработки в дизайн

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

☝️ Прочтите нашу запись в блоге о Global Styleguides, чтобы начать создавать свои руководства по стилям в Zeplin уже сегодня.

С введением Connected Components вы, как разработчик, теперь сможете связывать компоненты в своей кодовой базе с их конструктивными аналогами в Zeplin.

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

Zeplin автоматически собирает документацию по вашим компонентам на основе платформы / фреймворка, с которыми вы работаете: JSDoc и PropTypes для примера React выше.

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

Интеграции

Сборник рассказов

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

Storybook - популярный инструмент с открытым исходным кодом для изолированной разработки компонентов пользовательского интерфейса. Если вы используете Storybook вместе с Zeplin, теперь вы сможете быстро переходить к историям компонента прямо из проектов.

В настоящее время мы тесно сотрудничаем с замечательными ребятами из Chroma, поддерживающими Storybook, над развитием интеграции. Следуя Connected Components, мы будем работать над дополнением Zeplin для Storybook, добавляя проекты компонентов Zeplin в Storybook.

React Styleguidist

Подобно Storybook, React Styleguidist - хорошо известный инструмент для разработки и документирования компонентов пользовательского интерфейса React. Если этот параметр включен, теперь вы можете получать доступ к своим компонентам в React Styleguidist прямо из дизайнов в Zeplin.

Иды

Иногда вам может потребоваться просмотреть исходный код компонента перед его использованием. Если репозиторий доступен локально, теперь вы можете открыть исходный код компонента в вашей любимой среде IDE или текстовом редакторе прямо из проектов в Zeplin.

Во время бета-тестирования Zeplin будет поддерживать VS Code, Xcode, Android Studio, Sublime Text, Atom и многое другое - сообщите нам, если ваш любимый редактор отсутствует.

GitHub

Подобно открытию исходного кода компонента в текстовом редакторе, если вы используете GitHub, вам будет представлена ​​кнопка «Открыть в GitHub» для ваших компонентов в Zeplin. Это должно пригодиться, особенно если на вашем устройстве нет репозитория.

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

Настройка

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

Если вы используете Visual Studio Code, вы также сможете использовать расширение Zeplin Visual Studio Code, которое значительно упростит создание файла конфигурации путем извлечения информации непосредственно из Zeplin.

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

Связывание компонентов является гибким по дизайну. Можно создавать ссылки типа "один ко многим", поскольку несколько компонентов дизайна могут быть представлены одним компонентом в коде. Связывание компонентов также не ограничивается веб-разработкой - компоненты на любой платформе, например iOS или Android, можно связать с компонентами в Zeplin.

Присоединяйтесь к частной бета-версии

Мы начнем приглашать определенное количество пользователей на бета-тестирование через 3-4 недели. Наша цель - найти широкую группу пользователей бета-версии для различных сценариев использования. Подайте заявку, чтобы одним из первых опробовать Connected Components:

Подать заявку на участие в бета-тестировании подключенных компонентов

☝ Обновление за февраль 2020 г .: Zeplin 3.0 теперь поддерживает подключенные компоненты, узнать больше.

Любой желающий может подать заявку на участие в бета-тестировании, но если вы еще этого не сделали, начните сегодня, создав руководства по стилю и экспортируя свои компоненты в Zeplin.

Нам не терпится поделиться более подробной информацией по мере приближения бета-тестирования. Не стесняйтесь обращаться к нам по адресу [email protected] с любыми вопросами или предложениями - с нетерпением ждем вашего мнения.

Ваше здоровье! 👋

Zeplin - это связанное пространство для продуктовых команд, где они могут обмениваться проектами, создавать спецификации, ресурсы и фрагменты кода, адаптированные для iOS, Android и Интернета.