try

plugin-src/transformers/partials/transformFigmaIds.ts

@@ -13,6 +13,7 @@ export const transformMaskFigmaIds = (
   node: SceneNode
 ): Required<Pick<ShapeBaseAttributes, 'figmaId'>> & Pick<ShapeBaseAttributes, 'figmaRelatedId'> => {
   const transformedIds = transformFigmaIds(node);
+
   return {
     figmaId: `M${transformedIds.figmaId}`,
     figmaRelatedId: transformedIds.figmaRelatedId ? `M${transformedIds.figmaRelatedId}` : undefined

ui-src/lib/types/shapes/shape.ts

@@ -14,7 +14,6 @@ import { Uuid } from '@ui/lib/types/utils/uuid';
 import { ComponentPropertyReference } from '@ui/types';
 
 export type ShapeBaseAttributes = {
-  id?: Uuid;
   figmaId?: string; // @TODO: move to any other place
   figmaRelatedId?: string; // @TODO: move to any other place
   type?:
@@ -37,6 +36,7 @@ export type ShapeBaseAttributes = {
 };
 
 export type ShapeAttributes = {
+  id?: Uuid;
   name: string;
   componentId?: string;
   componentFile?: string;

ui-src/parser/creators/createArtboard.ts

@@ -10,10 +10,10 @@ export const createArtboard = (
   file: PenpotFile,
   { type, children = [], figmaId, figmaRelatedId, ...shape }: FrameShape
 ): Uuid | undefined => {
-  const id = parseFigmaId(file, figmaId);
+  const { id, shapeRef } = parseFigmaId(file, figmaId);
 
-  shape.id = id;
-  shape.shapeRef ??= parseFigmaId(file, figmaRelatedId, true);
+  shape.id ??= id;
+  shape.shapeRef ??= shapeRef;
   shape.fills = symbolFills(shape.fillStyleId, shape.fills);
   shape.strokes = symbolStrokes(shape.strokes);
   shape.touched = symbolTouched(

ui-src/parser/creators/createBool.ts

@@ -14,8 +14,10 @@ export const createBool = (
   file: PenpotFile,
   { type, figmaId, figmaRelatedId, children = [], ...shape }: BoolShape
 ) => {
-  shape.id = parseFigmaId(file, figmaId);
-  shape.shapeRef = parseFigmaId(file, figmaRelatedId, true);
+  const { id, shapeRef } = parseFigmaId(file, figmaId);
+
+  shape.id = id;
+  shape.shapeRef = shapeRef;
   shape.fills = symbolFills(shape.fillStyleId, shape.fills);
   shape.strokes = symbolStrokes(shape.strokes);
   shape.boolType = symbolBoolType(shape.boolType);

ui-src/parser/creators/createCircle.ts

@@ -7,8 +7,10 @@ export const createCircle = (
   file: PenpotFile,
   { type, figmaId, figmaRelatedId, ...shape }: CircleShape
 ) => {
-  shape.id = parseFigmaId(file, figmaId);
-  shape.shapeRef = parseFigmaId(file, figmaRelatedId, true);
+  const { id, shapeRef } = parseFigmaId(file, figmaId);
+
+  shape.id = id;
+  shape.shapeRef = shapeRef;
   shape.fills = symbolFills(shape.fillStyleId, shape.fills);
   shape.strokes = symbolStrokes(shape.strokes);
   shape.touched = symbolTouched(

ui-src/parser/creators/createComponentInstance.ts

@@ -1,5 +1,5 @@
 import { PenpotFile } from '@ui/lib/types/penpotFile';
-import { components, instances, parseFigmaId } from '@ui/parser';
+import { components, instances, parseFigmaId, swaps } from '@ui/parser';
 import { symbolTouched } from '@ui/parser/creators/symbols';
 import { ComponentInstance } from '@ui/types';
 
@@ -9,6 +9,7 @@ export const createComponentInstance = (
   file: PenpotFile,
   { type, mainComponentFigmaId, isComponentRoot, ...shape }: ComponentInstance
 ) => {
+  const { id } = parseFigmaId(file, shape.figmaId);
   const uiComponent =
     components.get(mainComponentFigmaId) ?? createUiComponent(file, mainComponentFigmaId);
 
@@ -23,6 +24,16 @@ export const createComponentInstance = (
         createUiComponent(file, originalComponentFigmaId)
       : undefined;
 
+  if (originalUiComponent && shape.figmaId) {
+    const index = shape.figmaId.lastIndexOf(';');
+
+    swaps.push({
+      original: shape.figmaId,
+      swapped: index !== -1 ? shape.figmaId.substring(0, index) : shape.figmaId
+    });
+  }
+
+  shape.id = id;
   if (!shape.figmaRelatedId || originalUiComponent) {
     shape.shapeRef = uiComponent.mainInstanceId;
   }
@@ -41,15 +52,16 @@ export const createComponentInstance = (
 };
 
 const createUiComponent = (file: PenpotFile, mainComponentFigmaId: string) => {
-  const mainInstanceId = parseFigmaId(file, mainComponentFigmaId);
-  if (!mainInstanceId) {
+  const { id } = parseFigmaId(file, mainComponentFigmaId);
+
+  if (!id) {
     return;
   }
 
   const uiComponent = {
     componentId: file.newId(),
     componentFigmaId: mainComponentFigmaId,
-    mainInstanceId
+    mainInstanceId: id
   };
 
   components.set(mainComponentFigmaId, uiComponent);

ui-src/parser/creators/createGroup.ts

@@ -9,8 +9,10 @@ export const createGroup = (
   file: PenpotFile,
   { type, children = [], figmaId, figmaRelatedId, ...shape }: GroupShape
 ) => {
-  shape.id = parseFigmaId(file, figmaId);
-  shape.shapeRef = parseFigmaId(file, figmaRelatedId, true);
+  const { id, shapeRef } = parseFigmaId(file, figmaId);
+
+  shape.id = id;
+  shape.shapeRef = shapeRef;
   shape.touched = symbolTouched(
     !shape.hidden,
     undefined,

ui-src/parser/creators/createPath.ts

@@ -12,8 +12,10 @@ export const createPath = (
   file: PenpotFile,
   { type, figmaId, figmaRelatedId, ...shape }: PathShape
 ) => {
-  shape.id = parseFigmaId(file, figmaId);
-  shape.shapeRef = parseFigmaId(file, figmaRelatedId, true);
+  const { id, shapeRef } = parseFigmaId(file, figmaId);
+
+  shape.id = id;
+  shape.shapeRef = shapeRef;
   shape.fills = symbolFills(shape.fillStyleId, shape.fills);
   shape.strokes = symbolStrokes(shape.strokes);
   shape.content = symbolPathContent(shape.content);

ui-src/parser/creators/createRectangle.ts

@@ -7,8 +7,10 @@ export const createRectangle = (
   file: PenpotFile,
   { type, figmaId, figmaRelatedId, ...shape }: RectShape
 ) => {
-  shape.id = parseFigmaId(file, figmaId);
-  shape.shapeRef = parseFigmaId(file, figmaRelatedId, true);
+  const { id, shapeRef } = parseFigmaId(file, figmaId);
+
+  shape.id = id;
+  shape.shapeRef = shapeRef;
   shape.fills = symbolFills(shape.fillStyleId, shape.fills);
   shape.strokes = symbolStrokes(shape.strokes);
   shape.touched = symbolTouched(

ui-src/parser/creators/createText.ts

@@ -7,8 +7,10 @@ export const createText = (
   file: PenpotFile,
   { type, figmaId, figmaRelatedId, characters, ...shape }: TextShape
 ) => {
-  shape.id = parseFigmaId(file, figmaId);
-  shape.shapeRef = parseFigmaId(file, figmaRelatedId, true);
+  const { id, shapeRef } = parseFigmaId(file, figmaId);
+
+  shape.id = id;
+  shape.shapeRef = shapeRef;
   shape.content = parseContent(shape.content);
   shape.strokes = symbolStrokes(shape.strokes);
   shape.touched = symbolTouched(

ui-src/parser/libraries.ts

@@ -13,3 +13,4 @@ export const components: Map<string, UiComponent> = new Map();
 export const componentShapes: Map<string, ComponentShape> = new Map();
 export const colors: Map<string, FillStyle> = new Map();
 export const componentProperties: Map<string, ComponentProperty> = new Map();
+export const swaps: { original: string; swapped: string }[] = [];

ui-src/parser/parseFigmaId.ts

@@ -1,15 +1,21 @@
 import { PenpotFile } from '@ui/lib/types/penpotFile';
 import { Uuid } from '@ui/lib/types/utils/uuid';
-import { identifiers } from '@ui/parser';
+import { identifiers, swaps } from '@ui/parser';
 
 export const parseFigmaId = (
   file: PenpotFile,
-  figmaId?: string,
-  shapeRef: boolean = false
-): Uuid | undefined => {
-  if (!figmaId) {
-    if (shapeRef) return;
+  figmaId?: string
+): { id: Uuid; shapeRef: Uuid | undefined } => {
+  const realFigmaId = calculateRealFigmaId(figmaId);
 
+  return {
+    id: parseId(file, realFigmaId),
+    shapeRef: parseShapeRef(file, realFigmaId)
+  };
+};
+
+const parseId = (file: PenpotFile, figmaId?: string): Uuid => {
+  if (!figmaId) {
     return file.newId();
   }
 
@@ -25,3 +31,49 @@ export const parseFigmaId = (
 
   return newId;
 };
+
+const parseShapeRef = (file: PenpotFile, figmaId: string | undefined): Uuid | undefined => {
+  if (!figmaId) return;
+
+  const figmaRelatedId = getRelatedNodeId(figmaId);
+
+  if (!figmaRelatedId) {
+    return;
+  }
+
+  const id = identifiers.get(figmaRelatedId);
+
+  if (id) {
+    return id;
+  }
+
+  const newId = file.newId();
+
+  identifiers.set(figmaId, newId);
+
+  return newId;
+};
+
+const getRelatedNodeId = (nodeId: string): string | undefined => {
+  const ids = nodeId.split(';');
+
+  if (ids.length > 1) {
+    return ids.slice(1).join(';');
+  }
+};
+
+const calculateRealFigmaId = (figmaId: string | undefined): string | undefined => {
+  if (!figmaId) return;
+
+  while (swaps.length > 0) {
+    const swap = swaps[swaps.length - 1];
+
+    if (figmaId.startsWith(swap.original) || figmaId.replace('M', '').startsWith(swap.original)) {
+      return figmaId.replace(swap.original, swap.swapped);
+    }
+
+    swaps.pop();
+  }
+
+  return figmaId;
+};