Как мы использовали API от Figma, чтобы конвертировать дизайн в код React

С момента запуска Figma API, многие люди размышляли о возможности автоматического превращения документов Figma в компоненты React.

StyleClip – плагин Sketch, копирующий CSS стили элемента в буфер обмена

Проворный плагин Sketch, который позволяет копировать стили элемента непосредственно в буфер обмена Mac. Он поддерживает буферизацию необработанных стилей CSS, определений переменных SCSS и стилей с переменными SCSS.

Автоматический экспорт исходника Sketch в HTML и CSS код

Наш процесс преобразования дизайна Sketch в веб-сайт включает в себя много шагов. В основном, мы конвертируем артборды и слои Sketch в пакет файлов, который включает в себя HTML, CSS, изображения и файлы шрифтов, готовые к развертыванию.

Генерация HTML, CSS прямо из Sketch с помощью Protoship

Protoship – это генератор кода для дизайнеров и фронт-енд программистов, который создает компоненты HTML, SASS и React из дизайна Sketch.

Protoship Teleport: конвертация вебсайтов в документы Sketch

Protoship конвертирует документы Sketch в HTML и CSS с примесью SASS, сетками Bootstrap и компонентами React. Благодаря этому, дизайнерам не нужно больше генерировать спецификации дизайна для передачи в разработку, а сами разработчики могут создавать красивый HTML непосредственно из макета, безо всякого кодирования вручную.

CSSketch – CSS для Sketch 3. Дизайн с помощью стилей CSS

CSSketch – полностью открытый и свободный, так что можете смело использовать его для своих разработок!

Плагин Marketch для замеров отступов и копирования CSS-стилей макета

Marketch – это плагин для Sketch 3, который автоматически генерирует html-страницу, по которой можно сделать замеры отступов и посмотреть используемые CSS-стили.