Инструкция Выравнивание в Figma: Auto Layout

Ответы на эти и многие другие вопросы я постараюсь дать в этой статье. Начиная новый прототип, мы подключаем дубликат шаблонной библиотеки к рабочему https://deveducation.com/ файлу и сразу начинаем собирать экраны из готовых компонентов. Недостающие компоненты добавляем в библиотеку, лишние в конце работы удаляем.

Здесь мы создаем отступы между строками с несколькими атомными компонентами дизайна внутри. Невероятно пропорциональный neo-гротеск Objectivity (увы, русификации нет) сразу же поразил меня своей актуальностью. Alex Slobzheninov проделал колоссальную работу и разрешил бесплатное коммерческое использование. Мне сразу же захотелось что-то “задизайнить” на основе этого шрифта. Какое-то время я вертел его по артбордам в Figme, прежде чем понял “Это идеальный шрифт для веба! Видимо в тот момент и родился план создания системы именно для web.

Выравнивание в Figma: Auto Layout

Кроме того, все компоненты на странице очень гибкие и отзывчивые, и я могу использовать их во всех моих файлах дизайна. В случае каких-либо изменений в дизайне страницы, я могу обновить их в своей библиотеке, и она автоматически обновит все мои файлы дизайна. Продолжаем создавать собственную дизайн-систему в Figma. Мы поговорим о том, как я делаю компоненты для кнопок, инпутов, чекбоксов, радиобоксов, выпадающих списков и прочих элементов, которые часто встречаются в дизайне сайтов и интерфейсов. Когда у вас много auto layout, структура фреймов внутри может начать усложняться. Не бойтесь, есть несколько горячих клавиш, которые помогут вам с легкостью перемещаться по его дочерним элементам.

Удерживайте пробел, чтобы не размещать объекты внутри автоматического auto-layout. Этот совет позволяет объектам красиво располагаться за пределами фрейма auto-layout, что обычно невозможно, поскольку Figma не допускает отрицательных значений. У Роджи Кингаестьруководство на YouTube, где он объясняет этот хитрый трюк. Для этого создайте фрейм с нулевой высотой, поместите на него объекты, а затем установите высоту 0,001 для округления до 0. Удерживайте ПРОБЕЛ при размещении объекта внутри auto layout, чтобы расположить его так, как вам нужно, и избежать его автоматического размещения.

Теперь же появились “Секции”, которые созданы специально для организации элементов. Эти новые объекты похожи на фреймы, но с несколькими ключевыми отличиями как во внешнем виде, так и в поведении. Давайте рассмотрим, как они работают и, что более важно, как их использовать. Делаем экземпляр этого компонента и запаковываем его в еще один компонент. Переопределяем стили, чтобы добиться нужного вида элемента при наведении мышки (у меня задан цвет заливки и скрыта линия у родительского компонента). Далее мы рассмотрим различные формы ввода информации.

Чтобы работать быстрее, мы используем библиотеку компонентов. Организация подключаемых библиотек там реализована очень хорошо. Подход, в котором дизайн начинается с создания неделимых элементов, которые используются повторно и комбинируются между собой.

Мы их актуализируем в соответствии с новыми гайдлайнами и практическими возможностями разработчиков. Содержимое согласовано с разработчиками для Android и iOS. Шаблоны конкретны и предоставляют контекст для всех этих относительно абстрактных молекул и организмов. Шаблоны – это то место, где клиенты начинают видеть окончательный дизайн. Со временем повышается точность шаблонов и в итоге они становятся конечным результатом.

Новая функция Sections в Figma: что это такое и как ее использовать?

Все параметры передаются «родителю» и сразу наследуются остальными экземплярами. Подходит, если изменения произошли во всей дизайн-концепции. Компонент — это элемент, копии которого меняются вместе с ним. Например, поле ввода, аватар со статусом или меню.

Когда библиотека опубликована для команды, её компоненты появляются на вкладке Assets в левой панели. Добавлять всё, что встретится больше двух раз. Интерактивные элементы, иконки, слайдеры, тапбары, аватары пользователей, лэйауты экранов, меню и так далее. Сделайте пустой файл, который станет библиотекой, и наполняйте его компонентами.

Разместив кнопку, которая по умолчанию имеет обводку 4dp, можно выделить компонент Stroke и переключить через панель Instance скругление углов в меньшую или большую сторону. Это чуть более сложный способ, но позволяет хранить в отдельном мастер-компоненте разные виды скруглений. Самый простой способ — менять степень скругления через поле ввода в правой панели. Аналогичная схема применима и для текстовых полей, карточек или любых фоновых компонентов.

Что такое компонент Figma

К тому же их можно менять местами перетаскиванием или стрелочками на клавиатуре. А изменяя значения ограничителей в блоке Constraints, можно управлять тем, в какую сторону должны расталкиваться кнопки. Кнопку следует превратить в компонент, который мы будем использовать по всему макету. Вы можете добавлять один фрейм с Auto Layout в друго фрейм с указанным пэддингом, если родительский фрейм может вместить в себя дочерний.

