1.5Kпросмотров
30 июня 2023 г.
Score: 1.7K
Variables в Фигме
Давно работаю с дизайн-системами в Фигме. Вот сейчас начал применять в мэйновой системе вариэйблы и вылезло парочка косяков :) Не буду рассказывать тут базис о том как их использовать, про это есть ролик у фигмы. Поэтому к косякам. Страх
Я очень боялся применять вариэйблсы. Потому что миллион атомов казалось бы сложно заменять. Но прикол в том, что в моей системе большинство блоков компоненты и мастер-компонентны, то-есть в одном месте изменяешь и везде меняется, поэтому буквально дело 5 минут оказалось. Но тут большое но. У обычных дизайнеров или начинающих системы выглядят примерно как серверная... Никто тупо не будет применять эти вариэйблсы. Только если очень криво в части системы, а в другой забьет. Что приведет к различиям в системе — одна часть сделана на варах, другая без них... Это скорее проблема плохих дизайнеров, но все же можно было бы как-то облегчить процесс внедрения со стороны программной. Снова сделали неправильно
Нет возможности сделать одну переменную и другие под нее изменять. Как на картинке ↓ В чем собственно проблема. Вот смотрите, допустим вы стандартная дизайн-система, в которой ну скажем 20 стилей размера шрифта и столько же стилей лайн-хейта. Согласитесь, безумие каждый из стилей вручную задавать. Для этих целей у нормальных верстальщиков есть переменная в которую задается стандартный размер шрифта, а в других стилях шрифта эта переменная используется с некоторым коэффициентом. Или например сервис GridLover по такой же схеме работает, но тут еще и сеточка считается. Так же работает принцип 8px/4px сетки, то-есть берутся стандартные значения и домножаются на коэффициент. Благодаря этому подходу размеры не приходится задавать вручную и они гармонируют между собой. Считай автоматически создаются миллион размеров. И вариэйблсы не решают еще и проблемы с расстояниями, лайн-хейтом, закругляшками и т.п. В общем, не очень то переменные получились кажется) Лишь усложнили некоторые части дизайна. Не спорю, это крутой шаг в сторону автоматизации дизайна и упрощения, но пока результат сыроват.