diff --git a/apps/e2e/src/__snapshots__/plugins.spec.ts.snap b/apps/e2e/src/__snapshots__/plugins.spec.ts.snap
index 6255e5e..ec2458b 100644
--- a/apps/e2e/src/__snapshots__/plugins.spec.ts.snap
+++ b/apps/e2e/src/__snapshots__/plugins.spec.ts.snap
@@ -3,144 +3,150 @@
 exports[`Plugins > component library 1`] = `
 [
   {
-    ":fills": [
-      {
-        ":fill-color": "#FFFFFF",
-        ":fill-opacity": 1,
-      },
-    ],
-    ":flip-x": null,
-    ":flip-y": null,
     ":frame-id": "1",
-    ":height": 0.01,
-    ":hide-fill-on-export": false,
     ":id": "1",
-    ":name": "Root Frame",
     ":parent-id": "1",
-    ":points": [
+    "fills": [
       {
-        ":x": 0,
-        ":y": 0,
-      },
-      {
-        ":x": 0.01,
-        ":y": 0,
-      },
-      {
-        ":x": 0.01,
-        ":y": 0.01,
-      },
-      {
-        ":x": 0,
-        ":y": 0.01,
+        "fillColor": "#FFFFFF",
+        "fillOpacity": 1,
       },
     ],
-    ":proportion": 1,
-    ":proportion-lock": false,
-    ":rotation": 0,
-    ":selrect": {
-      ":height": 0.01,
-      ":width": 0.01,
-      ":x": 0,
-      ":x1": 0,
-      ":x2": 0.01,
-      ":y": 0,
-      ":y1": 0,
-      ":y2": 0.01,
-    },
-    ":shapes": [
-      "2",
+    "flipX": null,
+    "flipY": null,
+    "frameId": "00000000-0000-0000-0000-000000000000",
+    "height": 0.01,
+    "hideFillOnExport": false,
+    "id": "00000000-0000-0000-0000-000000000000",
+    "name": "Root Frame",
+    "parentId": "00000000-0000-0000-0000-000000000000",
+    "points": [
+      {
+        "x": 0,
+        "y": 0,
+      },
+      {
+        "x": 0.01,
+        "y": 0,
+      },
+      {
+        "x": 0.01,
+        "y": 0.01,
+      },
+      {
+        "x": 0,
+        "y": 0.01,
+      },
     ],
-    ":strokes": [],
-    ":transform": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "proportion": 1,
+    "proportionLock": false,
+    "rotation": 0,
+    "selrect": {
+      "height": 0.01,
+      "width": 0.01,
+      "x": 0,
+      "x1": 0,
+      "x2": 0.01,
+      "y": 0,
+      "y1": 0,
+      "y2": 0.01,
     },
-    ":transform-inverse": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "shapes": [
+      "bf867970-a428-8013-8004-f5d116d5102e",
+    ],
+    "strokes": [],
+    "transform": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":type": ":frame",
-    ":width": 0.01,
-    ":x": 0,
-    ":y": 0,
+    "transformInverse": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "type": "frame",
+    "width": 0.01,
+    "x": 0,
+    "y": 0,
   },
   {
-    ":fills": [
-      {
-        ":fill-color": "#B1B2B5",
-        ":fill-opacity": 1,
-      },
-    ],
-    ":flip-x": null,
-    ":flip-y": null,
     ":frame-id": "1",
-    ":height": 100,
     ":id": "2",
-    ":name": "Rectangle",
     ":parent-id": "1",
-    ":points": [
+    "fills": [
       {
-        ":x": 0,
-        ":y": 0,
-      },
-      {
-        ":x": 100,
-        ":y": 0,
-      },
-      {
-        ":x": 100,
-        ":y": 100,
-      },
-      {
-        ":x": 0,
-        ":y": 100,
+        "fillColor": "#B1B2B5",
+        "fillOpacity": 1,
       },
     ],
-    ":proportion": 1,
-    ":proportion-lock": false,
-    ":rotation": 0,
-    ":rx": 0,
-    ":ry": 0,
-    ":selrect": {
-      ":height": 100,
-      ":width": 100,
-      ":x": 0,
-      ":x1": 0,
-      ":x2": 100,
-      ":y": 0,
-      ":y1": 0,
-      ":y2": 100,
+    "flipX": null,
+    "flipY": null,
+    "frameId": "00000000-0000-0000-0000-000000000000",
+    "height": 100,
+    "id": "bf867970-a428-8013-8004-f5d116d5102e",
+    "name": "Rectangle",
+    "parentId": "00000000-0000-0000-0000-000000000000",
+    "points": [
+      {
+        "x": 0,
+        "y": 0,
+      },
+      {
+        "x": 100,
+        "y": 0,
+      },
+      {
+        "x": 100,
+        "y": 100,
+      },
+      {
+        "x": 0,
+        "y": 100,
+      },
+    ],
+    "proportion": 1,
+    "proportionLock": false,
+    "rotation": 0,
+    "rx": 0,
+    "ry": 0,
+    "selrect": {
+      "height": 100,
+      "width": 100,
+      "x": 0,
+      "x1": 0,
+      "x2": 100,
+      "y": 0,
+      "y1": 0,
+      "y2": 100,
     },
-    ":strokes": [],
-    ":transform": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "strokes": [],
+    "transform": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":transform-inverse": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "transformInverse": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":type": ":rect",
-    ":width": 100,
-    ":x": 0,
-    ":y": 0,
+    "type": "rect",
+    "width": 100,
+    "x": 0,
+    "y": 0,
   },
 ]
 `;
