code.ts

// Показываем UI плагина с фиксированными размерами окна
figma.showUI(__html__, { width: 300, height: 300 });

// Функция для преобразования цвета из формата Figma (r,g,b 0-1) в CSS rgba()
function rgba(color: { r: number; g: number; b: number; a?: number }): string {
  const r = Math.round(color.r * 255);
  const g = Math.round(color.g * 255);
  const b = Math.round(color.b * 255);
  const a = color.a !== undefined ? color.a : 1;
  if (a === 1) return `rgb(${r}, ${g}, ${b})`;
  return `rgba(${r}, ${g}, ${b}, ${a})`; // возвращаем CSS-строку
}
function getBorderRadius(node: FrameNode): string | null {
  const { topLeftRadius, topRightRadius, bottomRightRadius, bottomLeftRadius } =
    node;

  if (
    topLeftRadius === 0 &&
    topRightRadius === 0 &&
    bottomRightRadius === 0 &&
    bottomLeftRadius === 0
  )
    return null;
  // Все одинаковые → одно значение
  if (
    topLeftRadius === topRightRadius &&
    topLeftRadius === bottomRightRadius &&
    topLeftRadius === bottomLeftRadius
  ) {
    return `${Math.round(topLeftRadius)}px`;
  }

  // Две и две одинаковые (верхние и нижние)
  if (
    topLeftRadius === bottomRightRadius &&
    topRightRadius === bottomLeftRadius
  ) {
    return `${Math.round(topLeftRadius)}px ${Math.round(topRightRadius)}px`;
  }

  // Три угла одинаковые, а один отличается
  if (topLeftRadius === topRightRadius && topLeftRadius === bottomLeftRadius) {
    return `${Math.round(topLeftRadius)}px ${Math.round(bottomRightRadius)}px`;
  }

  // Два соседних одинаковые, два других тоже одинаковые
  if (
    topLeftRadius === bottomLeftRadius &&
    topRightRadius === bottomRightRadius
  ) {
    return `${Math.round(topLeftRadius)}px ${Math.round(topRightRadius)}px ${Math.round(bottomRightRadius)}px`;
  }

  // По умолчанию — все 4 значения
  return `${Math.round(topLeftRadius)}px ${Math.round(topRightRadius)}px ${Math.round(bottomRightRadius)}px ${Math.round(bottomLeftRadius)}px`;
}

function getPadding(node: FrameNode): string | null {
  const { paddingTop, paddingRight, paddingBottom, paddingLeft } = node;

  // Всё ноль → null
  if (
    paddingTop === 0 &&
    paddingRight === 0 &&
    paddingBottom === 0 &&
    paddingLeft === 0
  )
    return null;

  // 1 значение
  if (
    paddingTop === paddingRight &&
    paddingTop === paddingBottom &&
    paddingTop === paddingLeft
  )
    return `${Math.round(paddingTop)}px`;

  // 2 значения: vertical | horizontal
  if (paddingTop === paddingBottom && paddingRight === paddingLeft)
    return `${Math.round(paddingTop)}px ${Math.round(paddingRight)}px`;

  // 3 значения: top | horizontal | bottom
  if (paddingRight === paddingLeft)
    return `${Math.round(paddingTop)}px ${Math.round(paddingRight)}px ${Math.round(paddingBottom)}px`;

  // 4 значения: top right bottom left
  return `${Math.round(paddingTop)}px ${Math.round(paddingRight)}px ${Math.round(paddingBottom)}px ${Math.round(paddingLeft)}px`;
}

// Основная функция для отправки информации о выделенном элементе в UI
function sendSelectionInfo() {
  const selection = figma.currentPage.selection; // получаем выделенные элементы на текущей странице

  // Сразу отправляем сигнал на UI, что нужно подстроить размер окна (пока просто триггер)
  figma.ui.postMessage({ type: "resize" });

  // Если ничего не выделено, отправляем ошибку в UI
  if (selection.length === 0) {
    figma.ui.postMessage({
      type: "error",
      message: "Выделите элемент на канвасе",
    });
  } else {
    const node = selection[0]; // берём первый выделенный элемент
    let info;

    // Если это текстовый элемент, собираем его ключевые CSS-подобные свойства
    if (node.type === "TEXT") {
      info = {
        type: node.type,
        text: node.name.slice(0, 20) + "...",
        data: {
          // Шрифт: проверяем, что fontName — объект с полем family
          fontFamily:
            node.fontName && typeof node.fontName === "object" && node.fontName
              ? `"${node.fontName.family}", sans-serif`
              : "sans-serif",

          // Размер шрифта в px
          fontSize: `clamp(${Math.round((node.fontSize as number) * 0.8)}px, ${
            Math.round(node.fontSize as number) / 16
          }vw, ${Math.round(node.fontSize as number)}px)`,

          fontWeight: node.fontWeight,

          textAlign: node.textAlignHorizontal.toLocaleLowerCase(),

          letterSpacing:
            typeof node.letterSpacing === "object" &&
            node.letterSpacing.unit === "PERCENT"
              ? `${node.letterSpacing.value}%`
              : 0,

          // Цвет текста: проверяем, что fills массив и первый элемент имеет color
          color: Array.isArray(node.fills) && rgba(node.fills[0].color),

          lineHeight:
            typeof node.lineHeight === "object" &&
            "value" in node.lineHeight &&
            Math.round(node.lineHeight.value) + "%",

          // Прозрачность текста: берём поле opacity, если есть
          opacity:
            Array.isArray(node.fills) && node.fills[0].opacity !== 1
              ? node.fills[0].opacity
              : null,
        },
      };
    } else if (node.type === "FRAME") {
      info = {
        type: node.type,
        data: {
          backgroundColor:
            Array.isArray(node.fills) && node.fills.length > 0 && node.fills[0]
              ? rgba(node.fills[0].color)
              : null,

          with: Math.round(node.width) + "px",
          height: Math.round(node.height) + "px",
          borderRadius: getBorderRadius(node),
          padding: getPadding(node),
          borderWidth: Math.round(node.strokeWeight as number) + "px",
          borderStyle:
            Array.isArray(node.strokes) &&
            node.strokes.length > 0 &&
            node.strokes[0].type
              ? node.strokes[0].type.toLowerCase()
              : null,

          borderColor:
            Array.isArray(node.strokes) &&
            node.strokes.length > 0 &&
            "color" in node.strokes[0]
              ? rgba(node.strokes[0].color)
              : null,
        },
      };
    }

    // Отправляем собранную информацию в UI
    figma.ui.postMessage({ type: "value", value: info });
  }
}

// Изначальный вызов функции при загрузке плагина
sendSelectionInfo();

// Событие: когда пользователь меняет выделение, отправляем новую информацию
figma.on("selectionchange", () => {
  sendSelectionInfo();
});