Содержание
С помощью auto layout и значения “spacing between items”, довольно легко создать регулируемый компонент ползунка для диапазона значений, количества или индикатора выполнения. Выше указана ссылка на обучающее видео, чтобы можно было лучше понять, как это сделать. Я большой поклонник атомарного дизайна, потому что он хорошо работает для дизайнеров, и это приближает нас к подходу, который используют фронтенд — разработчики в своей работе. Хотя мы используем тот же подход, мы можем сотрудничать более эффективно. С появлением возможности объявлять глобально цвета, параметры текста и теней, скорость кастомизации в Figma существенно возросла.
Инструмент Auto Layout в Figma позволяет указывать отступы и выравнивать соседние модули автоматически. Рассмотрим, как пользоваться Auto Layout, на примере кнопки, модуля и страницы. Шаблон имеет раздел контента, в котором мы собираем все динамические элементы, и несколько компонентов, которые находятся на своих местах (хлебные крошки, заголовок раздела). Это компонент Auto Layout с несколькими компонентами атомных кнопок внутри. Для наших молекул мы используем только атомы, которые мы создали на предыдущем шаге, и некоторые базовые элементы, которые я создал в своей библиотеке (стили шрифта и цвета). Ниже вы можете увидеть страницу, которую я буду использовать в качестве примера.
Бесплатные иконки SVG и PNG
Теперь это гибко настраивается за пару кликов. Правую часть делаем так специально, чтобы ваши контролы не ехали вслед за растягивающимся текстом. Эта функция позволяет сделать выравнивание по линии текста, что удобно, если у вас несколько слоев текста с разным размером. Слева Text baseline alignment выключено, справа — включено. Параметры выравнивания доступны в окне инструментов в правой части экрана. Выберите фрейм, для которого назначено выравнивание, чтобы отредактировать их.
Здесь мы создаем отступы между строками с несколькими атомными компонентами дизайна внутри. Невероятно пропорциональный neo-гротеск Objectivity (увы, русификации нет) сразу же поразил меня своей актуальностью. Alex Slobzheninov проделал колоссальную работу и разрешил бесплатное https://deveducation.com/ коммерческое использование. Мне сразу же захотелось что-то “задизайнить” на основе этого шрифта. Какое-то время я вертел его по артбордам в Figme, прежде чем понял “Это идеальный шрифт для веба! Видимо в тот момент и родился план создания системы именно для web.
Мы их актуализируем в соответствии с новыми гайдлайнами и практическими возможностями разработчиков. Содержимое согласовано с разработчиками для Android и iOS. Шаблоны конкретны и предоставляют контекст для всех этих относительно абстрактных молекул и организмов. Шаблоны – это то место, где клиенты начинают видеть окончательный дизайн. Со временем повышается точность шаблонов и в итоге они становятся конечным результатом.
Новый компонент теперь наследует компонент базовой кнопки. Если мы что-то поменяем в базовой кнопке (кроме цвета, который мы переопределили), это сразу отразится на состоянии других кнопок, созданных на основе базового компонента кнопки. Теперь предыдущие компоненты с деталями закидываем в дополнительные контейнеры, и включаем лейауты. Основной headerЯ не добавил основной заголовок в окончательный шаблон, потому что компоненты в Figma не поддерживают фиксированное положение при прокрутке его элементов. Какой должна быть оптимальная дизайн-система в Figma? Как понятнее и удобнее организовать структуру внутри панели Instance?
Перестань рисовать ячейки — большой гайд по Figma Auto Layout
Если у вас уже есть компонент, попробуйте использовать эти сочетания клавиш при перетаскивании компонента для замены существующего. Rogie King использует тот же трюк, что и в 6 рекомендации. Он размещает внутри контейнера auto layout фрейм с фиксированной минимальной шириной и задает ему значение высоты, равное 0. Таким образом, можно зафиксировать минимальную ширину (или длину) контейнера auto layout, чтобы он не становился меньше, если текст недостаточно длинный.
Все параметры передаются «родителю» и сразу наследуются остальными экземплярами. Подходит, если изменения произошли во всей дизайн-концепции. Компонент — это элемент, копии которого меняются вместе с ним. Например, поле ввода, аватар со статусом или меню.
Процесс работы
Auto Layout позволяет задавать правила для позиционирования элементов относительно друг-друга. Так, можно задать отступы от краев, расстояние между элементами и выравнивание. Чтобы ячейка была гибкой и при этом растягивалась от контента внутри, нужно правильно настроить контейнеры деталей, которые ты сделал на предыдущем шаге, тут и кроются мелкие фишечки. Есть масса механик ячейки, описать все не получится, но, думаю, этой основной механики будет достаточно на первое время. Сэкономьте время, скопировав стиль любого контейнера auto-layout с помощью сочетания клавиш OPTION + CMD / CTRL + C и вставив его с помощью OPTION + CMD / CTRL + V.
Меняя instance подложки, получаем 2 дополнительных состояния выпадающего списка. Для ошибки надо дополнительно не забыть отобразить текст ошибки. Рисуем необходимые иконки, задаем им цвет из палитры. На скрине ниже видно, что отступы настроены по-разному, и это позволяет нам избежать костыльных методов настройки Auto Layout с пустыми фреймами для доп отступов.
Вспомним, что в первой статье мы делали компонент плашки. Совмещаем нашу конструкцию с компонентом плашки и запаковываем в новый компонент selectlist/all. У плашки делаем видимой треугольник-стрелку сверху. Нам также понадобится компонент для прокрутки. Это 2 прямоугольника, совмещенные друг с другом. В моем варианте был использован Auto Layout на названии формы и тексте ошибки, чтобы текст ошибки мог сдвигаться, правее от названия.
Чтобы новую библиотеку можно было использовать в проектах, её нужно опубликовать. Сделайте это на вкладке Assets, кликнув иконку-книгу и нажав Publish. — например, в зависимости от интерфейса (мобильный или десктопный) и типа (уведомления, контекстные меню и тому подобное).
Когда библиотека опубликована для команды, её компоненты появляются на вкладке Assets в левой панели. Добавлять всё, что встретится больше двух раз. Интерактивные элементы, иконки, слайдеры, тапбары, аватары пользователей, лэйауты экранов, меню и так далее. Сделайте пустой файл, который станет библиотекой, и наполняйте его компонентами.
- Самый простой способ — менять степень скругления через поле ввода в правой панели.
- Если мы что-то поменяем в базовой кнопке (кроме цвета, который мы переопределили), это сразу отразится на состоянии других кнопок, созданных на основе базового компонента кнопки.
- Для случаев, когда прежний «родитель» ещё пригодится.
- Основное рабочее пространство в Figma, обычно соответствующее одному экрану интерфейса.
- Для этого был создан новый стиль заливки с прозрачностью в 15%.
- Теперь предыдущие компоненты с деталями закидываем в дополнительные контейнеры, и включаем лейауты.
Этот совет позволяет размещать объекты за пределами auto layout, что, как правило, невозможно, потому что Figma не допускает отрицательных значений. Чем чаще вы будете использовать горячие клавиши auto layout, тем быстрее их применение войдет у вас в привычку. Если вы не знакомы с концепциями атомарного дизайна, я настоятельно рекомендую вам сначала прочитать больше об атомарном дизайне. Правильно организованная работа с библиотеками помогает оптимизировать процессы дизайнеров и удешевить производство, освободив время и мозги специалистов для более творческих задач. Библиотеки радикально улучшают работу над сложными проектами, убирая тупое копирование изменений по сотням экранов.
Для случаев, когда прежний «родитель» ещё пригодится. На правой панели у экземпляров есть параметр Instance. Здесь нужный основной компонент можно выбрать из списка. Комбинируя описанные выше функции — вложенность и предоставление ссылок — мы можем показать с помощью секций, какие компоненты дизайна готовы, а какие — нет. Создадим вспомогательные компоненты-иконки для правой части чекбоксов и радиобоксов.
Это настоящая страница, которую я разработал и использую в проекте, над которым я работаю на Chainstack.com. В этом посте я остановлюсь только на компонентах, которые используют Auto Layout. У нас в стилях стандартный шрифт, но шрифтовые стили разбиты на типы, от заголовка до маленькой подписи. Когда настанет время дизайна, мы заменим гарнитуру на нужную, подкорректируем кегль — и вуаля, на всех экранах нужный шрифт в правильном размере.
Но не бойтесь, есть несколько сочетаний клавиш, которые помогут вам легко перемещаться по дочерним элементам фрейма. Используя функцию auto-layout и значение отступа «space between», довольно легко создать регулируемый компонент слайдера для диапазона auto layout в figma значений, количества или индикатора выполнения. Посмотрите видео по ссылке выше, чтобы узнать, как это сделать. В приведенной выше анимации вы можете увидеть, как работает наша страница атомарного дизайна в режиме прототипа в Figma.
Центрируйте элементы с помощью заголовка
Сделаем еще один компонент с галочкой нужного нам цвета, используя компонент белой галочки. Компонент выпадающего списка будет создаваться на основе компонента поля ввода. Для этого мы разместим друг над другом этот компонент и иконку треугольника или головку, которая будет открывать саму выпадушку. В своих дизайнах мы можем не ограничиваться только прямоугольником. Например Это может быть и просто линия снизу компонента, которая позволит получить стильное поле ввода с подчеркиванием полей вместо прямоугольников.
Выравнивание в Figma: Auto Layout
Время — деньги, поэтому использование компонентов означает для клиентов экономию бюджета. Библиотека — это файл, где хранятся основные компоненты для проекта. Он точно такой же, как файл с готовым дизайном, — отличается только назначением. Если нужно добавить в проект один из стандартных элементов, дизайнер не рисует его заново, а берёт из библиотеки.
Три явных плюса от ультимейт компонента
Если десктопный интерфейс создают одни люди, а мобильный — другие, им лучше пользоваться разными библиотеками. Меньше компонентов в меню, меньше обновлений — никто не отвлекается на лишнее. Допустим, «Уведомления» — все уведомления помещают в него. Визуально так проще ориентироваться, но самое главное — в раскрывающемся списке компонентов появится одноимённый пункт. Создать фрейм можно с помощью символа решётки в верхней панели. Это прямоугольник, напоминающий окно в операционной системе.
Новая функция Sections в Figma: что это такое и как ее использовать?
После утверждения прототипа отдел «натягивает» дизайн. В библиотеке меняются шрифты и цвета, корректируется оформление компонентов. В итоге на всех экранах Крёстная фея Фигмы превращает все элементы в почти готовый проект.
