February Progress Report - Web Export, Alignment and Type Switcher

Web Export has been upgraded to support the new plugin API. This allows you to save your preferences with your artboard and it will be retained when if you send your .xd file to someone else.

This changes improves the export time by up to 30 times in some cases. However, you may have to manually import your settings.

I’m going to create a separate topic that you can vote on if you want an importer written. The reason not to write one is that it will take time away from other features and there may not be people using these features yet and setting settings may be easy to add back in.

From now on any changes you make in the options panels means you have to save the document to save the changes. This is good in that you can redo and undo settings as you work but you have to remember to save your document.

You can also defining your own template and add your own styles and scripts.

Also, planned for future development release are the following:

  • Defining a custom media query - Lets say create a fluid website and you want to show a hamburger menu when the view port is 600 pixels wide. You can hide the element by default and then use a media query to show the icon when the view port is 600 pixels or less. link
  • Define settings multiple custom media queries - Lets say you have a row or grid of items or images. As you resize the view you want to set different styles. With this feature you can add multiple queries and define the values in each one.
  • Define settings for pseudo classes - If you have an element that you want to use as a button you can select it and then set properties for different pseudo states like hover, down and active. link
  • Export as skin - This feature will export a group or symbol as a SVG skin. You name the layers inside the group as up, down, hover and active and a button skin will be created from it. It’s like the feature above but you only have to indicate that you want to automatically create those states.
  • State support - This would allow you to create different states that you could switch to later via code. If you have a pop up menu you can define select it and define a state for it to be shown. It will be invisible unless you set application.setState("myMenuPopUp");. link
  • JavaScript Application - This would write an object to the page that you can use to reference any element and set states or options. As a developer you could use this object to add event listeners, get references to elements, change states or pages, set options and so on. link
  • Flex box support - When you have items in a group in XD they are currently absolutely positioned. Adding Flex box support allows you to tell the browser to layout of the elements dynamically. Combining this with multiple query support allows you to change an elements layout properties as a page size changes. link
  • Grid box support - Grid support allows you to layout elements in a flexible way using lines and names. It is a powerful layout system but can be complicated to learn. This would allow you to visually add lines, rows and cells and anchor positions to them. link
  • Export as component - Let’s say you create a search box for your web page. This feature would allow you to select the group of graphics that look like a text input and actually make it a text input.
  • List external libraries to link in - Add a list of libraries that you can link in on export. link
  • Deep linking for slide show - As you move from artboard to artboard update the URL so you can link to it later. link

I’ll be adding these as features here on the forums but it would be helpful for you to vote on them, provide your own use cases or create your own feature requests to help refine them. What you vote on helps determine what features and plugins are built.

Alignment
In the Alignment plugin there is a new secondary screen where you can manually see and set the position of an element through a form. It also tells you the x and y positions relative to the group it is in.

Type Switcher
This is a new plugin that lets you change the font or font size of all the selected elements. It is still in development but it is interesting.

1 Like

nice! I’m very excited for this 2 specially:

  • Defining a custom media query
  • Define settings for pseudo classes

It would be AMAZING if the plugin could translate the prototype linking into html link codes so we could build all the site navigation without code using just the prototype tool.

1 Like

The API for prototype linking is coming soon. In the mean time I have a question.

There is a single page export that adds all artboards to a single page creating a single page application. All artboards are on that page.

Would you like to be able to link to each artboard, showing it and hiding others?

There is also the option to export all artboards as separate pages. Would you like to have a list of all of the pages and then be able to link to them?

1 Like

That’s great news!
I haven’t tested that option to merge all artboards into one page.
In my case I would prefer to have each artboard as a separate html. That way each of the site’s section can have it’s own unique URL.
That idea of hiding artboards could also work for a portfolio section. I can have for example one artboard for the main portfolio with all the images and when I click on each one it would show the corresponding artbord that has all the info on that project. I don’t know if that would have it’s unique URL though, if that’s not possible I would then prefer to have it separate. I need to be able to send individual links of my protects.

For the Grid Box support upcoming, are you saying you are creating a grid system for this plug-in?

CSS Grids are actually very easy to learn.

Would it not be easier to link a library stylesheet(bootstrap,foundation,unsemantic) through the element options, then you can just use the classes provided by the library, and add those into the Element Options panel?

Great suggestions. I’ll have some updates in a few days that should address these (hinted at below).

@aruffo3 Do you mean adding a link to include libraries and then using their existing layout support? Does this look correct?

@a3user I’ve made a feature request here. Please review it and add any additional details to how it may look or what results you would like to see.

oh so is it is an Adobe XD api Limitation. good to know. it is currently listed under “in developement” (since jan24)

@tp_up Sorry about that. Prototype linking in Web Export was coming soon and in development and at the same time the API for prototype linking is in development (and no idea when it will be released).

In reply to @a3user manual prototype linking was coming soon and automatic link via with the API will be addressed whenever it’s made available. I should have simply wrote, “Prototype linking is coming soon.” :slight_smile:

Since 2.10 you can link to other artboards using the Element Options panel and depending on how you export the links will be written for you to the page or the page state (when exporting to a single page application).

The single page application is a new feature and although it has been extensively tested it should be considered in beta.

1 Like