Скетч, чтобы реагировать?

Я работал с этой концепцией (перевод Sketch в React) и не нашел эффективного / настраиваемого решения, и я не думаю, что в ближайшее время будет или, по крайней мере, такое, которое использовало бы лучшие части Sketch. с лучшими частями React.

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

Неудачное обстоятельство 1:
Эти наборы символов не преобразуются в наборы переменных (CSS или SCSS и т. д.) при экспорте в компонент React — все значения жестко закодированы, а переменные отсутствуют. . Возможно, вы сможете создать очень индивидуальную реализацию для этого, но она наверняка сломается, как только вы перенастроите свой процесс сборки или выбор технического стека.

Неблагоприятное обстоятельство 2:
Символы эскиза или элементы пользовательского интерфейса не управляют своим собственным состоянием, вы просто заменяете их другим символом/элементом. Слишком много всего требуется, чтобы перевести несколько элементов эскиза в логику компонента React, который управляет своим собственным состоянием. Особенно, если принять во внимание сложность современных потоков сборки и технологических стеков.

Как моя команда справилась с этим:
Общие строительные блоки и стандарты, которые устраняют разрыв между дизайном и разработкой, могут ДЕЙСТВИТЕЛЬНО помочь. (Примером может служить набор переменных цвета CSS, который сопоставляется с набором цветовых символов Sketch). Части системы атомарного уровня могут быть относительно легко переведены между Sketch и CSS — тогда все, что вам нужно сделать, это собрать кусочки головоломки вместе. Соедините это с хорошим уровнем коммуникации между дизайнерами и разработчиками, и ваша команда будет далеко впереди остальных.

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

Во-первых, приложение react-sketchapp — это направление «реакция на эскиз», а не эскиз на реакцию.

Чтобы скетч реагировал на проблему, самое сложное, что мы нашли, это

• разница в древовидной структуре кода скетча и реакции

Дизайнер сосредотачивается на визуальных элементах и ​​не заботится о структуре элемента, но инженеры ДЕЙСТВИТЕЛЬНО заботятся о структуре DOM, потому что она разработана для динамического макета и изменения размера. Поэтому наш способ — использовать какой-то умный алгоритм (или ИИ в будущем). с небольшим вмешательством человека. Иногда действительно трудно решить, потому что могут быть разные правильные ответы с точки зрения макета.

• описание или настройки макета изменения размера

Sketch (инструмент дизайна) не будет иметь никакой концепции и намека на макет (особенно на отношения между детьми). Поэтому иногда от инженеров требуется обсудить с дизайнером точное поведение при изменении размера компонента. Поэтому требуется способ преобразования структуры в какие-то настройки макета. Попробовав, мы предложили CSS flex и grid. Потому что flex и grid обеспечивают большую гибкость для позиционирования и могут быть широко использованы и признаны фронтенд-инженерами, а также с высокой совместимостью с браузерами.

Эти две описанные выше проблемы трудно автоматизировать на 100%, но после нескольких итераций мы думаем, что их можно сделать на 70% автоматизированными с помощью некоторых алгоритмов и небольшого вмешательства человека. Сгенерированный код будет полезен при правильной структуре макета. После этого его можно улучшить до лучшего кода, применив некоторую оптимизацию кода (общий стиль, лучшее наименование, упрощенный css/код и т. д.), который легче разрешить.