Я работал с этой концепцией (перевод Sketch to React) и не нашел эффективного / настраиваемого решения, и я не думаю, что будет какое-то время в ближайшее время или, по крайней мере, одно, которое будет использовать лучшеечасти Sketch с лучшими частями React.
Sketch имеет удивительную систему символов, которая позволяет повторно использовать токены дизайна (такие как глобальная цветовая палитра или типографские стили) или создавать их из центрального местоположения -источник правды.
Неудачное обстоятельство 1:
Эти наборы символов не преобразуются в наборы переменных (CSS или SCSS и т. д.) при экспорте в компонент React - всезначения жестко запрограммированы, и переменные отсутствуют.Возможно, вам удастся создать очень персонализированную реализацию для этого, но она наверняка сломает секунду, когда вы перенастроите свой процесс сборки или выбор технического стека.
Неудачное обстоятельство 2:
Символы эскиза или элементы пользовательского интерфейса не управляют своим собственным состоянием, вы просто меняете их местами с помощью другого символа / элемента.Слишком много нужно, чтобы перевести несколько элементов эскиза в логику компонента React, который управляет собственным состоянием.Особенно, если принять во внимание сложность современных потоков сборки и технологических стеков.
Как моя команда работала над этим:
Общие строительные блоки и стандарты, которые перекрывают разрыв между проектированиеми развитие может действительно помочь.(Примером является набор цветовых переменных CSS, который отображается на набор цветовых символов Sketch).Части системы на атомарном уровне можно относительно легко перевести между Sketch и CSS - тогда все, что вам нужно сделать, это собрать кусочки головоломки вместе.Соедините это с хорошим уровнем коммуникации между дизайнерами и разработчиками, и ваша команда намного опередит маржу.
Надеюсь, это поможет!