В прошлой статье мы создавали стили для текста, заливок, стили теней, а также компонент для плашек. По сути, я скруглил края аватарки в левой части, добавил кнопку (тоже на лэйаутах) в правую часть, и ячейка уже подходит под другое приложение. Сэкономьте несколько кликов мышью, набрав «auto» в поле значения интервала, чтобы установить для контейнера значение «space between». Когда вы активировали у фрейма функцию Auto Layout, все объекты внутри начали подчиняться новым правилам и выстроились в линию. Кнопка сама адаптируется под длину текста благодаря параметру Resizing— изменение размера. По умолчанию Figma вResizing использует свойство Hug contents— форма фрейма с активной функцией Auto Layout подстраивается под длину и высоту содержимого.

Этот совет позволяет размещать объекты за пределами auto layout, что, как правило, невозможно, потому что Figma не допускает отрицательных значений. Чем чаще вы будете использовать горячие клавиши auto layout, тем быстрее их применение войдет у вас в привычку. Если вы не знакомы с концепциями атомарного дизайна, я настоятельно рекомендую вам сначала прочитать больше об атомарном дизайне. Правильно организованная работа с библиотеками помогает оптимизировать процессы дизайнеров и удешевить производство, освободив время и мозги специалистов для более творческих задач. Библиотеки радикально улучшают работу над сложными проектами, убирая тупое копирование изменений по сотням экранов.

• Теперь у нас есть доступ к функции Sections, которая уже давно была доступна в FigJam.
• Библиотеки компонентов Figma — удобный способ хранить заготовки для интерфейсов, а также делиться ими с командой и всем миром.
• Какое-то время я вертел его по артбордам в Figme, прежде чем понял “Это идеальный шрифт для веба!
• Количество экранов среднего по сложности приложения может быть более 200.
• По умолчанию Figma вResizing использует свойство Hug contents— форма фрейма с активной функцией Auto Layout подстраивается под длину и высоту содержимого.
• Название и ошибка форм в нарисованном мною варианте привязаны к верхнему краю.

Исходный компонент называется основным , его копии — экземплярами . Если каждую кнопку на сайте рисовать по отдельности, жизнь веб-дизайнера превратится в ад. Чтобы этого не произошло, в Figma есть компоненты.

Адаптивность всё ближе к Figma — обновление Auto Layout

Это базовый компонент кита, который покрывает большинство кейсов. Если мне понадобится что-то добавить, я добавлю, а если нужно сделать редизайн общего стиля, то кастомизирую детальки компонента и вуаля. Если мне понадобится что-то добавить, я добавлю, а если нужно сделать редизайн общего стиля, то кастомизирую детальки компонента — и вуаля. С текстовыми контейнерами дела обстоят поинтереснее, их нужно сделать столько, сколько у нас размерностей левой части. В моей демке есть маленькая иконка, средняя картинка и большая картинка, поэтому я сделал три контейнера, обычно больше и не требуется.

С помощью auto layout и значения “spacing between items”, довольно легко создать регулируемый компонент ползунка для диапазона значений, количества или индикатора выполнения. Выше указана ссылка на обучающее видео, чтобы можно было лучше понять, как это сделать. Я большой поклонник атомарного дизайна, потому что он хорошо работает для дизайнеров, и это приближает нас к подходу, который используют фронтенд — разработчики в своей работе. Хотя мы используем тот же подход, мы можем сотрудничать более эффективно. С появлением возможности объявлять глобально цвета, параметры текста и теней, скорость кастомизации в Figma существенно возросла.

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

Это настоящая страница, которую я разработал и использую в проекте, над которым я работаю на Chainstack.com. В этом посте я остановлюсь только на компонентах, которые используют Auto Layout. У нас в стилях стандартный шрифт, но шрифтовые стили разбиты на типы, от заголовка до маленькой подписи. Когда настанет время дизайна, мы заменим гарнитуру на нужную, подкорректируем кегль — и вуаля, на всех экранах нужный шрифт в правильном размере.

Наряду с наследованием, экземпляры можно изменять напрямую, не разрывая при этом связь с «родителем». Например, сделать второй квадрат сиреневым, а третьему добавить обводку и растянуть. Автор статей о веб-дизайне и веб-разработке с неразделённой любовью к программированию. Всякий раз, когда я делился с разработчиком ссылкой на дизайн, я мог отправить только ссылку на первый фрейм, весь файл или на страницу. Это позволяет вам выйти из сценария и снова войти в него в той же точке без необходимости создавать какие-либо причудливые связи в прототипе.

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

Так легко бывает не всегда, но основной объём черновой работы ускоряется, чтобы можно было быстрее начать шлифовку. Из компонентов интерфейс собирается как конструктор. Заготовки в виде миниатюр расположены в левой панели, откуда их перетаскивают в проект. Так можно быстро переключаться, например, с одного стиля на другой.

