До вмісту
HotLayout Документація

Тема

Тут ви правите дизайн-систему проєкту — кольори, відступи, заокруглення, тіні й текстові стилі, з яких бере вигляд кожен екран, — і публікуєте її у ваші застосунки.

Відкрийте розділ «Дизайн»#

Натисніть Дизайн ліворуч. Розділ ділить місце з полотном, тож кожну зміну одразу видно на екрані.

Розділ «Дизайн»: кольори теми ліворуч, екран, перемальований ними, праворуч

Тема належить проєкту, а не документу: одна на всі його екрани.

Токени#

Токен — це значення з іменем. Віджети посилаються на ім'я, тож зміна значення тут міняє кожен екран, де його вжито.

Група Що в ній
Кольори Кольори з прозорістю.
Ролі Якими кольорами малюється варіант кнопки чи тон бейджа.
Градієнти Напрямок і дві чи більше точок кольору.
Відступи Шкала для проміжків і відступів.
Заокруглення Заокруглення кутів.
Тіні Тіні, складені з шарів.
Гарнітури Гарнітури основного тексту й заголовків.
Шрифтові стилі Кегль, вага, висота рядка, міжлітерний проміжок і гарнітура кожного текстового стилю.

У кожній групі є обов'язкове ядро — імена, які має кожен проєкт, — і місце для власних токенів. Щоб додати власний, наберіть ім'я в полі Новий токен і натисніть Додати. Ім'я — латиницею в camelCase, як-от brandCoral. Власні токени можна перейменовувати й видаляти; токенам ядра можна міняти лише значення.

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

У групі Ролі з'являється попередження, коли колір тексту погано читається на своєму тлі.

Розділ Що змінено унизу перелічує кожне значення, що відрізняється від початкового.

Кілька тем#

У проєкті може бути кілька тем — зазвичай світла й темна.

  • Список угорі розділу обирає тему, яку ви правите. Нею ж намальоване полотно.
  • Створити копію робить копію, з якої зручно почати нову тему.
  • Зробити тією, яку бере застосунок позначає тему, яку бере застосунок. Вибір теми у списку цього не міняє.
  • Усі теми набору оголошують ті самі імена токенів, кожна — зі своїми значеннями.

Кнопка теми в панелі перегляду над полотном перемикає те саме: тема, яку ви бачите, — це тема, яку ви правите.

Опублікуйте тему#

Тема не має чернетки й сама не зберігається. Поки в ній є зміни, що існують лише у вашій вкладці браузера, про це каже смуга внизу редактора.

Щоб зберегти зміни, натисніть Опублікувати тему. Застосунки візьмуть тему з наступним запуском застосунку.

  • Публікувати тему може той, хто має право публікації. Редактор бачить значення й може їх вивантажити, але опублікувати не може.
  • Якщо документ уживає токен, який існує лише у вашій вкладці, документ не опублікується, доки не опубліковано тему. Спершу тема, потім документ.
  • Якщо, поки ви правили, тему опублікував хтось інший, редактор не затирає чужу роботу мовчки: він пропонує відкрити їхню тему або опублікувати вашу поверх.

Вивантаження й імпорт#

Вивантажити файл зберігає весь набір тем файлом; Підвантажити файл завантажує набір із файла. Так тему передають дизайнерові або переносять між проєктами. Імпорт міняє лише те, що у вашій вкладці, — щоб зберегти, опублікуйте. Повернути типову відкидає зміни теми, яку ви правите, і повертає її типові значення.

Далі#

HotLayoutЕкрани для server-driven UI.