• Параметры выравнивания доступны в окне инструментов в правой части экрана.
• Иногда он даже упорядочивал и аккуратно проименовывал слои и группы.
• Компонент — это элемент, копии которого меняются вместе с ним.
• За последние года полтора, я нашёл себя в создании и оптимизации дизайн-систем, а инструменты для дизайна начали подыгрывать мне и постоянно подкидывают новый функционал на изучение.
• Не бойтесь, есть несколько горячих клавиш, которые помогут вам с легкостью перемещаться по его дочерним элементам.

Это был вторничный совет о дизайне интерфейсов. Сегодня Фигма выкатила отличную фичу, которая упрощает в разы построение макетов для адаптации под устройства, переиспользование компонентов, и в работе в целом. В этом артборде настрой только Spacing между частями ячейки, разумеется переключи лэйаут по горизонтали, это же горизонтальный компонент. За последние года полтора, я нашёл себя в создании и оптимизации дизайн-систем, а инструменты для дизайна начали подыгрывать мне и постоянно подкидывают новый функционал на изучение. В этой статье я покажу хардкорное применение последнего нововведения в Figma –Auto layout. Canvas stackingБезусловно полезная функция, позволяющая задать порядок слоев во врейме.

Время — деньги, поэтому использование компонентов означает для клиентов экономию бюджета. Библиотека — это файл, где хранятся основные компоненты для проекта. Он точно такой же, auto layout в figma как файл с готовым дизайном, — отличается только назначением. Если нужно добавить в проект один из стандартных элементов, дизайнер не рисует его заново, а берёт из библиотеки.

Но не бойтесь, есть несколько сочетаний клавиш, которые помогут вам легко перемещаться по дочерним элементам фрейма. Используя функцию auto-layout и значение отступа «space between», довольно легко создать регулируемый компонент слайдера для диапазона значений, количества или индикатора выполнения. Посмотрите видео по ссылке выше, чтобы узнать, как это сделать. В приведенной выше анимации вы можете увидеть, как работает наша страница атомарного дизайна в режиме прототипа в Figma.

Кнопки без Auto Layout, которые можно масштабировать

Для случаев, когда прежний «родитель» ещё пригодится. На правой панели у экземпляров есть параметр Instance. Здесь нужный основной компонент можно выбрать из списка. Комбинируя описанные выше функции — вложенность и предоставление ссылок — мы можем показать с помощью секций, какие компоненты дизайна готовы, а какие — нет. Создадим вспомогательные компоненты-иконки для правой части чекбоксов и радиобоксов.

Центрируйте элементы с помощью заголовка

Auto Layout позволяет задавать правила для позиционирования элементов относительно друг-друга. Так, можно задать отступы от краев, расстояние между элементами и выравнивание. Чтобы ячейка была гибкой и при этом растягивалась от контента внутри, нужно правильно настроить контейнеры деталей, которые ты сделал на предыдущем шаге, тут и кроются мелкие фишечки. Есть масса механик ячейки, описать все не получится, но, думаю, этой основной механики будет достаточно на первое время. Сэкономьте время, скопировав стиль любого контейнера auto-layout с помощью сочетания клавиш OPTION + CMD / CTRL + C и вставив его с помощью OPTION + CMD / CTRL + V.

Вспомним, что в первой статье мы делали компонент плашки. Совмещаем нашу конструкцию с компонентом плашки и запаковываем в новый компонент selectlist/all. У плашки делаем видимой треугольник-стрелку сверху. Нам также понадобится компонент для прокрутки. Это 2 прямоугольника, совмещенные друг с другом. В моем варианте был использован Auto Layout на названии формы и тексте ошибки, чтобы текст ошибки мог сдвигаться, правее от названия.

Активность по табу и ошибочное состояние базового компонентаИтак, компонент готов. Я вынесла его отдельно, чтобы у нас была единая точка редактирования стиля для всех форм и чекбоксов — это довольно удобно. Сегодня мы рассмотрим, как отрисовать все эти состояния и легко переключаться между ними. Если всё сделано правильно, кнопки должны расталкивать друг друга.

Однако они не предназначены для выполнения этой функции, и поэтому с ними может быть довольно трудно работать. Совсем недавно в Figma появилась новая функция — Sections (или секции). Это небольшое, но важное дополнение, которое позволяет дизайнерам эффективнее организовать совместную работу и привести в порядок свои файлы. Принимаю пожелания, какие компоненты, часто используемые в веб-дизайне, можно было бы описать в будущих статьях. В качестве основы мы будем использовать компонент form_stroke/simple и form_stroke/active для активных состояний, чтобы их стиль наследовался самими чекбоксами и радиобоксами.

советов по работе с Auto-Layout в Figma

У теста внутри кнопки была понижена непрозрачность до 50%. Задаем стиль текста, зарезервированный в нашей дизайн-библиотеке специально для кнопок (смотри предыдущую статью). Создаем прямоугольник нужного размера, задаем скругление углов и прочие эффекты, если нужно. Подбираем цвет из палитры, которую мы создавали в предыдущей статье.

Для их создания нам понадобится небольшой вспомогательный компонент form_stroke/simple. Мы еще не раз применим в нашей библиотеке принцип наследования. Благодаря этому, изменения всей системы будут занимать минимум времени и наша дизайн-система будет очень гибкой и легко перестраиваемой под различные проекты в совершенно разных стилях. Для этого был создан новый стиль заливки с прозрачностью в 15%.