Рендеринг компонентов React в Sketch

Если вам нравится React и вы испытываете некоторую страсть к дизайну и системам дизайна, вам понравится то, что Джон Голд Airbnb сделал со своей системой дизайна React и интегрировал ее со Sketch.

Эффект единорога

Это прекрасный пример того, как технология и дизайн сливаются в единую дизайн-систему многократного использования, используемую вашей производственной командой.

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

Вы часто будете видеть «версии» вашего красиво оформленного компонента, разбросанные по сайту.

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

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

Таким образом, вы всегда разрабатываете, используя самые современные и актуальные компоненты.

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

Большая картинка

Рендеринг везде…

Для Джона Sketch - лишь одна из многих возможных целей рендеринга. По словам Джона, мы должны иметь возможность рендерить компоненты где угодно.

Мы не просто визуализируем объекты в Sketch. Это похоже на то, что мы можем использовать кроссплатформенные компоненты и отображать их повсюду, а также создавать для них все, что захотим.

Не знаю, видели ли вы проект, над которым мы недавно работали. Он требует рисованного дизайна и использования ИИ для его визуализации.

Но достаточно от меня, послушайте это от Джона:

Запустите его на своей машине

  1. Просто откройте свой Sketch, больше ничего делать не нужно ...
  2. Выполните несколько команд со своего терминала:
git clone https://github.com/airbnb/react-sketchapp.gi
cd react-sketchapp/examples/basic-setup && npm install

Наконец-то:

npm run render

Это должно открыть компоненты в вашем Sketch, поэтому вернитесь в Sketch, и вы должны увидеть следующее:

3. Теперь откройте клонированную папку «response-sketchapp» в предпочитаемой IDE:

4. Чтобы иметь возможность изменить компонент Swatches на изображении выше, перейдите к examples/basic-setup/src/my-command.js и поиграйте с некоторыми значениями.

А теперь пора заварить чай и закодировать до глубокой ночи ...

Спасибо за прочтение!