Чому ручний експорт дизайн-ассетів гальмує розробку?
Кожного разу, коли дизайнер оновлює іконку або змінює колірну палітру, розробка зупиняється. Потрібно вручну вивантажити новий SVG, перевірити hex-коди, оновити CSS-змінні. На одну правку йде 15–30 хвилин. У масштабі дизайн-системи з сотнями токенів це години щотижневої роботи. Кейс: команда з 5 дизайнерів витрачала 10 годин на тиждень на експорт іконок. Після інтеграції — 20 хвилин. Помилки неминучі: скопіювали не той колір, забули експортувати іконку. Результат — інтерфейс відрізняється від макета.
Ми автоматизуємо цей процес через Figma API. Дизайнер працює у Figma, а код оновлюється автоматично. Більше жодних ручних вивантажень та розсинхрону. Автоматична синхронізація займає 5 хвилин замість 2–3 годин, що у 24 рази швидше ручного експорту. За даними Figma, такий підхід скорочує час синхронізації на 95%.
| Параметр | Ручний експорт | Автоматизація через Figma API |
|---|---|---|
| Час на оновлення токенів | 2–3 години | 5 хвилин |
| Помилки при перенесенні | Часто | Виключені |
| Актуальність стилів | Не гарантована | Завжди синхронізовані |
Які проблеми вирішує інтеграція 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
Процес роботи
| Етап | Опис | Термін |
|---|---|---|
| Аудит | Визначаємо файли Figma для синхронізації та потрібні токени | 1 день |
| Проектування | Обираємо формат вивантаження (CSS, SCSS, JSON), проектуємо архітектуру скрипта | 1–2 дні |
| Реалізація | Пишемо інтеграцію: авторизація, експорт ассетів, парсинг токенів, генерація файлів | 3–5 днів |
| Тестування | Перевіряємо на тестовому файлі, порівнюємо з макетом, виправляємо помилки | 1 день |
| Деплой | Налаштовуємо GitHub Actions, навчаємо команду, документуємо | 1 день |
Терміни: від 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 дні. Замовте інтеграцію та отримайте стабільну синхронізацію без помилок.