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

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

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

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

Markup Listify – генератор HTML для текстовых блоков Sketch

Плагин для Sketch созданный для того, чтобы сделать жизнь дизайнера и фронт-энд разработчика немного проще. Идея данного плагина состоит в том, чтобы упростить и ускорить возможность конвертации и копирования ваших текстовых слоев или групп содержащие текстовые слои в листы HTML.

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

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

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

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

Atomic Design с использованием Sketch – это будущее разработки продуктового дизайна

Брэд Фрост, потрясающая личность из видеоролика, является одним из основателей системы, о которой пойдет речь в этой статье. Atomic Design был разработан в ответ на этот цифровой, адаптивный мир, в котором мы все живем и работаем.