Повний набір токенів дизайну - або змінних веб-потоку - є ключем до масштабного проектування. Визначення та спільне використання змінних дозволяє всій вашій команді розробляти і створювати узгоджені типографіку, розміри, ефекти та інші деталі. Для ширшого охоплення системи дизайну тепер ви можете зберігати у змінних числа без одиниць і відсотки!
Розкрийте більше деталей типографіки за допомогою змінних Number
Новий тип Number дозволяє зберігати безрозмірні числа у ваших змінних: на сайті або у спільній бібліотеці. Це особливо корисно для типографічних значень. Наприклад, припустимо, що основний текст для ваших сайтів завжди має бути налаштований наступним чином:
- Font weight: 400
- Font size: 1rem
- Line height: 1.4
- Font family: Inter
Тепер ви можете зберегти вагу шрифту і висоту безрозмірного рядка як числові змінні. Використовуйте тип змінної Size для розміру шрифту, а тип Font для назви сімейства шрифтів. Ви можете використовувати обидва варіанти:
- Створити числові змінні на панелі «Змінні» і пов'язати їх із властивостями стилів на панелі «Стиль», або
- Введіть число без одиниць у підтримувану властивість стилю і створіть нову змінну безпосередньо з цієї властивості.
Де використовувати числову змінну
- Flex Child властивості — grow and shrink
- Position — z-index. Ця властивість стилю приймає тільки цілі значення
- Типографіка— font weight, line height, variations (for variable fonts). Font weight приймає лише цілочисельні значення в діапазоні 1-1000. Якщо ви не використовуєте змінні шрифти, це значення зазвичай кратне 100, наприклад, 400 або 600.
- Effects — opacity
Більш гнучкі системи проектування з новими відсотковими змінними
Новий тип змінної Percentage можна використовувати скрізь, де панель стилів приймає відсотки як одиницю, а це досить багато властивостей! До них належать
- Layout — gap sizes
- Flex Child properties — basis
- Spacing — margin and padding: top, bottom, left, right
- Size — height and width dimensions (включно з мінімальним та максимальним значенням)
- Position — top, bottom, left, right
- Typography — font size, line height, text indent, column gap
- Borders — border radius
- Effects — opacity, various filters and backdrop filters: blur, brightness, contrast, saturation, grayscale, invert, sepia, translate
Особливо корисними для застосування є розміри, такі як ширина і висота, ефекти та радіуси рамок.
Як і новий тип «Число», змінні типу «Відсоток» можна створювати на панелі «Змінні» або безпосередньо на панелі «Стиль», де б ви не ввели відсоткове значення.
