@seed-design/figma 0.0.2

package/src/normalizer/from-plugin.ts

@@ -0,0 +1,345 @@
+import type * as FigmaRestSpec from "@figma/rest-api-spec";
+import type {
+  NormalizedSceneNode,
+  NormalizedFrameNode,
+  NormalizedRectangleNode,
+  NormalizedTextNode,
+  NormalizedComponentNode,
+  NormalizedInstanceNode,
+  NormalizedVectorNode,
+} from "./types";
+
+export function createPluginNormalizer() {
+  async function normalizeNode(node: SceneNode): Promise<NormalizedSceneNode> {
+    if (node.type === "FRAME") {
+      return normalizeFrameNode(node);
+    }
+    if (node.type === "GROUP") {
+      return normalizeGroupNode(node);
+    }
+    if (node.type === "RECTANGLE") {
+      return normalizeRectangleNode(node);
+    }
+    if (node.type === "VECTOR") {
+      return normalizeVectorNode(node);
+    }
+    if (node.type === "TEXT") {
+      return normalizeTextNode(node);
+    }
+    if (node.type === "COMPONENT") {
+      return normalizeComponentNode(node);
+    }
+    if (node.type === "INSTANCE") {
+      return normalizeInstanceNode(node);
+    }
+
+    throw new Error(`Unimplemented node type: ${node.type}`);
+  }
+
+  async function normalizeFrameNode(node: FrameNode): Promise<NormalizedFrameNode> {
+    return {
+      type: node.type,
+      id: node.id,
+      name: node.name,
+      boundVariables: await normalizeBoundVariables(node),
+      ...normalizeRadiusProps(node),
+      ...normalizeAutolayoutProps(node),
+      children: await Promise.all(node.children.map(normalizeNode)),
+    };
+  }
+
+  async function normalizeGroupNode(
+    node: GroupNode & { inferredAutoLayout?: FrameNode["inferredAutoLayout"] },
+  ): Promise<NormalizedFrameNode> {
+    return {
+      type: "FRAME",
+      id: node.id,
+      name: node.name,
+      boundVariables: await normalizeBoundVariables(node),
+      layoutGrow: (node.inferredAutoLayout?.layoutGrow ?? node.layoutGrow) as 0 | 1 | undefined,
+      layoutAlign: node.inferredAutoLayout?.layoutAlign ?? node.layoutAlign,
+      layoutSizingHorizontal: node.layoutSizingHorizontal,
+      layoutSizingVertical: node.layoutSizingVertical,
+      absoluteBoundingBox: node.absoluteBoundingBox,
+      layoutMode: node.inferredAutoLayout?.layoutMode,
+      layoutWrap: node.inferredAutoLayout?.layoutWrap,
+      paddingLeft: node.inferredAutoLayout?.paddingLeft,
+      paddingRight: node.inferredAutoLayout?.paddingRight,
+      paddingTop: node.inferredAutoLayout?.paddingTop,
+      paddingBottom: node.inferredAutoLayout?.paddingBottom,
+      primaryAxisAlignItems: node.inferredAutoLayout?.primaryAxisAlignItems,
+      counterAxisAlignItems: node.inferredAutoLayout?.counterAxisAlignItems,
+      primaryAxisSizingMode: node.inferredAutoLayout?.primaryAxisSizingMode,
+      counterAxisSizingMode: node.inferredAutoLayout?.counterAxisSizingMode,
+      itemSpacing: node.inferredAutoLayout?.itemSpacing,
+      counterAxisSpacing: node.inferredAutoLayout?.counterAxisSpacing ?? undefined,
+      fills: [],
+      strokes: [],
+      children: await Promise.all(node.children.map(normalizeNode)),
+    };
+  }
+
+  async function normalizeRectangleNode(node: RectangleNode): Promise<NormalizedRectangleNode> {
+    return {
+      type: node.type,
+      id: node.id,
+      name: node.name,
+      boundVariables: await normalizeBoundVariables(node),
+      ...normalizeRadiusProps(node),
+      ...normalizeShapeProps(node),
+    };
+  }
+
+  async function normalizeVectorNode(node: VectorNode): Promise<NormalizedVectorNode> {
+    return {
+      type: node.type,
+      id: node.id,
+      name: node.name,
+      boundVariables: await normalizeBoundVariables(node),
+      ...normalizeShapeProps(node),
+    };
+  }
+
+  async function normalizeTextNode(node: TextNode): Promise<NormalizedTextNode> {
+    const segments = node.getStyledTextSegments([
+      "fontSize",
+      "fontWeight",
+      "fontName",
+      "letterSpacing",
+      "lineHeight",
+      "paragraphSpacing",
+      "textStyleId",
+      "fills",
+      "boundVariables",
+    ]);
+    const first = segments[0]!; // TODO: handle multiple segments
+
+    const textStyleKey =
+      typeof node.textStyleId === "string"
+        ? (await figma.getStyleByIdAsync(node.textStyleId))?.key
+        : undefined;
+
+    return {
+      type: node.type,
+      id: node.id,
+      name: node.name,
+      boundVariables: await normalizeBoundVariables(node),
+      layoutGrow: node.layoutGrow as 0 | 1 | undefined,
+      layoutAlign: node.layoutAlign,
+      style: {
+        fontSize: first.fontSize,
+        fontWeight: first.fontWeight,
+        fontFamily: first.fontName.family,
+        // TODO: handle other units
+        letterSpacing:
+          first.letterSpacing.unit === "PIXELS" ? first.letterSpacing.value : undefined,
+        lineHeightPx: first.lineHeight.unit === "PIXELS" ? first.lineHeight.value : undefined,
+        paragraphSpacing: first.paragraphSpacing,
+        textAlignHorizontal: node.textAlignHorizontal,
+      },
+      ...(textStyleKey ? { textStyleKey } : {}),
+      characters: node.characters,
+      segments: node
+        .getStyledTextSegments([
+          "fontSize",
+          "fontWeight",
+          "fontName",
+          "letterSpacing",
+          "lineHeight",
+        ])
+        .map((segment) => ({
+          characters: segment.characters,
+          start: segment.start,
+          end: segment.end,
+          style: {
+            fontSize: segment.fontSize,
+            fontWeight: segment.fontWeight,
+            fontFamily: segment.fontName.family,
+            letterSpacing:
+              segment.letterSpacing.unit === "PIXELS" ? segment.letterSpacing.value : undefined,
+            lineHeightPx:
+              segment.lineHeight.unit === "PIXELS" ? segment.lineHeight.value : undefined,
+          },
+        })),
+      fills: normalizePaints(node.fills),
+    };
+  }
+
+  async function normalizeComponentNode(node: ComponentNode): Promise<NormalizedComponentNode> {
+    return {
+      type: node.type,
+      id: node.id,
+      name: node.name,
+      boundVariables: await normalizeBoundVariables(node),
+      ...normalizeRadiusProps(node),
+      ...normalizeAutolayoutProps(node),
+      children: await Promise.all(node.children.map(normalizeNode)),
+    };
+  }
+
+  async function normalizeInstanceNode(node: InstanceNode): Promise<NormalizedInstanceNode> {
+    const mainComponent = await node.getMainComponentAsync();
+    if (!mainComponent) {
+      throw new Error("Instance node has no main component");
+    }
+
+    const componentProperties: NormalizedInstanceNode["componentProperties"] = {};
+    for (const [key, value] of Object.entries(node.componentProperties)) {
+      componentProperties[key] = value;
+      if (value.type === "INSTANCE_SWAP") {
+        const mainComponent = (await figma.getNodeByIdAsync(
+          value.value as string,
+        )) as ComponentNode;
+        if (mainComponent) {
+          componentProperties[key].componentKey = mainComponent.key;
+        }
+      }
+    }
+
+    return {
+      type: node.type,
+      id: node.id,
+      name: node.name,
+      boundVariables: await normalizeBoundVariables(node),
+      ...normalizeRadiusProps(node),
+      ...normalizeAutolayoutProps(node),
+      children: await Promise.all(node.children.map(normalizeNode)),
+      componentKey: mainComponent.key,
+      componentSetKey:
+        mainComponent.parent?.type === "COMPONENT_SET" ? mainComponent.parent.key : undefined,
+      componentProperties,
+    };
+  }
+
+  function normalizeSolidPaint(paint: SolidPaint): FigmaRestSpec.SolidPaint {
+    return {
+      type: paint.type,
+      color: {
+        r: paint.color.r,
+        g: paint.color.g,
+        b: paint.color.b,
+        a: paint.opacity ?? 1,
+      },
+      visible: paint.visible,
+      blendMode: paint.blendMode ?? "NORMAL",
+      boundVariables: paint.boundVariables,
+    };
+  }
+
+  function normalizePaint(paint: Paint): FigmaRestSpec.Paint {
+    if (paint.type === "SOLID") {
+      return normalizeSolidPaint(paint);
+    }
+    if (paint.type === "IMAGE") {
+      return {
+        type: "IMAGE",
+        scaleMode: paint.scaleMode === "CROP" ? "STRETCH" : paint.scaleMode,
+        imageTransform: paint.imageTransform,
+        scalingFactor: paint.scalingFactor,
+        filters: paint.filters,
+        rotation: paint.rotation,
+        imageRef: paint.imageHash ?? "",
+        blendMode: paint.blendMode ?? "NORMAL",
+        visible: paint.visible,
+        opacity: paint.opacity,
+      };
+    }
+    throw new Error(`Unimplemented paint type: ${paint.type}`);
+  }
+
+  function normalizePaints(fills: readonly Paint[] | PluginAPI["mixed"]): FigmaRestSpec.Paint[] {
+    if (fills === figma.mixed) {
+      throw new Error("Mixed fills are not supported");
+    }
+
+    return fills.map(normalizePaint);
+  }
+
+  function normalizeRadiusProps(
+    node: Pick<
+      RectangleNode,
+      "cornerRadius" | "topLeftRadius" | "topRightRadius" | "bottomRightRadius" | "bottomLeftRadius"
+    >,
+  ) {
+    return {
+      cornerRadius: node.cornerRadius === figma.mixed ? undefined : node.cornerRadius,
+      rectangleCornerRadii: [
+        node.topLeftRadius,
+        node.topRightRadius,
+        node.bottomRightRadius,
+        node.bottomLeftRadius,
+      ],
+    };
+  }
+
+  function normalizeShapeProps(
+    node: Pick<
+      RectangleNode,
+      | "fills"
+      | "strokes"
+      | "strokeWeight"
+      | "layoutGrow"
+      | "layoutAlign"
+      | "layoutSizingHorizontal"
+      | "layoutSizingVertical"
+      | "absoluteBoundingBox"
+    > &
+      Partial<Pick<FrameNode, "inferredAutoLayout">>,
+  ) {
+    return {
+      layoutGrow: (node.inferredAutoLayout?.layoutGrow ?? node.layoutGrow) as 0 | 1 | undefined,
+      layoutAlign: node.inferredAutoLayout?.layoutAlign ?? node.layoutAlign,
+      layoutSizingHorizontal: node.layoutSizingHorizontal,
+      layoutSizingVertical: node.layoutSizingVertical,
+      absoluteBoundingBox: node.absoluteBoundingBox,
+      fills: normalizePaints(node.fills),
+      strokes: normalizePaints(node.strokes),
+      strokeWeight: node.strokeWeight === figma.mixed ? undefined : node.strokeWeight,
+    };
+  }
+
+  function normalizeAutolayoutProps(node: Omit<FrameNode, "type" | "clone">) {
+    return {
+      ...normalizeShapeProps(node),
+      layoutMode: node.inferredAutoLayout?.layoutMode ?? node.layoutMode,
+      layoutWrap: node.inferredAutoLayout?.layoutWrap ?? node.layoutWrap,
+      paddingLeft: node.inferredAutoLayout?.paddingLeft ?? node.paddingLeft,
+      paddingRight: node.inferredAutoLayout?.paddingRight ?? node.paddingRight,
+      paddingTop: node.inferredAutoLayout?.paddingTop ?? node.paddingTop,
+      paddingBottom: node.inferredAutoLayout?.paddingBottom ?? node.paddingBottom,
+      primaryAxisAlignItems:
+        node.inferredAutoLayout?.primaryAxisAlignItems ?? node.primaryAxisAlignItems,
+      counterAxisAlignItems:
+        node.inferredAutoLayout?.counterAxisAlignItems ?? node.counterAxisAlignItems,
+      primaryAxisSizingMode:
+        node.inferredAutoLayout?.primaryAxisSizingMode ?? node.primaryAxisSizingMode,
+      counterAxisSizingMode:
+        node.inferredAutoLayout?.counterAxisSizingMode ?? node.counterAxisSizingMode,
+      itemSpacing: node.inferredAutoLayout?.itemSpacing ?? node.itemSpacing,
+      counterAxisSpacing:
+        node.inferredAutoLayout?.counterAxisSpacing ?? node.counterAxisSpacing ?? undefined,
+    };
+  }
+
+  async function normalizeBoundVariables(node: Pick<FrameNode, "boundVariables">) {
+    return {
+      ...node.boundVariables,
+      fills: await Promise.all(
+        node.boundVariables?.fills?.map((fill) =>
+          figma.variables.getVariableByIdAsync(fill.id).then((res) => {
+            return {
+              ...fill,
+              id: res?.key ?? fill.id,
+            };
+          }),
+        ) ?? [],
+      ),
+      size: {
+        x: node.boundVariables?.width,
+        y: node.boundVariables?.height,
+      },
+    };
+  }
+
+  return normalizeNode;
+}

