Эскиз, чтобы реагировать?
Мы пытаемся разработать рабочий процесс, используя Reactact-sketchapp Sketch, чтобы разработчик в Sketch мог создавать компоненты React, а код (по крайней мере для CSS) генерировался и настраивался автоматически. Там, кажется, не много документации и / или поддержки.
Мы понимаем основы разработки компонента в React to Sketch, но кто-нибудь понял рабочий процесс для обратного? Любые дополнительные мысли или документация, которые могут помочь?
Мы подумываем о том, чтобы отказаться от Reaction-sketchapp и перейти на более эффективный рабочий процесс.
1 ответ
Я работал с этой концепцией (перевод Sketch to React) и не нашел эффективного / настраиваемого решения, и я не думаю, что будет какое-то время в ближайшее время или, по крайней мере, одно, которое использовало бы лучшие части Sketch. с лучшими частями React.
В Sketch есть удивительная система символов, которая позволяет повторно использовать маркеры дизайна (например, глобальную цветовую палитру или типографские стили) или создавать экземпляры из центрального местоположения - источника правды.
Несчастное обстоятельство 1:
Эти наборы символов не преобразуются в наборы переменных (CSS или SCSS и т. Д.) При экспорте в компонент React - все значения жестко закодированы, а переменные отсутствуют. Возможно, вам удастся создать очень персонализированную реализацию для этого, но она наверняка сломает секунду, когда вы перенастроите свой процесс сборки или выбор технических стеков.
Несчастное обстоятельство 2:
Символы эскиза или элементы пользовательского интерфейса не управляют своим собственным состоянием, вы просто заменяете их другим символом / элементом. Слишком много нужно, чтобы перевести несколько элементов эскиза в логику компонента React, который управляет собственным состоянием. Особенно, если принять во внимание сложность современных потоков сборки и технологических стеков.
Как моя команда работала над этим:
Общие строительные блоки и стандарты, которые перекрывают разрыв между дизайном и разработкой, могут ДЕЙСТВИТЕЛЬНО помочь. (Примером является набор цветовых переменных CSS, который отображается на набор цветовых символов Sketch). Части системы на атомарном уровне можно относительно легко перевести между Sketch и CSS - тогда все, что вам нужно сделать, это собрать кусочки головоломки вместе. Соедините это с хорошим уровнем коммуникации между дизайнерами и разработчиками, и ваша команда далеко впереди.
Надеюсь это поможет!
Мы потратили много времени на решение этой проблемы, поэтому можем поделиться некоторым опытом, полученным во время разработки продукта.
Во-первых, react-sketchapp - это направление "реагировать на эскиз", а не эскиз, чтобы реагировать.
Чтобы скетч мог реагировать на проблему, мы обнаружили, что
- разница в древовидной структуре кода скетча и кода реакции
Дизайнер фокусируется на визуальном оформлении и не заботится о структуре элементов, но инженеры ДОЛЖНЫ заботиться о структуре DOM, потому что она разработана для динамического макета и изменяемого размера. Таким образом, наш способ - использовать какой-нибудь умный алгоритм (или ИИ в будущем) с небольшим вмешательством человека. Иногда действительно сложно решить, потому что правильные ответы могут быть разными с точки зрения макета.
- описание или настройки для изменения размера макета
Скетч (инструмент дизайна) не будет иметь никакой концепции и намеков на макет (особенно на отношения между детьми). Поэтому иногда от инженеров требуется обсудить с дизайнером точное поведение при изменении размера компонента. Поэтому требуется способ преобразования структуры в какие-то настройки макета. После попытки наши предложения были бы гибкостью и сеткой CSS. Потому что гибкость и сетка обеспечивают большую гибкость для позиционирования и широко используются и признаются инженерами внешнего интерфейса, а также с высокой совместимостью с браузерами.
Эти две проблемы сложно автоматизировать на 100%, но после нескольких итераций мы думаем, что это можно сделать на 70% автоматически с помощью некоторых алгоритмов и небольшого вмешательства человека. Сгенерированный код будет полезен при правильной структуре макета. После этого его можно улучшить до лучшего кода, применив некоторую оптимизацию кода (общий стиль, лучшее именование, упрощенный CSS / код и т. Д.), Что легче решить.