@@ -148,308 +154,320 @@ exports[`Plugins > component library 1`] = `
 exports[`Plugins > create flex layout 1`] = `
 [
   {
-    ":fills": [
-      {
-        ":fill-color": "#FFFFFF",
-        ":fill-opacity": 1,
-      },
-    ],
-    ":flip-x": null,
-    ":flip-y": null,
     ":frame-id": "1",
-    ":height": 0.01,
-    ":hide-fill-on-export": false,
     ":id": "1",
-    ":name": "Root Frame",
     ":parent-id": "1",
-    ":points": [
+    "fills": [
       {
-        ":x": 0,
-        ":y": 0,
-      },
-      {
-        ":x": 0.01,
-        ":y": 0,
-      },
-      {
-        ":x": 0.01,
-        ":y": 0.01,
-      },
-      {
-        ":x": 0,
-        ":y": 0.01,
+        "fillColor": "#FFFFFF",
+        "fillOpacity": 1,
       },
     ],
-    ":proportion": 1,
-    ":proportion-lock": false,
-    ":rotation": 0,
-    ":selrect": {
-      ":height": 0.01,
-      ":width": 0.01,
-      ":x": 0,
-      ":x1": 0,
-      ":x2": 0.01,
-      ":y": 0,
-      ":y1": 0,
-      ":y2": 0.01,
-    },
-    ":shapes": [
-      "2",
+    "flipX": null,
+    "flipY": null,
+    "frameId": "00000000-0000-0000-0000-000000000000",
+    "height": 0.01,
+    "hideFillOnExport": false,
+    "id": "00000000-0000-0000-0000-000000000000",
+    "name": "Root Frame",
+    "parentId": "00000000-0000-0000-0000-000000000000",
+    "points": [
+      {
+        "x": 0,
+        "y": 0,
+      },
+      {
+        "x": 0.01,
+        "y": 0,
+      },
+      {
+        "x": 0.01,
+        "y": 0.01,
+      },
+      {
+        "x": 0,
+        "y": 0.01,
+      },
     ],
-    ":strokes": [],
-    ":transform": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "proportion": 1,
+    "proportionLock": false,
+    "rotation": 0,
+    "selrect": {
+      "height": 0.01,
+      "width": 0.01,
+      "x": 0,
+      "x1": 0,
+      "x2": 0.01,
+      "y": 0,
+      "y1": 0,
+      "y2": 0.01,
     },
-    ":transform-inverse": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "shapes": [
+      "779d2f8b-aebc-8090-8004-f5d0fc658b7b",
+    ],
+    "strokes": [],
+    "transform": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":type": ":frame",
-    ":width": 0.01,
-    ":x": 0,
-    ":y": 0,
+    "transformInverse": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "type": "frame",
+    "width": 0.01,
+    "x": 0,
+    "y": 0,
   },
   {
-    ":fills": [
-      {
-        ":fill-color": "#FFFFFF",
-        ":fill-opacity": 1,
-      },
-    ],
-    ":flip-x": null,
-    ":flip-y": null,
     ":frame-id": "1",
-    ":height": 110,
-    ":hide-fill-on-export": false,
     ":id": "2",
-    ":layout": ":flex",
-    ":layout-align-content": ":stretch",
-    ":layout-align-items": ":center",
-    ":layout-flex-dir": ":row",
-    ":layout-gap": {
-      ":column-gap": 0,
-      ":row-gap": 0,
-    },
-    ":layout-gap-type": ":multiple",
-    ":layout-grid-dir": ":column",
-    ":layout-item-h-sizing": ":auto",
-    ":layout-item-v-sizing": ":auto",
-    ":layout-justify-content": ":center",
-    ":layout-padding": {
-      ":p1": 5,
-      ":p2": 5,
-      ":p3": 5,
-      ":p4": 5,
-    },
-    ":layout-padding-type": ":simple",
-    ":layout-wrap-type": ":nowrap",
-    ":name": "Board",
     ":parent-id": "1",
-    ":points": [
+    "fills": [
       {
-        ":x": 0,
-        ":y": 0,
-      },
-      {
-        ":x": 210,
-        ":y": 0,
-      },
-      {
-        ":x": 210,
-        ":y": 110,
-      },
-      {
-        ":x": 0,
-        ":y": 110,
+        "fillColor": "#FFFFFF",
+        "fillOpacity": 1,
       },
     ],
-    ":proportion": 1,
-    ":proportion-lock": false,
-    ":rotation": 0,
-    ":selrect": {
-      ":height": 110,
-      ":width": 210,
-      ":x": 0,
-      ":x1": 0,
-      ":x2": 210,
-      ":y": 0,
-      ":y1": 0,
-      ":y2": 110,
+    "flipX": null,
+    "flipY": null,
+    "frameId": "00000000-0000-0000-0000-000000000000",
+    "height": 110.00000000000001,
+    "hideFillOnExport": false,
+    "id": "779d2f8b-aebc-8090-8004-f5d0fc658b7b",
+    "layout": "flex",
+    "layoutAlignContent": "stretch",
+    "layoutAlignItems": "center",
+    "layoutFlexDir": "row",
+    "layoutGap": {
+      "columnGap": 0,
+      "rowGap": 0,
     },
-    ":shapes": [
-      "4",
-      "3",
+    "layoutGapType": "multiple",
+    "layoutGridDir": "column",
+    "layoutItemHSizing": "auto",
+    "layoutItemVSizing": "auto",
+    "layoutJustifyContent": "center",
+    "layoutPadding": {
+      "p1": 5,
+      "p2": 5,
+      "p3": 5,
+      "p4": 5,
+    },
+    "layoutPaddingType": "simple",
+    "layoutWrapType": "nowrap",
+    "name": "Board",
+    "parentId": "00000000-0000-0000-0000-000000000000",
+    "points": [
+      {
+        "x": 0,
+        "y": 0,
+      },
+      {
+        "x": 210,
+        "y": 0,
+      },
+      {
+        "x": 210,
+        "y": 110.00000000000001,
+      },
+      {
+        "x": 0,
+        "y": 110.00000000000001,
+      },
     ],
-    ":strokes": [],
-    ":transform": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "proportion": 1,
+    "proportionLock": false,
+    "rotation": 0,
+    "selrect": {
+      "height": 110.00000000000001,
+      "width": 210,
+      "x": 0,
+      "x1": 0,
+      "x2": 210,
+      "y": 0,
+      "y1": 0,
+      "y2": 110.00000000000001,
     },
-    ":transform-inverse": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "shapes": [
+      "779d2f8b-aebc-8090-8004-f5d0fc728c2f",
+      "779d2f8b-aebc-8090-8004-f5d0fc7164ef",
+    ],
+    "strokes": [],
+    "transform": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":type": ":frame",
-    ":width": 210,
-    ":x": 0,
-    ":y": 0,
+    "transformInverse": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "type": "frame",
+    "width": 210,
+    "x": 0,
+    "y": 0,
   },
   {
-    ":constraints-h": ":left",
-    ":constraints-v": ":top",
-    ":fills": [
-      {
-        ":fill-color": "#B1B2B5",
-        ":fill-opacity": 1,
-      },
-    ],
-    ":flip-x": null,
-    ":flip-y": null,
-    ":frame-id": "2",
-    ":height": 100,
+    ":frame-id": "1",
     ":id": "3",
-    ":name": "Rectangle",
-    ":parent-id": "2",
-    ":points": [
+    ":parent-id": "1",
+    "constraintsH": "left",
+    "constraintsV": "top",
+    "fills": [
       {
-        ":x": 5,
-        ":y": 5,
-      },
-      {
-        ":x": 105,
-        ":y": 5,
-      },
-      {
-        ":x": 105,
-        ":y": 105,
-      },
-      {
-        ":x": 5,
-        ":y": 105,
+        "fillColor": "#B1B2B5",
+        "fillOpacity": 1,
       },
     ],
-    ":proportion": 1,
-    ":proportion-lock": false,
-    ":rotation": 0,
-    ":rx": 0,
-    ":ry": 0,
-    ":selrect": {
-      ":height": 100,
-      ":width": 100,
-      ":x": 5,
-      ":x1": 5,
-      ":x2": 105,
-      ":y": 5,
-      ":y1": 5,
-      ":y2": 105,
+    "flipX": null,
+    "flipY": null,
+    "frameId": "779d2f8b-aebc-8090-8004-f5d0fc658b7b",
+    "height": 100,
+    "id": "779d2f8b-aebc-8090-8004-f5d0fc7164ef",
+    "name": "Rectangle",
+    "parentId": "779d2f8b-aebc-8090-8004-f5d0fc658b7b",
+    "points": [
+      {
+        "x": 5,
+        "y": 5.000000000000007,
+      },
+      {
+        "x": 105,
+        "y": 5.000000000000007,
+      },
+      {
+        "x": 105,
+        "y": 105,
+      },
+      {
+        "x": 5,
+        "y": 105,
+      },
+    ],
+    "proportion": 1,
+    "proportionLock": false,
+    "rotation": 0,
+    "rx": 0,
+    "ry": 0,
+    "selrect": {
+      "height": 100,
+      "width": 100,
+      "x": 5,
+      "x1": 5,
+      "x2": 105,
+      "y": 5.000000000000007,
+      "y1": 5.000000000000007,
+      "y2": 105,
     },
-    ":strokes": [],
-    ":transform": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "strokes": [],
+    "transform": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":transform-inverse": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "transformInverse": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":type": ":rect",
-    ":width": 100,
-    ":x": 5,
-    ":y": 5,
+    "type": "rect",
+    "width": 100,
+    "x": 5,
+    "y": 5.000000000000007,
   },
   {
-    ":constraints-h": ":left",
-    ":constraints-v": ":top",
-    ":fills": [
-      {
-        ":fill-color": "#B1B2B5",
-        ":fill-opacity": 1,
-      },
-    ],
-    ":flip-x": null,
-    ":flip-y": null,
-    ":frame-id": "2",
-    ":height": 100,
+    ":frame-id": "1",
     ":id": "4",
-    ":name": "Ellipse",
-    ":parent-id": "2",
-    ":points": [
+    ":parent-id": "1",
+    "constraintsH": "left",
+    "constraintsV": "top",
+    "fills": [
       {
-        ":x": 105,
-        ":y": 5,
-      },
-      {
-        ":x": 205,
-        ":y": 5,
-      },
-      {
-        ":x": 205,
-        ":y": 105,
-      },
-      {
-        ":x": 105,
-        ":y": 105,
+        "fillColor": "#B1B2B5",
+        "fillOpacity": 1,
       },
     ],
-    ":proportion": 1,
-    ":proportion-lock": false,
-    ":rotation": 0,
-    ":selrect": {
-      ":height": 100,
-      ":width": 100,
-      ":x": 105,
-      ":x1": 105,
-      ":x2": 205,
-      ":y": 5,
-      ":y1": 5,
-      ":y2": 105,
+    "flipX": null,
+    "flipY": null,
+    "frameId": "779d2f8b-aebc-8090-8004-f5d0fc658b7b",
+    "height": 100,
+    "id": "779d2f8b-aebc-8090-8004-f5d0fc728c2f",
+    "name": "Ellipse",
+    "parentId": "779d2f8b-aebc-8090-8004-f5d0fc658b7b",
+    "points": [
+      {
+        "x": 105,
+        "y": 5.000000000000007,
+      },
+      {
+        "x": 205,
+        "y": 5.000000000000007,
+      },
+      {
+        "x": 205,
+        "y": 105,
+      },
+      {
+        "x": 105,
+        "y": 105,
+      },
+    ],
+    "proportion": 1,
+    "proportionLock": false,
+    "rotation": 0,
+    "selrect": {
+      "height": 100,
+      "width": 100,
+      "x": 105,
+      "x1": 105,
+      "x2": 205,
+      "y": 5.000000000000007,
+      "y1": 5.000000000000007,
+      "y2": 105,
     },
-    ":strokes": [],
-    ":transform": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "strokes": [],
+    "transform": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":transform-inverse": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "transformInverse": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":type": ":circle",
-    ":width": 100,
-    ":x": 105,
-    ":y": 5,
+    "type": "circle",
+    "width": 100,
+    "x": 105,
+    "y": 5.000000000000007,
   },
 ]
 `;
@@ -457,510 +475,525 @@ exports[`Plugins > create flex layout 1`] = `
 exports[`Plugins > create frame - text - rectable 1`] = `
 [
   {
-    ":fills": [
-      {
-        ":fill-color": "#FFFFFF",
-        ":fill-opacity": 1,
-      },
-    ],
-    ":flip-x": null,
-    ":flip-y": null,
     ":frame-id": "1",
-    ":height": 0.01,
-    ":hide-fill-on-export": false,
     ":id": "1",
-    ":name": "Root Frame",
     ":parent-id": "1",
-    ":points": [
+    "fills": [
       {
-        ":x": 0,
-        ":y": 0,
-      },
-      {
-        ":x": 0.01,
-        ":y": 0,
-      },
-      {
-        ":x": 0.01,
-        ":y": 0.01,
-      },
-      {
-        ":x": 0,
-        ":y": 0.01,
+        "fillColor": "#FFFFFF",
+        "fillOpacity": 1,
       },
     ],
-    ":proportion": 1,
-    ":proportion-lock": false,
-    ":rotation": 0,
-    ":selrect": {
-      ":height": 0.01,
-      ":width": 0.01,
-      ":x": 0,
-      ":x1": 0,
-      ":x2": 0.01,
-      ":y": 0,
-      ":y1": 0,
-      ":y2": 0.01,
-    },
-    ":shapes": [
-      "2",
-      "3",
-      "4",
+    "flipX": null,
+    "flipY": null,
+    "frameId": "00000000-0000-0000-0000-000000000000",
+    "height": 0.01,
+    "hideFillOnExport": false,
+    "id": "00000000-0000-0000-0000-000000000000",
+    "name": "Root Frame",
+    "parentId": "00000000-0000-0000-0000-000000000000",
+    "points": [
+      {
+        "x": 0,
+        "y": 0,
+      },
+      {
+        "x": 0.01,
+        "y": 0,
+      },
+      {
+        "x": 0.01,
+        "y": 0.01,
+      },
+      {
+        "x": 0,
+        "y": 0.01,
+      },
     ],
-    ":strokes": [],
-    ":transform": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "proportion": 1,
+    "proportionLock": false,
+    "rotation": 0,
+    "selrect": {
+      "height": 0.01,
+      "width": 0.01,
+      "x": 0,
+      "x1": 0,
+      "x2": 0.01,
+      "y": 0,
+      "y1": 0,
+      "y2": 0.01,
     },
-    ":transform-inverse": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "shapes": [
+      "76961b59-7aaa-8044-8004-f5d0f6f23434",
+      "76961b59-7aaa-8044-8004-f5d0f6f9b0f6",
+      "76961b59-7aaa-8044-8004-f5d0f6fdb4d0",
+    ],
+    "strokes": [],
+    "transform": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":type": ":frame",
-    ":width": 0.01,
-    ":x": 0,
-    ":y": 0,
+    "transformInverse": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "type": "frame",
+    "width": 0.01,
+    "x": 0,
+    "y": 0,
   },
   {
-    ":content": {
-      ":children": [
+    ":frame-id": "1",
+    ":id": "2",
+    ":parent-id": "1",
+    "content": {
+      "children": [
         {
-          ":children": [
+          "children": [
             {
-              ":children": [
+              "children": [
                 {
-                  ":fills": [
+                  "fills": [
                     {
-                      ":fill-color": "#000000",
-                      ":fill-opacity": 1,
+                      "fillColor": "#000000",
+                      "fillOpacity": 1,
                     },
                   ],
-                  ":font-family": "sourcesanspro",
-                  ":font-id": "sourcesanspro",
-                  ":font-size": "14",
-                  ":font-style": "normal",
-                  ":font-variant-id": "regular",
-                  ":font-weight": "400",
-                  ":letter-spacing": "0",
-                  ":line-height": "1.2",
-                  ":text": "Hello from plugin",
-                  ":text-align": "left",
-                  ":text-decoration": "none",
-                  ":text-transform": "none",
-                  ":typography-ref-file": null,
-                  ":typography-ref-id": null,
+                  "fontFamily": "sourcesanspro",
+                  "fontId": "sourcesanspro",
+                  "fontSize": "14",
+                  "fontStyle": "normal",
+                  "fontVariantId": "regular",
+                  "fontWeight": "400",
+                  "letterSpacing": "0",
+                  "lineHeight": "1.2",
+                  "text": "Hello from plugin",
+                  "textAlign": "left",
+                  "textDecoration": "none",
+                  "textTransform": "none",
+                  "typographyRefFile": null,
+                  "typographyRefId": null,
                 },
               ],
-              ":fills": [
+              "fills": [
                 {
-                  ":fill-color": "#000000",
-                  ":fill-opacity": 1,
+                  "fillColor": "#000000",
+                  "fillOpacity": 1,
                 },
               ],
-              ":font-family": "sourcesanspro",
-              ":font-id": "sourcesanspro",
-              ":font-size": "14",
-              ":font-style": "normal",
-              ":font-variant-id": "regular",
-              ":font-weight": "400",
-              ":letter-spacing": "0",
-              ":line-height": "1.2",
-              ":text-align": "left",
-              ":text-decoration": "none",
-              ":text-transform": "none",
-              ":type": "paragraph",
-              ":typography-ref-file": null,
-              ":typography-ref-id": null,
+              "fontFamily": "sourcesanspro",
+              "fontId": "sourcesanspro",
+              "fontSize": "14",
+              "fontStyle": "normal",
+              "fontVariantId": "regular",
+              "fontWeight": "400",
+              "letterSpacing": "0",
+              "lineHeight": "1.2",
+              "textAlign": "left",
+              "textDecoration": "none",
+              "textTransform": "none",
+              "type": "paragraph",
+              "typographyRefFile": null,
+              "typographyRefId": null,
             },
           ],
-          ":type": "paragraph-set",
+          "type": "paragraph-set",
         },
       ],
-      ":type": "root",
+      "type": "root",
     },
-    ":flip-x": null,
-    ":flip-y": null,
-    ":frame-id": "1",
-    ":grow-type": ":auto-width",
-    ":height": 17,
-    ":id": "2",
-    ":name": "Text",
-    ":parent-id": "1",
-    ":points": [
+    "flipX": null,
+    "flipY": null,
+    "frameId": "00000000-0000-0000-0000-000000000000",
+    "growType": "auto-width",
+    "height": 17,
+    "id": "76961b59-7aaa-8044-8004-f5d0f6f23434",
+    "name": "Text",
+    "parentId": "00000000-0000-0000-0000-000000000000",
+    "points": [
       {
-        ":x": 684,
-        ":y": 540,
+        "x": 684,
+        "y": 540,
       },
       {
-        ":x": 786,
-        ":y": 540,
+        "x": 786,
+        "y": 540,
       },
       {
-        ":x": 786,
-        ":y": 557,
+        "x": 786,
+        "y": 557,
       },
       {
-        ":x": 684,
-        ":y": 557,
+        "x": 684,
+        "y": 557,
       },
     ],
-    ":position-data": [
+    "positionData": [
       {
-        ":direction": "ltr",
-        ":fills": [
+        "direction": "ltr",
+        "fills": [
           {
-            ":fill-color": "#000000",
-            ":fill-opacity": 1,
+            "fillColor": "#000000",
+            "fillOpacity": 1,
           },
         ],
-        ":font-family": "sourcesanspro",
-        ":font-size": "14px",
-        ":font-style": "normal",
-        ":font-weight": "400",
-        ":height": 18,
-        ":letter-spacing": "normal",
-        ":text": "Hello from plugin",
-        ":text-decoration": "none solid rgb(0, 0, 0)",
-        ":text-transform": "none",
-        ":width": 101.5313,
-        ":x": 684,
-        ":x1": 0,
-        ":x2": 101.5313,
-        ":y": 557,
-        ":y1": -1,
-        ":y2": 17,
+        "fontFamily": "sourcesanspro",
+        "fontSize": "14px",
+        "fontStyle": "normal",
+        "fontWeight": "400",
+        "height": 18,
+        "letterSpacing": "normal",
+        "text": "Hello from plugin",
+        "textDecoration": "none solid rgb(0, 0, 0)",
+        "textTransform": "none",
+        "width": 101.53125,
+        "x": 684,
+        "x1": 0,
+        "x2": 101.53125,
+        "y": 557,
+        "y1": -1,
+        "y2": 17,
       },
     ],
-    ":rotation": 0,
-    ":selrect": {
-      ":height": 17,
-      ":width": 102,
-      ":x": 684,
-      ":x1": 684,
-      ":x2": 786,
-      ":y": 540,
-      ":y1": 540,
-      ":y2": 557,
+    "rotation": 0,
+    "selrect": {
+      "height": 17,
+      "width": 102,
+      "x": 684,
+      "x1": 684,
+      "x2": 786,
+      "y": 540,
+      "y1": 540,
+      "y2": 557,
     },
-    ":transform": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "transform": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":transform-inverse": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "transformInverse": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":type": ":text",
-    ":width": 102,
-    ":x": 684,
-    ":y": 540,
+    "type": "text",
+    "width": 102,
+    "x": 684,
+    "y": 540,
   },
   {
-    ":fills": [
+    ":frame-id": "1",
+    ":id": "3",
+    ":parent-id": "1",
+    "fills": [
       {
-        ":fill-color": "#B1B2B5",
-        ":fill-opacity": 1,
+        "fillColor": "#B1B2B5",
+        "fillOpacity": 1,
       },
     ],
-    ":flip-x": null,
-    ":flip-y": null,
-    ":frame-id": "1",
-    ":height": 200,
-    ":id": "3",
-    ":name": "Rectangle",
-    ":parent-id": "1",
-    ":plugin-data": {
-      ":plugin/TEST": {
+    "flipX": null,
+    "flipY": null,
+    "frameId": "00000000-0000-0000-0000-000000000000",
+    "height": 200,
+    "id": "76961b59-7aaa-8044-8004-f5d0f6f9b0f6",
+    "name": "Rectangle",
+    "parentId": "00000000-0000-0000-0000-000000000000",
+    "pluginData": {
+      "TEST": {
         "customKey": "customValue",
       },
     },
-    ":points": [
+    "points": [
       {
-        ":x": 684,
-        ":y": 540,
+        "x": 684,
+        "y": 540,
       },
       {
-        ":x": 884,
-        ":y": 540,
+        "x": 884,
+        "y": 540,
       },
       {
-        ":x": 884,
-        ":y": 740,
+        "x": 884,
+        "y": 740,
       },
       {
-        ":x": 684,
-        ":y": 740,
+        "x": 684,
+        "y": 740,
       },
     ],
-    ":proportion": 1,
-    ":proportion-lock": false,
-    ":rotation": 0,
-    ":rx": 0,
-    ":ry": 0,
-    ":selrect": {
-      ":height": 200,
-      ":width": 200,
-      ":x": 684,
-      ":x1": 684,
-      ":x2": 884,
-      ":y": 540,
-      ":y1": 540,
-      ":y2": 740,
+    "proportion": 1,
+    "proportionLock": false,
+    "rotation": 0,
+    "rx": 0,
+    "ry": 0,
+    "selrect": {
+      "height": 200,
+      "width": 200,
+      "x": 684,
+      "x1": 684,
+      "x2": 884,
+      "y": 540,
+      "y1": 540,
+      "y2": 740,
     },
-    ":strokes": [],
-    ":transform": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "strokes": [],
+    "transform": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":transform-inverse": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "transformInverse": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":type": ":rect",
-    ":width": 200,
-    ":x": 684,
-    ":y": 540,
+    "type": "rect",
+    "width": 200,
+    "x": 684,
+    "y": 540,
   },
   {
-    ":fills": [
-      {
-        ":fill-color": "#FFFFFF",
-        ":fill-opacity": 1,
-      },
-    ],
-    ":flip-x": null,
-    ":flip-y": null,
     ":frame-id": "1",
-    ":height": 300,
-    ":hide-fill-on-export": false,
     ":id": "4",
-    ":name": "Frame name",
     ":parent-id": "1",
-    ":points": [
+    "fills": [
       {
-        ":x": 684,
-        ":y": 540,
-      },
-      {
-        ":x": 984,
-        ":y": 540,
-      },
-      {
-        ":x": 984,
-        ":y": 840,
-      },
-      {
-        ":x": 684,
-        ":y": 840,
+        "fillColor": "#FFFFFF",
+        "fillOpacity": 1,
       },
     ],
-    ":proportion": 1,
-    ":proportion-lock": false,
-    ":rotation": 0,
-    ":rx": 8,
-    ":ry": 8,
-    ":selrect": {
-      ":height": 300,
-      ":width": 300,
-      ":x": 684,
-      ":x1": 684,
-      ":x2": 984,
-      ":y": 540,
-      ":y1": 540,
-      ":y2": 840,
-    },
-    ":shapes": [
-      "5",
+    "flipX": null,
+    "flipY": null,
+    "frameId": "00000000-0000-0000-0000-000000000000",
+    "height": 300,
+    "hideFillOnExport": false,
+    "id": "76961b59-7aaa-8044-8004-f5d0f6fdb4d0",
+    "name": "Board name",
+    "parentId": "00000000-0000-0000-0000-000000000000",
+    "points": [
+      {
+        "x": 684,
+        "y": 540,
+      },
+      {
+        "x": 984,
+        "y": 540,
+      },
+      {
+        "x": 984,
+        "y": 840,
+      },
+      {
+        "x": 684,
+        "y": 840,
+      },
     ],
-    ":strokes": [],
-    ":transform": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "proportion": 1,
+    "proportionLock": false,
+    "rotation": 0,
+    "rx": 8,
+    "ry": 8,
+    "selrect": {
+      "height": 300,
+      "width": 300,
+      "x": 684,
+      "x1": 684,
+      "x2": 984,
+      "y": 540,
+      "y1": 540,
+      "y2": 840,
     },
-    ":transform-inverse": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "shapes": [
+      "76961b59-7aaa-8044-8004-f5d0f7022e51",
+    ],
+    "strokes": [],
+    "transform": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":type": ":frame",
-    ":width": 300,
-    ":x": 684,
-    ":y": 540,
+    "transformInverse": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "type": "frame",
+    "width": 300,
+    "x": 684,
+    "y": 540,
   },
   {
-    ":constraints-h": ":left",
-    ":constraints-v": ":top",
-    ":content": {
-      ":children": [
+    ":frame-id": "1",
+    ":id": "5",
+    ":parent-id": "1",
+    "constraintsH": "left",
+    "constraintsV": "top",
+    "content": {
+      "children": [
         {
-          ":children": [
+          "children": [
             {
-              ":children": [
+              "children": [
                 {
-                  ":fills": [
+                  "fills": [
                     {
-                      ":fill-color": "#000000",
-                      ":fill-opacity": 1,
+                      "fillColor": "#000000",
+                      "fillOpacity": 1,
                     },
                   ],
-                  ":font-family": "sourcesanspro",
-                  ":font-id": "sourcesanspro",
-                  ":font-size": "14",
-                  ":font-style": "normal",
-                  ":font-variant-id": "regular",
-                  ":font-weight": "400",
-                  ":letter-spacing": "0",
-                  ":line-height": "1.2",
-                  ":text": "Hello from frame",
-                  ":text-align": "left",
-                  ":text-decoration": "none",
-                  ":text-transform": "none",
-                  ":typography-ref-file": null,
-                  ":typography-ref-id": null,
+                  "fontFamily": "sourcesanspro",
+                  "fontId": "sourcesanspro",
+                  "fontSize": "14",
+                  "fontStyle": "normal",
+                  "fontVariantId": "regular",
+                  "fontWeight": "400",
+                  "letterSpacing": "0",
+                  "lineHeight": "1.2",
+                  "text": "Hello from frame",
+                  "textAlign": "left",
+                  "textDecoration": "none",
+                  "textTransform": "none",
+                  "typographyRefFile": null,
+                  "typographyRefId": null,
                 },
               ],
-              ":fills": [
+              "fills": [
                 {
-                  ":fill-color": "#000000",
-                  ":fill-opacity": 1,
+                  "fillColor": "#000000",
+                  "fillOpacity": 1,
                 },
               ],
-              ":font-family": "sourcesanspro",
-              ":font-id": "sourcesanspro",
-              ":font-size": "14",
-              ":font-style": "normal",
-              ":font-variant-id": "regular",
-              ":font-weight": "400",
-              ":letter-spacing": "0",
-              ":line-height": "1.2",
-              ":text-align": "left",
-              ":text-decoration": "none",
-              ":text-transform": "none",
-              ":type": "paragraph",
-              ":typography-ref-file": null,
-              ":typography-ref-id": null,
+              "fontFamily": "sourcesanspro",
+              "fontId": "sourcesanspro",
+              "fontSize": "14",
+              "fontStyle": "normal",
+              "fontVariantId": "regular",
+              "fontWeight": "400",
+              "letterSpacing": "0",
+              "lineHeight": "1.2",
+              "textAlign": "left",
+              "textDecoration": "none",
+              "textTransform": "none",
+              "type": "paragraph",
+              "typographyRefFile": null,
+              "typographyRefId": null,
             },
           ],
-          ":type": "paragraph-set",
+          "type": "paragraph-set",
         },
       ],
-      ":type": "root",
+      "type": "root",
     },
-    ":flip-x": null,
-    ":flip-y": null,
-    ":frame-id": "4",
-    ":grow-type": ":auto-width",
-    ":height": 17,
-    ":id": "5",
-    ":name": "Text",
-    ":parent-id": "4",
-    ":points": [
+    "flipX": null,
+    "flipY": null,
+    "frameId": "76961b59-7aaa-8044-8004-f5d0f6fdb4d0",
+    "growType": "auto-width",
+    "height": 17,
+    "id": "76961b59-7aaa-8044-8004-f5d0f7022e51",
+    "name": "Text",
+    "parentId": "76961b59-7aaa-8044-8004-f5d0f6fdb4d0",
+    "points": [
       {
-        ":x": 10,
-        ":y": 10,
+        "x": 10,
+        "y": 10,
       },
       {
-        ":x": 109,
-        ":y": 10,
+        "x": 109,
+        "y": 10,
       },
       {
-        ":x": 109,
-        ":y": 27,
+        "x": 109,
+        "y": 27,
       },
       {
-        ":x": 10,
-        ":y": 27,
+        "x": 10,
+        "y": 27,
       },
     ],
-    ":position-data": [
+    "positionData": [
       {
-        ":direction": "ltr",
-        ":fills": [
+        "direction": "ltr",
+        "fills": [
           {
-            ":fill-color": "#000000",
-            ":fill-opacity": 1,
+            "fillColor": "#000000",
+            "fillOpacity": 1,
           },
         ],
-        ":font-family": "sourcesanspro",
-        ":font-size": "14px",
-        ":font-style": "normal",
-        ":font-weight": "400",
-        ":height": 18,
-        ":letter-spacing": "normal",
-        ":text": "Hello from frame",
-        ":text-decoration": "none solid rgb(0, 0, 0)",
-        ":text-transform": "none",
-        ":width": 98.7344,
-        ":x": 10,
-        ":x1": 0,
-        ":x2": 98.7344,
-        ":y": 27,
-        ":y1": -1,
-        ":y2": 17,
+        "fontFamily": "sourcesanspro",
+        "fontSize": "14px",
+        "fontStyle": "normal",
+        "fontWeight": "400",
+        "height": 18,
+        "letterSpacing": "normal",
+        "text": "Hello from frame",
+        "textDecoration": "none solid rgb(0, 0, 0)",
+        "textTransform": "none",
+        "width": 98.734375,
+        "x": 10,
+        "x1": 0,
+        "x2": 98.734375,
+        "y": 27,
+        "y1": -1,
+        "y2": 17,
       },
     ],
-    ":rotation": 0,
-    ":selrect": {
-      ":height": 17,
-      ":width": 99,
-      ":x": 10,
-      ":x1": 10,
-      ":x2": 109,
-      ":y": 10,
-      ":y1": 10,
-      ":y2": 27,
+    "rotation": 0,
+    "selrect": {
+      "height": 17,
+      "width": 99,
+      "x": 10,
+      "x1": 10,
+      "x2": 109,
+      "y": 10,
+      "y1": 10,
+      "y2": 27,
     },
-    ":transform": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "transform": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":transform-inverse": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "transformInverse": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":type": ":text",
-    ":width": 99,
-    ":x": 10,
-    ":y": 10,
+    "type": "text",
+    "width": 99,
+    "x": 10,
+    "y": 10,
   },
 ]
 `;
@@ -968,228 +1001,234 @@ exports[`Plugins > create frame - text - rectable 1`] = `
 exports[`Plugins > create grid layout 1`] = `
 [
   {
-    ":fills": [
-      {
-        ":fill-color": "#FFFFFF",
-        ":fill-opacity": 1,
-      },
-    ],
-    ":flip-x": null,
-    ":flip-y": null,
     ":frame-id": "1",
-    ":height": 0.01,
-    ":hide-fill-on-export": false,
     ":id": "1",
-    ":name": "Root Frame",
     ":parent-id": "1",
-    ":points": [
+    "fills": [
       {
-        ":x": 0,
-        ":y": 0,
-      },
-      {
-        ":x": 0.01,
-        ":y": 0,
-      },
-      {
-        ":x": 0.01,
-        ":y": 0.01,
-      },
-      {
-        ":x": 0,
-        ":y": 0.01,
+        "fillColor": "#FFFFFF",
+        "fillOpacity": 1,
       },
     ],
-    ":proportion": 1,
-    ":proportion-lock": false,
-    ":rotation": 0,
-    ":selrect": {
-      ":height": 0.01,
-      ":width": 0.01,
-      ":x": 0,
-      ":x1": 0,
-      ":x2": 0.01,
-      ":y": 0,
-      ":y1": 0,
-      ":y2": 0.01,
-    },
-    ":shapes": [
-      "2",
+    "flipX": null,
+    "flipY": null,
+    "frameId": "00000000-0000-0000-0000-000000000000",
+    "height": 0.01,
+    "hideFillOnExport": false,
+    "id": "00000000-0000-0000-0000-000000000000",
+    "name": "Root Frame",
+    "parentId": "00000000-0000-0000-0000-000000000000",
+    "points": [
+      {
+        "x": 0,
+        "y": 0,
+      },
+      {
+        "x": 0.01,
+        "y": 0,
+      },
+      {
+        "x": 0.01,
+        "y": 0.01,
+      },
+      {
+        "x": 0,
+        "y": 0.01,
+      },
     ],
-    ":strokes": [],
-    ":transform": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "proportion": 1,
+    "proportionLock": false,
+    "rotation": 0,
+    "selrect": {
+      "height": 0.01,
+      "width": 0.01,
+      "x": 0,
+      "x1": 0,
+      "x2": 0.01,
+      "y": 0,
+      "y1": 0,
+      "y2": 0.01,
     },
-    ":transform-inverse": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "shapes": [
+      "e2446c28-add3-8080-8004-f5d101af8fc7",
+    ],
+    "strokes": [],
+    "transform": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":type": ":frame",
-    ":width": 0.01,
-    ":x": 0,
-    ":y": 0,
+    "transformInverse": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "type": "frame",
+    "width": 0.01,
+    "x": 0,
+    "y": 0,
   },
   {
-    ":fills": [
-      {
-        ":fill-color": "#FFFFFF",
-        ":fill-opacity": 1,
-      },
-    ],
-    ":flip-x": null,
-    ":flip-y": null,
     ":frame-id": "1",
-    ":height": 100,
-    ":hide-fill-on-export": false,
     ":id": "2",
-    ":layout": ":grid",
-    ":layout-align-content": ":stretch",
-    ":layout-align-items": ":center",
-    ":layout-gap": {
-      ":column-gap": 10,
-      ":row-gap": 10,
-    },
-    ":layout-gap-type": ":multiple",
-    ":layout-grid-cells": [
-      {
-        ":align-self": ":auto",
-        ":column": 1,
-        ":column-span": 1,
-        ":id": "2",
-        ":justify-self": ":auto",
-        ":position": ":auto",
-        ":row": 1,
-        ":row-span": 1,
-        ":shapes": [],
-      },
-      {
-        ":align-self": ":auto",
-        ":column": 1,
-        ":column-span": 1,
-        ":id": "2",
-        ":justify-self": ":auto",
-        ":position": ":auto",
-        ":row": 2,
-        ":row-span": 1,
-        ":shapes": [],
-      },
-      {
-        ":align-self": ":auto",
-        ":column": 2,
-        ":column-span": 1,
-        ":id": "2",
-        ":justify-self": ":auto",
-        ":position": ":auto",
-        ":row": 1,
-        ":row-span": 1,
-        ":shapes": [],
-      },
-      {
-        ":align-self": ":auto",
-        ":column": 2,
-        ":column-span": 1,
-        ":id": "2",
-        ":justify-self": ":auto",
-        ":position": ":auto",
-        ":row": 2,
-        ":row-span": 1,
-        ":shapes": [],
-      },
-    ],
-    ":layout-grid-columns": [
-      {
-        ":type": ":flex",
-        ":value": 1,
-      },
-      {
-        ":type": ":flex",
-        ":value": 1,
-      },
-    ],
-    ":layout-grid-dir": ":row",
-    ":layout-grid-rows": [
-      {
-        ":type": ":flex",
-        ":value": 1,
-      },
-      {
-        ":type": ":flex",
-        ":value": 1,
-      },
-    ],
-    ":layout-justify-content": ":space-between",
-    ":layout-justify-items": ":start",
-    ":layout-padding": {
-      ":p1": 5,
-      ":p2": 5,
-      ":p3": 5,
-      ":p4": 5,
-    },
-    ":layout-padding-type": ":simple",
-    ":name": "Board",
     ":parent-id": "1",
-    ":points": [
+    "fills": [
       {
-        ":x": 0,
-        ":y": 0,
-      },
-      {
-        ":x": 100,
-        ":y": 0,
-      },
-      {
-        ":x": 100,
-        ":y": 100,
-      },
-      {
-        ":x": 0,
-        ":y": 100,
+        "fillColor": "#FFFFFF",
+        "fillOpacity": 1,
       },
     ],
-    ":proportion": 1,
-    ":proportion-lock": false,
-    ":rotation": 0,
-    ":selrect": {
-      ":height": 100,
-      ":width": 100,
-      ":x": 0,
-      ":x1": 0,
-      ":x2": 100,
-      ":y": 0,
-      ":y1": 0,
-      ":y2": 100,
+    "flipX": null,
+    "flipY": null,
+    "frameId": "00000000-0000-0000-0000-000000000000",
+    "height": 100,
+    "hideFillOnExport": false,
+    "id": "e2446c28-add3-8080-8004-f5d101af8fc7",
+    "layout": "grid",
+    "layoutAlignContent": "stretch",
+    "layoutAlignItems": "center",
+    "layoutGap": {
+      "columnGap": 10,
+      "rowGap": 10,
     },
-    ":shapes": [],
-    ":strokes": [],
-    ":transform": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "layoutGapType": "multiple",
+    "layoutGridCells": {
+      "e2446c28-add3-8080-8004-f5d101b7eae8": {
+        "alignSelf": "auto",
+        "column": 1,
+        "columnSpan": 1,
+        "id": "e2446c28-add3-8080-8004-f5d101b7eae8",
+        "justifySelf": "auto",
+        "position": "auto",
+        "row": 1,
+        "rowSpan": 1,
+        "shapes": [],
+      },
+      "e2446c28-add3-8080-8004-f5d101b7eae9": {
+        "alignSelf": "auto",
+        "column": 1,
+        "columnSpan": 1,
+        "id": "e2446c28-add3-8080-8004-f5d101b7eae9",
+        "justifySelf": "auto",
+        "position": "auto",
+        "row": 2,
+        "rowSpan": 1,
+        "shapes": [],
+      },
+      "e2446c28-add3-8080-8004-f5d101b8ef63": {
+        "alignSelf": "auto",
+        "column": 2,
+        "columnSpan": 1,
+        "id": "e2446c28-add3-8080-8004-f5d101b8ef63",
+        "justifySelf": "auto",
+        "position": "auto",
+        "row": 1,
+        "rowSpan": 1,
+        "shapes": [],
+      },
+      "e2446c28-add3-8080-8004-f5d101b8ef64": {
+        "alignSelf": "auto",
+        "column": 2,
+        "columnSpan": 1,
+        "id": "e2446c28-add3-8080-8004-f5d101b8ef64",
+        "justifySelf": "auto",
+        "position": "auto",
+        "row": 2,
+        "rowSpan": 1,
+        "shapes": [],
+      },
     },
-    ":transform-inverse": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "layoutGridColumns": [
+      {
+        "type": "flex",
+        "value": 1,
+      },
+      {
+        "type": "flex",
+        "value": 1,
+      },
+    ],
+    "layoutGridDir": "row",
+    "layoutGridRows": [
+      {
+        "type": "flex",
+        "value": 1,
+      },
+      {
+        "type": "flex",
+        "value": 1,
+      },
+    ],
+    "layoutJustifyContent": "space-between",
+    "layoutJustifyItems": "start",
+    "layoutPadding": {
+      "p1": 5,
+      "p2": 5,
+      "p3": 5,
+      "p4": 5,
     },
-    ":type": ":frame",
-    ":width": 100,
-    ":x": 0,
-    ":y": 0,
+    "layoutPaddingType": "simple",
+    "name": "Board",
+    "parentId": "00000000-0000-0000-0000-000000000000",
+    "points": [
+      {
+        "x": 0,
+        "y": 0,
+      },
+      {
+        "x": 100,
+        "y": 0,
+      },
+      {
+        "x": 100,
+        "y": 100,
+      },
+      {
+        "x": 0,
+        "y": 100,
+      },
+    ],
+    "proportion": 1,
+    "proportionLock": false,
+    "rotation": 0,
+    "selrect": {
+      "height": 100,
+      "width": 100,
+      "x": 0,
+      "x1": 0,
+      "x2": 100,
+      "y": 0,
+      "y1": 0,
+      "y2": 100,
+    },
+    "shapes": [],
+    "strokes": [],
+    "transform": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "transformInverse": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "type": "frame",
+    "width": 100,
+    "x": 0,
+    "y": 0,
   },
 ]
 `;
@@ -1197,280 +1236,292 @@ exports[`Plugins > create grid layout 1`] = `
 exports[`Plugins > group and ungroup 1`] = `
 [
   {
-    ":fills": [
-      {
-        ":fill-color": "#FFFFFF",
-        ":fill-opacity": 1,
-      },
-    ],
-    ":flip-x": null,
-    ":flip-y": null,
     ":frame-id": "1",
-    ":height": 0.01,
-    ":hide-fill-on-export": false,
     ":id": "1",
-    ":name": "Root Frame",
     ":parent-id": "1",
-    ":points": [
+    "fills": [
       {
-        ":x": 0,
-        ":y": 0,
-      },
-      {
-        ":x": 0.01,
-        ":y": 0,
-      },
-      {
-        ":x": 0.01,
-        ":y": 0.01,
-      },
-      {
-        ":x": 0,
-        ":y": 0.01,
+        "fillColor": "#FFFFFF",
+        "fillOpacity": 1,
       },
     ],
-    ":proportion": 1,
-    ":proportion-lock": false,
-    ":rotation": 0,
-    ":selrect": {
-      ":height": 0.01,
-      ":width": 0.01,
-      ":x": 0,
-      ":x1": 0,
-      ":x2": 0.01,
-      ":y": 0,
-      ":y1": 0,
-      ":y2": 0.01,
-    },
-    ":shapes": [
-      "4",
+    "flipX": null,
+    "flipY": null,
+    "frameId": "00000000-0000-0000-0000-000000000000",
+    "height": 0.01,
+    "hideFillOnExport": false,
+    "id": "00000000-0000-0000-0000-000000000000",
+    "name": "Root Frame",
+    "parentId": "00000000-0000-0000-0000-000000000000",
+    "points": [
+      {
+        "x": 0,
+        "y": 0,
+      },
+      {
+        "x": 0.01,
+        "y": 0,
+      },
+      {
+        "x": 0.01,
+        "y": 0.01,
+      },
+      {
+        "x": 0,
+        "y": 0.01,
+      },
     ],
-    ":strokes": [],
-    ":transform": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "proportion": 1,
+    "proportionLock": false,
+    "rotation": 0,
+    "selrect": {
+      "height": 0.01,
+      "width": 0.01,
+      "x": 0,
+      "x1": 0,
+      "x2": 0.01,
+      "y": 0,
+      "y1": 0,
+      "y2": 0.01,
     },
-    ":transform-inverse": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "shapes": [
+      "d93e51ed-0b43-8077-8004-f5d1070691ce",
+    ],
+    "strokes": [],
+    "transform": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":type": ":frame",
-    ":width": 0.01,
-    ":x": 0,
-    ":y": 0,
+    "transformInverse": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "type": "frame",
+    "width": 0.01,
+    "x": 0,
+    "y": 0,
   },
   {
-    ":fills": [
-      {
-        ":fill-color": "#B1B2B5",
-        ":fill-opacity": 1,
-      },
-    ],
-    ":flip-x": null,
-    ":flip-y": null,
     ":frame-id": "1",
-    ":height": 100,
     ":id": "2",
-    ":name": "Rectangle",
-    ":parent-id": "4",
-    ":points": [
-      {
-        ":x": 0,
-        ":y": 0,
-      },
-      {
-        ":x": 100,
-        ":y": 0,
-      },
-      {
-        ":x": 100,
-        ":y": 100,
-      },
-      {
-        ":x": 0,
-        ":y": 100,
-      },
-    ],
-    ":proportion": 1,
-    ":proportion-lock": false,
-    ":rotation": 0,
-    ":rx": 0,
-    ":ry": 0,
-    ":selrect": {
-      ":height": 100,
-      ":width": 100,
-      ":x": 0,
-      ":x1": 0,
-      ":x2": 100,
-      ":y": 0,
-      ":y1": 0,
-      ":y2": 100,
-    },
-    ":strokes": [],
-    ":transform": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
-    },
-    ":transform-inverse": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
-    },
-    ":type": ":rect",
-    ":width": 100,
-    ":x": 0,
-    ":y": 0,
-  },
-  {
-    ":fills": [
-      {
-        ":fill-color": "#B1B2B5",
-        ":fill-opacity": 1,
-      },
-    ],
-    ":flip-x": null,
-    ":flip-y": null,
-    ":frame-id": "1",
-    ":height": 100,
-    ":id": "3",
-    ":name": "Rectangle",
-    ":parent-id": "4",
-    ":points": [
-      {
-        ":x": 0,
-        ":y": 0,
-      },
-      {
-        ":x": 100,
-        ":y": 0,
-      },
-      {
-        ":x": 100,
-        ":y": 100,
-      },
-      {
-        ":x": 0,
-        ":y": 100,
-      },
-    ],
-    ":proportion": 1,
-    ":proportion-lock": false,
-    ":rotation": 0,
-    ":rx": 0,
-    ":ry": 0,
-    ":selrect": {
-      ":height": 100,
-      ":width": 100,
-      ":x": 0,
-      ":x1": 0,
-      ":x2": 100,
-      ":y": 0,
-      ":y1": 0,
-      ":y2": 100,
-    },
-    ":strokes": [],
-    ":transform": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
-    },
-    ":transform-inverse": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
-    },
-    ":type": ":rect",
-    ":width": 100,
-    ":x": 0,
-    ":y": 0,
-  },
-  {
-    ":fills": [],
-    ":flip-x": null,
-    ":flip-y": null,
-    ":frame-id": "1",
-    ":height": 100,
-    ":id": "4",
-    ":index": 2,
-    ":name": "Group",
     ":parent-id": "1",
-    ":points": [
+    "fills": [
       {
-        ":x": 0,
-        ":y": 0,
-      },
-      {
-        ":x": 100,
-        ":y": 0,
-      },
-      {
-        ":x": 100,
-        ":y": 100,
-      },
-      {
-        ":x": 0,
-        ":y": 100,
+        "fillColor": "#B1B2B5",
+        "fillOpacity": 1,
       },
     ],
-    ":proportion": 1,
-    ":proportion-lock": false,
-    ":rotation": 0,
-    ":selrect": {
-      ":height": 100,
-      ":width": 100,
-      ":x": 0,
-      ":x1": 0,
-      ":x2": 100,
-      ":y": 0,
-      ":y1": 0,
-      ":y2": 100,
-    },
-    ":shapes": [
-      "2",
-      "3",
+    "flipX": null,
+    "flipY": null,
+    "frameId": "00000000-0000-0000-0000-000000000000",
+    "height": 100,
+    "id": "d93e51ed-0b43-8077-8004-f5d106ffe16b",
+    "name": "Rectangle",
+    "parentId": "d93e51ed-0b43-8077-8004-f5d1070691ce",
+    "points": [
+      {
+        "x": 0,
+        "y": 0,
+      },
+      {
+        "x": 100,
+        "y": 0,
+      },
+      {
+        "x": 100,
+        "y": 100,
+      },
+      {
+        "x": 0,
+        "y": 100,
+      },
     ],
-    ":strokes": [],
-    ":transform": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "proportion": 1,
+    "proportionLock": false,
+    "rotation": 0,
+    "rx": 0,
+    "ry": 0,
+    "selrect": {
+      "height": 100,
+      "width": 100,
+      "x": 0,
+      "x1": 0,
+      "x2": 100,
+      "y": 0,
+      "y1": 0,
+      "y2": 100,
     },
-    ":transform-inverse": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "strokes": [],
+    "transform": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":type": ":group",
-    ":width": 100,
-    ":x": 0,
-    ":y": 0,
+    "transformInverse": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "type": "rect",
+    "width": 100,
+    "x": 0,
+    "y": 0,
+  },
+  {
+    ":frame-id": "1",
+    ":id": "3",
+    ":parent-id": "1",
+    "fills": [
+      {
+        "fillColor": "#B1B2B5",
+        "fillOpacity": 1,
+      },
+    ],
+    "flipX": null,
+    "flipY": null,
+    "frameId": "00000000-0000-0000-0000-000000000000",
+    "height": 100,
+    "id": "d93e51ed-0b43-8077-8004-f5d10705af65",
+    "name": "Rectangle",
+    "parentId": "d93e51ed-0b43-8077-8004-f5d1070691ce",
+    "points": [
+      {
+        "x": 0,
+        "y": 0,
+      },
+      {
+        "x": 100,
+        "y": 0,
+      },
+      {
+        "x": 100,
+        "y": 100,
+      },
+      {
+        "x": 0,
+        "y": 100,
+      },
+    ],
+    "proportion": 1,
+    "proportionLock": false,
+    "rotation": 0,
+    "rx": 0,
+    "ry": 0,
+    "selrect": {
+      "height": 100,
+      "width": 100,
+      "x": 0,
+      "x1": 0,
+      "x2": 100,
+      "y": 0,
+      "y1": 0,
+      "y2": 100,
+    },
+    "strokes": [],
+    "transform": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "transformInverse": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "type": "rect",
+    "width": 100,
+    "x": 0,
+    "y": 0,
+  },
+  {
+    ":frame-id": "1",
+    ":id": "4",
+    ":parent-id": "1",
+    "fills": [],
+    "flipX": null,
+    "flipY": null,
+    "frameId": "00000000-0000-0000-0000-000000000000",
+    "height": 100,
+    "id": "d93e51ed-0b43-8077-8004-f5d1070691ce",
+    "index": 2,
+    "name": "Group",
+    "parentId": "00000000-0000-0000-0000-000000000000",
+    "points": [
+      {
+        "x": 0,
+        "y": 0,
+      },
+      {
+        "x": 100,
+        "y": 0,
+      },
+      {
+        "x": 100,
+        "y": 100,
+      },
+      {
+        "x": 0,
+        "y": 100,
+      },
+    ],
+    "proportion": 1,
+    "proportionLock": false,
+    "rotation": 0,
+    "selrect": {
+      "height": 100,
+      "width": 100,
+      "x": 0,
+      "x1": 0,
+      "x2": 100,
+      "y": 0,
+      "y1": 0,
+      "y2": 100,
+    },
+    "shapes": [
+      "d93e51ed-0b43-8077-8004-f5d106ffe16b",
+      "d93e51ed-0b43-8077-8004-f5d10705af65",
+    ],
+    "strokes": [],
+    "transform": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "transformInverse": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "type": "group",
+    "width": 100,
+    "x": 0,
+    "y": 0,
   },
 ]
 `;
@@ -1478,381 +1529,396 @@ exports[`Plugins > group and ungroup 1`] = `
 exports[`Plugins > insert svg 1`] = `
 [
   {
-    ":fills": [
-      {
-        ":fill-color": "#FFFFFF",
-        ":fill-opacity": 1,
-      },
-    ],
-    ":flip-x": null,
-    ":flip-y": null,
     ":frame-id": "1",
-    ":height": 0.01,
-    ":hide-fill-on-export": false,
     ":id": "1",
-    ":name": "Root Frame",
     ":parent-id": "1",
-    ":points": [
+    "fills": [
       {
-        ":x": 0,
-        ":y": 0,
-      },
-      {
-        ":x": 0.01,
-        ":y": 0,
-      },
-      {
-        ":x": 0.01,
-        ":y": 0.01,
-      },
-      {
-        ":x": 0,
-        ":y": 0.01,
+        "fillColor": "#FFFFFF",
+        "fillOpacity": 1,
       },
     ],
-    ":proportion": 1,
-    ":proportion-lock": false,
-    ":rotation": 0,
-    ":selrect": {
-      ":height": 0.01,
-      ":width": 0.01,
-      ":x": 0,
-      ":x1": 0,
-      ":x2": 0.01,
-      ":y": 0,
-      ":y1": 0,
-      ":y2": 0.01,
-    },
-    ":shapes": [
-      "2",
+    "flipX": null,
+    "flipY": null,
+    "frameId": "00000000-0000-0000-0000-000000000000",
+    "height": 0.01,
+    "hideFillOnExport": false,
+    "id": "00000000-0000-0000-0000-000000000000",
+    "name": "Root Frame",
+    "parentId": "00000000-0000-0000-0000-000000000000",
+    "points": [
+      {
+        "x": 0,
+        "y": 0,
+      },
+      {
+        "x": 0.01,
+        "y": 0,
+      },
+      {
+        "x": 0.01,
+        "y": 0.01,
+      },
+      {
+        "x": 0,
+        "y": 0.01,
+      },
     ],
-    ":strokes": [],
-    ":transform": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "proportion": 1,
+    "proportionLock": false,
+    "rotation": 0,
+    "selrect": {
+      "height": 0.01,
+      "width": 0.01,
+      "x": 0,
+      "x1": 0,
+      "x2": 0.01,
+      "y": 0,
+      "y1": 0,
+      "y2": 0.01,
     },
-    ":transform-inverse": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "shapes": [
+      "9bf6fbc5-040c-80f0-8004-f5d10c5820ec",
+    ],
+    "strokes": [],
+    "transform": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":type": ":frame",
-    ":width": 0.01,
-    ":x": 0,
-    ":y": 0,
+    "transformInverse": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "type": "frame",
+    "width": 0.01,
+    "x": 0,
+    "y": 0,
   },
   {
-    ":fills": [],
-    ":flip-x": false,
-    ":flip-y": false,
     ":frame-id": "1",
-    ":height": 130,
     ":id": "2",
-    ":name": "Test icon",
     ":parent-id": "1",
-    ":points": [
+    "fills": [],
+    "flipX": false,
+    "flipY": false,
+    "frameId": "00000000-0000-0000-0000-000000000000",
+    "height": 130,
+    "id": "9bf6fbc5-040c-80f0-8004-f5d10c5820ec",
+    "name": "Test icon",
+    "parentId": "00000000-0000-0000-0000-000000000000",
+    "points": [
       {
-        ":x": 684,
-        ":y": 540,
+        "x": 684,
+        "y": 540,
       },
       {
-        ":x": 984,
-        ":y": 540,
+        "x": 984,
+        "y": 540,
       },
       {
-        ":x": 984,
-        ":y": 670,
+        "x": 984,
+        "y": 670,
       },
       {
-        ":x": 684,
-        ":y": 670,
+        "x": 684,
+        "y": 670,
       },
     ],
-    ":proportion": 1,
-    ":proportion-lock": false,
-    ":rotation": 0,
-    ":selrect": {
-      ":height": 130,
-      ":width": 300,
-      ":x": 684,
-      ":x1": 684,
-      ":x2": 984,
-      ":y": 540,
-      ":y1": 540,
-      ":y2": 670,
+    "proportion": 1,
+    "proportionLock": false,
+    "rotation": 0,
+    "selrect": {
+      "height": 130,
+      "width": 300,
+      "x": 684,
+      "x1": 684,
+      "x2": 984,
+      "y": 540,
+      "y1": 540,
+      "y2": 670,
     },
-    ":shapes": [
-      "3",
-      "4",
-      "5",
+    "shapes": [
+      "9bf6fbc5-040c-80f0-8004-f5d10c590e5e",
+      "9bf6fbc5-040c-80f0-8004-f5d10c590e5f",
+      "9bf6fbc5-040c-80f0-8004-f5d10c5942ab",
     ],
-    ":strokes": [],
-    ":svg-attrs": {
-      ":height": "130",
-      ":width": "300",
+    "strokes": [],
+    "svgAttrs": {
+      "height": "130",
+      "width": "300",
     },
-    ":transform": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "transform": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":transform-inverse": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "transformInverse": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":type": ":group",
-    ":width": 300,
-    ":x": 684,
-    ":y": 540,
+    "type": "group",
+    "width": 300,
+    "x": 684,
+    "y": 540,
   },
   {
-    ":fills": [],
-    ":flip-x": null,
-    ":flip-y": null,
     ":frame-id": "1",
-    ":height": 130,
-    ":hidden": true,
     ":id": "3",
-    ":name": "base-background",
-    ":parent-id": "2",
-    ":points": [
+    ":parent-id": "1",
+    "fills": [],
+    "flipX": null,
+    "flipY": null,
+    "frameId": "00000000-0000-0000-0000-000000000000",
+    "height": 130,
+    "hidden": true,
+    "id": "9bf6fbc5-040c-80f0-8004-f5d10c590e5e",
+    "name": "base-background",
+    "parentId": "9bf6fbc5-040c-80f0-8004-f5d10c5820ec",
+    "points": [
       {
-        ":x": 684,
-        ":y": 540,
+        "x": 684,
+        "y": 540,
       },
       {
-        ":x": 984,
-        ":y": 540,
+        "x": 984,
+        "y": 540,
       },
       {
-        ":x": 984,
-        ":y": 670,
+        "x": 984,
+        "y": 670,
       },
       {
-        ":x": 684,
-        ":y": 670,
+        "x": 684,
+        "y": 670,
       },
     ],
-    ":proportion": 1,
-    ":proportion-lock": false,
-    ":rotation": 0,
-    ":rx": 0,
-    ":ry": 0,
-    ":selrect": {
-      ":height": 130,
-      ":width": 300,
-      ":x": 684,
-      ":x1": 684,
-      ":x2": 984,
-      ":y": 540,
-      ":y1": 540,
-      ":y2": 670,
+    "proportion": 1,
+    "proportionLock": false,
+    "rotation": 0,
+    "rx": 0,
+    "ry": 0,
+    "selrect": {
+      "height": 130,
+      "width": 300,
+      "x": 684,
+      "x1": 684,
+      "x2": 984,
+      "y": 540,
+      "y1": 540,
+      "y2": 670,
     },
-    ":strokes": [],
-    ":svg-attrs": {
-      ":fill": "none",
-      ":id": "base-background",
+    "strokes": [],
+    "svgAttrs": {
+      "fill": "none",
+      "id": "base-background",
     },
-    ":svg-defs": {},
-    ":svg-viewbox": {
-      ":height": 130,
-      ":width": 300,
-      ":x": 0,
-      ":x1": 0,
-      ":x2": 300,
-      ":y": 0,
-      ":y1": 0,
-      ":y2": 130,
+    "svgDefs": {},
+    "svgViewbox": {
+      "height": 130,
+      "width": 300,
+      "x": 0,
+      "x1": 0,
+      "x2": 300,
+      "y": 0,
+      "y1": 0,
+      "y2": 130,
     },
-    ":transform": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "transform": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":transform-inverse": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "transformInverse": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":type": ":rect",
-    ":width": 300,
-    ":x": 684,
-    ":y": 540,
+    "type": "rect",
+    "width": 300,
+    "x": 684,
+    "y": 540,
   },
   {
-    ":fills": [
-      {
-        ":fill-color": "#0000ff",
-      },
-    ],
-    ":flip-x": null,
-    ":flip-y": null,
     ":frame-id": "1",
-    ":height": 100,
     ":id": "4",
-    ":name": "svg-rect",
-    ":parent-id": "2",
-    ":points": [
+    ":parent-id": "1",
+    "fills": [
       {
-        ":x": 694,
-        ":y": 550,
-      },
-      {
-        ":x": 894,
-        ":y": 550,
-      },
-      {
-        ":x": 894,
-        ":y": 650,
-      },
-      {
-        ":x": 694,
-        ":y": 650,
+        "fillColor": "#0000ff",
       },
     ],
-    ":proportion": 1,
-    ":proportion-lock": false,
-    ":rotation": 0,
-    ":rx": 20,
-    ":ry": 20,
-    ":selrect": {
-      ":height": 100,
-      ":width": 200,
-      ":x": 694,
-      ":x1": 694,
-      ":x2": 894,
-      ":y": 550,
-      ":y1": 550,
-      ":y2": 650,
+    "flipX": null,
+    "flipY": null,
+    "frameId": "00000000-0000-0000-0000-000000000000",
+    "height": 100,
+    "id": "9bf6fbc5-040c-80f0-8004-f5d10c590e5f",
+    "name": "svg-rect",
+    "parentId": "9bf6fbc5-040c-80f0-8004-f5d10c5820ec",
+    "points": [
+      {
+        "x": 694,
+        "y": 550,
+      },
+      {
+        "x": 894,
+        "y": 550,
+      },
+      {
+        "x": 894,
+        "y": 650,
+      },
+      {
+        "x": 694,
+        "y": 650,
+      },
+    ],
+    "proportion": 1,
+    "proportionLock": false,
+    "rotation": 0,
+    "rx": 20,
+    "ry": 20,
+    "selrect": {
+      "height": 100,
+      "width": 200,
+      "x": 694,
+      "x1": 694,
+      "x2": 894,
+      "y": 550,
+      "y1": 550,
+      "y2": 650,
     },
-    ":strokes": [],
-    ":svg-attrs": {},
-    ":svg-defs": {},
-    ":svg-viewbox": {
-      ":height": 100,
-      ":width": 200,
-      ":x": 10,
-      ":x1": 10,
-      ":x2": 210,
-      ":y": 10,
-      ":y1": 10,
-      ":y2": 110,
+    "strokes": [],
+    "svgAttrs": {},
+    "svgDefs": {},
+    "svgViewbox": {
+      "height": 100,
+      "width": 200,
+      "x": 10,
+      "x1": 10,
+      "x2": 210,
+      "y": 10,
+      "y1": 10,
+      "y2": 110,
     },
-    ":transform": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "transform": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":transform-inverse": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "transformInverse": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":type": ":rect",
-    ":width": 200,
-    ":x": 694,
-    ":y": 550,
+    "type": "rect",
+    "width": 200,
+    "x": 694,
+    "y": 550,
   },
   {
-    ":content": "Sorry, your browser does not support inline SVG.",
-    ":fills": [],
-    ":flip-x": null,
-    ":flip-y": null,
     ":frame-id": "1",
-    ":height": 130,
     ":id": "5",
-    ":name": "svg-node",
-    ":parent-id": "2",
-    ":points": [
+    ":parent-id": "1",
+    "content": "Sorry, your browser does not support inline SVG.",
+    "fills": [],
+    "flipX": null,
+    "flipY": null,
+    "frameId": "00000000-0000-0000-0000-000000000000",
+    "height": 130,
+    "id": "9bf6fbc5-040c-80f0-8004-f5d10c5942ab",
+    "name": "svg-node",
+    "parentId": "9bf6fbc5-040c-80f0-8004-f5d10c5820ec",
+    "points": [
       {
-        ":x": 684,
-        ":y": 540,
+        "x": 684,
+        "y": 540,
       },
       {
-        ":x": 984,
-        ":y": 540,
+        "x": 984,
+        "y": 540,
       },
       {
-        ":x": 984,
-        ":y": 670,
+        "x": 984,
+        "y": 670,
       },
       {
-        ":x": 684,
-        ":y": 670,
+        "x": 684,
+        "y": 670,
       },
     ],
-    ":proportion": 2.3077,
-    ":proportion-lock": true,
-    ":rotation": 0,
-    ":selrect": {
-      ":height": 130,
-      ":width": 300,
-      ":x": 684,
-      ":x1": 684,
-      ":x2": 984,
-      ":y": 540,
-      ":y1": 540,
-      ":y2": 670,
+    "proportion": 2.3076923076923075,
+    "proportionLock": true,
+    "rotation": 0,
+    "selrect": {
+      "height": 130,
+      "width": 300,
+      "x": 684,
+      "x1": 684,
+      "x2": 984,
+      "y": 540,
+      "y1": 540,
+      "y2": 670,
     },
-    ":strokes": [],
-    ":svg-attrs": {},
-    ":svg-defs": {},
-    ":svg-viewbox": {
-      ":height": 130,
-      ":width": 300,
-      ":x": 0,
-      ":x1": 0,
-      ":x2": 300,
-      ":y": 0,
-      ":y1": 0,
-      ":y2": 130,
+    "strokes": [],
+    "svgAttrs": {},
+    "svgDefs": {},
+    "svgViewbox": {
+      "height": 130,
+      "width": 300,
+      "x": 0,
+      "x1": 0,
+      "x2": 300,
+      "y": 0,
+      "y1": 0,
+      "y2": 130,
     },
-    ":transform": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "transform": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":transform-inverse": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "transformInverse": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":type": ":svg-raw",
-    ":width": 300,
-    ":x": 684,
-    ":y": 540,
+    "type": "svg-raw",
+    "width": 300,
+    "x": 684,
+    "y": 540,
   },
 ]
 `;
@@ -1860,149 +1926,426 @@ exports[`Plugins > insert svg 1`] = `
 exports[`Plugins > plugin data 1`] = `
 [
   {
-    ":fills": [
-      {
-        ":fill-color": "#FFFFFF",
-        ":fill-opacity": 1,
-      },
-    ],
-    ":flip-x": null,
-    ":flip-y": null,
     ":frame-id": "1",
-    ":height": 0.01,
-    ":hide-fill-on-export": false,
     ":id": "1",
-    ":name": "Root Frame",
     ":parent-id": "1",
-    ":points": [
+    "fills": [
       {
-        ":x": 0,
-        ":y": 0,
-      },
-      {
-        ":x": 0.01,
-        ":y": 0,
-      },
-      {
-        ":x": 0.01,
-        ":y": 0.01,
-      },
-      {
-        ":x": 0,
-        ":y": 0.01,
+        "fillColor": "#FFFFFF",
+        "fillOpacity": 1,
       },
     ],
-    ":proportion": 1,
-    ":proportion-lock": false,
-    ":rotation": 0,
-    ":selrect": {
-      ":height": 0.01,
-      ":width": 0.01,
-      ":x": 0,
-      ":x1": 0,
-      ":x2": 0.01,
-      ":y": 0,
-      ":y1": 0,
-      ":y2": 0.01,
-    },
-    ":shapes": [
-      "2",
+    "flipX": null,
+    "flipY": null,
+    "frameId": "00000000-0000-0000-0000-000000000000",
+    "height": 0.01,
+    "hideFillOnExport": false,
+    "id": "00000000-0000-0000-0000-000000000000",
+    "name": "Root Frame",
+    "parentId": "00000000-0000-0000-0000-000000000000",
+    "points": [
+      {
+        "x": 0,
+        "y": 0,
+      },
+      {
+        "x": 0.01,
+        "y": 0,
+      },
+      {
+        "x": 0.01,
+        "y": 0.01,
+      },
+      {
+        "x": 0,
+        "y": 0.01,
+      },
     ],
-    ":strokes": [],
-    ":transform": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "proportion": 1,
+    "proportionLock": false,
+    "rotation": 0,
+    "selrect": {
+      "height": 0.01,
+      "width": 0.01,
+      "x": 0,
+      "x1": 0,
+      "x2": 0.01,
+      "y": 0,
+      "y1": 0,
+      "y2": 0.01,
     },
-    ":transform-inverse": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "shapes": [
+      "537105f7-8fcb-8055-8004-f5d11193332a",
+    ],
+    "strokes": [],
+    "transform": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":type": ":frame",
-    ":width": 0.01,
-    ":x": 0,
-    ":y": 0,
+    "transformInverse": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "type": "frame",
+    "width": 0.01,
+    "x": 0,
+    "y": 0,
   },
   {
-    ":fills": [
+    ":frame-id": "1",
+    ":id": "2",
+    ":parent-id": "1",
+    "fills": [
       {
-        ":fill-color": "#B1B2B5",
-        ":fill-opacity": 1,
+        "fillColor": "#B1B2B5",
+        "fillOpacity": 1,
       },
     ],
-    ":flip-x": null,
-    ":flip-y": null,
-    ":frame-id": "1",
-    ":height": 100,
-    ":id": "2",
-    ":name": "Rectangle",
-    ":parent-id": "1",
-    ":plugin-data": {
-      ":plugin/TEST": {
+    "flipX": null,
+    "flipY": null,
+    "frameId": "00000000-0000-0000-0000-000000000000",
+    "height": 100,
+    "id": "537105f7-8fcb-8055-8004-f5d11193332a",
+    "name": "Rectangle",
+    "parentId": "00000000-0000-0000-0000-000000000000",
+    "pluginData": {
+      "TEST": {
         "testData": "test",
       },
     },
-    ":points": [
+    "points": [
       {
-        ":x": 0,
-        ":y": 0,
+        "x": 0,
+        "y": 0,
       },
       {
-        ":x": 100,
-        ":y": 0,
+        "x": 100,
+        "y": 0,
       },
       {
-        ":x": 100,
-        ":y": 100,
+        "x": 100,
+        "y": 100,
       },
       {
-        ":x": 0,
-        ":y": 100,
+        "x": 0,
+        "y": 100,
       },
     ],
-    ":proportion": 1,
-    ":proportion-lock": false,
-    ":rotation": 0,
-    ":rx": 0,
-    ":ry": 0,
-    ":selrect": {
-      ":height": 100,
-      ":width": 100,
-      ":x": 0,
-      ":x1": 0,
-      ":x2": 100,
-      ":y": 0,
-      ":y1": 0,
-      ":y2": 100,
+    "proportion": 1,
+    "proportionLock": false,
+    "rotation": 0,
+    "rx": 0,
+    "ry": 0,
+    "selrect": {
+      "height": 100,
+      "width": 100,
+      "x": 0,
+      "x1": 0,
+      "x2": 100,
+      "y": 0,
+      "y1": 0,
+      "y2": 100,
     },
-    ":strokes": [],
-    ":transform": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "strokes": [],
+    "transform": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":transform-inverse": {
-      ":a": 1,
-      ":b": 0,
-      ":c": 0,
-      ":d": 1,
-      ":e": 0,
-      ":f": 0,
+    "transformInverse": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
     },
-    ":type": ":rect",
-    ":width": 100,
-    ":x": 0,
-    ":y": 0,
+    "type": "rect",
+    "width": 100,
+    "x": 0,
+    "y": 0,
+  },
+]
+`;
+
+exports[`Plugins > text and textrange 1`] = `
+[
+  {
+    ":frame-id": "1",
+    ":id": "1",
+    ":parent-id": "1",
+    "fills": [
+      {
+        "fillColor": "#FFFFFF",
+        "fillOpacity": 1,
+      },
+    ],
+    "flipX": null,
+    "flipY": null,
+    "frameId": "00000000-0000-0000-0000-000000000000",
+    "height": 0.01,
+    "hideFillOnExport": false,
+    "id": "00000000-0000-0000-0000-000000000000",
+    "name": "Root Frame",
+    "parentId": "00000000-0000-0000-0000-000000000000",
+    "points": [
+      {
+        "x": 0,
+        "y": 0,
+      },
+      {
+        "x": 0.01,
+        "y": 0,
+      },
+      {
+        "x": 0.01,
+        "y": 0.01,
+      },
+      {
+        "x": 0,
+        "y": 0.01,
+      },
+    ],
+    "proportion": 1,
+    "proportionLock": false,
+    "rotation": 0,
+    "selrect": {
+      "height": 0.01,
+      "width": 0.01,
+      "x": 0,
+      "x1": 0,
+      "x2": 0.01,
+      "y": 0,
+      "y1": 0,
+      "y2": 0.01,
+    },
+    "shapes": [
+      "59413672-fad9-806e-8004-f5d11c17da60",
+    ],
+    "strokes": [],
+    "transform": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "transformInverse": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "type": "frame",
+    "width": 0.01,
+    "x": 0,
+    "y": 0,
+  },
+  {
+    ":frame-id": "1",
+    ":id": "2",
+    ":parent-id": "1",
+    "content": {
+      "children": [
+        {
+          "children": [
+            {
+              "children": [
+                {
+                  "fills": [
+                    {
+                      "fillColor": "#ff6fe0",
+                      "fillOpacity": 1,
+                    },
+                  ],
+                  "fontFamily": "Work Sans",
+                  "fontId": "gfont-work-sans",
+                  "fontSize": "40",
+                  "fontStyle": "italic",
+                  "fontVariantId": "500italic",
+                  "fontWeight": "500",
+                  "letterSpacing": "0",
+                  "lineHeight": "1.2",
+                  "text": "Hello",
+                  "textAlign": "left",
+                  "textDecoration": "underline",
+                  "textTransform": "uppercase",
+                  "typographyRefFile": null,
+                  "typographyRefId": null,
+                },
+                {
+                  "fills": [
+                    {
+                      "fillColor": "#000000",
+                      "fillOpacity": 1,
+                    },
+                  ],
+                  "fontFamily": "Work Sans",
+                  "fontId": "gfont-work-sans",
+                  "fontSize": "20",
+                  "fontStyle": "italic",
+                  "fontVariantId": "500italic",
+                  "fontWeight": "500",
+                  "letterSpacing": "0",
+                  "lineHeight": "1.2",
+                  "text": " World!",
+                  "textAlign": "left",
+                  "textDecoration": "underline",
+                  "textTransform": "uppercase",
+                  "typographyRefFile": null,
+                  "typographyRefId": null,
+                },
+              ],
+              "fills": [
+                {
+                  "fillColor": "#000000",
+                  "fillOpacity": 1,
+                },
+              ],
+              "fontFamily": "Work Sans",
+              "fontId": "gfont-work-sans",
+              "fontSize": "20",
+              "fontStyle": "italic",
+              "fontVariantId": "500italic",
+              "fontWeight": "500",
+              "letterSpacing": "0",
+              "lineHeight": "1.2",
+              "textAlign": "left",
+              "textDecoration": "underline",
+              "textTransform": "uppercase",
+              "type": "paragraph",
+              "typographyRefFile": null,
+              "typographyRefId": null,
+            },
+          ],
+          "type": "paragraph-set",
+        },
+      ],
+      "type": "root",
+    },
+    "flipX": null,
+    "flipY": null,
+    "frameId": "00000000-0000-0000-0000-000000000000",
+    "growType": "auto-width",
+    "height": 48,
+    "id": "59413672-fad9-806e-8004-f5d11c17da60",
+    "name": "Text",
+    "parentId": "00000000-0000-0000-0000-000000000000",
+    "points": [
+      {
+        "x": 0,
+        "y": 0,
+      },
+      {
+        "x": 214,
+        "y": 0,
+      },
+      {
+        "x": 214,
+        "y": 48,
+      },
+      {
+        "x": 0,
+        "y": 48,
+      },
+    ],
+    "positionData": [
+      {
+        "direction": "ltr",
+        "fills": [
+          {
+            "fillColor": "#ff6fe0",
+            "fillOpacity": 1,
+          },
+        ],
+        "fontFamily": ""Work Sans"",
+        "fontSize": "40px",
+        "fontStyle": "italic",
+        "fontWeight": "500",
+        "height": 47,
+        "letterSpacing": "normal",
+        "text": "Hello",
+        "textDecoration": "underline solid rgb(255, 111, 224)",
+        "textTransform": "uppercase",
+        "width": 129.03125,
+        "x": 0,
+        "x1": 0,
+        "x2": 129.03125,
+        "y": 47,
+        "y1": 0,
+        "y2": 47,
+      },
+      {
+        "direction": "ltr",
+        "fills": [
+          {
+            "fillColor": "#000000",
+            "fillOpacity": 1,
+          },
+        ],
+        "fontFamily": ""Work Sans"",
+        "fontSize": "20px",
+        "fontStyle": "italic",
+        "fontWeight": "500",
+        "height": 24,
+        "letterSpacing": "normal",
+        "text": " World!",
+        "textDecoration": "underline solid rgb(0, 0, 0)",
+        "textTransform": "uppercase",
+        "width": 84.375,
+        "x": 129.03125,
+        "x1": 129.03125,
+        "x2": 213.40625,
+        "y": 42,
+        "y1": 18,
+        "y2": 42,
+      },
+    ],
+    "rotation": 0,
+    "selrect": {
+      "height": 48,
+      "width": 214,
+      "x": 0,
+      "x1": 0,
+      "x2": 214,
+      "y": 0,
+      "y1": 0,
+      "y2": 48,
+    },
+    "transform": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "transformInverse": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "type": "text",
+    "width": 214,
+    "x": 0,
+    "y": 0,
   },
 ]
 `;
diff --git a/apps/e2e/src/plugins.spec.ts b/apps/e2e/src/plugins.spec.ts
index 182f8ee..5a3e5be 100644
--- a/apps/e2e/src/plugins.spec.ts
+++ b/apps/e2e/src/plugins.spec.ts
@@ -6,6 +6,7 @@ import group from './plugins/group';
 import insertSvg from './plugins/insert-svg';
 import pluginData from './plugins/plugin-data';
 import componentLibrary from './plugins/component-library';
+import createText from './plugins/create-text';
 
 describe('Plugins', () => {
   it('create frame - text - rectable', async () => {
@@ -49,4 +50,10 @@ describe('Plugins', () => {
     const result = await agent.runCode(componentLibrary.toString());
     expect(result).toMatchSnapshot();
   });
+
+  it('text and textrange', async () => {
+    const agent = await Agent();
+    const result = await agent.runCode(createText.toString());
+    expect(result).toMatchSnapshot();
+  });
 });
diff --git a/apps/e2e/src/plugins/create-text.ts b/apps/e2e/src/plugins/create-text.ts
new file mode 100644
index 0000000..d6c68d4
--- /dev/null
+++ b/apps/e2e/src/plugins/create-text.ts
@@ -0,0 +1,22 @@
+export default function () {
+    function createText(): void {
+      const text = penpot.createText('Hello World!');
+
+      if (text) {
+        text.growType = 'auto-width';
+        text.textTransform = 'uppercase';
+        text.textDecoration = 'underline';
+        text.fontId = 'gfont-work-sans';
+        text.fontStyle = 'italic';
+        text.fontSize = '20';
+        text.fontWeight = '500';
+  
+        const textRange = text.getRange(0, 5);
+        textRange.fontSize = '40';
+        textRange.fills = [{ fillColor: '#ff6fe0', fillOpacity: 1 }];
+      }
+    }
+  
+    createText();
+  }
+  
\ No newline at end of file