# Дизайн-система натхненна Figma

> Категорія: Дизайн і творчість
> Інструмент для колаборативного дизайну. Яскрава багатоколірність, грайливий і водночас професійний стиль.

## 1. Візуальна тема та атмосфера

Інтерфейс Figma — це дизайн-інструмент, який спроектував сам себе: справжній майстер-клас типографічної витонченості, де кастомний варіативний шрифт (figmaSans) модулює вагу від гострої тонкої (weight 320) до жирної (weight 700) із зупинками на незвичних проміжних значеннях (330, 340, 450, 480, 540), які більшість типографічних систем ніколи не досліджує. Такий точний контроль ваги дає кожному текстовому елементу ретельно відкалібровану візуальну вагу — ієрархія будується на мікровідмінностях, а не на грубому розподілі «звичайний — жирний».

Сторінка демонструє захопливу двоїстість: хром інтерфейсу суворо чорно-білий (буквально лише `#000000` і `#ffffff` виявляються як кольори), тоді як секція hero та вітрини продукту вибухають яскравими багатоколірними градієнтами — електричні зелені, соковиті жовті, глибокі фіолетові, гарячі рожеві. Це розділення означає, що сама дизайн-система не має кольору — барвистий вихід продукту є головним героєм. Маркетингова сторінка Figma — це, по суті, біла галерейна стіна, що виставляє різнобарвне мистецтво.

Те, що вирізняє Figma поза варіативним шрифтом, — це геометрія кіл та пілюль. Кнопки мають радіус 50px (пілюля) або 50% (ідеальне коло для кнопок із іконками), що створює органічну, схожу на палітру інструментів відчуття. Індикатор фокусу зі штриховим контуром (`dashed 2px`) — свідомий дизайнерський вибір, що відлунює ручки виділення у самому редакторі Figma: мова UI сайту посилається на мову UI продукту.

**Ключові характеристики:**
- Кастомний варіативний шрифт (figmaSans) з незвичними значеннями ваги: 320, 330, 340, 450, 480, 540, 700
- Суворо чорно-білий хром інтерфейсу — колір існує лише у вмісті продукту
- figmaMono для заголовків технічних міток у верхньому регістрі з широким міжлітерним інтервалом
- Геометрія кнопок: пілюля (50px) і коло (50%)
- Штрихові контури фокусу, що відлунюють ручки виділення у редакторі Figma
- Яскраві багатоколірні градієнти у hero (зелений, жовтий, фіолетовий, рожевий)
- Увімкнена OpenType-функція `"kern"` глобально
- Негативний міжлітерний інтервал скрізь — навіть у основному тексті від -0.14px до -0.26px

## 2. Кольорова палітра та ролі

### Основні кольори
- **Чистий чорний** (`#000000`): весь текст, усі суцільні кнопки, усі рамки. Єдиний «колір» інтерфейсу.
- **Чистий білий** (`#ffffff`): усі фони, білі кнопки, текст на темних поверхнях. Друга половина бінарної пари.

*Примітка: маркетинговий сайт Figma використовує ЛИШЕ ці два кольори для шару інтерфейсу. Усі яскраві кольори з'являються виключно в скриншотах продукту, градієнтах hero та вбудованому вмісті.*

### Поверхні та фони
- **Чистий білий** (`#ffffff`): основний фон сторінки та поверхні карток.
- **Скляний чорний** (`rgba(0, 0, 0, 0.08)`): тонке темне накладення для другорядних круглих кнопок і скляних ефектів.
- **Скляний білий** (`rgba(255, 255, 255, 0.16)`): накладення матованого скла для кнопок на темних/кольорових поверхнях.

### Система градієнтів
- **Градієнт hero**: яскравий багатозупинковий градієнт з електричним зеленим, соковитим жовтим, глибоким фіолетовим і гарячим рожевим. Цей градієнт — візуальна підпис секції hero, яка уособлює творчі можливості інструменту.
- **Градієнти секцій продукту**: окремі зони продукту (Дизайн, Dev Mode, Прототипування) можуть мати власні кольорові теми у своїх вітринах.

## 3. Правила типографіки

### Сімейство шрифтів
- **Основний**: `figmaSans`, запасні варіанти: `figmaSans Fallback, SF Pro Display, system-ui, helvetica`
- **Моноширинний / мітки**: `figmaMono`, запасні варіанти: `figmaMono Fallback, SF Mono, menlo`

### Ієрархія

