How to use Replia

Replia imports layers from Adobe® Photoshop®/Sketch and exports Objective-C/Swift/Storyboard source code. This guide walks you through the connection between Photoshop and the basic operations of Replia: Import, Edit and Export data.

Import data from design tools

• Import from Photoshop …
• Import from Sketch …

Edit on Replia

Replia sets property-appropriate values automatically, but you can edit property values on the Replia UI to export the source code you want.

In the Replia window, the tree on the left shows view structure. The canvas in the center shows you a preview. The inspector on the right appears when you select an object in the tree or preview. You can also edit properties in the inspector.

Type

The ‘Type’ radio box is on top of the inspector. Type means a class of component which is exported in source code. You can select the type from View, Image View, Label and Custom View (limited by layer type in Photoshop).

Replia evaluates the initial type with the following rules:

• Invisible layers are not imported.
• Clipping masked layers are merged into one Image View.
• Text layer is a Label.
• Shape layer which draws a rectangle, a rounded rectangle or a circle is a View.
• A group is a View.
• Another layer is an Image View.

Other Properties

1. Instance Name

   You can enter the name of an instance in the ‘Instance’ text field. In this field, the placeholder shows the name which Replia infers from the layer name. You may then skip input.

   You can also enter the instance name in the tree on the left.

   

2. Layout Attributes

   The iPhone has several widths by devices. You can assign auto-layout attributes when the device width is larger than the layer width. This value will be exported as AutoresizingMasks.

   

   The preview has a width switch on the top. You can check the resized layout when you select ‘w:150%’.

   

   Tips: If layout previews do not change as you wish, you should check the parent view layout. When the selected view size is the same as the parent view, the size of the view will not change.

3. Other Properties

   There are several other properties.

   Name	Description
   Class	Class name. In a custom view, this property means file name.
   Image	Prefix of image file name. Image view type only.
   Property	Property name for the image. Image view type and child view of a custom view only.
   Alignment	Alignment of the UILabel. Label type only.
   Width	Width of the UILabel. Label type only.
   Font	Font of the UILabel. When the font of the original layer is not supported by iOS, system font is selected as default value. Label type only.
   Text Property	Property name for text of label. Label type and child view of a custom view only.

Select Output Format

Press the Gear button on the tool bar. The “Output Option” window will be shown. Here you can select your output format.

Output Data

Press the Export button on the right side of the toolbar to export a project file for Xcode in the selected format. The project file can be executed on the debugger. Copy the necessary files to your project.

–

^{Adobe and Photoshop are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.}