Эскиз в HTML / CSS

Question

Я ищу способ конвертировать из SKETCH в HTML и CSS, надеюсь, что тогда я смогу исправить весь код, чтобы он лучше соответствовал моим потребностям, и добавить в него немного JS.

Answer 1

• Аутсорсинг Если вы хотите использовать аутсорсинг, для этого существует множество аутсорсинговых компаний по разработке, таких как ReliablePSD или HTMLPanda.

• Плагины для скетчей Для этого есть несколько плагинов для скетчей, но сгенерированный код неструктурирован с абсолютными позициями.

• Инструменты SaaS Существует несколько инструментов или редакторов SaaS, но мы попробовали и обнаружили, что ими нелегко пользоваться. Также есть несколько инструментов для приложения (реагировать на нативный и флаттер)

  Если инструменты помогут вам автоматизировать генерацию кода, то возможна беспорядочная или неправильная структура, потому что трудно определить правильное адаптивное поведение только на одном экране визуального дизайна. Мы решили эту проблему после нескольких итераций разработки и анализа. Мы считаем, что основная причина запутанного кода - неправильная структура. Неправильная структура связана с тем, что большинство инструментов пытаются угадать или использовать существующую структуру группы Sketch, которая предназначена для визуального, а не для адаптивного макета. Таким образом, наше решение решает оставить эти ключевые проблемы для пользователей, но предоставляет очень быстрый и интуитивно понятный способ программирования веб-приложений с помощью визуального редактора. В нашем раннем эксперименте это действительно намного быстрее, но вам все равно нужно выполнить базовое редактирование, чтобы экспортировать структуру и качественный код. (React или HTML/CSS).

Answer 2

Существует Launchpad инструмент для создания веб-сайта из файла эскиза. (не совсем бесплатно)

При этом преобразование из Sketch (или других инструментов дизайна) - это ручная работа. если ты right-clickна слое вы можете использовать Copy CSS Attributes который поможет вам получить CSS, необходимый для воспроизведения в браузере (это не всегда идеально)

Answer 3

Я считаю, что в 2022 году у нас будет лучшее решение этого вопроса.

Раньше инструменты преобразования использовали «абсолютную позицию» и неправильную структуру групп для создания беспорядочного кода.

Вы можете использовать плагин pxCode (переход из figma в html), который может создавать чистый и отзывчивый код.

Как работает pxCode?

1. требовать от пользователей SmartGroup, чтобы обеспечить 100% правильность структуры HTML, что имеет решающее значение для адаптивного поведения.
2. используйте CSS flex и поток содержимого, а не абсолютную позицию
3. pxCode позволяет пользователям настраивать адаптивные настройки на основе структуры гибкими способами, которые могут контролировать качество CSS с помощью MediaQuery.

Кроме того, pxCode также поддерживает React и TailwindCss, если вы захотите их использовать.

Answer 4

Вы можете использовать Desech Studio для импорта файла эскиза, чтобы получить конвертированный html/css. Но преобразование не будет идеальным по пикселям, потому что оно попытается вложить элементы и расположить их с сетками css. Таким образом, вам все равно придется настраивать поля и размеры впоследствии.

Есть и другие инструменты, но я не нашел ничего, что позиционировало бы элементы с помощью flex или grid. Вместо этого они используют абсолютную позицию, с которой довольно сложно работать при отзывчивости.