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

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

Canvas stackingБезусловно полезная функция, позволяющая задать порядок слоев во врейме. Благодаря этому к ним успешно применяются все правила макета, что снижает количество манипуляций для создания объекта. Совместимость старого кода, написанного без constraints, и нового, написанного с constraints, часто может страдать из-за неправильного использования этого свойства. Однако они не предназначены для выполнения этой функции, и поэтому с ними может быть довольно трудно работать. Совсем недавно в Figma появилась новая функция — Sections (или секции).

Fill container→ Как вы уже догадались, растягивается, чтобы заполнить родительский контейнер по высоте или ширине, что очень важно для адаптивного поведения. “Autolayout” используется для адаптации макета к различным размерам экрана,ориентации и локализации. Чем чаще вы будете использовать горячие клавиши auto layout, тем быстрее их применение войдет у вас в привычку. Случайно создать противоречивые требования крайне auto layout в figma просто, если вы будете их менять в рантайме. Более того, это может быть не конечная ваша точка, когда требования станут приоритетными, а лишь промежуточная.

Идея макетов была популяризирована Брэдом Фростом в книге «Методология атомарного дизайна», и это довольно простая концепция. Для этого я использую не очень известный прием – просто скопируйте и вставьте коннектор из FigJam в Figma. После этой манипуляции все функции коннектора сохранятся, и вы сможете видоизменять его на свое усмотрение. Это очень удобный способ создания блок-схем для демонстрации и визуализации работы приложения. Чтобы облегчить процесс восприятия дизайна для клиента или коллеги, вы можете показать процесс работы программы, продемонстрировав блок-схемы.

Дополнительный настройки

Готовые компоненты из UI KIT не подходят для работы с макетами ещё и организационно. Мы стараемся добавлять в один компонент все его варианты, свойства и состояния, нам так при сборке удобнее. Нам нужно использовать Свойства https://deveducation.com/ компонента и функцию работы с текстовым слоем, которая позволяет не редактировать его внутри зависимых компонентов. Выберите слой меню и в правом верхнем углу на панели “Design” нажмите иконку “Абсолютное позиционирование” .

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

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

Библиотеки компонентов в Figma: что это, зачем нужно и как работает

Используйте «.» или «_» в названии, чтобы предотвратить их размещение как часть библиотеки компонентов. Для их создания нам понадобится auto layout в figma небольшой вспомогательный компонент form_stroke/simple. Мы еще не раз применим в нашей библиотеке принцип наследования.

• Он точно такой же, как файл с готовым дизайном, — отличается только назначением.
• Благодаря этому к ним успешно применяются все правила макета, что снижает количество манипуляций для создания объекта.
• К тому же их можно менять местами перетаскиванием или стрелочками на клавиатуре.
• По большей части функция Auto Layout довольно проста в использовании, но вы можете устроить беспорядок, если не будете осторожны.
• После прототипирования мы меняем оформление элементов и опять вносим изменения.

В итоге мы создали несколько состояний компонентов для инпутов и выпадающих списков. За счет праильного именования и наследования переключаться между этими компонентами очень просто. Чуть позже нам понадобится перевернутая иконка галочки для открытого списка. Так что сразу создадим и компонент для нее, отразив базовый компонент по-вертикали. Не забываем для вложенного компонента и текстов настраивать constraints. Например вводимый текст в форме и компонент form_stroke/simple имеют настройки left+right и top+bottom.

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

Figma представил Variants, который помогает комбинировать вариации компонентов

В нашей дизайн-системе все иконки заключены в контейнер. В частности, иконки 16px находятся внутри контейнера 24px. Во-первых, это позволяет нам полностью контролировать иконки по вертикали и горизонтали. Вы когда-нибудь использовали треугольную иконку, и она не выглядела достаточно выровненной? Во-вторых, это заставляет нас учитывать область нажатия кнопок при проектировании новых интерфейсов.

Ссылка на прототипИ снова кажется, будто нам предстоит очень много работы, но это не так. Мы будем руководствоваться теми же принципами, что и в предыдущем примере. Просто теперь у компонента строки появилось больше состояний.

Меню изменения размера: как раньше, только в новом месте и с новыми шорткатами

На скрине ниже видно, что отступы настроены по-разному, и это позволяет нам избежать костыльных методов настройки Auto Layout с пустыми фреймами для доп отступов. Грубо говоря Hugging — это нежелание элемента увеличиваться, а Compression-Resistance — нежелание уменьшаться. С помощью параметров CHCR можно к примеру изменять соотношение сжатия-расширения элементов в StackView в зависимости от размеров находящихся в нем элементов. Align — меню, которое позволит вам установить элементы четко по определенной линии, будь то с боку, вертикально по центру или снизу. После завершения этапа дизайна, когда подключаются программисты, и даже после сдачи, на поддержке макеты меняются.

Як створювати дизайн за допомогою Auto Layout та Variants у Figma

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

В других своих статьях я рассказываю, как создавать компоненты для поиска, списков и преимуществ. Все 4 иконки я именую по одному правилу через слеш, чтобы потом было удобно менять их в компоненте чекбокса-радиобокса. Используйте Auto Layout, чтобы быстро выровнять элементы. Не забываем использовать наши готовые стили заливок, эффектов, при необходимости добавлять в библиотеку новые стили, если они потребуются. Поэтому переделываем даже готовые стандартные компоненты под себя и заодно добиваемся полного соответствия с реальными компонентами из девелоперских библиотек. Так команда уверена, что в новом проекте никто не поставит навбар с неправильной для iOS высотой.

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

Когда нужно создать большое количество вариантов кнопок, полей ввода и так далее, вам может потребоваться куча драгоценного времени. Что если вы решите, что радиус скругления 8 пикселей выглядит лучше, чем 12, или захотите внести другие корректировки. Активность по табу и ошибочное состояние базового компонентаИтак, компонент готов. Я вынесла его отдельно, чтобы у нас была единая точка редактирования стиля для всех форм и чекбоксов — это довольно удобно.