Loading...

Convert a PSD to XML and JSON

Last updated on September 22, 2020

Convert any PSD to XML and JSON data in a few clicks. PSD to XML and JSON has support for layer styles/effects, shapes and advanced text support. All PSD layers are converted to clean and clear XML and JSON data, respective of the Outputs you have enabled.

Both XML and JSON Outputs provide similar  PSD layer information, but are each structured for their individual data types.
NOTE: If you include Inline Code with your export you will render additional text layer +raw layer effects (Photoshop only) data with your Output.

PSD Layer Data Support

Export Kit supports many different layer types but there are a 4 general Photoshop layer types, 3 of which are supported in XML and JSON. We do not currently support Folder data as we assume you are loading XML and/or JSON into your current application.

Layer Data Support List

1. Image - SUPPORTED
2. Text - SUPPORTED
3. Shape - SUPPORTED
4. Folder - SUPPORTED

NOTE: Folders are supported in v127.

Document Meta (PSD File Info)

Export Kit will use the information in your PSD file info to generate your default file info in your XML or JSON Output.

Press Ctrl + Shift + Alt + i to access the Photoshop document meta, or go to File > File Info.

XML Data

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!-- 
/*
 *    @desc         @string
 *    @file         @psd.psd
 *    @date         @time
 *    @title         @string
 *    @author     @string
 *    @keywords     [@string]
 *    @generator     Export Kit 1.2.6
 *
*/
 -->
<layers 
    name="@string" 
    path="@url" />

JSON Data

1
2
3
4
5
6
7
8
9
10
11
12
13

{
    "name":"@psd.psd",
    "path":"@url",
    "info":{
        "description":"@string",
        "file":"@psd.psd",
        "date":"@time",
        "title":"@string",
        "author":"@string",
        "keywords":"[@string]",
        "generator":"Export Kit 1.2.6"
    }
}

Step 1: Basic Layer Data

XML and JSON have basic layer data which is included with each PSD layer export. The basic layer data will include (a) name, (b) layer type, (c) position, (d) size, and (e) opacity.

XML Data

1
2
3
4
5
6
7
8

<layer 
    name="@string" 
    type="image|text|shape" 
    x="@number" 
    y="@number" 
    alpha="@number"
    width="@number" 
    height="@number" />

JSON Data

1
2
3
4
5
6
7
8
9

{
    "type":"image|text|shape",
    "name":"@string",
    "x":@number,
    "y":@number,
    "alpha":@number,
    "width":@number,
    "height":@number
}

Hidden Layers

If you select Hidden Layers with your XML or JSON Output, you will also render the visibility state of the PSD layer with the export.

XML Data

1

<layer visible="@boolean" />

JSON Data

1

{ "visible":@boolean }

Step 2: Image Layer Data

PSD image layers will provide you with the url to the image file exported with your XML or JSON Output.

NOTE: URLs will reflect the layer image in the skins folder.

XML Data

1
2
3

<layer 
    type="image"     
    src="@url" />

JSON Data

1
2
3
4

{
    "type":"image",
    "src":"@url"
}
Learn how to Generate PSD to PNG, JPG and GIF Images from your PSD file.

Step 3: Text Layer Data

PSD text layers will include the text content of the layer along with font information, and line-height.

XML Data

1
2
3
4
5
6
7
8

<layer 
    type="text"
    font="@string"
    color="@color"
    size="@number"
    lineHeight="@number">
    <![CDATA[@string]]>
</layer>

JSON Data

1
2
3
4
5
6
7
8

{
    "type":"text",
    "font":"@string",
    "color":"@color",
    "size":@number,
    "lineHeight":@number,
    "text":"@string"
}

Inline Text Data

Using Inline Code will include styles, and justification in your XML or JSON Output.

XML Data

1
2
3
4
5
6
7

<layer 
    justification="left|center|right"
    weight="|bold"
    style="|italic"
    underline="|true"
    strike="|true"
    uppercase="|true" />

JSON Data

