Xd Unity UI by itouh2-i0plus - 1

Importers & ExportersGUI

AdobeXD to Unity UI converter

Unknown VersionMIT LicenseUpdated 7 days agoCreated on February 27th, 2020
Go to source

XdUnityUI - AdobeXD to Unity UI

introduction

Language.

Overview

  • Convert AdobeXD artboards to Unity UI Prefab.

Installation

  • To download and install
    1. https://github.com/itouh2-i0plus/XdUnityUI/releases Click on “▶Assets” of the latest version to download XdUnityUI.unitypackage.
    2. import the XdUnityUI.unitypackage into Unity. The /Assets/I0plus/XdUnityUI folder will be created.
    3. install the AdobeXD plugin
      • Double-click on /Assets/I0plus/XdUnityUI-ForAdobeXD/XdUnityUIExport.xdx.
  • When cloning from a Git repository
    1. clone a Git repository
    2. open (clone folder)/UnityProject in Unity.
      • Assets/I0plus/XdUnityUI is the plugin folder.
      • It’s currently a Unity2019.3, UniversalRenderPipeline project.
    3. install the AdobeXD plugin
      • Double-click on /Assets/I0plus/XdUnityUI-ForAdobeXD/XdUnityUIExport.xdx.

Quick Start

  1. open the Adobe XD sample.

    • It’s in /Assets/I0plus/XdUnityUI-ForAdobeXD/samples.xd.
  2. AdobeXD export

    1. click on the artboard name and select the artboard.
    2. click on “XdUnityUI export plugin” in the plugin menu. 1 “Folder” is the destination of the output folder.
      • (installation folder)/UnityProject/I0plus/XdUnityUI/Import folder. Click the “Export” button to start outputting.
      • Please refer to this article “When a problem occurs” for more information on cases where the output stops due to an error.
  1. unity conversion
    • Go to Unity Menu > Assets > XdUnityUI > Import and the conversion will start.
    • The created Prefab will be placed in Assets/I0plus/CreatedPrefabs.
    • The created UI images are placed in Assets/I0plus/CreatedSprites.
      • UI images are sliced.

Place the Prefab under the Canvas.

Sample.

Dots Scrollbar/ Horizontal layout scroll

AdobeXD Unity

Image switching button

AdobeXD Unity

Dialogue

AdobeXD Unity

Vertical scrolling list

AdobeXD Unity

Character Input

AdobeXD Unity

Toggle/radio button

AdobeXD Unity

Scroll.

AdobeXD Unity

Text Window

AdobeXD Unity

ChangeLog

[v0.8] - 2020-03-16

  • XD: Fixed to output a selection.
  • Unity: fixed to work with Unity2018.
  • Unity: fixed to work with Unity2017.
  • Unity: deleted the asmdef file.
Details
### [v0.7.2] - 2020-03-13 - Testing the DotsScrollbar - Fixing mask processing

[v0.5] - 2020-03-07

  • Maintain InputField conversion.
  • README_JP.md Sample images added

[v0.4] - 2020-03-04

  • README.md Englishization
  • XD plugins English support

[v0.3.2] - 2020-03-03

  • Sample Modifications
  • README.md Revisions and additions
  • Corrected XdPlugin/main.js comments

[v0.3.1] - 2020-03-02

  • TextMeshPro sample added and explanation corrected.
  • Add Button Sample
  • Toggle samples added
  • README.md Fix.

[v0.3] - 2020-03-01

  • Creating a unitypackage
  • How to install from unitypackage
.

Operating conditions

  • It’s developed on Windows.
    • It is currently inadequately tested on a Mac.
  • We’re developing in Unity2019.3.
  • AdobeXD has been tested with the latest version.

About conversion

Overview

  • The conversion rules are applied to Adobe XD layer names.
    • The conversion rules are defined by the CSS description.
    • The output is a JSON file and an image file.
    • The output image will be sliced unless otherwise specified.
  • Writing the output file to the Unity project, XdUnityUI/Import folder, will perform the conversion process in Unity.
  • Prefab and Sprite will be output to the specified folder.

Rule Description

  • The name of the AdobeXD layer determines how it will function on Unity.

image

  • example

    image.
    window-image
    icon-image
    
  • Explanation.

    • If a layer or group layer has a name like the above, it will generate an image of the combined image of that layer and its child layers, and will be given an Image component in Unity.
  • caution

    • Child layers are also treated as images, so they will not be converted.

button

  • example
    button
    start-button
    back-button
    
  • Explanation.
    • The button component is granted in Unity.
  • caution
    • A child layer needs an image layer.

text

  • example

    text
    title-text
    name-text
    
  • Explanation.

    • The Text component is also attached in Unity by giving the text layer a name like the above.
  • caution

    • The font used by AdobeXD must exist in the Unity project, in Assets/I0plus/XdUnityUI/Fonts/ below, in .ttf or .otf.
    • There is a design difference between AdobeXD and Unity. (e.g., Kerning).