package/src/normalizer/from-rest.ts

@@ -0,0 +1,178 @@
+import type * as FigmaRestSpec from "@figma/rest-api-spec";
+import type {
+  NormalizedSceneNode,
+  NormalizedFrameNode,
+  NormalizedRectangleNode,
+  NormalizedTextNode,
+  NormalizedComponentNode,
+  NormalizedInstanceNode,
+  NormalizedTextSegment,
+  NormalizedVectorNode,
+} from "./types";
+
+export interface RestNormalizerContext {
+  styles: Record<string, FigmaRestSpec.Style>;
+  components: Record<string, FigmaRestSpec.Component>;
+  componentSets: Record<string, FigmaRestSpec.ComponentSet>;
+}
+
+export function createRestNormalizer(ctx: RestNormalizerContext) {
+  function normalizeNode(node: FigmaRestSpec.Node): NormalizedSceneNode {
+    if (node.type === "FRAME") {
+      return normalizeFrameNode(node);
+    }
+    if (node.type === "GROUP") {
+      return normalizeGroupNode(node);
+    }
+    if (node.type === "RECTANGLE") {
+      return normalizeRectangleNode(node);
+    }
+    if (node.type === "VECTOR") {
+      return normalizeVectorNode(node);
+    }
+    if (node.type === "TEXT") {
+      return normalizeTextNode(node);
+    }
+    if (node.type === "COMPONENT") {
+      return normalizeComponentNode(node);
+    }
+    if (node.type === "INSTANCE") {
+      return normalizeInstanceNode(node);
+    }
+
+    throw new Error(`Unimplemented node type: ${node.type}, ${node.name}`);
+  }
+
+  function normalizeFrameNode(node: FigmaRestSpec.FrameNode): NormalizedFrameNode {
+    return {
+      ...node,
+      children: node.children.map(normalizeNode),
+    };
+  }
+
+  function normalizeGroupNode(node: FigmaRestSpec.GroupNode): NormalizedFrameNode {
+    return {
+      ...node,
+      type: "FRAME",
+      children: node.children.map(normalizeNode),
+    };
+  }
+
+  function normalizeRectangleNode(node: FigmaRestSpec.RectangleNode): NormalizedRectangleNode {
+    return node;
+  }
+
+  function normalizeVectorNode(node: FigmaRestSpec.VectorNode): NormalizedVectorNode {
+    return node;
+  }
+
+  function normalizeTextNode(node: FigmaRestSpec.TextNode): NormalizedTextNode {
+    // Function to segment a text node based on style overrides
+    function segmentTextNode(textNode: FigmaRestSpec.TextNode): NormalizedTextSegment[] {
+      const segments: NormalizedTextSegment[] = [];
+      const characters = textNode.characters;
+      const styleOverrides = textNode.characterStyleOverrides || [];
+      const styleTable = textNode.styleOverrideTable || {};
+
+      // If no style overrides, return the entire text as one segment
+      if (!styleOverrides.length) {
+        return [
+          {
+            characters: characters,
+            start: 0,
+            end: characters.length,
+            style: textNode.style || {},
+          },
+        ];
+      }
+
+      let currentSegment: NormalizedTextSegment = {
+        characters: "",
+        start: 0,
+        end: 0,
+        style: {},
+      };
+
+      let currentStyleId: string | null = null;
+
+      for (let i = 0; i < characters.length; i++) {
+        const styleId = styleOverrides[i]?.toString() || null;
+
+        // If style changes or it's the first character
+        if (styleId !== currentStyleId || i === 0) {
+          // Add the previous segment if it exists
+          if (i > 0) {
+            currentSegment.end = i;
+            currentSegment.characters = characters.substring(
+              currentSegment.start,
+              currentSegment.end,
+            );
+            segments.push({ ...currentSegment });
+          }
+
+          // Start a new segment
+          currentStyleId = styleId;
+          currentSegment = {
+            characters: "",
+            start: i,
+            end: 0,
+            style: styleId ? styleTable[styleId] || {} : {},
+          };
+        }
+      }
+
+      // Add the last segment
+      if (currentSegment.start < characters.length) {
+        currentSegment.end = characters.length;
+        currentSegment.characters = characters.substring(currentSegment.start, currentSegment.end);
+        segments.push(currentSegment);
+      }
+
+      return segments;
+    }
+
+    return {
+      ...node,
+      textStyleKey: node.styles?.["text"] ? ctx.styles[node.styles["text"]]?.key : undefined,
+      segments: segmentTextNode(node),
+    };
+  }
+
+  function normalizeComponentNode(node: FigmaRestSpec.ComponentNode): NormalizedComponentNode {
+    return {
+      ...node,
+      children: node.children.map(normalizeNode),
+    };
+  }
+
+  function normalizeInstanceNode(node: FigmaRestSpec.InstanceNode): NormalizedInstanceNode {
+    const mainComponent = ctx.components[node.componentId];
+    if (!mainComponent) {
+      throw new Error(`Component ${node.componentId} not found`);
+    }
+    const componentSet = mainComponent.componentSetId
+      ? ctx.componentSets[mainComponent.componentSetId]
+      : undefined;
+    const componentProperties: NormalizedInstanceNode["componentProperties"] = {};
+
+    for (const [key, value] of Object.entries(node.componentProperties ?? {})) {
+      componentProperties[key] = value;
+      if (value.type === "INSTANCE_SWAP") {
+        const mainComponent = ctx.components[value.value as string];
+        if (mainComponent) {
+          componentProperties[key].componentKey = mainComponent.key;
+        }
+      }
+    }
+
+    return {
+      ...node,
+      children: node.children.map(normalizeNode),
+      componentKey: mainComponent.key,
+      componentSetKey: componentSet?.key,
+      componentProperties,
+    };
+  }
+
+  return normalizeNode;
+}

