Your First XD to iOS XCode and Storyboard Export

Convert your XD to iOS Storyboard UI with XCode and Swift support in minutes. The XD to iOS conversion is simple and painless with full support for Image Asset mapping, Storyboard Scenes and more. XD to iOS is an advanced export and will require a general understanding of iOS, XCode and Swift to modify the code.

TIP: Learn How to use Export Kit with XD and start to experience awesome in seconds.

✱ NOTE: iOS supports 3 main screen sizes for iPhone, iPad and AppleTV.  You will need to map your target screens in XD.

Before You Begin

iOS Storyboard UI and XCode are advanced exports and will require customizations in the code to make the iOS app functional. Each platform of iOS is slightly different and may require advanced knowledge of XCode to correctly configure specific environment options.

TIP: You must use as many folders as possible to organize your UI/UX into stacked layouts.  Your design should match the size of your target screen.

⛔ IMPORTANT: Your project and page names must start with a letter and use [a-z0-9_.] - lowercase letters and numbers only.

Element Rendering

XD layers are converted to iOS Storyboard elements with relative positioning to its respective parent element. Your designs render WYSIWYG (What you see is what you get), this means you must target the correct device screen size to get pixel-perfect translation of your XD to iOS Storyboard elements for XCode.

✱ NOTE: XD and iOS both render elements differently, and have different support for effects.  Some XD styles may not render the same visually in iOS.

Content Margins

All Views have a default Content Margin applied to each element. This margin will clip the sub-views (child layers) of the element when placed within the margin. It is important to use ${skip} margins or content backgrounds to add custom constraints to your View for an optimized display.

Color Rendering

Colors in iOS use calibratedRGB which is NOT THE SAME as XD RGB, this means that some colors will not render as expected and may require tweaking.

Example Color Node

1

<color key="textColor" red="0" green="34" blue="145" alpha="1" colorSpace="calibratedRGB" />

⛔ IMPORTANT: Your colors may not render the same in iOS as XD, convert problematic layers to images using ${img} tag.

Image Rendering

Images are rasterized and rendered as-is. Your image will size according to the target screen and will render in the Assets folder. Each image file saves with its respective Contents.json description file.

⛔ IMPORTANT: iOS has specific rules for image names, you CANNOT USE "-" (dash) in your layer name.

my image name = GOOD
myImageName = GOOD
my_image_name = GOOD
my-image-name = BAD (no dash)

Shape Rendering

iOS does not have full support for native shapes and vectors in Storyboard.

Text Rendering

There are special rules for processing text with iOS due to iOS Content Margins. You MUST use Paragraph Text and draw the area of the text layer slightly larger than the expected size.

⛔ IMPORTANT: iOS will add a Content Margin and clip your text if you do not draw the text area slightly larger than the expected size.

Font Rendering

You will have to manually add your required fonts into your iOS project. In future versions we will import them from you.

Artboard Scenes

You can create an unlimited number of iOS Storyboard Scenes from your XD artboards. Each Storyboard Scene will maintain a layout and Swift ViewController file.

⛔ IMPORTANT: Your project and page names must start with a letter and use [a-z0-9_.] - lowercase letters and numbers only.

Swif ViewControllers

ALPHA RELEASE: Currently Export Kit will only render a basic ViewController, in a future release we will include IBOutlet and IBAction for elements.

All Artboards convert to respective Swift ViewController in the XD to iOS output. Your Swift ViewController files will reference all the layer elements contained in the iOS Storyboard layout file.

Avoid Output Errors

Make sure you read and understand our XD Design Rules and Layer Naming Rules to avoid visual errors in your Output.

Make sure you read and go over our Before You Export Check List to avoid functional errors in your Output.

BUG: .xcodeproj cannot be opened ... cannot be parsed.
FIX: Your project name must start with a letter
FIX: Use lowercase letters, numbers and "_" underscore

BUG: Images did not load correctly
FIX: Remove "-" (dash) from image layer names

BUG: Elements render incorrectly/clipping
FIX: Draw extra space in the Paragraph text area
FIX: Create a ${skip} margin for the folder