Get started

Adobe XD is a modern design tool focused on designs and prototypes of any kind, including mobile and webiste designs. Yotako extracts all the knowledge from Adobe XD designs and transforms it into interactive web or mobile interfaces for the devices of your choice and in your favorite programming languages.

Adobe XD.

Yotako tries to understand what kind of user interface you are designing (e.g., a button, a placeholder, a textfield, etc.). The good news is that you can tell Yotako to create what you want (e.g. a button) very easily in order to enforce a choice. The more precise your design is, the more accurate your code will be. In order to do this and maximize the experience with Adobe XD and Yotako, we have prepared these guidelines for you.

Using the Adobe XD Plugin

A plugin is available for you to install for free inside Adobe XD. It allows you to use Yotako directly from within Adobe XD without closing your favorite design tool. The following video illustrates the process.

Create mobile applications with Adobe XD and Yotako from Yotako on Vimeo.

Designing with Yotako in mind

Pages

In Adobe XD you create your pages inside Artboards.

Artboards

You can have multiple artboards. Yotako will consider each artboard as a different page. Yotako currently supports mobile artboards having a size of 375 x 667 pixels.

Single artboard per page.

Outside and clipped layers

Layers that are not fully contained in the design area will not be created in your final UI.

Widgets outside the page.

Layers to widgets

In order to tell Yotako how your UI is composed you have to think in terms of widgets. The term "widget" refers to UI components such as buttons, checkboxes or images. Unfortunately, the concept of widget does not exist in Adobe XD, that's why you have to follow two simple rules when you are creating your layers:

  • Layers hierarchy
  • Layers naming

Layers hierarchy

Widgets can be represented by one or multiple layers. For instance, a Text widget is just composed of a single layer:

  • Text layer
Text layer. Design of a Text.

For more complex widgets like Textfield multiple layers are required:

  • Group layer - This layer should be named Textfield
    • Placeholder - represents the placeholder (default text) of the widget
    • Background - represents the widget boundingbox and background styles.
Textfield layers. Design of a Textfield.

Everytime you use one of these patterns Yotako will ignore his intuition and will create exactly the widget you want. This way, you can create advanced widgets. Usually widgets will be composed of a main group and multiple sub-layers such as images, texts, shapes...

Layers naming

You should use specific names for each layer in order to let Yotako know which widget you want to create. Each of the following examples are valid layer names for a checkbox widget:

Naming convention.

As you can see, Yotako is not case sensitive as long as the widget name appears.

Widget states

Every widget can have multiple states. A state is the representation of a widget in a specific variation. Widgets have native states. For example, a Checkbox can be in a 'checked' or 'unchecked' state. To specify a state name, you should name your layer like this:

checkbox [checked]

To specify a state, name your layer this way:

checkbox [checked, disabled]
Providing states.

Widget names

Once you get the code from Yotako, you may want to retrieve the widgets by their names. Since Yotako only knows about layer naming, you can specify a name for a widget like this:

checkbox (my-checkbox-name)
Naming widgets.

Temporary unsupported features

Adobe XD is really great. Some features are still not supported but they will be very soon. The main ones are:

  • Artboards other than mobile (other resolutions than 375 x 667)
  • Vertical scroll
  • Blur effect
  • Paths
  • Gradients on text
  • Navigation
  • ...

Widgets reference

This section references how to create widgets using the Yotako guidelines. It provides for each widget the required layers and sub-layers hierarchy, as well as conventions for names and types of layers.

button

Layers & sub-layers

  • button btn shape layer bitmap layer REQUIRED
    It represents the bounding box and background style of this widget.
button layers. button design.

checkbox

Layers & sub-layers

  • checkbox shape layer bitmap layer REQUIRED
    It represents the bounding box and background style of this widget.
checkbox layers. checkbox design.

checkboxgroup

Layers & sub-layers

  • checkboxgroup group layer REQUIRED
    All checkboxes that are contained in this group layer will share the same checkboxgroup
checkboxgroup layers. checkboxgroup design.

container

Layers & sub-layers

  • * shape layer bitmap layer REQUIRED
    It represents the bounding box and background style of this widget.
container layers. container design.

image

Layers & sub-layers

  • * image img bitmap layer REQUIRED
    -
image layers. image design.

listbox

Layers & sub-layers

  • listbox group layer REQUIRED
    -
  • background bg rectangle shape layer bitmap layer REQUIRED
    It represents the bounding box and background style of this widget.
listbox layers. listbox design.

progressbar

Layers & sub-layers

  • progressbar group layer REQUIRED
    -
  • progressbar emptybar background bg shape layer bitmap layer REQUIRED
    It represents the empty bar boundingbox and background style of this widget.
  • fillbar shape layer bitmap layer REQUIRED
    It represents the filled bar style.
progressbar layers. progressbar design.

radiobutton

Layers & sub-layers

  • radiobutton shape layer bitmap layer REQUIRED
    It represents the bounding box and background style of this widget.
radiobutton layers. radiobutton design.

radiobuttongroup

Layers & sub-layers

  • radiobuttongroup group layer REQUIRED
    All checkboxes that are contained in this group layer will share the same checkboxgroup
radiobuttongroup layers. radiobuttongroup design.

text

Layers & sub-layers

  • * text layer REQUIRED
    -
text layers. text design.

textarea

Layers & sub-layers

  • textarea group layer REQUIRED
    -
  • background bg rectangle shape layer bitmap layer REQUIRED
    It represents the bounding box and background style of this widget.
  • placeholder default text layer
    This text layer represents the default text of a textarea widget.
  • value text text layer
    This text layer represents the current value of a textarea widget.
textarea layers. textarea design.

textfield

Layers & sub-layers

  • textfield textinput inputtext group layer REQUIRED
    -
  • background bg rectangle shape layer bitmap layer REQUIRED
    It represents the bounding box and background style of this widget.
  • placeholder default text layer
    This text layer represents the default text of a textfield widget.
  • value text text layer
    This text layer represents the current value of a textfield widget.
textfield layers. textfield design.