package/src/normalizer/types.ts

@@ -0,0 +1,94 @@
+import type * as FigmaRestSpec from "@figma/rest-api-spec";
+
+export type CommonProps = "type" | "id" | "name" | "boundVariables";
+
+export type RadiusProps = "cornerRadius" | "rectangleCornerRadii";
+
+export type ShapeProps =
+  | "layoutGrow"
+  | "layoutAlign"
+  | "layoutSizingHorizontal"
+  | "layoutSizingVertical"
+  | "absoluteBoundingBox"
+  | "fills"
+  | "strokes"
+  | "strokeWeight";
+
+export type LayoutProps =
+  | "layoutMode"
+  | "layoutWrap"
+  | "paddingLeft"
+  | "paddingRight"
+  | "paddingTop"
+  | "paddingBottom"
+  | "primaryAxisAlignItems"
+  | "counterAxisAlignItems"
+  | "primaryAxisSizingMode"
+  | "counterAxisSizingMode"
+  | "itemSpacing"
+  | "counterAxisSpacing";
+
+export interface NormalizedFrameNode
+  extends Pick<FigmaRestSpec.FrameNode, CommonProps | ShapeProps | RadiusProps | LayoutProps> {
+  children: NormalizedSceneNode[];
+}
+
+export interface NormalizedRectangleNode
+  extends Pick<FigmaRestSpec.RectangleNode, CommonProps | ShapeProps | RadiusProps> {}
+
+export interface NormalizedTextNode
+  extends Pick<
+    FigmaRestSpec.TextNode,
+    CommonProps | "layoutGrow" | "layoutAlign" | "style" | "characters" | "fills"
+  > {
+  segments: NormalizedTextSegment[];
+  textStyleKey?: string;
+}
+
+export interface NormalizedTextSegment {
+  characters: string;
+  start: number;
+  end: number;
+  style: {
+    fontFamily?: string;
+    fontWeight?: number;
+    fontSize?: number;
+    italic?: boolean;
+    textDecoration?: string;
+    letterSpacing?: number;
+    lineHeight?: number | { unit: string; value: number };
+  };
+}
+
+export interface NormalizedComponentNode
+  extends Pick<FigmaRestSpec.ComponentNode, CommonProps | ShapeProps | RadiusProps | LayoutProps> {
+  children: NormalizedSceneNode[];
+}
+
+export interface NormalizedInstanceNode
+  extends Pick<FigmaRestSpec.InstanceNode, CommonProps | ShapeProps | RadiusProps | LayoutProps> {
+  componentProperties: {
+    [key: string]: FigmaRestSpec.ComponentProperty & { componentKey?: string };
+  };
+
+  componentKey: string;
+
+  componentSetKey?: string;
+
+  children: NormalizedSceneNode[];
+}
+
+export interface NormalizedVectorNode
+  extends Pick<FigmaRestSpec.VectorNode, CommonProps | ShapeProps> {}
+
+export interface NormalizedBooleanOperationNode
+  extends Pick<FigmaRestSpec.BooleanOperationNode, CommonProps | "fills"> {}
+
+export type NormalizedSceneNode =
+  | NormalizedFrameNode
+  | NormalizedRectangleNode
+  | NormalizedTextNode
+  | NormalizedComponentNode
+  | NormalizedInstanceNode
+  | NormalizedVectorNode
+  | NormalizedBooleanOperationNode;

