Как настроить и использовать стили в Figma
Как ни странно, стили придуманы не для того, чтобы упростить жизнь дизайнера (хотя и это тоже). Стили — это вообще чрезвычайно распространенная концепция в IT-производстве. Главный вывод из этого — структурировать и называть стили по смыслу и функции элементов, а не по внешним признакам.
Три главных предмета в фокусе внимания
-
Существующие стили
Если проектируете нативное приложение или работаете в дизайн-системе, разберитесь в существующей системе стилей и используйте ее.
-
Логика использования
Стили — это не про внешний вид, а про смысл и функцию элемента.
-
Дерево стилей
В стилях полезно иметь порядок. Древовидная структура — лучший способ его навести и поддерживать.
5 советов,
как делать хорошо
- Начните с минимума
Не создавайте новых стилей без необходимости и на будущее. Исключение — если вы экспериментируете.
- Всегда называйте стили по смыслу
Не называйте цвет (серый 50%), называйте использование (border).
- Создайте палитру
Пусть стили ссылаются не на абсолютные цвета, а на вашу палитру. Покажем в образце.
- Используйте стили не только для цвета
Как ни странно, многие дизайнеры игнорируют стили для шрифтов и эффектов.
- Поглядите, как устроен css
И почитайте про препроцессор Sass (SCSS). Это поможет понять саму концепцию стилей, которая очень распространена в IT-производстве в целом. Стили придумала не Figma и не Word.
Например
Проектировали с нуля и использовали минимальное количество стилей.
Цвета заданы через переменные, и интерфейс можно быстро перекрасить в любую палитру.
Хороший образец
Часть нашей нашей будущей дизайн-системы, которая управляет цветами в проектах.
Так делать не надо
Частично стили есть, частично нет.
Инструменты
Плагины для создания стилей
Мы не используем какой-то конкретный
Промышленные дизайн-системы
Смотреть, как сделано у Apple, Google, Microsoft
Называть стили простым английским языком
Песочница в Figma
Экспериментировать
Использование стилей выдает некоторую культуру дизайнера и его интегрированность в процесс IT-разработки. Самый простой и быстрый способ оценить IT-квалификацию дизайнера по его Figma-файлу, это посмотреть, как он использует стили.
Ольга Павлова, директор по развитию «Собаки Павловой»
Другие шпаргалки
Ищете подрядчика или команду?
Давайте обсудим вашу задачу.
Хотите у нас научиться?
1000+ упражнений по дизайну интерфейсов.
eduhund.com
Собака Павлова
На сайте есть упоминания социальных сетей, признанных на территории РФ экстремистскими организациями
Кое-что показываем и рассказываем на весь интернет
, интересное в 
, полезное на 
Санкт-Петербург • Подгорица • Хайфа
Адрес для почтовых отправлений: 194291, Санкт-Петербург, ул Руднева, д. 9 к. 3 литера А, кв. 169