- Convert AdobeXD artboards to Unity UI Prefab.
- To download and install
- https://github.com/itouh2-i0plus/XdUnityUI/releases
- click "▶Assets" of the latest version to download XdUnityUI.unitypackage.
- import the XdUnityUI.unitypackage into Unity. The /Assets/I0plus/XdUnityUI folder will be created.
- install the AdobeXD plugin
- Double-click on /Assets/I0plus/XdUnityUI-ForAdobeXD/XdUnityUIExport.xdx.
- When cloning from a Git repository
- clone a Git repository
- https://github.com/itouh2-i0plus/XdUnityUI
- We are using LFS, and some Git clients require configuration.
- https://github.com/itouh2-i0plus/XdUnityUI
- open (clone folder)/UnityProject in Unity.
- Assets/I0plus/XdUnityUI is the plugin folder.
- It's currently a Unity2019.3, UniversalRenderPipeline project.
- install the AdobeXD plugin
- Double-click on /Assets/I0plus/XdUnityUI-ForAdobeXD/XdUnityUIExport.xdx.
- clone a Git repository
-
open the Adobe XD sample.
- It's in /Assets/I0plus/XdUnityUI-ForAdobeXD/samples.xd.
-
AdobeXD export
- click on the artboard name and select the artboard.
- click on "XdUnityUI export plugin" in the plugin menu.
- "Folder" is the destination of the output folder.
- click on "Export" to start outputting.
- Unity conversion
- Unity Menu > Assets > XdUnityUI > Specify Folder Import
- Specifies the same folder as the export.
- 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.
AdobeXD | Unity |
---|---|
![]() |
![]() |
AdobeXD | Unity |
---|---|
![]() |
AdobeXD | Unity |
---|---|
![]() |
AdobeXD | Unity |
---|---|
![]() |
![]() |
AdobeXD | Unity |
---|---|
![]() |
AdobeXD | Unity |
---|---|
![]() |
AdobeXD | Unity |
---|---|
![]() |
AdobeXD | Unity |
---|---|
![]() |
- XD,Unity: Responsive resizing information is now more accurate.
- Unity: Import by specifying a folder.
- XD: Fixed to output a selection.
- Unity: fixed to work with Unity2018.
- Unity: fixed to work with Unity2017.
- Unity: deleted the asmdef file.
Details
- Maintain InputField conversion.
- README_JP.md Sample images added
- README.md Englishization
- XD plugins English support
- Sample Modifications
- README.md Revisions and additions
- Corrected XdPlugin/main.js comments
- TextMeshPro sample added and explanation corrected.
- Add Button Sample
- Toggle samples added
- README.md Fix.
- Creating a unitypackage
- How to install from unitypackage
- 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.
- 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.
- The name of the AdobeXD layer determines how it will function on Unity.
-
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.
- example
button start-button back-button
- Explanation.
- The button component is granted in Unity.
- caution
- A child layer needs an image layer.
-
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).
-
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".
- Example: If you are using the Open Sans font Regular in AdobeXD
- There is a design difference between AdobeXD and Unity. (e.g., Kerning).
-
Explanation.
- A postscript is planned.
- A postscript is planned.
- cause
- It may be a problem on Adobe XD. It is under investigation.
- 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 "So_XdUnityUIFonts file is located).
-
cause
- Scripting Define Symbols does not have TMP_PRESENT.
-
countermeasure
- Install the TextMeshPro package.
- Add TMP_PRESENT to Project Settings > Player > Scripting Define Symbols.
- cause
- The artboard background has been set up.
- countermeasure
- Select the art board and uncheck "Appearance" > "Paint".
- Editing the conversion rules CSS
- To change the XDX file
- rename XdUnityUIExport.xdx to XdUnityUIExport.zip.
- unzip and edit the index.css file.
- zip compression again, change the extension to xdx.
- reinstall the plugin.
- When expanding to the Adobe XD development folder
- uninstall the XdUnityUI export plugin.
- rename XdUnityUIExport.xdx to XdUnityUIExport.zip. Unzip and copy the folder to the AdobeXD development folder (go to Plugins > Development Version > Show Development Folder).
- edit index.css.
- reload the plugin. (AdobeXD plugin menu>development version>reload).
- To change the XDX file
- Conversion rule CSS description
- A postscript is planned.
- Per-artboard conversion rules
- A postscript is planned.
- A postscript is planned.
- A postscript is planned.
- 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).
- countermeasure
- 9Slice.
- in support of
- Component State
- https://helpx.adobe.com/jp/xd/help/create-component-states.html
- When it becomes possible to obtain it through the AdobeXD Plugin API, we will support it.
- The work done on Prefab (adding components and adjusting parameters in Unity) will disappear when Prefab is overwritten in conversion.
- the others
- under investigation
- Can it be converted to UXML?
- Is it possible to create a UI for DOTS mode?
- under investigation
- XdUnityUI is free (MIT license).
- It's open source on GitHub.
- The image license used in the sample
- "Vector graphic for Fishdom Playrix" by Daria Volkova is licensed under CC BY-NC-ND 4.0
- https://www.behance.net/gallery/10239443/Vector-graphic-for-Fishdom-Playrix
- @kyubuns (https://kyubuns.dev)
- Baum2 (https://github.com/kyubuns/Baum2)