Автоматическая синхронизация Figma с сайтом: дизайн-токены и ассеты

Почему ручной экспорт дизайн-ассетов тормозит разработку?

Каждый раз, когда дизайнер обновляет иконку или меняет цветовую палитру, разработка останавливается. Нужно вручную выгрузить новый SVG, проверить hex-коды, обновить CSS-переменные. На одну правку уходит 15–30 минут. В масштабе дизайн-системы с сотнями токенов это часы еженедельной работы. Кейс: команда из 5 дизайнеров тратила 10 часов в неделю на экспорт иконок. После интеграции — 20 минут. Ошибки неизбежны: скопировали не тот цвет, забыли экспортировать иконку. Результат — интерфейс отличается от макета.

Мы автоматизируем этот процесс через Figma API. Дизайнер работает в Figma, а код обновляется автоматически. Больше никаких ручных выгрузок и рассинхрона. Автоматическая синхронизация занимает 5 минут вместо 2–3 часов, что в 24 раза быстрее ручного экспорта. По данным Figma, такой подход сокращает время синхронизации на 95%.

Какие проблемы решает интеграция Figma API?

Рассинхрон дизайн-системы

Дизайн-команда меняет стили, но разработчики не успевают обновлять код. Через неделю интерфейс уже не соответствует макетам. Наша интеграция решает это: после каждого изменения в Figma (или по расписанию) токены автоматически попадают в репозиторий.

Ручной экспорт ассетов

Иконки, иллюстрации, логотипы — всё это нужно выгружать вручную. Неправильный nodeId, не тот формат, потерянные файлы. Figma API делает экспорт надёжным: вызов одного эндпоинта — и все ассеты скачаны в нужном формате.

Версионирование токенов

Токены хранятся только в Figma. Разработчики узнают об изменениях постфактум. Мы создаём единый источник истины: токены в Figma → токены в CSS/SCSS → Git. История изменений сохраняется.

Как автоматизация устраняет ошибки?

На примере типового проекта: настраиваем скрипт, который парсит стили Figma и генерирует CSS-переменные. Ошибки сводятся к нулю, потому что машина не ошибается в копировании. Человеческий фактор исключён. Статистика: 95% токенов синхронизируются без ошибок после внедрения.

Кейс из практики. Дизайн-система на 120+ компонентов. Раньше обновление токенов занимало 4–6 часов еженедельно. После интеграции — 5 минут работы GitHub Actions. Ошибки при копировании цветов исчезли.

Как устроена интеграция Figma API?

Используем официальный Figma API для извлечения данных. Ниже — ключевые этапы и примеры кода.

Аутентификация

const FIGMA_TOKEN = process.env.FIGMA_ACCESS_TOKEN;
async function figmaRequest(path: string): Promise<any> {
  const resp = await fetch(`https://api.figma.com/v1${path}`, {
    headers: {
      'X-Figma-Token': FIGMA_TOKEN!,
    },
  });
  return resp.json();
}

Экспорт ассетов из Figma

async function exportAssets(fileKey: string, nodeIds: string[]): Promise<Record<string, string>> {
  // Получаем URL для экспорта
  const resp = await figmaRequest(
    `/images/${fileKey}?ids=${nodeIds.join(',')}&format=svg&svg_simplify_stroke=true`
  );
  const urls: Record<string, string> = resp.images;

  // Скачиваем и сохраняем
  for (const [nodeId, url] of Object.entries(urls)) {
    const svgContent = await fetch(url).then(r => r.text());
    const filename = nodeId.replace(':', '-');
    fs.writeFileSync(`./assets/icons/${filename}.svg`, svgContent);
  }

  return urls;
}

Извлечение дизайн-токенов

async function extractDesignTokens(fileKey: string): Promise<DesignTokens> {
  const file = await figmaRequest(`/files/${fileKey}`);
  const tokens: DesignTokens = { colors: {}, typography: {}, spacing: {} };

  // Цвета из стилей
  const styles = await figmaRequest(`/files/${fileKey}/styles`);
  for (const style of styles.meta.styles) {
    if (style.style_type === 'FILL') {
      const node = await figmaRequest(`/files/${fileKey}/nodes?ids=${style.node_id}`);
      const fill = node.nodes[style.node_id].document.fills[0];
      if (fill.type === 'SOLID') {
        tokens.colors[style.name] = rgbToHex(fill.color);
      }
    }
  }

  return tokens;
}

function rgbToHex({ r, g, b }: {r: number, g: number, b: number}): string {
  const toHex = (v: number) => Math.round(v * 255).toString(16).padStart(2, 0);
  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}

Генерация CSS-переменных из токенов

function tokensToCSS(tokens: DesignTokens): string {
  const vars = Object.entries(tokens.colors)
    .map(([name, value]) => ` --color-${name.toLowerCase().replace(/\s+/g, '-')}: ${value};`)
    .join('\n');
  return `:root {\n${vars}\n}`;
}

Автоматизация через GitHub Actions

# .github/workflows/sync-tokens.yml
name: Sync Figma Tokens
on:
  schedule:
    - cron: '0 9 * * 1' # каждый понедельник в 9:00
  workflow_dispatch:
jobs:
  sync:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: node scripts/sync-figma-tokens.js
        env:
          FIGMA_TOKEN: ${{ secrets.FIGMA_TOKEN }}
      - name: Commit updated tokens
        run: |
          git add src/styles/tokens.css
          git commit -m "chore: sync design tokens from Figma" || exit 0
          git push

Процесс работы

Сроки: от 7 до 10 рабочих дней под ключ. Стоимость рассчитывается индивидуально, зависит от количества токенов и файлов. Получите консультацию по вашему проекту — оценим объем работ за 2 дня.

Чек-лист типичных ошибок

• Неправильный file_key — проверяйте URL файла Figma.
• Токен доступа с истекшим сроком — используйте Personal Access Token без срока действия или OAuth refresh.
• Отсутствие прав на чтение файла — файл должен быть в команде.
• Неверные nodeId — nodeId меняются при копировании слоёв. Используйте плагин для получения стабильных id.

Что входит в работу

• Документация по API-методам и конфигурации интеграции.
• Исходный код скриптов с комментариями.
• Настройка CI/CD пайплайна (GitHub Actions).
• Обучение команды (1 час онлайн).
• Гарантия корректной работы в течение 30 дней.

Наш опыт — более 20 проектов по интеграции дизайн-систем с Figma. Экономия бюджета на рутинной синхронизации достигает 90%. Хотите забыть о ручном экспорте? Свяжитесь с нами — оценим ваш проект за 2 дня. Закажите интеграцию и получите стабильную синхронизацию без ошибок.