| Роль | Шрифт | Розмір | Вага | Висота рядка | Міжлітерний інтервал | Примітки |
|------|-------|--------|------|--------------|----------------------|---------|
| Display / Hero | figmaSans | 86px (5.38rem) | 400 | 1.00 (тісно) | -1.72px | Максимальний вплив, екстремальний трекінг |
| Заголовок секції | figmaSans | 64px (4rem) | 400 | 1.10 (тісно) | -0.96px | Заголовки секцій з функціями |
| Підзаголовок | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | Акцентований текст секції |
| Підзаголовок легкий | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | Легкий текст секції |
| Заголовок функції | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | Жирні заголовки карток |
| Основний великий | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px to -0.14px | Описи, вступи |
| Основний / Кнопка | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px to normal | Стандартний текст, навігація, кнопки |
| Основний легкий | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px to normal | Легкий основний текст |
| Моно-мітка | figmaMono | 18px (1.13rem) | 400 | 1.30 (тісно) | 0.54px | Мітки секцій у верхньому регістрі |
| Моно маленький | figmaMono | 12px (0.75rem) | 400 | 1.00 (тісно) | 0.6px | Дрібні теги у верхньому регістрі |

### Принципи
- **Точність варіативного шрифту**: figmaSans використовує значення ваги, яких більшість систем ніколи не торкається — 320, 330, 340, 450, 480, 540. Це створює ієрархію через тонкі різниці ваги, а не різкі стрибки. Різниця між 330 і 340 майже непомітна, але структурно значуща.
- **Легкість як основа**: більшість основного тексту використовує 320–340 (легше за типові 400 «regular»), створюючи ефірний, повітряний досвід читання, що відповідає естетиці дизайн-інструменту.
- **Кернінг скрізь**: кожен текстовий елемент вмикає OpenType-функцію `"kern"` — кернінг не є опціональним, він структурний.
- **Негативний трекінг за замовчуванням**: навіть основний текст використовує міжлітерний інтервал від -0.1px до -0.26px, що створює універсально щільний текст. Текст типу Display стискається далі — до -0.96px та -1.72px.
- **Моно для структури**: figmaMono у верхньому регістрі з позитивним міжлітерним інтервалом (0.54px–0.6px) створює технічні мітки-покажчики.

## 4. Стилізація компонентів

### Кнопки

**Чорна суцільна (пілюля)**
- Фон: чистий чорний (`#000000`)
- Текст: чистий білий (`#ffffff`)
- Радіус: коло (50%) для кнопок з іконками
- Фокус: штриховий контур 2px
- Максимальний акцент

**Біла пілюля**
- Фон: чистий білий (`#ffffff`)
- Текст: чистий чорний (`#000000`)
- Відступи: 8px 18px 10px (асиметричні по вертикалі)
- Радіус: пілюля (50px)
- Фокус: штриховий контур 2px
- Стандартний CTA на темних/кольорових поверхнях

**Скляна темна**
- Фон: `rgba(0, 0, 0, 0.08)` (тонке темне накладення)
- Текст: чистий чорний
- Радіус: коло (50%)
- Фокус: штриховий контур 2px
- Другорядна дія на світлих поверхнях

**Скляна світла**
- Фон: `rgba(255, 255, 255, 0.16)` (матоване скло)
- Текст: чистий білий
- Радіус: коло (50%)
- Фокус: штриховий контур 2px
- Другорядна дія на темних/кольорових поверхнях

### Картки та контейнери
- Фон: чистий білий
- Рамка: відсутня або мінімальна
- Радіус: 6px (малі контейнери), 8px (зображення, картки, діалоги)
- Тінь: тонкі та середні ефекти підняття
- Скриншоти продукту як вміст карток

### Навігація
- Чиста горизонтальна навігація на білому
- Логотип: wordmark Figma чорним кольором
- Вкладки продукту: навігація у формі пілюль (50px)
- Посилання: чорний текст, підкреслення 1px
- CTA: чорна кнопка-пілюля
- Hover: колір тексту через CSS-змінну

### Унікальні компоненти

**Панель вкладок продукту**
- Горизонтальні вкладки у формі пілюль (радіус 50px)
- Кожна вкладка представляє окрему зону продукту Figma (Дизайн, Dev Mode, Прототипування тощо)
- Активна вкладка підсвічена

**Секція з градієнтом hero**
- Яскравий багатоколірний градієнт на всю ширину
- Накладення білого тексту з заголовком Display 86px
- Скриншоти продукту, що «парять» у градієнті

**Штрихові індикатори фокусу**
- Усі інтерактивні елементи використовують контур `dashed 2px` на фокусі
- Посилання на ручки виділення у редакторі Figma
- Мета-дизайнерський вибір, що зв'язує сайт і продукт

## 5. Принципи компонування

### Система відступів
- Базова одиниця: 8px
- Шкала: 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px

### Сітка та контейнер
- Максимальна ширина контейнера: до 1920px
- Hero: повноширинний градієнт із центрованим вмістом
- Секції продукту: вітрини, що чергуються
- Підвал: темна секція на всю ширину
- Адаптивність від 559px до 1920px

