diff --git a/plugin-src/transformers/partials/transformBlend.ts b/plugin-src/transformers/partials/transformBlend.ts
index 9711a617..fd3ecd66 100644
--- a/plugin-src/transformers/partials/transformBlend.ts
+++ b/plugin-src/transformers/partials/transformBlend.ts
@@ -1,6 +1,6 @@
 import { translateBlendMode } from '@plugin/translators';
 
-import { ShapeAttributes } from '@ui/lib/types/shape/shapeAttributes';
+import { ShapeAttributes } from '@ui/lib/types/shapes/shape';
 
 export const transformBlend = (
   node: SceneNodeMixin & MinimalBlendMixin
diff --git a/plugin-src/transformers/partials/transformCornerRadius.ts b/plugin-src/transformers/partials/transformCornerRadius.ts
index e784338a..0939a125 100644
--- a/plugin-src/transformers/partials/transformCornerRadius.ts
+++ b/plugin-src/transformers/partials/transformCornerRadius.ts
@@ -1,4 +1,4 @@
-import { ShapeAttributes } from '@ui/lib/types/shape/shapeAttributes';
+import { ShapeAttributes } from '@ui/lib/types/shapes/shape';
 
 const isRectangleCornerMixin = (
   node: CornerMixin | (CornerMixin & RectangleCornerMixin)
diff --git a/plugin-src/transformers/partials/transformDimensionAndPosition.ts b/plugin-src/transformers/partials/transformDimensionAndPosition.ts
index 68e17fbe..01cdaabc 100644
--- a/plugin-src/transformers/partials/transformDimensionAndPosition.ts
+++ b/plugin-src/transformers/partials/transformDimensionAndPosition.ts
@@ -1,4 +1,4 @@
-import { ShapeGeomAttributes } from '@ui/lib/types/shape/shapeGeomAttributes';
+import { ShapeGeomAttributes } from '@ui/lib/types/shapes/shape';
 
 export const transformDimensionAndPosition = (
   node: DimensionAndPositionMixin,
diff --git a/plugin-src/transformers/partials/transformEffects.ts b/plugin-src/transformers/partials/transformEffects.ts
index 0eef6760..4745618d 100644
--- a/plugin-src/transformers/partials/transformEffects.ts
+++ b/plugin-src/transformers/partials/transformEffects.ts
@@ -1,6 +1,6 @@
 import { translateShadowEffects } from '@plugin/translators';
 
-import { ShapeAttributes } from '@ui/lib/types/shape/shapeAttributes';
+import { ShapeAttributes } from '@ui/lib/types/shapes/shape';
 
 export const transformEffects = (node: BlendMixin): Partial<ShapeAttributes> => {
   return {
diff --git a/plugin-src/transformers/partials/transformFills.ts b/plugin-src/transformers/partials/transformFills.ts
index 982be650..19b70dc1 100644
--- a/plugin-src/transformers/partials/transformFills.ts
+++ b/plugin-src/transformers/partials/transformFills.ts
@@ -1,6 +1,6 @@
 import { translateFills } from '@plugin/translators';
 
-import { ShapeAttributes } from '@ui/lib/types/shape/shapeAttributes';
+import { ShapeAttributes } from '@ui/lib/types/shapes/shape';
 
 export const transformFills = (
   node: MinimalFillsMixin & DimensionAndPositionMixin
diff --git a/plugin-src/transformers/partials/transformProportion.ts b/plugin-src/transformers/partials/transformProportion.ts
index a92a1189..200a92b0 100644
--- a/plugin-src/transformers/partials/transformProportion.ts
+++ b/plugin-src/transformers/partials/transformProportion.ts
@@ -1,4 +1,4 @@
-import { ShapeAttributes } from '@ui/lib/types/shape/shapeAttributes';
+import { ShapeAttributes } from '@ui/lib/types/shapes/shape';
 
 export const transformProportion = (node: LayoutMixin): Partial<ShapeAttributes> => {
   return {
diff --git a/plugin-src/transformers/partials/transformSceneNode.ts b/plugin-src/transformers/partials/transformSceneNode.ts
index f4b24a3f..95eff6e1 100644
--- a/plugin-src/transformers/partials/transformSceneNode.ts
+++ b/plugin-src/transformers/partials/transformSceneNode.ts
@@ -1,4 +1,4 @@
-import { ShapeAttributes } from '@ui/lib/types/shape/shapeAttributes';
+import { ShapeAttributes } from '@ui/lib/types/shapes/shape';
 
 export const transformSceneNode = (node: SceneNodeMixin): Partial<ShapeAttributes> => {
   return {
diff --git a/plugin-src/transformers/partials/transformStrokes.ts b/plugin-src/transformers/partials/transformStrokes.ts
index 05cc5e05..35c90495 100644
--- a/plugin-src/transformers/partials/transformStrokes.ts
+++ b/plugin-src/transformers/partials/transformStrokes.ts
@@ -1,6 +1,6 @@
 import { translateStrokes } from '@plugin/translators';
 
-import { ShapeAttributes } from '@ui/lib/types/shape/shapeAttributes';
+import { ShapeAttributes } from '@ui/lib/types/shapes/shape';
 
 const isVectorLike = (node: GeometryMixin | VectorLikeMixin): node is VectorLikeMixin => {
   return 'vectorNetwork' in node;
diff --git a/plugin-src/transformers/partials/transformText.ts b/plugin-src/transformers/partials/transformText.ts
index 60254426..8427cb03 100644
--- a/plugin-src/transformers/partials/transformText.ts
+++ b/plugin-src/transformers/partials/transformText.ts
@@ -6,7 +6,7 @@ import {
   translateVerticalAlign
 } from '@plugin/translators/text';
 
-import { TextShape } from '@ui/lib/types/text/textShape';
+import { TextShape } from '@ui/lib/types/shapes/textShape';
 
 export const transformText = (node: TextNode): Partial<TextShape> => {
   const styledTextSegments = node.getStyledTextSegments([
diff --git a/plugin-src/transformers/partials/transformVectorPaths.ts b/plugin-src/transformers/partials/transformVectorPaths.ts
index 64bdeb5e..ef7ee167 100644
--- a/plugin-src/transformers/partials/transformVectorPaths.ts
+++ b/plugin-src/transformers/partials/transformVectorPaths.ts
@@ -1,6 +1,6 @@
 import { translateVectorPaths } from '@plugin/translators';
 
-import { PathAttributes } from '@ui/lib/types/path/pathAttributes';
+import { PathAttributes } from '@ui/lib/types/shapes/pathShape';
 
 const getVectorPaths = (node: VectorNode | StarNode | LineNode | PolygonNode): VectorPaths => {
   switch (node.type) {
diff --git a/plugin-src/transformers/transformEllipseNode.ts b/plugin-src/transformers/transformEllipseNode.ts
index e6e04d7d..7e707cfa 100644
--- a/plugin-src/transformers/transformEllipseNode.ts
+++ b/plugin-src/transformers/transformEllipseNode.ts
@@ -8,7 +8,7 @@ import {
   transformStrokes
 } from '@plugin/transformers/partials';
 
-import { CircleShape } from '@ui/lib/types/circle/circleShape';
+import { CircleShape } from '@ui/lib/types/shapes/circleShape';
 
 export const transformEllipseNode = (
   node: EllipseNode,
diff --git a/plugin-src/transformers/transformFrameNode.ts b/plugin-src/transformers/transformFrameNode.ts
index 146874a6..5de7b0d3 100644
--- a/plugin-src/transformers/transformFrameNode.ts
+++ b/plugin-src/transformers/transformFrameNode.ts
@@ -10,7 +10,7 @@ import {
   transformStrokes
 } from '@plugin/transformers/partials';
 
-import { FrameShape } from '@ui/lib/types/frame/frameShape';
+import { FrameShape } from '@ui/lib/types/shapes/frameShape';
 
 const isSectionNode = (node: FrameNode | SectionNode): node is SectionNode => {
   return node.type === 'SECTION';
diff --git a/plugin-src/transformers/transformGroupNode.ts b/plugin-src/transformers/transformGroupNode.ts
index c7698578..a0911018 100644
--- a/plugin-src/transformers/transformGroupNode.ts
+++ b/plugin-src/transformers/transformGroupNode.ts
@@ -6,7 +6,7 @@ import {
 } from '@plugin/transformers/partials';
 import { transformChildren } from '@plugin/transformers/partials';
 
-import { GroupShape } from '@ui/lib/types/group/groupShape';
+import { GroupShape } from '@ui/lib/types/shapes/groupShape';
 
 export const transformGroupNode = async (
   node: GroupNode,
diff --git a/plugin-src/transformers/transformImageNode.ts b/plugin-src/transformers/transformImageNode.ts
index 01c16c39..90456d55 100644
--- a/plugin-src/transformers/transformImageNode.ts
+++ b/plugin-src/transformers/transformImageNode.ts
@@ -1,7 +1,7 @@
 import { transformDimensionAndPosition } from '@plugin/transformers/partials';
 import { detectMimeType } from '@plugin/utils';
 
-import { ImageShape } from '@ui/lib/types/image/imageShape';
+import { ImageShape } from '@ui/lib/types/shapes/imageShape';
 
 export const transformImageNode = async (
   node: SceneNode,
diff --git a/plugin-src/transformers/transformPathNode.ts b/plugin-src/transformers/transformPathNode.ts
index ad95f772..ddcb0707 100644
--- a/plugin-src/transformers/transformPathNode.ts
+++ b/plugin-src/transformers/transformPathNode.ts
@@ -9,7 +9,7 @@ import {
   transformVectorPaths
 } from '@plugin/transformers/partials';
 
-import { PathShape } from '@ui/lib/types/path/pathShape';
+import { PathShape } from '@ui/lib/types/shapes/pathShape';
 
 const hasFillGeometry = (node: VectorNode | StarNode | LineNode | PolygonNode): boolean => {
   return 'fillGeometry' in node && node.fillGeometry.length > 0;
diff --git a/plugin-src/transformers/transformRectangleNode.ts b/plugin-src/transformers/transformRectangleNode.ts
index 60a6089a..9b616cae 100644
--- a/plugin-src/transformers/transformRectangleNode.ts
+++ b/plugin-src/transformers/transformRectangleNode.ts
@@ -9,7 +9,7 @@ import {
   transformStrokes
 } from '@plugin/transformers/partials';
 
-import { RectShape } from '@ui/lib/types/rect/rectShape';
+import { RectShape } from '@ui/lib/types/shapes/rectShape';
 
 export const transformRectangleNode = (
   node: RectangleNode,
diff --git a/plugin-src/transformers/transformTextNode.ts b/plugin-src/transformers/transformTextNode.ts
index 03f97d7b..d19fd862 100644
--- a/plugin-src/transformers/transformTextNode.ts
+++ b/plugin-src/transformers/transformTextNode.ts
@@ -8,7 +8,7 @@ import {
   transformText
 } from '@plugin/transformers/partials';
 
-import { TextShape } from '@ui/lib/types/text/textShape';
+import { TextShape } from '@ui/lib/types/shapes/textShape';
 
 export const transformTextNode = (node: TextNode, baseX: number, baseY: number): TextShape => {
   return {
diff --git a/plugin-src/translators/text/custom/translateCustomFont.ts b/plugin-src/translators/text/custom/translateCustomFont.ts
index 684ada21..1f109cb6 100644
--- a/plugin-src/translators/text/custom/translateCustomFont.ts
+++ b/plugin-src/translators/text/custom/translateCustomFont.ts
@@ -1,6 +1,6 @@
 import { getCustomFontId, translateFontVariantId } from '@plugin/translators/text/custom';
 
-import { FontId } from '@ui/lib/types/text/textContent';
+import { FontId } from '@ui/lib/types/shapes/textShape';
 
 export const translateCustomFont = (fontName: FontName, fontWeight: number): FontId | undefined => {
   return {
diff --git a/plugin-src/translators/text/gfonts/translateGoogleFont.ts b/plugin-src/translators/text/gfonts/translateGoogleFont.ts
index e40d2c2d..2f4209ae 100644
--- a/plugin-src/translators/text/gfonts/translateGoogleFont.ts
+++ b/plugin-src/translators/text/gfonts/translateGoogleFont.ts
@@ -2,7 +2,7 @@ import slugify from 'slugify';
 
 import { translateFontVariantId } from '@plugin/translators/text/gfonts';
 
-import { FontId } from '@ui/lib/types/text/textContent';
+import { FontId } from '@ui/lib/types/shapes/textShape';
 
 import { items as gfonts } from './gfonts.json';
 import { GoogleFont } from './googleFont';
diff --git a/plugin-src/translators/text/local/translateLocalFont.ts b/plugin-src/translators/text/local/translateLocalFont.ts
index 26abdd83..83afc001 100644
--- a/plugin-src/translators/text/local/translateLocalFont.ts
+++ b/plugin-src/translators/text/local/translateLocalFont.ts
@@ -1,6 +1,6 @@
 import { LocalFont, translateFontVariantId } from '@plugin/translators/text/local';
 
-import { FontId } from '@ui/lib/types/text/textContent';
+import { FontId } from '@ui/lib/types/shapes/textShape';
 
 import { items as localFonts } from './localFonts.json';
 
diff --git a/plugin-src/translators/text/translateFontId.ts b/plugin-src/translators/text/translateFontId.ts
index 97aaf17d..68d10018 100644
--- a/plugin-src/translators/text/translateFontId.ts
+++ b/plugin-src/translators/text/translateFontId.ts
@@ -1,4 +1,4 @@
-import { FontId } from '@ui/lib/types/text/textContent';
+import { FontId } from '@ui/lib/types/shapes/textShape';
 
 import { translateCustomFont } from './custom';
 import { translateGoogleFont } from './gfonts';
diff --git a/plugin-src/translators/text/translateFontStyle.ts b/plugin-src/translators/text/translateFontStyle.ts
index b229208e..183e1e7f 100644
--- a/plugin-src/translators/text/translateFontStyle.ts
+++ b/plugin-src/translators/text/translateFontStyle.ts
@@ -1,4 +1,4 @@
-import { TextFontStyle } from '@ui/lib/types/text/textContent';
+import { TextFontStyle } from '@ui/lib/types/shapes/textShape';
 
 export const translateFontStyle = (style: string): TextFontStyle => {
   if (style.toLowerCase().includes('italic')) {
diff --git a/plugin-src/translators/text/translateGrowType.ts b/plugin-src/translators/text/translateGrowType.ts
index 669f4a06..0eee01ad 100644
--- a/plugin-src/translators/text/translateGrowType.ts
+++ b/plugin-src/translators/text/translateGrowType.ts
@@ -1,4 +1,4 @@
-import { GrowType } from '@ui/lib/types/shape/shapeAttributes';
+import { GrowType } from '@ui/lib/types/shapes/shape';
 
 export const translateGrowType = (node: TextNode): GrowType => {
   if (node.leadingTrim === 'CAP_HEIGHT') {
diff --git a/plugin-src/translators/text/translateHorizontalAlign.ts b/plugin-src/translators/text/translateHorizontalAlign.ts
index 04462b2a..291a15d2 100644
--- a/plugin-src/translators/text/translateHorizontalAlign.ts
+++ b/plugin-src/translators/text/translateHorizontalAlign.ts
@@ -1,4 +1,4 @@
-import { TextHorizontalAlign } from '@ui/lib/types/text/textContent';
+import { TextHorizontalAlign } from '@ui/lib/types/shapes/textShape';
 
 export const translateHorizontalAlign = (
   align: 'LEFT' | 'CENTER' | 'RIGHT' | 'JUSTIFIED'
diff --git a/plugin-src/translators/text/translateParagraphProperties.ts b/plugin-src/translators/text/translateParagraphProperties.ts
index 2fb67e80..e55fee9a 100644
--- a/plugin-src/translators/text/translateParagraphProperties.ts
+++ b/plugin-src/translators/text/translateParagraphProperties.ts
@@ -1,4 +1,4 @@
-import { TextNode as PenpotTextNode } from '@ui/lib/types/text/textContent';
+import { TextNode as PenpotTextNode } from '@ui/lib/types/shapes/textShape';
 
 export const translateParagraphProperties = (
   node: TextNode,
diff --git a/plugin-src/translators/text/translateStyleTextSegments.ts b/plugin-src/translators/text/translateStyleTextSegments.ts
index 37f5f0a2..fdbed06a 100644
--- a/plugin-src/translators/text/translateStyleTextSegments.ts
+++ b/plugin-src/translators/text/translateStyleTextSegments.ts
@@ -10,7 +10,7 @@ import {
   translateTextTransform
 } from '@plugin/translators/text';
 
-import { TextNode as PenpotTextNode, TextStyle } from '@ui/lib/types/text/textContent';
+import { TextNode as PenpotTextNode, TextStyle } from '@ui/lib/types/shapes/textShape';
 
 type StyleTextSegment = Pick<
   StyledTextSegment,
diff --git a/plugin-src/translators/text/translateVerticalAlign.ts b/plugin-src/translators/text/translateVerticalAlign.ts
index 87677168..e6b22071 100644
--- a/plugin-src/translators/text/translateVerticalAlign.ts
+++ b/plugin-src/translators/text/translateVerticalAlign.ts
@@ -1,4 +1,4 @@
-import { TextVerticalAlign } from '@ui/lib/types/text/textContent';
+import { TextVerticalAlign } from '@ui/lib/types/shapes/textShape';
 
 export const translateVerticalAlign = (align: 'TOP' | 'CENTER' | 'BOTTOM'): TextVerticalAlign => {
   switch (align) {
diff --git a/plugin-src/translators/translateVectorPaths.ts b/plugin-src/translators/translateVectorPaths.ts
index f24a411d..7228f8b0 100644
--- a/plugin-src/translators/translateVectorPaths.ts
+++ b/plugin-src/translators/translateVectorPaths.ts
@@ -1,6 +1,6 @@
 import { CurveToCommand, LineToCommand, MoveToCommand, parseSVG } from 'svg-path-parser';
 
-import { Segment } from '@ui/lib/types/path/PathContent';
+import { Segment } from '@ui/lib/types/shapes/pathShape';
 
 export const translateVectorPaths = (
   paths: VectorPaths,
diff --git a/ui-src/converters/createGradientFill.ts b/ui-src/converters/createGradientFill.ts
deleted file mode 100644
index cf0e90cd..00000000
--- a/ui-src/converters/createGradientFill.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Gradient, LINEAR_TYPE, RADIAL_TYPE } from '@ui/lib/types/utils/gradient';
-
-export const createGradientFill = ({ type, ...rest }: Gradient): Gradient | undefined => {
-  switch (type) {
-    case 'linear':
-      return {
-        type: LINEAR_TYPE,
-        ...rest
-      };
-    case 'radial':
-      return {
-        type: RADIAL_TYPE,
-        ...rest
-      };
-  }
-
-  console.error(`Unsupported gradient type: ${String(type)}`);
-};
diff --git a/ui-src/converters/createPenpotArtboard.ts b/ui-src/converters/createPenpotArtboard.ts
index 3614fd42..2d946db6 100644
--- a/ui-src/converters/createPenpotArtboard.ts
+++ b/ui-src/converters/createPenpotArtboard.ts
@@ -1,6 +1,5 @@
 import { PenpotFile } from '@ui/lib/penpot';
-import { FRAME_TYPE } from '@ui/lib/types/frame/frameAttributes';
-import { FrameShape } from '@ui/lib/types/frame/frameShape';
+import { FrameShape } from '@ui/lib/types/shapes/frameShape';
 
 import { createPenpotItem } from '.';
 
@@ -8,10 +7,7 @@ export const createPenpotArtboard = (
   file: PenpotFile,
   { type, children = [], ...rest }: FrameShape
 ) => {
-  file.addArtboard({
-    type: FRAME_TYPE,
-    ...rest
-  });
+  file.addArtboard(rest);
 
   for (const child of children) {
     createPenpotItem(file, child);
diff --git a/ui-src/converters/createPenpotCircle.ts b/ui-src/converters/createPenpotCircle.ts
index 0b607341..7db55656 100644
--- a/ui-src/converters/createPenpotCircle.ts
+++ b/ui-src/converters/createPenpotCircle.ts
@@ -1,6 +1,5 @@
 import { PenpotFile } from '@ui/lib/penpot';
-import { CIRCLE_TYPE } from '@ui/lib/types/circle/circleAttributes';
-import { CircleShape } from '@ui/lib/types/circle/circleShape';
+import { CircleShape } from '@ui/lib/types/shapes/circleShape';
 
 import { translateFillGradients, translateUiBlendMode } from '../translators';
 
@@ -9,7 +8,6 @@ export const createPenpotCircle = (
   { type, fills, blendMode, ...rest }: CircleShape
 ) => {
   file.createCircle({
-    type: CIRCLE_TYPE,
     fills: translateFillGradients(fills),
     blendMode: translateUiBlendMode(blendMode),
     ...rest
diff --git a/ui-src/converters/createPenpotGroup.ts b/ui-src/converters/createPenpotGroup.ts
index 287252a6..3f0c1aa0 100644
--- a/ui-src/converters/createPenpotGroup.ts
+++ b/ui-src/converters/createPenpotGroup.ts
@@ -1,6 +1,5 @@
 import { PenpotFile } from '@ui/lib/penpot';
-import { GROUP_TYPE } from '@ui/lib/types/group/groupAttributes';
-import { GroupShape } from '@ui/lib/types/group/groupShape';
+import { GroupShape } from '@ui/lib/types/shapes/groupShape';
 import { translateUiBlendMode } from '@ui/translators';
 
 import { createPenpotItem } from '.';
@@ -10,7 +9,6 @@ export const createPenpotGroup = (
   { type, blendMode, children = [], ...rest }: GroupShape
 ) => {
   file.addGroup({
-    type: GROUP_TYPE,
     blendMode: translateUiBlendMode(blendMode),
     ...rest
   });
diff --git a/ui-src/converters/createPenpotImage.ts b/ui-src/converters/createPenpotImage.ts
index bb038a6d..5001db05 100644
--- a/ui-src/converters/createPenpotImage.ts
+++ b/ui-src/converters/createPenpotImage.ts
@@ -1,10 +1,6 @@
 import { PenpotFile } from '@ui/lib/penpot';
-import { IMAGE_TYPE } from '@ui/lib/types/image/imageAttributes';
-import { ImageShape } from '@ui/lib/types/image/imageShape';
+import { ImageShape } from '@ui/lib/types/shapes/imageShape';
 
 export const createPenpotImage = (file: PenpotFile, { type, ...rest }: ImageShape) => {
-  file.createImage({
-    type: IMAGE_TYPE,
-    ...rest
-  });
+  file.createImage(rest);
 };
diff --git a/ui-src/converters/createPenpotPath.ts b/ui-src/converters/createPenpotPath.ts
index bf7692c1..eb5b00ed 100644
--- a/ui-src/converters/createPenpotPath.ts
+++ b/ui-src/converters/createPenpotPath.ts
@@ -1,6 +1,5 @@
 import { PenpotFile } from '@ui/lib/penpot';
-import { PATH_TYPE } from '@ui/lib/types/path/pathAttributes';
-import { PathShape } from '@ui/lib/types/path/pathShape';
+import { PathShape } from '@ui/lib/types/shapes/pathShape';
 import {
   translateFillGradients,
   translatePathContent,
@@ -12,7 +11,6 @@ export const createPenpotPath = (
   { type, fills, blendMode, content, ...rest }: PathShape
 ) => {
   file.createPath({
-    type: PATH_TYPE,
     fills: translateFillGradients(fills),
     blendMode: translateUiBlendMode(blendMode),
     content: translatePathContent(content),
diff --git a/ui-src/converters/createPenpotRectangle.ts b/ui-src/converters/createPenpotRectangle.ts
index 7b000e63..630b862a 100644
--- a/ui-src/converters/createPenpotRectangle.ts
+++ b/ui-src/converters/createPenpotRectangle.ts
@@ -1,6 +1,5 @@
 import { PenpotFile } from '@ui/lib/penpot';
-import { RECT_TYPE } from '@ui/lib/types/rect/rectAttributes';
-import { RectShape } from '@ui/lib/types/rect/rectShape';
+import { RectShape } from '@ui/lib/types/shapes/rectShape';
 import { translateFillGradients, translateUiBlendMode } from '@ui/translators';
 
 export const createPenpotRectangle = (
@@ -8,7 +7,6 @@ export const createPenpotRectangle = (
   { type, fills, blendMode, ...rest }: RectShape
 ) => {
   file.createRect({
-    type: RECT_TYPE,
     fills: translateFillGradients(fills),
     blendMode: translateUiBlendMode(blendMode),
     ...rest
diff --git a/ui-src/converters/createPenpotText.ts b/ui-src/converters/createPenpotText.ts
index 3c686df6..8d49d4e8 100644
--- a/ui-src/converters/createPenpotText.ts
+++ b/ui-src/converters/createPenpotText.ts
@@ -1,11 +1,9 @@
 import { PenpotFile } from '@ui/lib/penpot';
-import { TEXT_TYPE } from '@ui/lib/types/text/textAttributes';
-import { TextShape } from '@ui/lib/types/text/textShape';
+import { TextShape } from '@ui/lib/types/shapes/textShape';
 import { translateUiBlendMode } from '@ui/translators';
 
 export const createPenpotText = (file: PenpotFile, { type, blendMode, ...rest }: TextShape) => {
   file.createText({
-    type: TEXT_TYPE,
     blendMode: translateUiBlendMode(blendMode),
     ...rest
   });
diff --git a/ui-src/lib/penpot.d.ts b/ui-src/lib/penpot.d.ts
index 10e91eaf..7670f229 100644
--- a/ui-src/lib/penpot.d.ts
+++ b/ui-src/lib/penpot.d.ts
@@ -1,12 +1,12 @@
-import { BoolShape } from '@ui/lib/types/bool/boolShape';
-import { CircleShape } from '@ui/lib/types/circle/circleShape';
-import { FrameShape } from '@ui/lib/types/frame/frameShape';
-import { GroupShape } from '@ui/lib/types/group/groupShape';
-import { ImageShape } from '@ui/lib/types/image/imageShape';
-import { PathShape } from '@ui/lib/types/path/pathShape';
 import { PenpotPageOptions } from '@ui/lib/types/penpotPage';
-import { RectShape } from '@ui/lib/types/rect/rectShape';
-import { TextShape } from '@ui/lib/types/text/textShape';
+import { BoolShape } from '@ui/lib/types/shapes/boolShape';
+import { CircleShape } from '@ui/lib/types/shapes/circleShape';
+import { FrameShape } from '@ui/lib/types/shapes/frameShape';
+import { GroupShape } from '@ui/lib/types/shapes/groupShape';
+import { ImageShape } from '@ui/lib/types/shapes/imageShape';
+import { PathShape } from '@ui/lib/types/shapes/pathShape';
+import { RectShape } from '@ui/lib/types/shapes/rectShape';
+import { TextShape } from '@ui/lib/types/shapes/textShape';
 
 export interface PenpotFile {
   addPage(name: string, options?: PenpotPageOptions): void;
diff --git a/ui-src/lib/types/bool/boolAttributes.ts b/ui-src/lib/types/bool/boolAttributes.ts
deleted file mode 100644
index d19e7c4b..00000000
--- a/ui-src/lib/types/bool/boolAttributes.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Uuid } from '@ui/lib/types/utils/uuid';
-
-import { BoolContent } from './boolContent';
-
-export const BOOL_TYPE: unique symbol = Symbol.for('bool');
-
-export type BoolAttributes = {
-  type: 'bool' | typeof BOOL_TYPE;
-  shapes?: Uuid[];
-  boolType: string; // @TODO: in Penpot this is of type :keyword. check if it makes sense
-  boolContent: BoolContent[];
-};
diff --git a/ui-src/lib/types/bool/boolContent.d.ts b/ui-src/lib/types/bool/boolContent.d.ts
deleted file mode 100644
index 13ded6c7..00000000
--- a/ui-src/lib/types/bool/boolContent.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Point } from '@ui/lib/types/utils/point';
-
-export type BoolContent = {
-  command: string; // @TODO: in Penpot this is of type :keyword. check if it makes sense
-  relative?: boolean;
-  prevPos?: Point;
-  params?: { [keyword: string]: number }; // @TODO: in Penpot this is of type :keyword. check if it makes sense
-};
diff --git a/ui-src/lib/types/bool/boolShape.d.ts b/ui-src/lib/types/bool/boolShape.d.ts
deleted file mode 100644
index c303196e..00000000
--- a/ui-src/lib/types/bool/boolShape.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { LayoutChildAttributes } from '@ui/lib/types/layout/layoutChildAttributes';
-import { ShapeAttributes } from '@ui/lib/types/shape/shapeAttributes';
-import { ShapeBaseAttributes } from '@ui/lib/types/shape/shapeBaseAttributes';
-
-import { BoolAttributes } from './boolAttributes';
-
-export type BoolShape = ShapeBaseAttributes &
-  ShapeAttributes &
-  BoolAttributes &
-  LayoutChildAttributes;
diff --git a/ui-src/lib/types/circle/circleAttributes.ts b/ui-src/lib/types/circle/circleAttributes.ts
deleted file mode 100644
index 3117968b..00000000
--- a/ui-src/lib/types/circle/circleAttributes.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const CIRCLE_TYPE: unique symbol = Symbol.for('circle');
-
-export type CircleAttributes = {
-  type: 'circle' | typeof CIRCLE_TYPE;
-};
diff --git a/ui-src/lib/types/circle/circleShape.d.ts b/ui-src/lib/types/circle/circleShape.d.ts
deleted file mode 100644
index 70fc92b2..00000000
--- a/ui-src/lib/types/circle/circleShape.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { LayoutChildAttributes } from '@ui/lib/types/layout/layoutChildAttributes';
-import { ShapeAttributes } from '@ui/lib/types/shape/shapeAttributes';
-import { ShapeBaseAttributes } from '@ui/lib/types/shape/shapeBaseAttributes';
-import { ShapeGeomAttributes } from '@ui/lib/types/shape/shapeGeomAttributes';
-
-import { CircleAttributes } from './circleAttributes';
-
-export type CircleShape = ShapeBaseAttributes &
-  ShapeGeomAttributes &
-  ShapeAttributes &
-  CircleAttributes &
-  LayoutChildAttributes;
diff --git a/ui-src/lib/types/frame/frameAttributes.ts b/ui-src/lib/types/frame/frameAttributes.ts
deleted file mode 100644
index a253e0b3..00000000
--- a/ui-src/lib/types/frame/frameAttributes.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Stroke } from '@ui/lib/types/utils/stroke';
-import { Uuid } from '@ui/lib/types/utils/uuid';
-
-import { Fill } from '../utils/fill';
-
-export const FRAME_TYPE: unique symbol = Symbol.for('frame');
-
-export type FrameAttributes = {
-  type: 'frame' | typeof FRAME_TYPE;
-  shapes?: Uuid[];
-  hideFillOnExport?: boolean;
-  showContent?: boolean;
-  hideInViewer?: boolean;
-  fills?: Fill[];
-  strokes?: Stroke[];
-};
diff --git a/ui-src/lib/types/frame/frameShape.d.ts b/ui-src/lib/types/frame/frameShape.d.ts
deleted file mode 100644
index 5c8a0469..00000000
--- a/ui-src/lib/types/frame/frameShape.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { LayoutAttributes } from '@ui/lib/types/layout/layoutAttributes';
-import { LayoutChildAttributes } from '@ui/lib/types/layout/layoutChildAttributes';
-import { ShapeBaseAttributes } from '@ui/lib/types/shape/shapeBaseAttributes';
-import { ShapeGeomAttributes } from '@ui/lib/types/shape/shapeGeomAttributes';
-import { Children } from '@ui/lib/types/utils/children';
-
-import { FrameAttributes } from './frameAttributes';
-
-export type FrameShape = ShapeBaseAttributes &
-  ShapeGeomAttributes &
-  FrameAttributes &
-  LayoutAttributes &
-  LayoutChildAttributes &
-  Children;
diff --git a/ui-src/lib/types/group/groupAttributes.ts b/ui-src/lib/types/group/groupAttributes.ts
deleted file mode 100644
index 0e6e5fea..00000000
--- a/ui-src/lib/types/group/groupAttributes.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Uuid } from '@ui/lib/types/utils/uuid';
-
-export const GROUP_TYPE: unique symbol = Symbol.for('group');
-
-export type GroupAttributes = {
-  type: 'group' | typeof GROUP_TYPE;
-  shapes?: Uuid[];
-};
diff --git a/ui-src/lib/types/group/groupShape.d.ts b/ui-src/lib/types/group/groupShape.d.ts
deleted file mode 100644
index 48fe4a68..00000000
--- a/ui-src/lib/types/group/groupShape.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ShapeAttributes } from '@ui/lib/types/shape/shapeAttributes';
-import { ShapeBaseAttributes } from '@ui/lib/types/shape/shapeBaseAttributes';
-import { ShapeGeomAttributes } from '@ui/lib/types/shape/shapeGeomAttributes';
-import { Children } from '@ui/lib/types/utils/children';
-
-import { GroupAttributes } from './groupAttributes';
-
-export type GroupShape = ShapeBaseAttributes &
-  ShapeGeomAttributes &
-  ShapeAttributes &
-  GroupAttributes &
-  Children;
diff --git a/ui-src/lib/types/image/imageAttributes.ts b/ui-src/lib/types/image/imageAttributes.ts
deleted file mode 100644
index b61b521a..00000000
--- a/ui-src/lib/types/image/imageAttributes.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Uuid } from '@ui/lib/types/utils/uuid';
-
-export const IMAGE_TYPE: unique symbol = Symbol.for('image');
-
-export type ImageAttributes = {
-  type: 'image' | typeof IMAGE_TYPE;
-  dataUri?: string; //@TODO: check how this works because it's not defined in penpot, it's just used in the export
-  metadata: {
-    width: number;
-    height: number;
-    mtype?: string;
-    id?: Uuid;
-  };
-};
diff --git a/ui-src/lib/types/image/imageShape.d.ts b/ui-src/lib/types/image/imageShape.d.ts
deleted file mode 100644
index ded83cc9..00000000
--- a/ui-src/lib/types/image/imageShape.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { LayoutChildAttributes } from '@ui/lib/types/layout/layoutChildAttributes';
-import { ShapeAttributes } from '@ui/lib/types/shape/shapeAttributes';
-import { ShapeBaseAttributes } from '@ui/lib/types/shape/shapeBaseAttributes';
-import { ShapeGeomAttributes } from '@ui/lib/types/shape/shapeGeomAttributes';
-
-import { ImageAttributes } from './imageAttributes';
-
-export type ImageShape = ShapeBaseAttributes &
-  ShapeGeomAttributes &
-  ShapeAttributes &
-  ImageAttributes &
-  LayoutChildAttributes;
diff --git a/ui-src/lib/types/layout/gridCell.d.ts b/ui-src/lib/types/layout/gridCell.d.ts
deleted file mode 100644
index 6b787636..00000000
--- a/ui-src/lib/types/layout/gridCell.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Uuid } from '@ui/lib/types/utils/uuid';
-
-export type GridCell = {
-  id?: Uuid;
-  areaName?: string;
-  row: number;
-  rowSpan: number;
-  column: number;
-  columnSpan: number;
-  position?: 'auto' | 'manual' | 'area';
-  alignSelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch';
-  justifySelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch';
-  shapes?: Uuid[];
-};
diff --git a/ui-src/lib/types/layout/gridTrack.d.ts b/ui-src/lib/types/layout/gridTrack.d.ts
deleted file mode 100644
index a3023e6c..00000000
--- a/ui-src/lib/types/layout/gridTrack.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export type GridTrack = {
-  type: 'percent' | 'flex' | 'auto' | 'fixed';
-  value?: number;
-};
diff --git a/ui-src/lib/types/layout/layoutAttributes.d.ts b/ui-src/lib/types/layout/layoutAttributes.d.ts
deleted file mode 100644
index de546e34..00000000
--- a/ui-src/lib/types/layout/layoutAttributes.d.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { GridCell } from '@ui/lib/types/layout/gridCell';
-import { GridTrack } from '@ui/lib/types/layout/gridTrack';
-import { Uuid } from '@ui/lib/types/utils/uuid';
-
-type JustifyAlignContent =
-  | 'start'
-  | 'center'
-  | 'end'
-  | 'space-between'
-  | 'space-around'
-  | 'space-evenly'
-  | 'stretch';
-
-type JustifyAlignItems = 'start' | 'end' | 'center' | 'stretch';
-
-export type LayoutAttributes = {
-  layout?: 'flex' | 'grid';
-  layoutFlexDir?:
-    | 'row'
-    | 'reverse-row'
-    | 'row-reverse'
-    | 'column'
-    | 'reverse-column'
-    | 'column-reverse';
-  layoutGap?: {
-    rowGap?: number;
-    columnGap?: number;
-  };
-  layoutGapType?: 'simple' | 'multiple';
-  layoutWrapType?: 'wrap' | 'nowrap' | 'no-wrap';
-  layoutPaddingType?: 'simple' | 'multiple';
-  layoutPadding?: {
-    p1?: number;
-    p2?: number;
-    p3?: number;
-    p4?: number;
-  };
-  layoutJustifyContent?: JustifyAlignContent;
-  layoutJustifyItems?: JustifyAlignItems;
-  layoutAlignContent?: JustifyAlignContent;
-  layoutAlignItems?: JustifyAlignItems;
-  layoutGridDir?: 'row' | 'column';
-  layoutGridRows?: GridTrack[];
-  layoutGridColumns?: GridTrack[];
-  layoutGridCells?: { [uuid: Uuid]: GridCell };
-};
diff --git a/ui-src/lib/types/path/pathAttributes.ts b/ui-src/lib/types/path/pathAttributes.ts
deleted file mode 100644
index bf80c331..00000000
--- a/ui-src/lib/types/path/pathAttributes.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { PathContent } from '@ui/lib/types/path/PathContent';
-
-export const PATH_TYPE: unique symbol = Symbol.for('path');
-
-export type PathAttributes = {
-  type: 'path' | typeof PATH_TYPE;
-  content: PathContent;
-};
diff --git a/ui-src/lib/types/path/pathShape.d.ts b/ui-src/lib/types/path/pathShape.d.ts
deleted file mode 100644
index 1ccb6744..00000000
--- a/ui-src/lib/types/path/pathShape.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { LayoutChildAttributes } from '@ui/lib/types/layout/layoutChildAttributes';
-import { PathAttributes } from '@ui/lib/types/path/pathAttributes';
-import { ShapeAttributes } from '@ui/lib/types/shape/shapeAttributes';
-import { ShapeBaseAttributes } from '@ui/lib/types/shape/shapeBaseAttributes';
-
-export type PathShape = ShapeBaseAttributes &
-  ShapeAttributes &
-  PathAttributes &
-  LayoutChildAttributes;
diff --git a/ui-src/lib/types/penpotDocument.d.ts b/ui-src/lib/types/penpotDocument.ts
similarity index 100%
rename from ui-src/lib/types/penpotDocument.d.ts
rename to ui-src/lib/types/penpotDocument.ts
diff --git a/ui-src/lib/types/penpotNode.d.ts b/ui-src/lib/types/penpotNode.d.ts
deleted file mode 100644
index 1264bbb1..00000000
--- a/ui-src/lib/types/penpotNode.d.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { CircleShape } from '@ui/lib/types/circle/circleShape';
-import { FrameShape } from '@ui/lib/types/frame/frameShape';
-import { GroupShape } from '@ui/lib/types/group/groupShape';
-import { ImageShape } from '@ui/lib/types/image/imageShape';
-import { PathShape } from '@ui/lib/types/path/pathShape';
-import { RectShape } from '@ui/lib/types/rect/rectShape';
-import { TextShape } from '@ui/lib/types/text/textShape';
-
-export type PenpotNode =
-  | FrameShape
-  | GroupShape
-  | PathShape
-  | RectShape
-  | CircleShape
-  | TextShape
-  | ImageShape;
diff --git a/ui-src/lib/types/penpotNode.ts b/ui-src/lib/types/penpotNode.ts
new file mode 100644
index 00000000..727015cb
--- /dev/null
+++ b/ui-src/lib/types/penpotNode.ts
@@ -0,0 +1,16 @@
+import { CircleShape } from '@ui/lib/types/shapes/circleShape';
+import { FrameShape } from '@ui/lib/types/shapes/frameShape';
+import { GroupShape } from '@ui/lib/types/shapes/groupShape';
+import { ImageShape } from '@ui/lib/types/shapes/imageShape';
+import { PathShape } from '@ui/lib/types/shapes/pathShape';
+import { RectShape } from '@ui/lib/types/shapes/rectShape';
+import { TextShape } from '@ui/lib/types/shapes/textShape';
+
+export type PenpotNode =
+  | FrameShape
+  | GroupShape
+  | PathShape
+  | RectShape
+  | CircleShape
+  | TextShape
+  | ImageShape;
diff --git a/ui-src/lib/types/penpotPage.d.ts b/ui-src/lib/types/penpotPage.ts
similarity index 100%
rename from ui-src/lib/types/penpotPage.d.ts
rename to ui-src/lib/types/penpotPage.ts
diff --git a/ui-src/lib/types/rect/rectAttributes.ts b/ui-src/lib/types/rect/rectAttributes.ts
deleted file mode 100644
index 7f914517..00000000
--- a/ui-src/lib/types/rect/rectAttributes.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const RECT_TYPE: unique symbol = Symbol.for('rect');
-
-export type RectAttributes = {
-  type: 'rect' | typeof RECT_TYPE;
-};
diff --git a/ui-src/lib/types/rect/rectShape.d.ts b/ui-src/lib/types/rect/rectShape.d.ts
deleted file mode 100644
index e5c63192..00000000
--- a/ui-src/lib/types/rect/rectShape.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { LayoutChildAttributes } from '@ui/lib/types/layout/layoutChildAttributes';
-import { ShapeAttributes } from '@ui/lib/types/shape/shapeAttributes';
-import { ShapeBaseAttributes } from '@ui/lib/types/shape/shapeBaseAttributes';
-import { ShapeGeomAttributes } from '@ui/lib/types/shape/shapeGeomAttributes';
-
-import { RectAttributes } from './rectAttributes';
-
-export type RectShape = ShapeBaseAttributes &
-  ShapeGeomAttributes &
-  ShapeAttributes &
-  RectAttributes &
-  LayoutChildAttributes;
diff --git a/ui-src/lib/types/shape/shapeBaseAttributes.ts b/ui-src/lib/types/shape/shapeBaseAttributes.ts
deleted file mode 100644
index e8a72c1a..00000000
--- a/ui-src/lib/types/shape/shapeBaseAttributes.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { PATH_TYPE } from '@ui/lib/types/path/pathAttributes';
-import { Matrix } from '@ui/lib/types/utils/matrix';
-import { Point } from '@ui/lib/types/utils/point';
-import { Selrect } from '@ui/lib/types/utils/selrect';
-import { Uuid } from '@ui/lib/types/utils/uuid';
-
-import { BOOL_TYPE } from '../bool/boolAttributes';
-import { CIRCLE_TYPE } from '../circle/circleAttributes';
-import { FRAME_TYPE } from '../frame/frameAttributes';
-import { GROUP_TYPE } from '../group/groupAttributes';
-import { IMAGE_TYPE } from '../image/imageAttributes';
-import { RECT_TYPE } from '../rect/rectAttributes';
-import { TEXT_TYPE } from '../text/textAttributes';
-
-// @TODO: Move to its own file once we support all the shapes
-export const SVG_RAW_TYPE: unique symbol = Symbol.for('svg-raw');
-
-export type ShapeBaseAttributes = {
-  id?: Uuid;
-  name?: string;
-  type:
-    | 'frame'
-    | 'group'
-    | 'bool'
-    | 'rect'
-    | 'path'
-    | 'text'
-    | 'circle'
-    | 'svg-raw'
-    | 'image'
-    | typeof FRAME_TYPE
-    | typeof GROUP_TYPE
-    | typeof BOOL_TYPE
-    | typeof RECT_TYPE
-    | typeof PATH_TYPE
-    | typeof TEXT_TYPE
-    | typeof CIRCLE_TYPE
-    | typeof SVG_RAW_TYPE
-    | typeof IMAGE_TYPE;
-  selrect?: Selrect;
-  points?: Point[];
-  transform?: Matrix;
-  transformInverse?: Matrix;
-  parentId?: Uuid;
-  frameId?: Uuid;
-  rotation?: number;
-};
diff --git a/ui-src/lib/types/shape/shapeGeomAttributes.d.ts b/ui-src/lib/types/shape/shapeGeomAttributes.d.ts
deleted file mode 100644
index dba4ff04..00000000
--- a/ui-src/lib/types/shape/shapeGeomAttributes.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export type ShapeGeomAttributes = {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-};
diff --git a/ui-src/lib/types/shapes/boolShape.ts b/ui-src/lib/types/shapes/boolShape.ts
new file mode 100644
index 00000000..0f79aa46
--- /dev/null
+++ b/ui-src/lib/types/shapes/boolShape.ts
@@ -0,0 +1,23 @@
+import { LayoutChildAttributes } from '@ui/lib/types/shapes/layout';
+import { ShapeAttributes, ShapeBaseAttributes } from '@ui/lib/types/shapes/shape';
+import { Point } from '@ui/lib/types/utils/point';
+import { Uuid } from '@ui/lib/types/utils/uuid';
+
+export type BoolShape = ShapeBaseAttributes &
+  ShapeAttributes &
+  BoolAttributes &
+  LayoutChildAttributes;
+
+type BoolAttributes = {
+  type?: 'bool';
+  shapes?: Uuid[];
+  boolType: string; // @TODO: in Penpot this is of type :keyword. check if it makes sense
+  boolContent: BoolContent[];
+};
+
+type BoolContent = {
+  command: string; // @TODO: in Penpot this is of type :keyword. check if it makes sense
+  relative?: boolean;
+  prevPos?: Point;
+  params?: { [keyword: string]: number }; // @TODO: in Penpot this is of type :keyword. check if it makes sense
+};
diff --git a/ui-src/lib/types/shapes/circleShape.ts b/ui-src/lib/types/shapes/circleShape.ts
new file mode 100644
index 00000000..a26d42ee
--- /dev/null
+++ b/ui-src/lib/types/shapes/circleShape.ts
@@ -0,0 +1,16 @@
+import { LayoutChildAttributes } from '@ui/lib/types/shapes/layout';
+import {
+  ShapeAttributes,
+  ShapeBaseAttributes,
+  ShapeGeomAttributes
+} from '@ui/lib/types/shapes/shape';
+
+export type CircleShape = ShapeBaseAttributes &
+  ShapeGeomAttributes &
+  ShapeAttributes &
+  CircleAttributes &
+  LayoutChildAttributes;
+
+type CircleAttributes = {
+  type?: 'circle';
+};
diff --git a/ui-src/lib/types/shapes/frameShape.ts b/ui-src/lib/types/shapes/frameShape.ts
new file mode 100644
index 00000000..1ff82bb2
--- /dev/null
+++ b/ui-src/lib/types/shapes/frameShape.ts
@@ -0,0 +1,23 @@
+import { LayoutAttributes, LayoutChildAttributes } from '@ui/lib/types/shapes/layout';
+import { ShapeBaseAttributes, ShapeGeomAttributes } from '@ui/lib/types/shapes/shape';
+import { Children } from '@ui/lib/types/utils/children';
+import { Fill } from '@ui/lib/types/utils/fill';
+import { Stroke } from '@ui/lib/types/utils/stroke';
+import { Uuid } from '@ui/lib/types/utils/uuid';
+
+export type FrameShape = ShapeBaseAttributes &
+  ShapeGeomAttributes &
+  FrameAttributes &
+  LayoutAttributes &
+  LayoutChildAttributes &
+  Children;
+
+type FrameAttributes = {
+  type?: 'frame';
+  shapes?: Uuid[];
+  hideFillOnExport?: boolean;
+  showContent?: boolean;
+  hideInViewer?: boolean;
+  fills?: Fill[];
+  strokes?: Stroke[];
+};
diff --git a/ui-src/lib/types/shapes/groupShape.ts b/ui-src/lib/types/shapes/groupShape.ts
new file mode 100644
index 00000000..834a9d46
--- /dev/null
+++ b/ui-src/lib/types/shapes/groupShape.ts
@@ -0,0 +1,18 @@
+import {
+  ShapeAttributes,
+  ShapeBaseAttributes,
+  ShapeGeomAttributes
+} from '@ui/lib/types/shapes/shape';
+import { Children } from '@ui/lib/types/utils/children';
+import { Uuid } from '@ui/lib/types/utils/uuid';
+
+export type GroupShape = ShapeBaseAttributes &
+  ShapeGeomAttributes &
+  ShapeAttributes &
+  GroupAttributes &
+  Children;
+
+type GroupAttributes = {
+  type?: 'group';
+  shapes?: Uuid[];
+};
diff --git a/ui-src/lib/types/shapes/imageShape.ts b/ui-src/lib/types/shapes/imageShape.ts
new file mode 100644
index 00000000..56212c9a
--- /dev/null
+++ b/ui-src/lib/types/shapes/imageShape.ts
@@ -0,0 +1,24 @@
+import { LayoutChildAttributes } from '@ui/lib/types/shapes/layout';
+import {
+  ShapeAttributes,
+  ShapeBaseAttributes,
+  ShapeGeomAttributes
+} from '@ui/lib/types/shapes/shape';
+import { Uuid } from '@ui/lib/types/utils/uuid';
+
+export type ImageShape = ShapeBaseAttributes &
+  ShapeGeomAttributes &
+  ShapeAttributes &
+  ImageAttributes &
+  LayoutChildAttributes;
+
+type ImageAttributes = {
+  type?: 'image';
+  dataUri?: string; //@TODO: check how this works because it's not defined in penpot, it's just used in the export
+  metadata: {
+    width: number;
+    height: number;
+    mtype?: string;
+    id?: Uuid;
+  };
+};
diff --git a/ui-src/lib/types/layout/layoutChildAttributes.ts b/ui-src/lib/types/shapes/layout.ts
similarity index 55%
rename from ui-src/lib/types/layout/layoutChildAttributes.ts
rename to ui-src/lib/types/shapes/layout.ts
index f298f0ca..c84408fd 100644
--- a/ui-src/lib/types/layout/layoutChildAttributes.ts
+++ b/ui-src/lib/types/shapes/layout.ts
@@ -1,3 +1,5 @@
+import { Uuid } from '@ui/lib/types/utils/uuid';
+
 export const ITEM_MARGIN_SIMPLE_TYPE: unique symbol = Symbol.for('simple');
 export const ITEM_MARGIN_MULTIPLE_TYPE: unique symbol = Symbol.for('multiple');
 export const ITEM_HSIZING_FILL: unique symbol = Symbol.for('fill');
@@ -53,3 +55,64 @@ export type LayoutChildAttributes = {
   layoutItemAbsolute?: boolean;
   layoutItemZIndex?: number;
 };
+
+type JustifyAlignContent =
+  | 'start'
+  | 'center'
+  | 'end'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly'
+  | 'stretch';
+
+type JustifyAlignItems = 'start' | 'end' | 'center' | 'stretch';
+
+export type LayoutAttributes = {
+  layout?: 'flex' | 'grid';
+  layoutFlexDir?:
+    | 'row'
+    | 'reverse-row'
+    | 'row-reverse'
+    | 'column'
+    | 'reverse-column'
+    | 'column-reverse';
+  layoutGap?: {
+    rowGap?: number;
+    columnGap?: number;
+  };
+  layoutGapType?: 'simple' | 'multiple';
+  layoutWrapType?: 'wrap' | 'nowrap' | 'no-wrap';
+  layoutPaddingType?: 'simple' | 'multiple';
+  layoutPadding?: {
+    p1?: number;
+    p2?: number;
+    p3?: number;
+    p4?: number;
+  };
+  layoutJustifyContent?: JustifyAlignContent;
+  layoutJustifyItems?: JustifyAlignItems;
+  layoutAlignContent?: JustifyAlignContent;
+  layoutAlignItems?: JustifyAlignItems;
+  layoutGridDir?: 'row' | 'column';
+  layoutGridRows?: GridTrack[];
+  layoutGridColumns?: GridTrack[];
+  layoutGridCells?: { [uuid: Uuid]: GridCell };
+};
+
+type GridTrack = {
+  type: 'percent' | 'flex' | 'auto' | 'fixed';
+  value?: number;
+};
+
+type GridCell = {
+  id?: Uuid;
+  areaName?: string;
+  row: number;
+  rowSpan: number;
+  column: number;
+  columnSpan: number;
+  position?: 'auto' | 'manual' | 'area';
+  alignSelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch';
+  justifySelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch';
+  shapes?: Uuid[];
+};
diff --git a/ui-src/lib/types/path/PathContent.ts b/ui-src/lib/types/shapes/pathShape.ts
similarity index 75%
rename from ui-src/lib/types/path/PathContent.ts
rename to ui-src/lib/types/shapes/pathShape.ts
index 3aa06e84..d383a32f 100644
--- a/ui-src/lib/types/path/PathContent.ts
+++ b/ui-src/lib/types/shapes/pathShape.ts
@@ -1,3 +1,16 @@
+import { LayoutChildAttributes } from '@ui/lib/types/shapes/layout';
+import { ShapeAttributes, ShapeBaseAttributes } from '@ui/lib/types/shapes/shape';
+
+export type PathShape = ShapeBaseAttributes &
+  ShapeAttributes &
+  PathAttributes &
+  LayoutChildAttributes;
+
+export type PathAttributes = {
+  type?: 'path';
+  content: PathContent;
+};
+
 export const VECTOR_LINE_TO: unique symbol = Symbol.for('line-to');
 export const VECTOR_CLOSE_PATH: unique symbol = Symbol.for('close-path');
 export const VECTOR_MOVE_TO: unique symbol = Symbol.for('move-to');
diff --git a/ui-src/lib/types/shapes/rectShape.ts b/ui-src/lib/types/shapes/rectShape.ts
new file mode 100644
index 00000000..f79c65d3
--- /dev/null
+++ b/ui-src/lib/types/shapes/rectShape.ts
@@ -0,0 +1,16 @@
+import { LayoutChildAttributes } from '@ui/lib/types/shapes/layout';
+import {
+  ShapeAttributes,
+  ShapeBaseAttributes,
+  ShapeGeomAttributes
+} from '@ui/lib/types/shapes/shape';
+
+export type RectShape = ShapeBaseAttributes &
+  ShapeGeomAttributes &
+  ShapeAttributes &
+  RectAttributes &
+  LayoutChildAttributes;
+
+type RectAttributes = {
+  type?: 'rect';
+};
diff --git a/ui-src/lib/types/shape/shapeAttributes.d.ts b/ui-src/lib/types/shapes/shape.ts
similarity index 74%
rename from ui-src/lib/types/shape/shapeAttributes.d.ts
rename to ui-src/lib/types/shapes/shape.ts
index 6423bf29..5cedff82 100644
--- a/ui-src/lib/types/shape/shapeAttributes.d.ts
+++ b/ui-src/lib/types/shapes/shape.ts
@@ -4,10 +4,25 @@ import { Export } from '@ui/lib/types/utils/export';
 import { Fill } from '@ui/lib/types/utils/fill';
 import { Grid } from '@ui/lib/types/utils/grid';
 import { Interaction } from '@ui/lib/types/utils/interaction';
+import { Matrix } from '@ui/lib/types/utils/matrix';
 import { Point } from '@ui/lib/types/utils/point';
 import { Selrect } from '@ui/lib/types/utils/selrect';
 import { Shadow } from '@ui/lib/types/utils/shadow';
 import { Stroke } from '@ui/lib/types/utils/stroke';
+import { Uuid } from '@ui/lib/types/utils/uuid';
+
+export type ShapeBaseAttributes = {
+  id?: Uuid;
+  name?: string;
+  type?: 'frame' | 'group' | 'bool' | 'rect' | 'path' | 'text' | 'circle' | 'svg-raw' | 'image';
+  selrect?: Selrect;
+  points?: Point[];
+  transform?: Matrix;
+  transformInverse?: Matrix;
+  parentId?: Uuid;
+  frameId?: Uuid;
+  rotation?: number;
+};
 
 export type ShapeAttributes = {
   name?: string;
@@ -48,4 +63,11 @@ export type ShapeAttributes = {
   growType?: GrowType;
 };
 
+export type ShapeGeomAttributes = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
 export type GrowType = 'auto-width' | 'auto-height' | 'fixed';
diff --git a/ui-src/lib/types/text/textContent.d.ts b/ui-src/lib/types/shapes/textShape.ts
similarity index 68%
rename from ui-src/lib/types/text/textContent.d.ts
rename to ui-src/lib/types/shapes/textShape.ts
index 79cd25df..af455642 100644
--- a/ui-src/lib/types/text/textContent.d.ts
+++ b/ui-src/lib/types/shapes/textShape.ts
@@ -1,6 +1,23 @@
+import { LayoutChildAttributes } from '@ui/lib/types/shapes/layout';
+import {
+  ShapeAttributes,
+  ShapeBaseAttributes,
+  ShapeGeomAttributes
+} from '@ui/lib/types/shapes/shape';
 import { Fill } from '@ui/lib/types/utils/fill';
 
-export type TextContent = {
+export type TextShape = ShapeBaseAttributes &
+  ShapeGeomAttributes &
+  ShapeAttributes &
+  TextAttributes &
+  LayoutChildAttributes;
+
+type TextAttributes = {
+  type?: 'text';
+  content?: TextContent;
+};
+
+type TextContent = {
   type: 'root';
   key?: string;
   verticalAlign?: TextVerticalAlign;
@@ -23,12 +40,12 @@ type Paragraph = {
   children: TextNode[];
 } & TextStyle;
 
-type TextNode = {
+export type TextNode = {
   text: string;
   key?: string;
 } & TextStyle;
 
-type TextStyle = FontId & {
+export type TextStyle = FontId & {
   fontFamily?: string;
   fontSize?: string;
   fontStyle?: TextFontStyle;
diff --git a/ui-src/lib/types/text/textAttributes.ts b/ui-src/lib/types/text/textAttributes.ts
deleted file mode 100644
index 411d742d..00000000
--- a/ui-src/lib/types/text/textAttributes.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { TextContent } from './textContent';
-
-export const TEXT_TYPE: unique symbol = Symbol.for('text');
-
-export type TextAttributes = {
-  type: 'text' | typeof TEXT_TYPE;
-  content?: TextContent;
-};
diff --git a/ui-src/lib/types/text/textShape.d.ts b/ui-src/lib/types/text/textShape.d.ts
deleted file mode 100644
index 89ce8293..00000000
--- a/ui-src/lib/types/text/textShape.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { LayoutChildAttributes } from '@ui/lib/types/layout/layoutChildAttributes';
-import { ShapeAttributes } from '@ui/lib/types/shape/shapeAttributes';
-import { ShapeBaseAttributes } from '@ui/lib/types/shape/shapeBaseAttributes';
-import { ShapeGeomAttributes } from '@ui/lib/types/shape/shapeGeomAttributes';
-
-import { TextAttributes } from './textAttributes';
-
-export type TextShape = ShapeBaseAttributes &
-  ShapeGeomAttributes &
-  ShapeAttributes &
-  TextAttributes &
-  LayoutChildAttributes;
diff --git a/ui-src/lib/types/utils/animation.d.ts b/ui-src/lib/types/utils/animation.ts
similarity index 100%
rename from ui-src/lib/types/utils/animation.d.ts
rename to ui-src/lib/types/utils/animation.ts
diff --git a/ui-src/lib/types/utils/blur.d.ts b/ui-src/lib/types/utils/blur.ts
similarity index 100%
rename from ui-src/lib/types/utils/blur.d.ts
rename to ui-src/lib/types/utils/blur.ts
diff --git a/ui-src/lib/types/utils/children.d.ts b/ui-src/lib/types/utils/children.ts
similarity index 100%
rename from ui-src/lib/types/utils/children.d.ts
rename to ui-src/lib/types/utils/children.ts
diff --git a/ui-src/lib/types/utils/color.d.ts b/ui-src/lib/types/utils/color.ts
similarity index 62%
rename from ui-src/lib/types/utils/color.d.ts
rename to ui-src/lib/types/utils/color.ts
index 1a546b38..9b3bd50f 100644
--- a/ui-src/lib/types/utils/color.d.ts
+++ b/ui-src/lib/types/utils/color.ts
@@ -1,6 +1,6 @@
-import { Gradient } from '@ui/lib/types/utils/gradient';
-import { ImageColor } from '@ui/lib/types/utils/imageColor';
-import { Uuid } from '@ui/lib/types/utils/uuid';
+import { Gradient } from './gradient';
+import { ImageColor } from './imageColor';
+import { Uuid } from './uuid';
 
 export type Color = {
   id?: Uuid;
diff --git a/ui-src/lib/types/utils/export.d.ts b/ui-src/lib/types/utils/export.ts
similarity index 100%
rename from ui-src/lib/types/utils/export.d.ts
rename to ui-src/lib/types/utils/export.ts
diff --git a/ui-src/lib/types/utils/fill.d.ts b/ui-src/lib/types/utils/fill.ts
similarity index 75%
rename from ui-src/lib/types/utils/fill.d.ts
rename to ui-src/lib/types/utils/fill.ts
index bda7a37f..3047e46d 100644
--- a/ui-src/lib/types/utils/fill.d.ts
+++ b/ui-src/lib/types/utils/fill.ts
@@ -1,9 +1,8 @@
-import { ImageColor } from '@ui/lib/types/utils/imageColor';
-
 import { Gradient } from './gradient';
+import { ImageColor } from './imageColor';
 import { Uuid } from './uuid';
 
-type Fill = {
+export type Fill = {
   fillColor?: string;
   fillOpacity?: number;
   fillColorGradient?: Gradient;
diff --git a/ui-src/lib/types/utils/grid.d.ts b/ui-src/lib/types/utils/grid.ts
similarity index 100%
rename from ui-src/lib/types/utils/grid.d.ts
rename to ui-src/lib/types/utils/grid.ts
diff --git a/ui-src/lib/types/utils/imageColor.d.ts b/ui-src/lib/types/utils/imageColor.ts
similarity index 80%
rename from ui-src/lib/types/utils/imageColor.d.ts
rename to ui-src/lib/types/utils/imageColor.ts
index 15245f29..b8eda4f2 100644
--- a/ui-src/lib/types/utils/imageColor.d.ts
+++ b/ui-src/lib/types/utils/imageColor.ts
@@ -1,4 +1,4 @@
-import { Uuid } from '@ui/lib/types/utils/uuid';
+import { Uuid } from './uuid';
 
 //@TODO: check how this exports the image through a dataUri
 export type ImageColor = {
diff --git a/ui-src/lib/types/utils/interaction.d.ts b/ui-src/lib/types/utils/interaction.ts
similarity index 96%
rename from ui-src/lib/types/utils/interaction.d.ts
rename to ui-src/lib/types/utils/interaction.ts
index 1b460b83..232d2970 100644
--- a/ui-src/lib/types/utils/interaction.d.ts
+++ b/ui-src/lib/types/utils/interaction.ts
@@ -1,6 +1,5 @@
-import { Point } from '@ui/lib/types/utils/point';
-
 import { Animation } from './animation';
+import { Point } from './point';
 import { Uuid } from './uuid';
 
 export type Interaction =
diff --git a/ui-src/lib/types/utils/matrix.d.ts b/ui-src/lib/types/utils/matrix.ts
similarity index 100%
rename from ui-src/lib/types/utils/matrix.d.ts
rename to ui-src/lib/types/utils/matrix.ts
diff --git a/ui-src/lib/types/utils/point.d.ts b/ui-src/lib/types/utils/point.ts
similarity index 100%
rename from ui-src/lib/types/utils/point.d.ts
rename to ui-src/lib/types/utils/point.ts
diff --git a/ui-src/lib/types/utils/selrect.d.ts b/ui-src/lib/types/utils/selrect.ts
similarity index 100%
rename from ui-src/lib/types/utils/selrect.d.ts
rename to ui-src/lib/types/utils/selrect.ts
diff --git a/ui-src/lib/types/utils/shadow.d.ts b/ui-src/lib/types/utils/shadow.ts
similarity index 83%
rename from ui-src/lib/types/utils/shadow.d.ts
rename to ui-src/lib/types/utils/shadow.ts
index b7f53337..2857d607 100644
--- a/ui-src/lib/types/utils/shadow.d.ts
+++ b/ui-src/lib/types/utils/shadow.ts
@@ -1,5 +1,4 @@
-import { Color } from '@ui/lib/types/utils/color';
-
+import { Color } from './color';
 import { Uuid } from './uuid';
 
 export type ShadowStyle = 'drop-shadow' | 'inner-shadow';
diff --git a/ui-src/lib/types/utils/stroke.d.ts b/ui-src/lib/types/utils/stroke.ts
similarity index 73%
rename from ui-src/lib/types/utils/stroke.d.ts
rename to ui-src/lib/types/utils/stroke.ts
index 7ff537b7..0bcf4b63 100644
--- a/ui-src/lib/types/utils/stroke.d.ts
+++ b/ui-src/lib/types/utils/stroke.ts
@@ -1,6 +1,6 @@
-import { Gradient } from '@ui/lib/types/utils/gradient';
-import { ImageColor } from '@ui/lib/types/utils/imageColor';
-import { Uuid } from '@ui/lib/types/utils/uuid';
+import { Gradient } from './gradient';
+import { ImageColor } from './imageColor';
+import { Uuid } from './uuid';
 
 export type Stroke = {
   strokeColor?: string;
@@ -26,4 +26,4 @@ type StrokeCapMarker =
   | 'circle-marker'
   | 'diamond-marker';
 
-type StrokeCaps = StrokeCapLine | StrokeCapMarker;
+export type StrokeCaps = StrokeCapLine | StrokeCapMarker;
diff --git a/ui-src/lib/types/utils/uuid.d.ts b/ui-src/lib/types/utils/uuid.ts
similarity index 100%
rename from ui-src/lib/types/utils/uuid.d.ts
rename to ui-src/lib/types/utils/uuid.ts
diff --git a/ui-src/translators/translateFillGradients.ts b/ui-src/translators/translateFillGradients.ts
index 66388443..50e580ac 100644
--- a/ui-src/translators/translateFillGradients.ts
+++ b/ui-src/translators/translateFillGradients.ts
@@ -1,13 +1,31 @@
-import { createGradientFill } from '@ui/converters/createGradientFill';
 import { Fill } from '@ui/lib/types/utils/fill';
+import { Gradient, LINEAR_TYPE, RADIAL_TYPE } from '@ui/lib/types/utils/gradient';
 
 export const translateFillGradients = (fills?: Fill[]): Fill[] | undefined => {
   if (!fills) return fills;
+
   return fills.map(fill => {
     if (fill.fillColorGradient) {
-      fill.fillColorGradient = createGradientFill(fill.fillColorGradient);
+      fill.fillColorGradient = translateFillGradient(fill.fillColorGradient);
     }
 
     return fill;
   });
 };
+
+const translateFillGradient = ({ type, ...rest }: Gradient): Gradient | undefined => {
+  switch (type) {
+    case 'linear':
+      return {
+        type: LINEAR_TYPE,
+        ...rest
+      };
+    case 'radial':
+      return {
+        type: RADIAL_TYPE,
+        ...rest
+      };
+  }
+
+  console.error(`Unsupported gradient type: ${String(type)}`);
+};
diff --git a/ui-src/translators/translatePathContent.ts b/ui-src/translators/translatePathContent.ts
index 0d0142d7..be9511a6 100644
--- a/ui-src/translators/translatePathContent.ts
+++ b/ui-src/translators/translatePathContent.ts
@@ -6,7 +6,7 @@ import {
   VECTOR_CURVE_TO,
   VECTOR_LINE_TO,
   VECTOR_MOVE_TO
-} from '@ui/lib/types/path/PathContent';
+} from '@ui/lib/types/shapes/pathShape';
 
 export const translatePathContent = (content: PathContent): PathContent =>
   content