package/src/sizing.ts

@@ -0,0 +1,58 @@
+import type { NormalizedFrameNode } from "./normalizer/types";
+import { getLayoutVariableName, inferDimension } from "./variable";
+
+type SizingPropHandler = (props: {
+  boundVariables: NonNullable<NormalizedFrameNode["boundVariables"]>;
+  layoutSizingHorizontal: FrameNode["layoutSizingHorizontal"];
+  layoutSizingVertical: FrameNode["layoutSizingVertical"];
+  width: FrameNode["width"];
+  height: FrameNode["height"];
+}) => string | number | boolean | undefined;
+
+const sizingPropHandlers = {
+  height: ({ boundVariables, layoutSizingVertical, height }) =>
+    layoutSizingVertical === "FIXED"
+      ? boundVariables.size?.y
+        ? getLayoutVariableName(boundVariables.size.y.id)
+        : inferDimension(height)
+      : undefined,
+  width: ({ boundVariables, layoutSizingHorizontal, width }) =>
+    layoutSizingHorizontal === "FIXED"
+      ? boundVariables.size?.x
+        ? getLayoutVariableName(boundVariables.size.x.id)
+        : inferDimension(width)
+      : undefined,
+} satisfies Record<string, SizingPropHandler>;
+
+export function createSizingProps(
+  node: Pick<
+    NormalizedFrameNode,
+    "boundVariables" | "layoutSizingHorizontal" | "layoutSizingVertical" | "absoluteBoundingBox"
+  >,
+): Record<string, string | number | boolean> {
+  const boundVariables = node.boundVariables;
+  const layoutSizingHorizontal = node.layoutSizingHorizontal ?? "FIXED";
+  const layoutSizingVertical = node.layoutSizingVertical ?? "FIXED";
+  const { width, height } = node.absoluteBoundingBox ?? { width: 0, height: 0 };
+
+  if (!boundVariables) {
+    return {};
+  }
+
+  const result: Record<string, string | number | boolean> = {};
+
+  for (const [prop, handler] of Object.entries(sizingPropHandlers)) {
+    const value = handler({
+      boundVariables,
+      layoutSizingHorizontal,
+      layoutSizingVertical,
+      width,
+      height,
+    });
+    if (value !== undefined) {
+      result[prop] = value;
+    }
+  }
+
+  return result;
+}

package/src/text.ts

@@ -0,0 +1,20 @@
+import type { NormalizedTextNode } from "./normalizer/types";
+import { getTypographyVariableName } from "./variable";
+
+export function createTextProps(boundVariables: NormalizedTextNode["boundVariables"]) {
+  const fontSizeBoundVariables = boundVariables?.fontSize?.[0];
+  const fontStyleBoundVariables = boundVariables?.fontStyle?.[0];
+  const lineHeightBoundVariables = boundVariables?.lineHeight?.[0];
+
+  return {
+    fontSize: fontSizeBoundVariables
+      ? getTypographyVariableName(fontSizeBoundVariables.id)
+      : undefined,
+    fontWeight: fontStyleBoundVariables
+      ? getTypographyVariableName(fontStyleBoundVariables.id)
+      : undefined,
+    lineHeight: lineHeightBoundVariables
+      ? getTypographyVariableName(lineHeightBoundVariables.id)
+      : undefined,
+  };
+}