Дизайн-система, вдохновлённая Figma

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

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

Интерфейс Figma — это дизайн-инструмент, создавший сам себя: мастер-класс по типографической изощрённости, где кастомный вариативный шрифт (figmaSans) плавно меняет вес от почти невесомого (320) до жирного (700) с остановками на нетипичных промежуточных значениях (330, 340, 450, 480, 540), которые большинство типографических систем никогда не используют. Такой точный контроль над насыщенностью шрифта даёт каждому текстовому элементу тщательно откалиброванный визуальный вес, выстраивая иерархию через микроразличия, а не грубым инструментом «обычный vs жирный».

Страница представляет захватывающую двойственность: хром интерфейса строго чёрно-белый (буквально только #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, воплощающая творческие возможности инструмента.
• Градиенты разделов продукта: отдельные области продукта (Design, Dev Mode, Prototyping) могут использовать отдельные цветовые темы в своих витринах.

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

Семейство шрифтов

• Основной: figmaSans, запасные: figmaSans Fallback, SF Pro Display, system-ui, helvetica
• Моноширинный / Метки: figmaMono, запасные: figmaMono Fallback, SF Mono, menlo

Иерархия

Принципы

• Точность вариативного шрифта: figmaSans использует насыщенности, которых большинство систем никогда не касается — 320, 330, 340, 450, 480, 540. Это создаёт иерархию через тонкие различия в весе, а не через резкие скачки. Разница между 330 и 340 почти неощутима, но структурно значима.
• Лёгкость как основа: большинство основного текста использует 320–340 (легче, чем типичное «обычное» 400), создавая воздушное, лёгкое восприятие, соответствующее эстетике дизайн-инструмента.
• Кернинг везде: каждый текстовый элемент включает функцию OpenType "kern" — кернинг не опционален, он структурен.
• Отрицательный трекинг по умолчанию: даже основной текст использует от -0.1px до -0.26px межбуквенного интервала, создавая универсально плотный текст. Дисплейный текст сжимается ещё сильнее — до -0.96px и -1.72px.
• Mono для структуры: 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 (изображения, карточки, диалоги)
• Тень: эффекты тонкого и среднего подъёма
• Скриншоты продукта в качестве контента карточек

Навигация

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

Характерные компоненты

Панель вкладок продукта

• Горизонтальные вкладки в форме таблетки (радиус 50px)
• Каждая вкладка представляет область продукта Figma (Design, Dev Mode, Prototyping и т.д.)
• Активная вкладка выделена

Секция с градиентом Hero

• Яркий многоцветный градиентный фон на всю ширину
• Белый текст поверх с дисплейным заголовком 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. Глубина и подъём

Философия теней: 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. Адаптивное поведение

Контрольные точки

Стратегия свёртки

• Текст hero: 86px → 64px → 48px
• Вкладки продукта: горизонтальная прокрутка на мобильных
• Функциональные разделы: одна колонка, стопка
• Подвал: несколько колонок → стопка

9. Руководство для агентных промптов

Быстрый справочник по цветам

• Всё: «чистый чёрный (#000000)» и «чистый белый (#ffffff)»
• Стеклянный тёмный: «rgba(0, 0, 0, 0.08)»
• Стеклянный светлый: «rgba(255, 255, 255, 0.16)»

Примеры промптов для компонентов

• «Создай hero на ярком многоцветном градиенте (зелёный, жёлтый, фиолетовый, розовый). Заголовок 86px figmaSans насыщенность 400, line-height 1.0, letter-spacing -1.72px. Белый текст. Белая кнопка CTA-таблетка (радиус 50px, отступы 8px 18px).»
• «Разработай панель вкладок продукта с кнопками в форме таблетки (радиус 50px). Активная: чёрный фон, белый текст. Неактивная: прозрачный фон, чёрный текст. figmaSans 20px насыщенность 480.»
• «Создай метку раздела: figmaMono 18px, верхний регистр, letter-spacing 0.54px, чёрный текст. Kern включён.»
• «Создай основной текст 20px figmaSans насыщенность 330, line-height 1.40, letter-spacing -0.14px. Чистый чёрный на белом.»

Руководство по итерациям

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