Как настроить и использовать стили в Figma
Как ни странно, стили придуманы не для того, чтобы упростить жизнь дизайнера (хотя и это тоже). Стили — это вообще чрезвычайно распространенная концепция в IT-производстве. Главный вывод из этого — структурировать и называть стили по смыслу и функции элементов, а не по внешним признакам.
#стили
#Figma
#дизайн
Три главных предмета в фокусе внимания
1
Существующие стили
Если проектируете нативное приложение или работаете в дизайн-системе, разберитесь в существующей системе стилей и используйте ее.
2
Логика использования
Стили — это не про внешний вид, а про смысл и функцию элемента.
3
Дерево стилей
В стилях полезно иметь порядок. Древовидная структура — лучший способ его навести и поддерживать.
Например
Хороший образец
Часть нашей нашей будущей дизайн-системы, которая управляет цветами в проектах. Выложим, когда сделаем публичной
Так делать не надо
Частично стили есть, частично нет.
Инструменты
Плагины для создания стилей
Мы не используем какой-то конкретный
Промышленные дизайн-системы
Смотреть, как сделано у Apple, Google, Microsoft
Google Translate
Называть стили простым английским языком
Песочница в Figma
Экспериментировать
Использование стилей выдает некоторую культуру дизайнера и его интегрированность в процесс IT-разработки. Самый простой и быстрый способ оценить IT-квалификацию дизайнера по его Figma-файлу, это посмотреть, как он использует стили.
Ольга Павлова, директор по развитию «Собаки Павловой»
5 советов,
как делать
хорошо
1
Начните с минимума
Не создавайте новых стилей без необходимости и на будущее. Исключение — если вы экспериментируете.
2
Всегда называйте стили по смыслу
Не называйте цвет (серый 50%), называйте использование (border).
3
Создайте палитру
Пусть стили ссылаются не на абсолютные цвета, а на вашу палитру. Покажем в образце.
4
Используйте стили не только для цвета
Как ни странно, многие дизайнеры игнорируют стили для шрифтов и эффектов.
5
Поглядите, как устроен css
И почитайте про препроцессор Sass (SCSS). Это поможет понять саму концепцию стилей, которая очень распространена в IT-производстве в целом. Стили придумала не Figma и не Word.