Как правильно именовать стили в Figma?

Question

[prostoprogrammist1]

Всем доброго времени суток!

Я начинающий UX/UI-дизайнер. По видео уроку сделал в Figma макет небольшого сайта. И появился вопрос: как правильно именовать стили? Например, что лучше Button/ColorPrimary или Blue/Base или Button/Background/Primary или Blue-Primary для цвета, FootnoteText или TextSmall для текста и т.д.? А также StyleName или style_name и т.д.?
Поделитесь, пожалуйста, своим опытом. Какого стиля именования придерживаетесь в повседневной работе?
Буду очень благодарен за ответы

P.S. Прикреплённое фото - это мой UI-kit для макета сайта из видео урока. Правильно ли я его сделал?

Answer 1

[Сергей delphinpro]

Как верстальщик ваших макетов скажу, - пофиг.
Главное чтобы именование было, чтобы я видел что это именно тот цвет (шрифт и т.д.), а не сравниал каждый раз пипеткой

Comments

[prostoprogrammist1]

Спасибо за ответ!

Answer 2

[Pavel Designer]

Делайте так как понятно вам или команде. Главное, чтобы просто было понятно где что и не забывать эти стили применять для удобной корректировки сразу во всем проекте.
Можно делить стили цветов по группам (Blue/Base, Blue/Dark, Blue/Accent, Blue/Link и т.п.), можно делать группы наоборот - Base/Blue, Base/Green, Secondary/Blue, Secondary/Green, Links/Active, Links/Visited и т.п. Можно еще как-либо более удобно под проект. Со стилями текста, эффектов и прочего аналогично.

В сети масса материалов по дизайн-системам, в том числе, с примерами. Посмотрите как сделано у других и поймете как нравится вам.