1
2
3
4
5
6
7
8

{
    "justification":"left|center|right",
    "weight":"|bold",
    "style":"|italic",
    "underline":|true,
    "strike":|true,
    "uppercase":|true
}

Text Style Ranges

Using ${p} tag will include style ranges for text layers in your JSON or XML output.

XML Data

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<layer>
    <ranges>
        <node_0>
            <range>
                <node_0>@number</node_0>
                <node_1>@number</node_1>
            </range>
            <font-family>@string</font-family>
            <font-size>@number</font-size>
            <font-style>|italic</font-style>
            <color>@color</color>
            <text-transform>|uppercase</text-transform>
            <line-height>@number</line-height>
        </node_0>
    </ranges>
</layer>

JSON Data

1
2
3
4
5
6
7
8
9
10
11
12
13

{
    "ranges": [
        {
            "range": [@number],
            "font-family": "@string",
            "font-size": "@number",
            "font-style": "|italic",
            "color": "@color",
            "text-transform": "|uppercase",
            "line-height": "@number"
        }
    ]
}

Icon Fonts and Special Characters

XML and JSON data are both native text files. Be careful when adding special characters to your PSD text layer, as the character may not render correctly in the Output. Text files are normally encoded based on your default language and system encoding settings (normally UTF-8).

FIX: Use ${char} Tag to encode your special characters, and use rawurldecode in PHP or decodeURIComponent in JavaScript to decode your string.
FIX: Add the ASCII value for special characters to ensure they will render correctly.
Read more about UTF-8 Encoding on Wikipedia.org.

Step 4: Shape Layer Data

PSD shape layers will include the shape type of the layer along with radius, and color.

XML Data

1
2
3
4
5

<layer 
    type="shape"
    shapeType="rectangle|ellipse|round rectangle"
    radius="@number"
    color="@color" />

JSON Data

1
2
3
4
5
6

{
    "type":"shape",
    "shapeType":"rectangle|ellipse|round rectangle",
    "radius":"@number",
    "color":"@color"
}

Polygon and Vectors

Vectors are used to render complex graphics which do not lose quality when scaled, this means that you can resize the graphic to any dimensions and it will always look pixel-perfect.

You must enable SVG Paths to render vectors.

XML Data

1
2
3
4
5
6
7
8
9
10
11
12

<layer 
    shapeType="vector" >
    <corners>
        <node_0>
            <node_0>corner|smooth</node_0>
            <node_1>
                <node_0>@number</node_0>
                <node_1>@number</node_1>
            </node_1>
        </node_0>
    </corners>
</layer>

JSON Data

1
2
3
4
5
6
7
8
9

{
    "shapeType":"vector",
    "corners": [
        [
            "corner|smooth",
            [@number]
        ]
    ]
}

Step 5: Layer Effects Data

If you Enable Layer Effects with your output you will have access to a variety of effects data in your XML or JSON Output. All PSD layer effects are contained within a single effects object.

Learn more about our Layer Effects and Styles support.

XML Data

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<layer >
    <effects>
        <effect 
            type="dropShadow" 
            distance="@number" 
            angle="@number" 
            color="@color" 
            alpha="@number" 
            blurX="@number" 
            blurY="@number" />
        <effect 
            type="solidFill" 
            color="@string" />
        <effect 
            type="innerShadow" 
            distance="@number" 
            angle="@number" 
            color="@color" 
            alpha="@number" 
            blurX="@number" 
            blurY="@number" />
        <effect 
            type="frameFX" 
            lineSize="@number" 
            color="@color"
            alpha="@number"  />
        <effect 
            type="gradientFill" 
            angle="@number" 
            colors="[@color]" 
            alphas="[@number]" 
            ratios="[@number]" />
        <effect 
            type="innerGlow" 
            color="@color" 
            alpha="@number" 
            blurX="@number" 
            blurY="@number" />
        <effect 
            type="outerGlow" 
            color="@color" 
            alpha="@number" 
            blurX="@number" 
            blurY="@number" />
    </effects>
