Как собрать UI-kit в Figma
Недавно мы рассказывали, как UI-kit помогает поддерживать порядок в дизайне. Там мы делились советами, которые подойдут для работы в Figma, Sketch, и Adobe XD. Но команда Purrweb работает в Figma, и для этого сервиса у нас собрался целый гайд. Любители Figma, ловите полезности.
Ребятки, эта статья чудо.
Я все вот это пол года по крупицам собирал с курсов, с ютуба, статей всяких и просто изучая чужие дизайн-системы. Честно, очень тяжело было понять особенно как работает AL, а с этой статьей все встало на места (даже понял как статус бар запилить с лайном любой длинны, а раньше это делал ручками).
И даже тут узнал кучу нового про AutoLayout, например про автоспейс.
Если вам нужна кнопка другой высоты — придется создавать отдельный компонент.
Почему именно эта характеристика делает его новым компонентом?
Единственное что не понял...
Спасибо!
С точки зрения верстки, высота кнопки - это, как правило, постоянная величина. Т.е высота кнопки не имеет поведения. Высота задается как "размер шрифта (px) + высота паддингов (px)" (в Figma это параметр fix). Размер шрифта, как правило, тоже константа. Если он меняется - то это новая компонента.
Мы задаем высоту кнопок и шрифта постоянной, чтобы унифицировать дизайн.
А вот ширина кнопки - часто динамическая величина. Ширина кнопки, как правило, задается "100%" ( в Figma - Fill) . А ее размер ограничивается с помощью внешнего контейнера. Использование внешнего контейнера позволяет легко управлять ее размером в каждом кейсе изменения ширины. Не нужно лишний раз прописывать настройки для каждой отдельной кнопки.
На ширину влияет много факторов: длина текста, ширина экрана или блока, респонсив. Именно поэтому мы делаем ее динамической.
совсем необязательно должен быть новый компонент, в рамках одного родителя можно задать размерный ряд и доп параметры с помощью тех же самых вариантов и свойств