Як бачите, кольори тексту та кнопок змінюються автоматично на всіх екранах на ті, які я задаю. Але як це зробити? Про це ми зараз і поговоримо.
Як ви вже могли здогадатися з назви цього відео, це все завдяки стилям. Стилі можна створювати для тексту, кольорів та ефектів. Текстові стилі мають видимі розміри та висоту рядка. Як бачите, стилі можна розміщувати у папках. Тут у мене є тільки одна папка і один стиль у ній, але можна мати більше. Папки можна згортати і розгортати. Їх можна створювати, натискаючи правою кнопкою мишки на стилі та переіменовуючи їх, використовуючи слеш. А натиснувши кнопку Edit Style, можна редагувати кожен стиль. Можна змінити назву, додати опис і найголовніше - ми можемо змінити сам стиль.
Але для чого взагалі використовувати стилі? Це, по суті, змінні. Ми задаємо набір властивостей, наприклад, шрифт і його розмір, і даємо йому назву, наприклад, heading. Потім використовуємо цей стиль для всіх заголовків у файлі. Якщо текст здасться нам трохи замалим, достатньо змінити розмір шрифту в одному стилі і зміна автоматично застосується до всіх місць, де використовується цей стиль. І це чудово і значно полегшує нам роботу.
Тепер давайте очистимо цей файл від усіх стилів і подивимося, як створити їх з нуля. Як бачите, зараз у нас немає жодного стилю. Почнемо з того, що створимо стилі для кольорів. Я вибираю заголовок і задаю йому колір, наприклад, темно-зелений. Зараз ми не будемо турбуватись про те, як це виглядає, важливо зрозуміти, як це працює. Я натискаю на іконку style і вибираю плюс, щоб створити новий стиль. Назву його primary. Тепер ви бачите, що я можу змінювати лише цей стиль. Додати ще один колір або новий шар неможливо. Але можна відредагувати стиль і там додати нові шари. Я покажу це трохи пізніше на іншому кольорі.
Створю ще один кольоровий стиль для тексту, назвую його text, і для кнопки - accent. Тепер у нас є три кольорові стилі. Якщо вибрати кнопку, то в розділі selection можна побачити білий колір, який ще не став стилем. Я можу задати йому стиль прямо звідси. Натискаю на style і додаю новий стиль - white. Отже, у нас вже є 4 кольорові стилі.
Тепер переходимо до текстових стилів. Наприклад, я хочу зробити текстовий стиль для заголовка. Як ми вже говорили у попередньому відео про типографію, у текстових стилях визначено розмір шрифту, висоту рядка, товщину шрифта і так далі. Свій перший стиль я назву heading. Наступний стиль - це стиль для основного тексту. Назву його body.
І останній варіант стилів - це стилі для ефектів. Як бачите, ця кнопка має досить помітну тінь. Створю новий стиль і назвую його button shadow. Це буде стиль ефектів.
Тепер я покажу, як редагувати стилі через панель справа. Щоб краще було видно, я здублюю ось цей фрейм, щоб зміни застосовувались до обох фреймів одночасно. І тепер, якщо я хочу змінити колір акценту, то просто ось тут натискаю edit style, змінюю колір, або навіть можу додати новий шар з градієнтом. Як бачите, зміна застосовується до обох фреймів одночасно. Якщо я хочу змінити розмір заголовку, то так само, натискаю edit style і змінюю розмір.
Але інколи нам необхідно просто протестувати інший варіант стилю в одному місці. Для цього виділяємо елемент, який використовує стиль, і натискаємо detach style. Це дозволяє змінювати стиль тільки для цього елементу без змін для інших.
Таким чином, стилі дають велику свободу, але й велику відповідальність. Використовуйте їх, щоб полегшити роботу собі та розробникам. Коли ми передаємо наш проєкт розробникам, вони можуть використовувати ці стилі у своєму коді.
На цьому все, сподіваюсь, це відео було корисним. Ставте лайки, підписуйтесь на канал і діліться цим уроком з друзями-дизайнерами. Бажаю вам гарного дня і побачимось у наступному відео.