</layer>

JSON Data

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

{
    "effects":{
        "dropShadow":{
            "distance":@number,
            "angle":@number,
            "color":"@color",
            "alpha":@number,
            "blurX":@number,
            "blurY":@number
        },
        "solidFill":{
            "color":"@string"
        },
        "innerShadow":{
            "distance":@number,
            "angle":@number,
            "color":"@color",
            "alpha":@number,
            "blurX":@number,
            "blurY":@number
        },
        "frameFX":{
            "lineSize":@number,
            "color":"@color",
            "alpha":@number
        },
        "gradientFill":{
            "angle":@number,
            "colors":[@color],
            "alphas":[@number],
            "ratios":[@number]
        },
        "innerGlow":{
            "color":"@color",
            "alpha":@number,
            "blurX":@number,
            "blurY":@number
        },
        "outerGlow":{
            "color":"@color",
            "alpha":@number,
            "blurX":@number,
            "blurY":@number
        }
    }
}

Raw Photoshop Layer Effects

Using Inline Code will include raw Photoshop layer effects in your output.

NOTE: This will export all available Photoshop layer effects and properties.
IMPORTANT: There are MANY available Photoshop layer effects and properties!

XML Data

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248

<layer>
    <effects>
        <scale>100</scale>
        <dropShadow>
            <enabled>1</enabled>
            <mode>multiply</mode>
            <color>
                <red>0</red>
                <green>0.097952591168</green>
                <blue>0.10257758869557</blue>
            </color>
            <opacity>56</opacity>
            <useGlobalAngle>1</useGlobalAngle>
            <localLightingAngle>120</localLightingAngle>
            <distance>4</distance>
            <chokeMatte>2</chokeMatte>
            <blur>4</blur>
            <noise>0</noise>
            <antiAlias></antiAlias>
            <transferSpec>
                <name>Linear</name>
            </transferSpec>
            <layerConceals>1</layerConceals>
            <offsetX>2</offsetX>
            <offsetY>3</offsetY>
        </dropShadow>
        <innerShadow>
            <enabled>1</enabled>
            <mode>multiply</mode>
            <color>
                <red>0.0296688079834</red>
                <green>0.2446460723877</green>
                <blue>0.25555908679962</blue>
            </color>
            <opacity>100</opacity>
            <useGlobalAngle></useGlobalAngle>
            <localLightingAngle>120</localLightingAngle>
            <distance>15</distance>
            <chokeMatte>9</chokeMatte>
            <blur>15</blur>
            <noise>0</noise>
            <antiAlias></antiAlias>
            <transferSpec>
                <name>Linear</name>
            </transferSpec>
            <offsetX>8</offsetX>
            <offsetY>13</offsetY>
        </innerShadow>
        <outerGlow>
            <enabled>1</enabled>
            <mode>normal</mode>
            <color>
                <red>255</red>
                <green>255</green>
                <blue>255</blue>
            </color>
            <opacity>100</opacity>
            <glowTechnique>preciseMatte</glowTechnique>
            <chokeMatte>5</chokeMatte>
            <blur>25</blur>
            <noise>28</noise>
            <shadingNoise>19</shadingNoise>
            <antiAlias>1</antiAlias>
            <transferSpec>
                <name>Linear</name>
            </transferSpec>
            <inputRange>59</inputRange>
        </outerGlow>
        <innerGlow>
            <enabled>1</enabled>
            <mode>vividLight</mode>
            <color>
                <red>255</red>
                <green>255</green>
                <blue>255</blue>
            </color>
            <opacity>75</opacity>
            <glowTechnique>softMatte</glowTechnique>
            <chokeMatte>25</chokeMatte>
            <blur>10</blur>
            <shadingNoise>17</shadingNoise>
            <noise>12</noise>
            <antiAlias></antiAlias>
            <innerGlowSource>edgeGlow</innerGlowSource>
            <transferSpec>
                <name>$$$/Contours/Defaults/HalfRound=Half Round</name>
            </transferSpec>
            <inputRange>50</inputRange>
        </innerGlow>
        <bevelEmboss>
            <enabled>1</enabled>
            <highlightMode>screen</highlightMode>
            <highlightColor>
                <red>255</red>
                <green>255</green>
                <blue>255</blue>
            </highlightColor>
            <highlightOpacity>43</highlightOpacity>
            <shadowMode>multiply</shadowMode>
            <shadowColor>
                <red>0</red>
                <green>0.097952591168</green>
                <blue>0.10257758869557</blue>
            </shadowColor>
            <shadowOpacity>86</shadowOpacity>
            <bevelTechnique>preciseMatte</bevelTechnique>
            <bevelStyle>pillowEmboss</bevelStyle>
            <useGlobalAngle>1</useGlobalAngle>
            <localLightingAngle>120</localLightingAngle>
            <localLightingAltitude>30</localLightingAltitude>
            <strengthRatio>327</strengthRatio>
            <blur>16</blur>
            <bevelDirection>stampOut</bevelDirection>
            <transferSpec>
                <name>$$$/Contours/Defaults/RollingSlopeDescending=Rolling Slope - Descending</name>
            </transferSpec>
            <antialiasGloss>1</antialiasGloss>
            <softness>6</softness>
            <useShape>1</useShape>
            <mappingShape>
                <name>$$$/Contours/Defaults/Sawtooth1=Sawtooth 1</name>
            </mappingShape>
            <antiAlias></antiAlias>
            <inputRange>100</inputRange>
            <useTexture></useTexture>
        </bevelEmboss>
        <chromeFX>
            <enabled>1</enabled>
            <mode>multiply</mode>
            <color>
                <red>0</red>
                <green>0.097952591168</green>
                <blue>0.10257758869557</blue>
            </color>
            <antiAlias>1</antiAlias>
            <invert>1</invert>
            <opacity>68</opacity>
            <localLightingAngle>19</localLightingAngle>
            <distance>4</distance>
            <blur>6</blur>
            <mappingShape>
                <name>$$$/Contours/Defaults/DoubleRing=Ring - Double</name>
            </mappingShape>
        </chromeFX>
        <solidFill>
            <enabled>1</enabled>
            <mode>normal</mode>
            <opacity>28</opacity>
            <color>
                <red>100.70715129376</red>
                <green>107.23994314671</green>
                <blue>109.90721002221</blue>
            </color>
        </solidFill>
        <gradientFill>
            <enabled>1</enabled>
            <mode>normal</mode>
            <opacity>65</opacity>
            <gradient>
                <name>Custom</name>
                <gradientForm>customStops</gradientForm>
                <interfaceIconFrameDimmed>4096</interfaceIconFrameDimmed>
                <colors>
                    <node_0>
                        <color>
                            <red>7.0037841796875</red>
                            <green>35.999450683594</green>
                            <blue>89.002532958984</blue>
                        </color>
                        <type>userStop</type>
                        <location>0</location>
                        <midpoint>50</midpoint>
                    </node_0>
                    <node_1>
                        <color>
                            <red>0</red>
                            <green>255</green>
                            <blue>255</blue>
                        </color>
                        <type>userStop</type>
                        <location>2048</location>
                        <midpoint>50</midpoint>
                    </node_1>
                    <node_2>
                        <color>
                            <red>255</red>
                            <green>255</green>
                            <blue>255</blue>
                        </color>
                        <type>userStop</type>
                        <location>4096</location>
                        <midpoint>50</midpoint>
                    </node_2>
                </colors>
                <transparency>
                    <node_0>
                        <opacity>100</opacity>
                        <location>0</location>
                        <midpoint>50</midpoint>
                    </node_0>
                    <node_1>
                        <opacity>100</opacity>
                        <location>4096</location>
                        <midpoint>50</midpoint>
                    </node_1>
                </transparency>
            </gradient>
            <angle>27</angle>
            <type>linear</type>
            <reverse>1</reverse>
            <dither>1</dither>
            <align>1</align>
            <scale>70</scale>
            <offset>
                <horizontal>0</horizontal>
                <vertical>0</vertical>
            </offset>
        </gradientFill>
        <patternFill>
            <enabled>1</enabled>
            <mode>colorBurn</mode>
            <opacity>100</opacity>
            <pattern>
                <name>$$$/Presets/Patterns/Patterns_pat/Bubbles=Bubbles</name>
                <ID>b7334da0-122f-11d4-8bb5-e27e45023b5f</ID>
            </pattern>
            <scale>100</scale>
            <align>1</align>
            <phase>
                <horizontal>0</horizontal>
                <vertical>0</vertical>
            </phase>
        </patternFill>
        <frameFX>
            <enabled>1</enabled>
            <style>outsetFrame</style>
            <paintType>solidColor</paintType>
            <mode>normal</mode>
            <opacity>100</opacity>
            <size>3</size>
            <color>
                <red>0.0296688079834</red>
                <green>0.2446460723877</green>
                <blue>0.25555908679962</blue>
            </color>
        </frameFX>
    </effects>
