Блог

У меня довольно простой вопрос, кто-нибудь знает, есть ли какая-нибудь библиотека для JS, которая могла бы использовать вывод Sketch json и возвращать мне html в форме, которую я мог бы отображать непосредственно в браузере (то есть не в виде файлов html / css, а скорее в виде кода)?

Существуетhttps://www.animaapp.com / но, насколько я понимаю, они экспортируют html и css в виде файлов.

Я полагаю, что Figma или Zeplin позволяют импортировать файлы эскизов, поэтому мне интересно, есть ли что-нибудь с открытым исходным кодом, что я мог бы также использовать для рендеринга нашего файла эскиза / json?

Требуется приложить усилия для написания программы для преобразования Sketch в HTML / CSS, мы внедрили нашу собственную в нашем решении. Но код прямого преобразования неструктурирован и не реагирует, работает только для фиксированного макета.

Вы можете начать с репозитория нижеhttps://github.com/mludowise/Sketch-HTML-Export

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

Вы можете использовать Desech Studio для импорта эскиза, а затем экспортировать как React.

Импорт эскиза не будет 100%. Вот видео на YouTube, в котором содержится более подробная информация, но ключевыми моментами являются:

• html расположен относительно сеток
• импортирует весь css
• импортирует изображения и SVG, помеченные для экспорта

Что касается React, он использует Facebook create-react-app в качестве основы. Это репозиторий github для плагина Desech Studio react. В конечном итоге вы можете разветвить репозиторий плагина react и добавить свою собственную базу кода и использовать ее вместо официального плагина react.

Но я согласен с @pxCode, это не процесс импорта / экспорта в 2 клика. Это также потребует некоторой работы с вашей стороны.