Как из adobe xd экспортировать в html
Обновлено: 06.07.2024
Эти проекты имеют большое значение, помогая разработчикам понять, как вы хотите, чтобы ваш веб-сайт выглядела, и упрощают процесс разработки с их стороны. Однако существует лишь ограниченное количество способов экспортировать дизайны из программного обеспечения.
Вы можете либо сохранить их как файл XD и надеяться, что разработчик уже установил программное обеспечение в своей системе, либо экспортировать каждую монтажную область как отдельный файл PNG, что может быть немного неудобно в использовании.
К счастью, есть удобный сторонний плагин, который позволяет экспортировать монтажные области в виде файлов HTML, и именно об этом я расскажу в этой статье. Но прежде чем мы перейдем к этому, вам нужно кое-что узнать.
Экспорт файлов Adobe XD в HTML с помощью плагинов
Теперь, когда у нас это есть, просто выполните следующие простые шаги, чтобы загрузить необходимый плагин, а затем экспортировать файлы Adobe XD в HTML:
Шаг 1: Щелкните кнопку меню гамбургера в верхнем левом углу программы.
Шаг 2: Прокрутите до конца и нажмите на опцию Plugins. Это откроет новую панель плагинов справа от главного меню.
Шаг 3: Выберите опцию Discover Plugins на панели Plugins.
Шаг 4: На следующей странице найдите HTML и нажмите кнопку «Установить» рядом с подключаемым модулем Web Export.
После того, как вы установили требуемый плагин, откройте проект, который хотите экспортировать в HTML, и продолжите следующие шаги. В этой статье я буду использовать бесплатную монтажную область Adobe XD, которую я нашел в Интернете.
Шаг 5: Выберите монтажную область, которую хотите экспортировать, щелкнув по ней.
Шаг 6: Теперь нажмите кнопку меню, перейдите на панель Plugins и затем выберите опцию Export Artboard в новых настройках плагина Web Export.
В том же окне вы также можете выбрать экспорт нескольких монтажных областей или последней монтажной области, которую вы редактировали.
Шаг 7: Во всплывающем окне «Экспорт монтажной области» добавьте имя файла, а затем выберите папку, в которой вы хотите сохранить файл, щелкнув крошечный значок папки рядом с параметром «Экспорт папки».
Шаг 8: Теперь, если вы хотите добавить внешний скрипт, таблицу стилей или альтернативные шрифты в экспортируемый файл, вы можете добавить их в том же окне.
Шаг 9: Затем вы можете выбрать размеры выходного HTML-файла, введя значения в пустое пространство рядом с параметром «Размер».
Шаг 10: Чтобы обеспечить правильное масштабирование проекта, вы также можете выбрать различные параметры масштабирования в том же окне, установив флажок рядом с каждым параметром.
Шаг 11: Кроме того, вы можете выбрать любые дополнительные настройки, такие как навигация с помощью клавиатуры, автоматическое обновление и т. Д., Установив флажки рядом с параметрами.
Шаг 12: После того, как вы завершили все настройки, просто нажмите синюю кнопку «Экспорт», и все готово. Монтажная область появится в виде HTML-файла в папке назначения, которую вы ранее выбрали.
Из того же окна вы также сможете скопировать CSS и разметку своей монтажной области, если вы также хотите поделиться этой информацией со своим разработчиком.
Еще раз отметим, что экспортированный HTML ни в коем случае нельзя использовать для разработки полнофункционального веб-сайта. На данный момент у вас нет возможности напрямую опубликовать проект Adobe XD в Интернете, и, согласно нескольким обсуждения на форумах Adobe, в ближайшее время его не будет.
Последнее обновление 5 июл, 2019
Вышеупомянутая статья может содержать партнерские ссылки, которые помогают поддерживать Guiding Tech. Однако это не влияет на нашу редакционную честность. Содержание остается объективным и достоверным.
A
s a web designer working with Adobe XD, we are able to design and prototype pages at lightning speed without having to think about web development. These designs can be very beneficial in helping clients and stakeholders see what the finished website will look like before spending too much time on development. Once the design is complete, how do we make the transition to the development step, and publish designs live on the web?
Not too long ago, developing and publishing websites required skilled and costly developers. Changes, as simple as they may have been, required the help of someone who understood the code and could make changes for the designer. Today, designers have many more tools that give us the ability to publish designs with little to no coding experience, and go from design to published website in a very short time.
In this article, we’re going to talk about some of the useful plugins you can use to quickly export your designs from Adobe XD into HTML and CSS, which can then be used to easily edit or publish those designs as a website. All of these plugins do a great job at exporting, but they each have strengths in different areas, so be sure to read through the details to see which plugin will be best for your next website.
Anima Plugin
Anima is perhaps the best all-around solution for exporting Adobe XD to CSS and HTML. Within the plugin, you have the ability to apply links and also add breakpoints between different artboard sizes so your web page will adapt as the browser resizes. Let’s look at a few features you can find within this Anima plugin.
Adaptive design for different screen sizes
By selecting multiple artboard sizes of the same design, you can apply breakpoints for browsers to automatically adapt between. This can help give your visitors an optimal viewing experience whether they’re browsing on a desktop, tablet, or mobile phone.
Embedded Media
Built right into this plugin, you have the ability to turn any layer into a video, GIF, or Lottie animation and enable settings like auto-looping in videos. Applying media to your site can really enhance your visitors experience and add a lot more interactivity.
Animate your layers
If you really want to add some sizzle to your designs, you can also apply entrance animations to any layer in your design that triggers as you load a page or scroll down to that element. These preset animations include grow, move, blur in, and fade; just to name a few.
Embed Code into your designs
With an Embed Code feature, you can add all kinds of functionality onto your pages from interactive maps, to 3rd party forms and more. Simply copy embed code from any website or service that offers this feature, such as Google Maps, and paste the snippet within the Anima plugin.
Easily create forms
Does your design include a contact or login form? You can easily add functionality to your forms right within the plugin by applying the text field settings and setting the submit button. Once your site is exported, this form will be active and ready to collect submissions without having to use a 3rd party form service.
As you can see with all these built-in features, Anima is a great choice for exporting your designs to HTML and CSS when you want to quickly publish simple websites and landing pages with added functionality.
Web Export Plugin
If you are looking for a solution that gives you more manual control in the code and CSS settings, Web Export might be the plugin for you. In addition to easily exporting HTML and CSS, you can apply styles and classes, integrate with existing libraries, and align layers to respond as you resize your browser.
I would say this is a great option if you are already familiar with HTML and CSS but still want the plugin to do most of the work for you to save you precious time. Let's take a look at a few features you will find in this plugin.
Apply custom settings to each artboard
As you start to export your designs using Web Export, the plugin will give you many options for applying styles and classes to your design, as well as settings for how you want the page to scale and the elements within the page. You can also copy any markup or CSS to apply to any other pages in your development.
Apply custom settings to any element in your design
In addition to applying settings in the artboard level, you can also apply settings like styles, classes, tags, and more, directly to any element in your design. This really gives you all the control you need as a power user to structure web pages in a way that can adopt existing CSS you might already have on your website.
You even have control over the constraints of each element to start to make your web pages fluid when the browser is resized.
Web Export is a bit more of an advanced plugin and as you can see, there are more controls and settings than we might know what to do with; but if you aren't intimidated by all these settings, and know your way around HTML and CSS, you will really appreciate these advanced settings.
I would imagine many designers would use this plugin in conjunction with an already existing site to be able to integrate new pages easily while maintaining the functionality they already have on the site; but if all you are looking for is to quickly get a new website up and running, Anima might still be the better option.
Fireblade
In addition to HTML and CSS, fireblade can also output REACT, LIT-ELEMENT, and REACT-NATIVE files to offer greater support based on the platform you’re developing for. This is the main area where fireblade stands out from the previous alternatives.
Although fireblade doesn’t have some of the out-of-the box widget integrations that Anima has, or the advanced custom settings of Web Export; where fireblade stands out is the additional output formats, and the simple plugin UI for defining responsive parameters. You can easily set alignment constraints to artboards and individual elements to control how your design responds as the browser resizes.
Which plugin is right for you?
As you can see, there are unique advantages to each of these plugins. The question you want to ask yourself is “What is the end goal of my site?”. All of these plugins can be a great option if you want to quickly generate landing pages or smaller informational websites with little functionality, but if you’re working on a project that needs to scale; I would recommend talking to a developer about the platform requirements before selecting your solution.
For simple responsive websites that serve to share business information while utilizing features like a contact form, video embeds, and more; Anima would be my plugin of choice. It’s very simple and can output very professional looking websites fast. The publish features within Anima make it easy to host and publish your website right within your Anima account.
If you’re more familiar with HTML and CSS and want to customize the CSS to fit into existing solutions or you just want to take the code output further, Web Export is a great solution but it will take more time to set the site up correctly.
Fireblade would be my choice if you need support for other languages in addition to HTML and CSS. Going from setup to export is quite simple although there is a limit to what functionality you can integrate within the plugin. You will still need to alter this code to embed things like forms, videos, or make better use of CSS classes.
I hope you found this article useful in choosing the best solution for exporting Adobe XD to HTML and CSS designs. You can find all of these solutions in the XD plugin panel and I would highly encourage you to spend a few minutes with each and output your designs to code to see if the final output meets your publishing needs.
Было время, когда мы полагались на Adobe Photoshop для решения любых задач, связанных с дизайном. Теперь у нас есть специальные приложения и программное обеспечение для каждого варианта использования. Что касается дизайна UI / UX, рынок наводнен такими вариантами, как Sketch, Figma, InVision и Adobe XD. Среди них, если вы инвестируете в экосистему Adobe, Adobe XD становится для вас естественным выбором. Используя плагины XD, вы можете вывести опыт на новый уровень.
Плагины играют жизненно важную роль в любом программном обеспечении UI / UX. Они похожи на то, как вы используете расширения для браузера. Множество известных компаний, таких как Dribbble, Airtable и Stark, внедрили свои инструменты и услуги непосредственно в XD, как только было объявлено об открытой платформе. Давайте рассмотрим некоторые из лучших плагинов для Adobe XD.
Примечание: В приложении Adobe XD вы найдете магазин плагинов. Просто найдите название плагина в строке поиска и установите его на устройство.
1. Trello
С помощью плагина Trello дизайнеры могут легко отправлять свои ресурсы XD в Trello, что позволяет им делиться монтажными областями с командой, не покидая Adobe XD.
2. Photosplash 2
Время от времени вы сталкиваетесь с тем, что хотите использовать бесплатное изображение в макете пользовательского интерфейса. Обычная процедура включает поиск изображения в Интернете, загрузку его на компьютер и импорт в программное обеспечение XD. Вместо этого вы можете просто выбрать плагин Photosplash 2 и добавлять изображения прямо в программу XD.
3. XD для Flutter
В наши дни язык Google Flutter становится популярным среди разработчиков. С помощью одной строчки кода вы можете создавать приложения как для iOS, так и для Android. Компания недавно добавлена поддержка веб-приложений также.
С помощью плагина XD to Flutter вы можете сгенерировать код для создания приложений с Flutter на основе ваших проектов в Adobe XD. Плагин генерирует код для любого выбранного элемента в XD, либо для отдельных объектов на холсте, либо для всей монтажной области.
Когда вы вносите изменения в XD, вы можете просто снова запустить плагин и обновить сгенерированный код.
4. Отрисовать
Макет не закончен, без иллюстраций. Вместо того, чтобы часами искать их в Интернете, вы можете просто использовать плагин UnDraw с огромной коллекцией иллюстраций. Плагин содержит постоянно обновляемую коллекцию иллюстраций в формате .svg, которые полностью настраиваются и которые вы можете использовать бесплатно и без указания авторства, даже в коммерческих проектах.
Мы используем его в каждом дизайн-проекте и настоятельно рекомендуем вам попробовать.
5. Лица пользовательского интерфейса
Каждому дизайнеру нужны эти изображения профиля для использования в UI / UX-дизайне. Плагин UI Faces для XD объединяет тысячи аватаров, которые вы можете фильтровать, чтобы создать свой идеальный образ. Аватары отфильтрованы из разных источников. Вы можете выбрать их по возрасту, полу, эмоциям и т. Д.
6. Угол
После завершения дизайн-проекта вы можете продемонстрировать это своему клиенту на макете устройства. Используя плагин Angel mockup, вы можете создавать красивые мокапы, чтобы произвести сильное первое впечатление.
7. Иконки 4 дизайна
Это не нуждается в представлении. Каждому дизайнеру нужны красочные минималистичные иконки, которые можно использовать в своем дизайне. Значки 4 позволяют искать значок по имени и одним щелчком помещать эти значки в список результатов, в результате чего создается полностью редактируемый значок на основе вектора.
Коллекция включает в себя десяток популярных коллекций иконок в различных стилях. Продолжай, попытайся. Мы уверены, что вы не разочаруетесь.
8. lorem ipsum
Используя плагин Lorem Ipsum, вы можете просто получить этот текст, не выходя из программы Adobe XD.
9. Переименуйте его
Мы все потратили больше времени, чем хотели бы признать, на организацию и переименование слоев и монтажных областей. Rename It позволяет вам переименовывать все слои последовательно в порядке возрастания или убывания, а также изменять регистр имени слоя за меньшее время, чем переименование всего нескольких слоев. Он даже позволяет находить и заменять слова или символы с помощью простых сочетаний клавиш.
10. Закладка
Если вы работаете с большим количеством макетов и монтажных областей и иногда испытываете трудности с поиском конкретной монтажной области, попробуйте плагин Bookmark. Этот плагин позволяет вам делать закладки для определенной монтажной области, и всякий раз, когда вы запускаете и щелкаете эту конкретную закладку, ваш экран фокусируется на этой конкретной монтажной области.
11. ColorSpark
Мы видели, как многие дизайнеры пользовательского интерфейса боролись с выбором цвета и сочетаниями на протяжении всего проекта. В Интернете есть специальные инструменты, которые помогут вам принять лучшее решение. Но ColorSpark для Adobe XD превосходит каждую со встроенным генератором цвета для случайных цветов и градиентов.
Это помогает дизайнерам открывать уникальные цветовые палитры и пробуждать творческий потенциал.
12. Слабость
Совместите творческую работу и командную работу со Slack. Дизайнеры могут легко обмениваться файлами и просматривать их из приложений, включая Adobe XD, получать отзывы и быть в курсе действий, предпринятых с их ресурсами.
Создавайте потрясающие дизайны пользовательского интерфейса
Узнайте, как экспортировать готовые к использованию ресурсы из Adobe XD в форматах PNG, SVG, JPG и PDF.
Вы можете экспортировать ресурсы, такие как растровые изображения, значки и фоновые рисунки, текст и монтажные области из XD в форматах PNG, SVG, JPG и PDF. Эти экспортированные ресурсы оптимизированы для развертывания в iOS, Android или в веб-приложениях.
Если вы используете XD на macOS, вы также можете добавить свои проекты в сторонние среды, например Zeplin, Avocode, Sympli, Kite Compositor и Protopie.
macOS
Выберите объект или монтажную область, перейдите в раздел Файл > Экспорт или нажмите Cmd+E.
Windows
Выберите объект или монтажную область и перейдите в раздел Файл > Экспорт.
- Пакетная обработка. Вы можете выполнить пакетную обработку ресурсов для экспорта, отмеченных с помощью параметра Отметить для экспорта в инспекторе свойств. Чтобы экспортировать несколько объектов как один ресурс, сгруппируйте эти объекты перед экспортом.
- Выбрано. Вы можете выбирать и экспортировать отдельные ресурсы.
- Все монтажные области. Вы можете выбрать все монтажные области для экспорта из проекта дизайна.
- After Effects. Вы можете выбрать ресурс для экспорта в After Effects.
Пометка слоев для экспорта
Слои, помеченные для экспорта, включены в спецификации дизайна как ресурсы. Чтобы пометить ресурсы для экспорта, выберите любой слой на холсте и выполните одно из следующих действий:
- Нажмите правой кнопкой мыши на слой на холсте и выберите «Пометить для экспорта» из выпадающего списка.
- Откройте панель слоев и щелкните значок отметки для экспорта рядом с названием слоя.
Ресурсы — это файлы дизайна, которые нужны разработчикам, чтобы воссоздать продукт вашего дизайна с помощью HTML/CSS/JS на веб-сайте или с помощью языков Swift или Java в приложениях для iOS и Android.
Как правило, самыми распространенными ресурсами являются растровые изображения, значки и фоновые рисунки, которые вы можете экспортировать в следующих форматах: PNG, SVG, PDF, JPG.
Anima allows designers to create prototypes that feel real inside Sketch, Adobe XD, and Figma. Developers can export designs as HTML & CSS, or React code.
Overview & Requirements
In this article, we will go over everything you need to know to export your Adobe XD document to an HTML code package.
To convert an Adobe XD design into code, you will need:
- A design made in Adobe XD using Anima [Download our XD sample file] and install the Anima plugin for Adobe XD
- An Anima account with a Pro Plan
How To Export Code
The code can be exported either directly inside Adobe XD or from Anima’s web app.
Via Adobe XD:
- In Adobe XD, open the design you created using Anima [Sample File]
- Click Export Code at the bottom of the plugin panel
- Select where the Code Package will be saved and click Save.
Click Export Code, then save the Code Package locally.
Via Anima’s Web App
This is an excellent option for developers and others who do not have access to the Adobe XD document.
Before other team members can export it as code from the web app, the design must be synced to the Anima Project.
Click Preview in Browser > Sync to Project.
Download HTML code for Adobe XD designs
Inside The Code Package
Now the code has been exported as a Code Package in a zip file that contains the HTML files, CSS files, images, and fonts.
Want to see what it looks like? Download sample Code Package.
Once the files are unzipped, they can be previewed locally in the browser with all its Smart Layers and interactions just like a live website!
Open HTML files locally in your browser
If you open the files in a text editor you’ll see a well-structured HTML and CSS:
HTML file
CSS file
• Each screen design gets it’s own HTML and CSS file.
• Screens with Breakpoints share the same HTML and CSS file
Export Code F.A.Q.
Absolute and Relative Positioning
By default, Anima uses position:absolute in order to generate pixel-perfect prototypes. Turn on Auto-flexbox to get position:relative layout.
Anima Auto-Flexbox is an automatic process that aims to replicate the thought process that developers do.
We used algorithms from the Computer Vision world and built an automated solution that takes any design, and applies Flexbox layout to it.
To turn Auto-Flexbox on, click on the Export Code settings and check Auto-Flexbox.
Now, when we have a longer title, it pushes the content below instead of overlapping it.
Auto-Flexbox in action.
Is the Code Responsive?
Yes! If you applied Adobe XD’s Responsive Resize to your design, the exported code, and preview in the browser, will be responsive. Learn how it works.
Design with Responsive Resizing previewed on Anima
How do Breakpoints work?
Breakpoints allow you to create an artboard for each screen width — for example, Mobile, Tablet, and Desktop. When generating code, Anima makes a single HTML file and a corresponding single CSS file from these artboards.
Desktop, Tablet, and Mobile Breakpoints
Breakpoints are efficient since it uses native CSS media queries. It allows the browser to display only the screen design that fits the current browser window size.
Another bonus is that images are loaded only for the user’s screen size, sharp and not oversized. And, we’re loading it top to bottom for making it even slicker.
All Breakpoints in one CSS file
Hosting a Website with Forms
When you’re hosting your website on Anima, we also give you a tiny backend server to support your forms. It allows form submissions to be sent to that server and stored for you.
This server-side code cannot be simply exported and included in the code package, as it needs to run on a server rather than on the browser (which is called client-side code).
Therefore, when exporting code with forms, you’ll have to implement your own server to capture form submissions and store your data.
Читайте также: