Бесплатные курсы по it-профессиям на FreeTutorials.ru.

х
Наверх

Создание стилей в Figma

Стили в Фигме позволяют повторно использовать объекты и атрибуты интерфейса. Это дает возможность придерживаться одних шаблонов во всем проекте. Меняя стиль, обновления будут происходить во всех компонентах, в которых он применялся.

Итак, в каких случаях может понадобиться создать стиль? Ниже представлены примеры. Это сетки, цвета, обводки, и шрифты.

создание стилей в FigmaПервый пример – сетка. Может быть так, что вам понадобиться создать сетку не только для десктопа, но и для планшета или телефона. Чтобы не вводить вручную все настройки при добавлении нового экрана, можно воспользоваться готовым стилем сетки. Для этого выберите фрейм с сеткой и нажмите на вкладку в виде четырех точек. Далее нажмите на вкладку в виде «+», и  

создание стиля сетки в FigmaЗатем появится панель, в которой вы можете дать название вашему стилю. После его сохранения стиль будет добавлен в список в разделе создания сеток. Если у вас будет много стилей, то можно воспользоваться поисковиком в этом разделе, чтобы найти необходимый вариант.

добавление стиля и выбор названия стиля в FigmaТаким же образом можно создать стиль для цветов. Кликните на фигуру с определенным цветом, далее в разделе «Fill» перейдите к настройкам цвета и нажмите на вкладку в виде четырех точек.     

создание стилей цвета в FigmaПосле этого подпишите цвет или оттенок, и сохраните его в стилях. Это применимо и к цветам обводкам.

Создание стиля оттенка в FigmaЧтобы сохранить в стилях текст необходимого размера и шрифта, в разделе «Text» нажмите на вкладку в виде четырех точек, и в представленной панели выберите вкладку в виде «+». 

сохранение стиля текста в FigmaДалее введите название вашего текста, и сохраните. 

сохранение стиля текста в FigmaНезависимо в каком разделе вы создаете стили, сохраняя их важно давать понятные названия, чтобы при работе с проектом, вам было проще ориентироваться.  

Итак, в этом уроке мы рассмотрели, что такое стили, и как их использовать в работе. 


Полезные ссылки:

Дата размещения/обновления информации: 29.04.2021 г.
Сообщить об ошибке
Оставить свой комментарий