External/open-design
1
0
Fork 0
mirror of https://github.com/nexu-io/open-design.git synced 2026-10-27 09:51:12 +01:00
Code Issues Packages Projects Releases Wiki Activity
Files
codex/tools-dev-telemetry
open-design/design-systems/figma/DESIGN-ru.md
T
xne998808-aiGitHubJoey
 681dacde18 feat(landing): DESIGN.md systems hub + design-token spec sheet + scenario mocks on design-system pages (#4420) 
* feat(landing): systems-page DESIGN.md/FAQ copy + design-token loader

* feat(landing): DESIGN.md+FAQ sections on systems hub, token spec sheet on detail

* feat(landing): detail-page TOC nav, token visuals, tighter spacing, unified related cards

* feat(landing): multi-scenario themed previews (web/app/slides/poster) on design-system detail

* feat(landing): localized routes for design-system detail pages (chrome i18n, DESIGN.md body stays en)

* feat(landing): theme scenario mocks from real design tokens; phone app, 16:9 slide, refined poster

* feat(landing): redesign slide mock (two-zone), sticky schema nav, contribute moved to top

* feat(landing): right-rail section nav + 2-up related cards on design-system detail

* fix(landing): localize design-system detail title suffix + keyword-rich meta description + keywords meta

* feat(landing): declutter detail header — icon-only share, move contribute callout to page bottom

* fix(landing): cancel homepage 130px section padding on detail-block (killed huge inter-section gaps)

* i18n(landing): localize design-system detail + systems-hub chrome across 17 locales

* feat(landing): locale-aware DESIGN.md body loading (DESIGN-<locale>.md) with English fallback

* i18n(design-systems): localize apple DESIGN.md body into 17 locales

* i18n(design-systems): localize stripe DESIGN.md body into 17 locales

* i18n(design-systems): localize vercel DESIGN.md body into 17 locales

* i18n(design-systems): localize notion DESIGN.md body into 17 locales

* i18n(design-systems): localize github DESIGN.md body into 17 locales

* i18n(design-systems): localize airtable DESIGN.md body into 17 locales

* i18n(design-systems): localize figma DESIGN.md body into 17 locales

* i18n(design-systems): localize openai DESIGN.md body into 17 locales

* i18n(design-systems): localize slack DESIGN.md body into 17 locales

* i18n(design-systems): localize discord DESIGN.md body into 17 locales

* i18n(design-systems): localize webflow DESIGN.md body into 17 locales

* i18n(design-systems): localize cohere DESIGN.md body into 17 locales

* i18n(design-systems): localize duolingo DESIGN.md body into 17 locales

* i18n(design-systems): localize spotify DESIGN.md body into 17 locales

* i18n(design-systems): localize shopify DESIGN.md body into 17 locales

* i18n(design-systems): localize nvidia DESIGN.md body into 17 locales

* i18n(design-systems): localize pinterest DESIGN.md body into 17 locales

* i18n(design-systems): localize uber DESIGN.md body into 17 locales

* i18n(design-systems): localize nike DESIGN.md body into 17 locales

* i18n(design-systems): localize airbnb DESIGN.md body into 17 locales

* i18n(design-systems): localize ibm DESIGN.md body into 17 locales

* i18n(design-systems): localize playstation DESIGN.md body into 17 locales

* i18n(design-systems): localize starbucks DESIGN.md body into 17 locales

* i18n(landing): localize detailSystemLabel (design-system H1/title noun) across 17 locales

* i18n(landing): localize plugins chrome (contribute callout, card CTA, search, about) across 15 remaining locales

* i18n(landing): localized card taglines + category labels for design systems (149 systems x 17 locales)

* fix(landing): suppress on-load locale auto-redirect on design-system detail pages (keep localized routes + hreflang)

* fix(landing): localize SystemCard detail link so cards on /<locale>/ stay in-locale

---------

Co-authored-by: Joey <276262049+xne998808-ai@users.noreply.github.com>
2026-06-17 15:24:58 +08:00

21 KiB
Raw Permalink Blame History

Дизайн-система, вдохновлённая 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

Иерархия

Роль Шрифт Размер Насыщенность Высота строки Трекинг Примечания
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 Лёгкий основной текст
Метка Mono figmaMono 18px (1.13rem) 400 1.30 (плотный) 0.54px Метки разделов в верхнем регистре
Метка Mono мелкая figmaMono 12px (0.75rem) 400 1.00 (плотный) 0.6px Крошечные теги в верхнем регистре

Принципы

  • Точность вариативного шрифта: 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. Глубина и подъём

Уровень Обработка Использование
Плоский (Уровень 0) Без тени Фон страницы, большинство текста
Поверхность (Уровень 1) Белая карточка на градиентном/тёмном разделе Карточки, витрины продукта
Приподнятый (Уровень 2) Тонкая тень Плавающие карточки, состояния наведения

Философия теней: 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. Руководство для агентных промптов

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

  • Всё: «чистый чёрный (#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%) для кнопок-иконок
Reference in New Issue View Git Blame Copy Permalink