diff --git a/plugin-src/transformers/transformInstanceNode.ts b/plugin-src/transformers/transformInstanceNode.ts
index 8a134dd7..8bfd77a2 100644
--- a/plugin-src/transformers/transformInstanceNode.ts
+++ b/plugin-src/transformers/transformInstanceNode.ts
@@ -1,20 +1,24 @@
-import { transformDimensionAndPosition } from '@plugin/transformers/partials';
+import { transformChildren, transformDimensionAndPosition } from '@plugin/transformers/partials';
 
-import { InstanceShape } from '@ui/lib/types/shapes/instanceShape';
+import { ComponentInstance } from '@ui/types';
 
 export const transformInstanceNode = async (
   node: InstanceNode,
   baseX: number,
   baseY: number
-): Promise<InstanceShape> => {
+): Promise<ComponentInstance | undefined> => {
   const mainComponent = await node.getMainComponentAsync();
 
-  console.log(node);
-  console.log(mainComponent);
+  // If the component does not have parent it means that it comes from an external
+  // design system, for now we do not support that kind of instances.
+  if (!mainComponent || mainComponent.parent === null) {
+    return;
+  }
 
   return {
     type: 'instance',
-    componentId: '07e70c15-0f38-8bfc-ba65-f0ec85dc2812',
-    ...transformDimensionAndPosition(node, baseX, baseY)
+    figmaId: mainComponent.id,
+    ...transformDimensionAndPosition(node, baseX, baseY),
+    ...(await transformChildren(node, baseX + node.x, baseY + node.y))
   };
 };
