Правила нейминга текстовых стилей (Typography)

Данный регламент описывает правила именования переменных для шрифтов в Figma. Единый стандарт нейминга необходим для бесшовной передачи макетов в разработку и поддержания чистоты дизайн-системы.

1. Общие принципы

• Регистр: Все названия пишутся в нижнем регистре (lowercase).
• Разделитель: В качестве разделителя используется дефис (-).
• Адаптивность: Если стиль предназначен для мобильной версии, в конце добавляется суффикс -mobile.

2. Заголовки (Headings)

Для заголовков используется семантический подход (h1, h2, h3 и т.д.). Это напрямую коррелирует с HTML-тегами, что упрощает работу верстальщикам.

Шаблон: h{уровень}-{начертание}

Примеры:

Тип контента	Десктоп (Desktop)	Мобайл (Mobile)
Заголовок 1 уровня	h1-regular	h1-regular-mobile
Заголовок 2 уровня	h2-bold	h2-bold-mobile
Заголовок 3 уровня	h3-medium	h3-medium-mobile

3. Основной текст и другие элементы (Body & Others)

Для всех текстовых стилей, которые не являются заголовками, используется принцип «Размер-Начертание». Это позволяет быстро находить нужный кегль в списке стилей.

Шаблон: {размер}-{начертание}

Примеры:

Размер	Десктоп (Desktop)	Мобайл (Mobile)
16px	16-regular	16-regular-mobile
16px Medium	16-medium	16-medium-mobile
14px	14-regular	14-regular-mobile
12px Bold	12-bold	12-bold-mobile

4. Шпаргалка по начертаниям

Используйте стандартные названия для веса шрифта:

• regular (400)
• medium (500)
• semibold (600)
• bold (700)

Важно: При создании нового стиля всегда проверяйте, нет ли уже существующего с таким же размером и начертанием, чтобы избежать дублирования.