Теперь это гибко настраивается за пару кликов. Правую часть делаем так специально, чтобы ваши контролы не ехали вслед за растягивающимся текстом. Эта функция позволяет сделать выравнивание по линии текста, что удобно, если у вас несколько слоев текста с разным размером. Слева Text baseline alignment выключено, справа — включено. Параметры выравнивания доступны в окне инструментов в правой части экрана. Выберите фрейм, для которого назначено выравнивание, чтобы отредактировать их.

примеров хорошей типографики в веб-дизайне

Сделаем еще один компонент с галочкой нужного нам цвета, используя компонент белой галочки. Компонент выпадающего списка будет создаваться на основе компонента поля ввода. Для этого мы разместим друг над другом этот компонент и иконку треугольника или головку, которая будет открывать саму выпадушку. В своих дизайнах мы можем не ограничиваться только прямоугольником. Например Это может быть и просто линия снизу компонента, которая позволит получить стильное поле ввода с подчеркиванием полей вместо прямоугольников.

Инструмент Auto Layout в Figma позволяет указывать отступы и выравнивать соседние модули автоматически. Рассмотрим, как пользоваться Auto Layout, на примере кнопки, модуля и страницы. Шаблон имеет раздел контента, в котором мы собираем все динамические элементы, и несколько компонентов, которые находятся на своих местах (хлебные крошки, заголовок auto layout в figma раздела). Это компонент Auto Layout с несколькими компонентами атомных кнопок внутри. Для наших молекул мы используем только атомы, которые мы создали на предыдущем шаге, и некоторые базовые элементы, которые я создал в своей библиотеке (стили шрифта и цвета). Ниже вы можете увидеть страницу, которую я буду использовать в качестве примера.

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

Первый слой помогает нам создавать отступы вокруг контента. Я какое-то время играл с компонентами Figma Auto Layout. Здесь я покажу, как создать полностраничный компонент, используя Auto Layout в Figma.

С легкостью перемещайтесь по компонентам фреймов auto-layout

Глобальные стили позволяют быстро поменять шрифт в сотнях объектах, изменить цветовую схему и, фактически, получить новый стиль. Раньше дизайнеру достаточно было просто рисовать и двигать пиксели. Иногда он даже упорядочивал и аккуратно проименовывал слои и группы. Потом появились символы и дали полуавтоматизацию процессов. Сейчас пришли компоненты и изменения можно транслировать автоматически в разные фрагменты артбордов, разбросанные по всей дизайн-системе. Применение компонентов изменило и сам подход к визуальной разработке.

Чтобы новую библиотеку можно было использовать в проектах, её нужно опубликовать. Сделайте это на вкладке Assets, кликнув иконку-книгу и нажав Publish. — например, в зависимости от интерфейса (мобильный или десктопный) и типа (уведомления, контекстные меню и тому подобное).

Если десктопный интерфейс создают одни люди, а мобильный — другие, им лучше пользоваться разными библиотеками. Меньше компонентов в меню, меньше обновлений — никто не отвлекается на лишнее. Допустим, «Уведомления» — все уведомления помещают в него. Визуально так проще ориентироваться, но самое главное — в раскрывающемся списке компонентов появится одноимённый пункт. Создать фрейм можно с помощью символа решётки в верхней панели. Это прямоугольник, напоминающий окно в операционной системе.

Как использовать Auto Layout (с новой панелью)

И, возможно, рассмотрим некоторые готовые темплейты для landing pages. Обсудим их состав и гибкость изменения блоков, чтобы подгонять под любые нужды и цели… Подписывайтесь, если интересно. Открыв панель активов (используя option / alt + 2 или shift + I), вы можете перетащить экземпляры компонентов на холст.

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

Базовые компоненты для iOS и Android имеют различия. Одних гайдов и официальных UI https://deveducation.com/ KIT категорически не хватает. Она содержит типовые часто используемые компоненты.

Нажмите SHIFT + I, чтобы активировать меню быстрой вставки. Основное рабочее пространство в Figma, обычно соответствующее одному экрану интерфейса. Здесь используется как пространство для размещения компонентов одного типа. Небольшое отличие от фреймов заключается в том, что у вас не получится вложить секцию в них или в существующие группы (но секции можно сгруппировать). Поскольку сама иконка довольно мелкая, мы переопределим радиус скрепления углов прямоугольника в этих компонентах для чекбоксов, настроив нужный нам вид. Cоздадим новый компонент для чекбоксов и радиобоксов.

Меняя instance подложки, получаем 2 дополнительных состояния выпадающего списка. Для ошибки надо дополнительно не забыть отобразить текст ошибки. Рисуем необходимые иконки, задаем им цвет из палитры. На скрине ниже видно, что отступы настроены по-разному, и это позволяет нам избежать костыльных методов настройки Auto Layout с пустыми фреймами для доп отступов.