textmp

  • example

    textmp
    title-textmp
    name-textmp
    
  • Explanation.

    • The TextMeshPro component is also attached in Unity by giving the text layer a name like the above.
  • caution

    • You need TMP_PRESENT in Project Settings > Player > Scripting Define Symbols.
    • TextMeshPro font assets are required for fonts used by Adobe XD in Unity projects, such as Assets/I0plus/XdUnityUI/Fonts/.
      • Example: If you are using the Open Sans font Regular in AdobeXD
        • TextMeshPro font, look for the file name “Open Sans-Regular SDF.set”.
    • There is a design difference between AdobeXD and Unity. (e.g., Kerning).

.viewport-layout-y

  • Explanation.

    • Scrollable vertical layout.
    • Refer to the samples.xd VerticalListSample artboard. (with scroll bar).
    • A postscript is planned.

scrollbar

  • A postscript is planned.

toggle.

  • A postscript is planned.

When a problem arises

AdobeXD plugin running.

Exporting images fails.

  • cause
    • It may be an issue on Adobe XD. It is under investigation.
  • countermeasure Select a layer and operate the image output. If you select the XdUnityUI/Import folder as the output destination, make sure that the output is disabled.
    1. change the folder and output images. Output to the Import folder again.
    2. if the above is successful, the output from the plugin will also be successful.

Unity conversion running.

No conversion process is performed.

  • cause

    • This is because Unity cannot detect file updates when overwriting a file after a failure.
  • countermeasure

    • Delete all files in XdUnityUI/Import except for the “Lu_XdUnityUIImport”"Lu_XdUnityUIImport "Lu_XdUnityUIImport.meta file.
    • Export again.

Conversion fails when attempting to handle characters (Text, TextMeshPro).

  • cause
    • There may be no font.
  • countermeasure
    • It will output the name of the font file you tried to find in the Console but couldn’t find.
    • Rename the font file, if possible, and copy it to the XdUnityUI/Fonts directory (the directory where the {\FONT}_XdUnityUIFonts file is located).

TextMeshPro error is printed.

  • cause

    • Scripting Define Symbols does not have TMP_PRESENT.
  • countermeasure

    • Add TMP_PRESENT to Project Settings > Player > Scripting Define Symbols.
      • I heard that TMP_PRESENT may not be appended after installing the TextMeshPro package. (v3.0? unconfirmed)

Conversion Results

Responsive parameters are not converted correctly.

  • Cause 1
    • The “Change Responsive Size” setting on the artboard is not turned on.
  • Measure 1.
    • Select the artboard and select “Layout” > “Change Responsive Size”.
  • Cause 2
    • When executing the Adobe XD plugin, the responsive parameters are obtained by changing the size of the artboard and watching the change in the size of the layer. In this case, the responsive parameter cannot be determined for the layer in the repeating grid or any other layer whose size does not change.
  • Measure 2.
    • Use the margin-fix property and specify it explicitly.
      • Example: start-button {margin-fix: t b l r}
    • We will support it when it becomes possible to get responsive parameters in the AdobeXD Plugin API.

No need for the image component of the artboard background

  • cause
    • The artboard background has been set up.
  • countermeasure
    • Select the art board and uncheck “Appearance” > “Paint”.

To use it better.

Original conversion rules

  • Editing the conversion rules CSS
    • To change the XDX file
      1. rename XdUnityUIExport.xdx to XdUnityUIExport.zip.
      2. unzip and edit the index.css file.
      3. zip compression again, change the extension to xdx.
      4. reinstall the plugin.
    • When expanding to the Adobe XD development folder
      1. uninstall the XdUnityUI export plugin.
      2. rename XdUnityUIExport.xdx to XdUnityUIExport.zip. Unzip and copy the folder to the AdobeXD development folder (go to Plugins > Development Version > Show Development Folder).
      3. edit index.css.
      4. reload the plugin. (AdobeXD plugin menu>development version>reload).
  • Conversion rule CSS description
    • A postscript is planned.
  • Per-artboard conversion rules
    • A postscript is planned.

Add your own components when converting

  • A postscript is planned.

9Slice.

  • A postscript is planned.

Future Plans

  • Target.
    • Enable UI design in AdobeXD until release.
  • merit
    • Hold the final version in the hands of the designer.
    • You can use CCLibrary to integrate with various tools.
  • Issue.
    • The work done on Prefab (adding components and adjusting parameters in Unity) will disappear when Prefab is overwritten in conversion.
      • countermeasure
        • Copy and use.
        • In Prefab Variant, evacuate additional work.
          • A name change would cause the work to disappear.
          • There seems to be some work left in the Variant file (under investigation to see if it can be restored).
    • 9Slice.
      • in support of
    • Component State
  • the others
    • under investigation
      • Can it be converted to UXML?
      • Is it possible to create a UI for DOTS mode?

License.

Support Forum

Acknowledgements.

Thank you so much for your help.

Show all projects by itouh2-i0plus