### Філософія пробілів
- **Галерейний ритм**: щедрі відступи дозволяють кожній секції продукту дихати як окремій експозиції.
- **Кольорові секції як візуальний відпочинок**: градієнтний hero та вітрини продукту забезпечують хроматичне полегшення між монохромними секціями інтерфейсу.

### Шкала радіусів рамок
- Мінімальний (2px): малі елементи-посилання
- Тонкий (6px): малі контейнери, роздільники
- Комфортний (8px): картки, зображення, діалоги
- Пілюля (50px): кнопки-вкладки, CTA
- Коло (50%): кнопки з іконками, кругові елементи

## 6. Глибина та підняття

| Рівень | Обробка | Застосування |
|--------|---------|--------------|
| Плоский (Рівень 0) | Без тіні | Фон сторінки, більшість тексту |
| Поверхня (Рівень 1) | Біла картка на градієнтній/темній секції | Картки, вітрини продукту |
| Піднятий (Рівень 2) | Тонка тінь | Плаваючі картки, стани hover |

**Філософія тіней**: Figma використовує тіні скупо. Основні механізми глибини — це **контраст фону** (білий вміст на кольорових/темних секціях) і властива тривимірність самих скриншотів продукту.

## 7. Що робити і чого уникати

### Робіть
- Використовуйте figmaSans із точними значеннями варіативної ваги (320–540) — точний контроль ваги І Є дизайном
- Тримайте інтерфейс суворо чорно-білим — колір виходить лише з вмісту продукту
- Використовуйте геометрію пілюлі (50px) та кола (50%) для всіх інтерактивних елементів
- Застосовуйте штрихові контури фокусу 2px — фірмовий шаблон доступності
- Вмикайте функцію `"kern"` на всьому тексті
- Використовуйте figmaMono у верхньому регістрі з позитивним міжлітерним інтервалом для міток
- Застосовуйте негативний міжлітерний інтервал скрізь (від -0.1px до -1.72px)

### Не робіть
- Не додавайте кольорів до інтерфейсу — монохромна палітра є абсолютною
- Не використовуйте стандартні значення ваги шрифту (400, 500, 600, 700) — використовуйте унікальні зупинки варіативного шрифту (320, 330, 340, 450, 480, 540)
- Не використовуйте гострі кути для кнопок — лише геометрія пілюлі та кола
- Не використовуйте суцільні контури фокусу — штриховий є фірмовим
- Не збільшуйте вагу основного шрифту вище 450 — легка естетика є основоположною
- Не застосовуйте позитивний міжлітерний інтервал до основного тексту — він завжди негативний

## 8. Адаптивна поведінка

### Точки зламу
| Назва | Ширина | Ключові зміни |
|-------|--------|---------------|
| Малий мобільний | <560px | Компактне компонування, стекування |
| Планшет | 560–768px | Незначні коригування |
| Малий десктоп | 768–960px | Двоколонкові компонування |
| Десктоп | 960–1280px | Стандартне компонування |
| Великий десктоп | 1280–1440px | Розширене |
| Надширокий | 1440–1920px | Максимальна ширина |

### Стратегія згортання
- Текст hero: 86px → 64px → 48px
- Вкладки продукту: горизонтальна прокрутка на мобільних
- Секції функцій: стекування в один стовпець
- Підвал: багатоколонковий → стекований

## 9. Посібник із запитів для агентів

### Швидкий довідник кольорів
- Все: «Pure Black (#000000)» і «Pure White (#ffffff)»
- Glass Dark: «rgba(0, 0, 0, 0.08)»
- Glass Light: «rgba(255, 255, 255, 0.16)»

### Приклади запитів для компонентів
- "Create a hero on a vibrant multi-color gradient (green, yellow, purple, pink). Headline at 86px figmaSans weight 400, line-height 1.0, letter-spacing -1.72px. White text. White pill CTA button (50px radius, 8px 18px padding)."
- "Design a product tab bar with pill-shaped buttons (50px radius). Active: Black bg, white text. Inactive: transparent, black text. figmaSans at 20px weight 480."
- "Build a section label: figmaMono 18px, uppercase, letter-spacing 0.54px, black text. Kern enabled."
- "Create body text at 20px figmaSans weight 330, line-height 1.40, letter-spacing -0.14px. Pure Black on white."

### Посібник з ітерацій
1. Використовуйте значення ваги варіативного шрифту точно: 320, 330, 340, 450, 480, 540, 700
2. Інтерфейс — завжди чорний + білий, ніколи не додавайте кольорів до хрому
3. Штрихові контури фокусу, не суцільні
4. Міжлітерний інтервал основного тексту — завжди негативний, моно-міток — завжди позитивний
5. Пілюля (50px) для кнопок/вкладок, коло (50%) для кнопок з іконками