Стили в Фигме позволяют повторно использовать объекты и атрибуты интерфейса. Это дает возможность придерживаться одних шаблонов во всем проекте. Меняя стиль, обновления будут происходить во всех компонентах, в которых он применялся.
Итак, в каких случаях может понадобиться создать стиль? Ниже представлены примеры. Это сетки, цвета, обводки, и шрифты.
Первый пример – сетка. Может быть так, что вам понадобиться создать сетку не только для десктопа, но и для планшета или телефона. Чтобы не вводить вручную все настройки при добавлении нового экрана, можно воспользоваться готовым стилем сетки. Для этого выберите фрейм с сеткой и нажмите на вкладку в виде четырех точек. Далее нажмите на вкладку в виде «+», и
Затем появится панель, в которой вы можете дать название вашему стилю. После его сохранения стиль будет добавлен в список в разделе создания сеток. Если у вас будет много стилей, то можно воспользоваться поисковиком в этом разделе, чтобы найти необходимый вариант.
Таким же образом можно создать стиль для цветов. Кликните на фигуру с определенным цветом, далее в разделе «Fill» перейдите к настройкам цвета и нажмите на вкладку в виде четырех точек.
После этого подпишите цвет или оттенок, и сохраните его в стилях. Это применимо и к цветам обводкам.
Чтобы сохранить в стилях текст необходимого размера и шрифта, в разделе «Text» нажмите на вкладку в виде четырех точек, и в представленной панели выберите вкладку в виде «+».
Далее введите название вашего текста, и сохраните.
Независимо в каком разделе вы создаете стили, сохраняя их важно давать понятные названия, чтобы при работе с проектом, вам было проще ориентироваться.
Итак, в этом уроке мы рассмотрели, что такое стили, и как их использовать в работе.
Полезные ссылки:
- Бесплатный видеокурс по Figma от GeekBrains;
- Профессиональный курс Figma 2.0 для новичков от SkillBox;
- Полноценный онлайн курс по веб-дизайну с нуля от SkillBox.