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.
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.
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.
In Adobe XD you create your pages inside 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.
Layers that are not fully contained in the design area will not be created in your final UI.
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:
Widgets can be represented by one or multiple layers. For instance, a Text widget is just composed of a single layer:
For more complex widgets like Textfield multiple layers are required:
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...
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:
As you can see, Yotako is not case sensitive as long as the widget name appears.
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:
To specify a state, name your layer this way:
checkbox [checked, disabled]
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:
Adobe XD is really great. Some features are still not supported but they will be very soon. The main ones are:
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.