Конвертировать HTML / CSS из Adobe XD

Question

Я только что скачал Adobe XD, и я думаю, что он мне понравится. У меня просто проблема с экспортом из Adobe XD в HTML / JS / CSS и переносом его в мой код в Visual Studio, поэтому я могу делать WebForm.

Как это возможно.

Answer 1

Вы не можете (пока).

Adobe XD - это инструмент для создания прототипов, т. Е. Он был разработан для создания дизайнов веб-сайтов и приложений перед их передачей разработчику, который "вручную" создаст из него HTML/CSS/JS.

Тем не менее, сообщество неоднократно запрашивало функцию экспорта в HTML/CSS/JS, и команда Adobe в настоящее время работает над этим (проверьте это и это).

Answer 2

Adobe XD имеет экосистему плагинов, где вы можете скачать сторонний встроенный плагин для решения задач, не поддерживаемых самим Adobe XD. Для веб-экспорта я могу порекомендовать плагин под названием "Веб-экспорт".

Чтобы использовать плагин,

1. Убедитесь, что у вас последняя версия XD
2. Идти к Plugins > Discover Plugins > Поиск "Веб-экспорт"
3. Нажмите "Установить"

Надеюсь это поможет!

Answer 3

AdobeXD размещает элементы на холсте с координатами x и y. Это не то, как HTML/CSS работает для веб-сайтов. Вам нужно создать структуру html и расположить элементы с помощью сеток, гибкости и т. Д.

Вы могли бы использовать и расположите узлы html, как если бы вы это делали в AdobeXD, но это не будет хорошо работать на разных устройствах и при выполнении адаптивного кода.

Существуют приложения и плагины, которые импортируют html и css с абсолютной позицией, но с этим кодом мало что можно сделать. Также есть Desech Studio, которая относительно импортирует AdobeXD, но она не будет идеальной по пикселям, и вам придется самостоятельно настраивать поля и ширину.

Сейчас большинство людей пишут html/css вручную без каких-либо инструментов, потому что у этих инструментов есть ограничения.

Answer 4

Для этого вы можете использовать плагин Anima.

Чтобы использовать Anima для XD: https://www.animaapp.com/xd