diff --git a/plugin-src/transformers/transformPageNode.ts b/plugin-src/transformers/transformPageNode.ts
index 5ed6ffda..5178b422 100644
--- a/plugin-src/transformers/transformPageNode.ts
+++ b/plugin-src/transformers/transformPageNode.ts
@@ -4,6 +4,7 @@ import { translatePageFill } from '@plugin/translators/fills';
 import { PenpotPage } from '@ui/lib/types/penpotPage';
 
 export const transformPageNode = async (node: PageNode): Promise<PenpotPage> => {
+  console.log(node);
   return {
     name: node.name,
     options: {
diff --git a/plugin-src/transformers/transformSceneNode.ts b/plugin-src/transformers/transformSceneNode.ts
index 3231636f..d73f2310 100644
--- a/plugin-src/transformers/transformSceneNode.ts
+++ b/plugin-src/transformers/transformSceneNode.ts
@@ -18,6 +18,8 @@ export const transformSceneNode = async (
   baseX: number = 0,
   baseY: number = 0
 ): Promise<PenpotNode | undefined> => {
+  console.log(node);
+
   switch (node.type) {
     case 'RECTANGLE':
       return await transformRectangleNode(node, baseX, baseY);
diff --git a/ui-src/lib/types/penpotFile.ts b/ui-src/lib/types/penpotFile.ts
index 6fabc5f5..0034551f 100644
--- a/ui-src/lib/types/penpotFile.ts
+++ b/ui-src/lib/types/penpotFile.ts
@@ -4,7 +4,6 @@ import { CircleShape } from '@ui/lib/types/shapes/circleShape';
 import { ComponentShape } from '@ui/lib/types/shapes/componentShape';
 import { FrameShape } from '@ui/lib/types/shapes/frameShape';
 import { GroupShape } from '@ui/lib/types/shapes/groupShape';
-import { InstanceShape } from '@ui/lib/types/shapes/instanceShape';
 import { PathShape } from '@ui/lib/types/shapes/pathShape';
 import { RectShape } from '@ui/lib/types/shapes/rectShape';
 import { TextShape } from '@ui/lib/types/shapes/textShape';
@@ -30,7 +29,7 @@ export interface PenpotFile {
   // deleteLibraryTypography(typography: any): void;
   startComponent(component: ComponentShape): Uuid;
   finishComponent(): void;
-  createComponentInstance(instance: InstanceShape): Uuid;
+  // createComponentInstance(instance: any): Uuid;
   // lookupShape(shapeId: string): PenpotNode;
   // updateObject(id: string, object: any): void;
   // deleteObject(id: string): void;
diff --git a/ui-src/lib/types/shapes/instanceShape.ts b/ui-src/lib/types/shapes/instanceShape.ts
deleted file mode 100644
index 0647830b..00000000
--- a/ui-src/lib/types/shapes/instanceShape.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Uuid } from '@ui/lib/types/utils/uuid';
-
-export type InstanceShape = InstanceAttributes;
-
-type InstanceAttributes = {
-  type?: 'instance';
-  componentId: Uuid;
-};
diff --git a/ui-src/parser/creators/createComponentInstance.ts b/ui-src/parser/creators/createComponentInstance.ts
index 7377565f..6fed9a4c 100644
--- a/ui-src/parser/creators/createComponentInstance.ts
+++ b/ui-src/parser/creators/createComponentInstance.ts
@@ -1,6 +1,24 @@
 import { PenpotFile } from '@ui/lib/types/penpotFile';
-import { InstanceShape } from '@ui/lib/types/shapes/instanceShape';
+import { uiComponents } from '@ui/parser/libraries';
+import { ComponentInstance } from '@ui/types';
 
-export const createComponentInstance = (file: PenpotFile, { type, ...rest }: InstanceShape) => {
-  console.log(file.createComponentInstance({ ...rest }));
+import { createArtboard } from '.';
+
+export const createComponentInstance = (
+  file: PenpotFile,
+  { type, figmaId, ...rest }: ComponentInstance
+) => {
+  const uiComponent = uiComponents.get(figmaId);
+  if (!uiComponent) {
+    return;
+  }
+
+  createArtboard(file, {
+    ...rest,
+    componentFile: file.getId(),
+    componentId: uiComponent.componentId,
+    componentRoot: true,
+    mainInstance: false,
+    type: 'frame'
+  });
 };
diff --git a/ui-src/types/component.ts b/ui-src/types/component.ts
new file mode 100644
index 00000000..c2b45e7b
--- /dev/null
+++ b/ui-src/types/component.ts
@@ -0,0 +1,13 @@
+import { ShapeGeomAttributes } from '@ui/lib/types/shapes/shape';
+import { Children } from '@ui/lib/types/utils/children';
+
+export type ComponentRoot = {
+  figmaId: string;
+  type: 'component';
+};
+
+export type ComponentInstance = ShapeGeomAttributes &
+  Children & {
+    figmaId: string;
+    type: 'instance';
+  };
diff --git a/ui-src/types/componentRoot.ts b/ui-src/types/componentRoot.ts
deleted file mode 100644
index 4036e9a9..00000000
--- a/ui-src/types/componentRoot.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export type ComponentRoot = {
-  figmaId: string;
-  type: 'component';
-};
diff --git a/ui-src/types/index.ts b/ui-src/types/index.ts
index 3eb21057..f818e76c 100644
--- a/ui-src/types/index.ts
+++ b/ui-src/types/index.ts
@@ -1,3 +1,3 @@
-export * from './componentRoot';
+export * from './component';
 export * from './penpotDocument';
 export * from './penpotNode';
diff --git a/ui-src/types/penpotNode.ts b/ui-src/types/penpotNode.ts
index cd7fefaa..5dd62f48 100644
--- a/ui-src/types/penpotNode.ts
+++ b/ui-src/types/penpotNode.ts
@@ -2,11 +2,10 @@ 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 { InstanceShape } from '@ui/lib/types/shapes/instanceShape';
 import { PathShape } from '@ui/lib/types/shapes/pathShape';
 import { RectShape } from '@ui/lib/types/shapes/rectShape';
 import { TextShape } from '@ui/lib/types/shapes/textShape';
-import { ComponentRoot } from '@ui/types';
+import { ComponentInstance, ComponentRoot } from '@ui/types';
 
 export type PenpotNode =
   | FrameShape
@@ -16,5 +15,5 @@ export type PenpotNode =
   | CircleShape
   | TextShape
   | BoolShape
-  | InstanceShape
+  | ComponentInstance
   | ComponentRoot;