</layer>

JSON Data

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248

{
        "effects": {
        "scale": 100,
        "dropShadow": {
            "enabled": true,
            "mode": "multiply",
            "color": {
                "red": 0,
                "green": 0.097952591168,
                "blue": 0.10257758869557
            },
            "opacity": 56,
            "useGlobalAngle": true,
            "localLightingAngle": 120,
            "distance": 4,
            "chokeMatte": 2,
            "blur": 4,
            "noise": 0,
            "antiAlias": false,
            "transferSpec": {
                "name": "Linear"
            },
            "layerConceals": true,
            "offsetX": 2,
            "offsetY": 3
        },
        "innerShadow": {
            "enabled": true,
            "mode": "multiply",
            "color": {
                "red": 0.0296688079834,
                "green": 0.2446460723877,
                "blue": 0.25555908679962
            },
            "opacity": 100,
            "useGlobalAngle": false,
            "localLightingAngle": 120,
            "distance": 15,
            "chokeMatte": 9,
            "blur": 15,
            "noise": 0,
            "antiAlias": false,
            "transferSpec": {
                "name": "Linear"
            },
            "offsetX": 8,
            "offsetY": 13
        },
        "outerGlow": {
            "enabled": true,
            "mode": "normal",
            "color": {
                "red": 255,
                "green": 255,
                "blue": 255
            },
            "opacity": 100,
            "glowTechnique": "preciseMatte",
            "chokeMatte": 5,
            "blur": 25,
            "noise": 28,
            "shadingNoise": 19,
            "antiAlias": true,
            "transferSpec": {
                "name": "Linear"
            },
            "inputRange": 59
        },
        "innerGlow": {
            "enabled": true,
            "mode": "vividLight",
            "color": {
                "red": 255,
                "green": 255,
                "blue": 255
            },
            "opacity": 75,
            "glowTechnique": "softMatte",
            "chokeMatte": 25,
            "blur": 10,
            "shadingNoise": 17,
            "noise": 12,
            "antiAlias": false,
            "innerGlowSource": "edgeGlow",
            "transferSpec": {
                "name": "$$$\/Contours\/Defaults\/HalfRound=Half Round"
            },
            "inputRange": 50
        },
        "bevelEmboss": {
            "enabled": true,
            "highlightMode": "screen",
            "highlightColor": {
                "red": 255,
                "green": 255,
                "blue": 255
            },
            "highlightOpacity": 43,
            "shadowMode": "multiply",
            "shadowColor": {
                "red": 0,
                "green": 0.097952591168,
                "blue": 0.10257758869557
            },
            "shadowOpacity": 86,
            "bevelTechnique": "preciseMatte",
            "bevelStyle": "pillowEmboss",
            "useGlobalAngle": true,
            "localLightingAngle": 120,
            "localLightingAltitude": 30,
            "strengthRatio": 327,
            "blur": 16,
            "bevelDirection": "stampOut",
            "transferSpec": {
                "name": "$$$\/Contours\/Defaults\/RollingSlopeDescending=Rolling Slope - Descending"
            },
            "antialiasGloss": true,
            "softness": 6,
            "useShape": true,
            "mappingShape": {
                "name": "$$$\/Contours\/Defaults\/Sawtooth1=Sawtooth 1"
            },
            "antiAlias": false,
            "inputRange": 100,
            "useTexture": false
        },
        "chromeFX": {
            "enabled": true,
            "mode": "multiply",
            "color": {
                "red": 0,
                "green": 0.097952591168,
                "blue": 0.10257758869557
            },
            "antiAlias": true,
            "invert": true,
            "opacity": 68,
            "localLightingAngle": 19,
            "distance": 4,
            "blur": 6,
            "mappingShape": {
                "name": "$$$\/Contours\/Defaults\/DoubleRing=Ring - Double"
            }
        },
        "solidFill": {
            "enabled": true,
            "mode": "normal",
            "opacity": 28,
            "color": {
                "red": 100.70715129376,
                "green": 107.23994314671,
                "blue": 109.90721002221
            }
        },
        "gradientFill": {
            "enabled": true,
            "mode": "normal",
            "opacity": 65,
            "gradient": {
                "name": "Custom",
                "gradientForm": "customStops",
                "interfaceIconFrameDimmed": 4096,
                "colors": [
                    {
                        "color": {
                            "red": 7.0037841796875,
                            "green": 35.999450683594,
                            "blue": 89.002532958984
                        },
                        "type": "userStop",
                        "location": 0,
                        "midpoint": 50
                    },
                    {
                        "color": {
                            "red": 0,
                            "green": 255,
                            "blue": 255
                        },
                        "type": "userStop",
                        "location": 2048,
                        "midpoint": 50
                    },
                    {
                        "color": {
                            "red": 255,
                            "green": 255,
                            "blue": 255
                        },
                        "type": "userStop",
                        "location": 4096,
                        "midpoint": 50
                    }
                ],
                "transparency": [
                    {
                        "opacity": 100,
                        "location": 0,
                        "midpoint": 50
                    },
                    {
                        "opacity": 100,
                        "location": 4096,
                        "midpoint": 50
                    }
                ]
            },
            "angle": 27,
            "type": "linear",
            "reverse": true,
            "dither": true,
            "align": true,
            "scale": 70,
            "offset": {
                "horizontal": 0,
                "vertical": 0
            }
        },
        "patternFill": {
            "enabled": true,
            "mode": "colorBurn",
            "opacity": 100,
            "pattern": {
                "name": "$$$\/Presets\/Patterns\/Patterns_pat\/Bubbles=Bubbles",
                "ID": "b7334da0-122f-11d4-8bb5-e27e45023b5f"
            },
            "scale": 100,
            "align": true,
            "phase": {
                "horizontal": 0,
                "vertical": 0
            }
        },
        "frameFX": {
            "enabled": true,
            "style": "outsetFrame",
            "paintType": "solidColor",
            "mode": "normal",
            "opacity": 100,
            "size": 3,
            "color": {
                "red": 0.0296688079834,
                "green": 0.2446460723877,
                "blue": 0.25555908679962
            }
        }
    }
}

Step 6: Data Sets

Enable Page Tags with your output and you can extend XML and JSON by creating custom data sets in a single PSD file. You can store individual layer items in a single page, eg. strings.xml or strings.json – containing only the PSD text elements.

Eg. ${page:strings} text content
Eg. ${page:images} image content

This allows you to have individualized data content in your application, giving a modular approach to your design.

LOGIN NOW: Get instant access to our free Online Training - click here.

02. Using The Plugin

03. Layer Support

04. Basic Exports

05. Layer Tags

06. Optimization Tips

07. Complete Exports

DOWNLOAD NOW
🚀 Start saving time and money!

INSTALL IN FIGMA

INSTALL IN XD

▲