Рендеринг компонентов React в Sketch
Если вам нравится React и вы испытываете некоторую страсть к дизайну и системам дизайна, вам понравится то, что Джон Голд Airbnb сделал со своей системой дизайна React и интегрировал ее со Sketch.
Эффект единорога
Это прекрасный пример того, как технология и дизайн сливаются в единую дизайн-систему многократного использования, используемую вашей производственной командой.
Управление дизайн-системами - довольно сложная работа, временами утомляющая и определенно требующая много времени. Вы обнаружите, что дизайнеры и разработчики часто совершенно по-разному представляют, как ваши компоненты должны работать, вести себя или даже выглядеть.
Вы часто будете видеть «версии» вашего красиво оформленного компонента, разбросанные по сайту.
Существует потребность в постоянном сотрудничестве, которое, если его не усовершенствовать, может превратить вашу дизайнерскую систему в бомбу с тикающими ошибками, проблемами удобства использования и доступности, не говоря уже о часах и часах сессий тестирования приемлемости пользователей и разочаровывающем отсутствии согласованности между проектами. и готовая работа.
Возможность проектирования с использованием компонентов React устраняет все эти разочарования и обеспечивает беспроблемный дизайн и взаимодействие пользователей с вашим продуктом. Когда ваши производственные компоненты меняются, ваш дизайн автоматически обновляется, а ваши реагирующие компоненты становятся единственным источником правды.
Таким образом, вы всегда разрабатываете, используя самые современные и актуальные компоненты.
Использование символов в эскизе - это замечательно и работает очень похожим образом, позволяя легко обновлять глобальные версии для всех ваших проектов, но это работает только в одном направлении и не приносит реальной пользы разработчикам. Конечно, существует ряд плагинов, которые помогают разработчикам извлекать некоторые значения из ваших дизайнов, такие как размер шрифта, цвета, границы и т. Д., Но они не идеальны и часто содержат ошибки.
Большая картинка
Рендеринг везде…
Для Джона Sketch - лишь одна из многих возможных целей рендеринга. По словам Джона, мы должны иметь возможность рендерить компоненты где угодно.
Мы не просто визуализируем объекты в Sketch. Это похоже на то, что мы можем использовать кроссплатформенные компоненты и отображать их повсюду, а также создавать для них все, что захотим.
Не знаю, видели ли вы проект, над которым мы недавно работали. Он требует рисованного дизайна и использования ИИ для его визуализации.
Но достаточно от меня, послушайте это от Джона:
Запустите его на своей машине
- Просто откройте свой Sketch, больше ничего делать не нужно ...
- Выполните несколько команд со своего терминала:
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
и поиграйте с некоторыми значениями.
А теперь пора заварить чай и закодировать до глубокой ночи ...
Спасибо за прочтение!