Генератор шкали відступів: системний підхід до spacing
Навіщо потрібна шкала відступів?
Використання довільних значень відступів (7px, 13px, 22px) без системи призводить до нескінцістентного дизайну, де кожен елемент виглядає трохи по-різному. Систематична шкала забезпечує візуальну узгодженість, спрощує collaboration між дизайнерами та розробниками і прискорює прийняття рішень.
Популярні підходи
Сітка 4px: значення 4, 8, 12, 16, 24, 32, 48, 64, 96px. Підходить для щільних UI (адмінпанелей, дашбордів). Сітка 8px: 8, 16, 24, 32, 48, 64, 96, 128px — найпопулярніший вибір для більшості проектів. Tailwind CSS використовує ступені кратні 4px (1 = 4px, 2 = 8px, 4 = 16px тощо). Material Design заснований на 8dp базовій одиниці.
Модульна шкала відступів
Альтернатива — використання тієї ж математичної прогресії, що й для типографії: наприклад, коефіцієнт 1.5 дає 4, 6, 9, 14, 21, 32px. Це органічно поєднується з типографічною шкалою і надає природний вигляд. Утримуйте кількість унікальних значень на мінімумі — 8–12 достатньо для більшості потреб.
Токени дизайну
Зберігайте відступи як named tokens: --spacing-sm: 8px, --spacing-md: 16px, --spacing-lg: 24px. Семантичне іменування (sm/md/lg) зручніше, ніж числове (2/4/6). Це дозволяє легко змінювати масштаб всієї системи змінивши одну змінну. Синхронізуйте токени між Figma і кодом за допомогою Style Dictionary або Tokens Studio.