Adobe XD

Kalipso - Addons - Adobe XD

Installing

The purpose of this plugin is to facilitate the sketch of apps that will be developed in Kalipso 5. This plugin also allows to pick a certain artboard and with it export it as a Kalipso Style Sheet, bear with us that this part of the plugin is still evolving, there for obeying certain rules explained in the very own plugin, as such the user opinion can push the function and performance forward.

The plugin can be obtained through the Adobe XD plugin search interface or by request to Sysdev.

Figure 1 - Adobe XD search interface

After installation it will appear in the list as in the example below:

Figure 2 - List of installed plugins

Using

As soon as the plugin opens in the window, a set of options appear to us.

Figure 3 - Initial plugin interface

We can then, for instance, add artboards to our design surface, by default we have a generic smartphone size and a generic tablet size. After creating one you will notice a change in the plugin interface, exposing more options.

Figure 4 – Plugin interface with more options

You will notice an info saying:

“By default, all item groups are exported as images. The exception applies if at least one of the following prefixes is found in the item name:”

And those prefixes correspond to Kalipso native objects as such:

• Button: To say that your XD Object is a Kalipso Button, you should prefix it with:

  • button- , ex.: button-Ok or button-Cancel, and so on.

• Label: To say that your XD Object is a Kalipso Label, you should prefix it with:

  • label- , ex.: label-Title, label-Subtitle, and so on.

• Input: To say that your XD Object is a Kalipso Input, you should prefix it with:

  • input- , ex.: input-underlined or input-password, and so on.

• Combo: To say that your XD Object is a Kalipso Combo, you should prefix it with:

  • combo- , ex.: combo-borderless or combo-undelined, and so on.

• Image: To say that your XD Object is a Kalipso Image, you should prefix it with:

  • image- , ex.: image-back or image-ok, and so on.

If you click in those buttons the plugin will show you a configuration similar to Kalipso, you then can use it or not.

When adding an artboard, a series of colors that match the ones in Kalipso Style Editor are created so we can reuse them in other artboards.

If you want to change a colour to be exported do it in the panel at the let where the colors live, select a color with a mouse right click and then make your edition. The same applies to the existent fonts.

Figure 5 – Colours and Fonts scheme as in a native Kalipso Style.

This scheme links to the style in Kalipso, if the user removes them, they will be added by default on export.

Exporting

After designing our screen, when selecting it, we are given in the plugin the option to export with a Kalipso style, explaining some of the rules.

When exporting, we must indicate the name of the style and the folder where it will be generated.

It is advisable to use a folder that remains on the desktop or in documents, due to permission issues.

In the designer you can then point to that folder in File > Settings > Paths (see more here).

Figure 6 – Setting in Kalipso where you can change the path of the user styles folder.

The chosen folder will contain a folder called stylename.resources containing the images used in the application, a .CSS (Cascade Style Sheet) file with the code of style and a preview to be recognizable in Kalipso.

Figure 7 – Export Style option asking for a style name.

Figure 8 – Export Style option asking for where to save the style.

Figure 9 – The XD Exported Style shows a different preview from the other styles.

Please note that the addons for Kalipso presented here have configurations that depend on third party services and may change without notice.