Душная Фигма: 2 Группировка объектов. Секции, Фреймы, Группы и Автолэйауты.
Всем привет!
Сегодня мы продолжим изучать Фигму. И в этой статье, наконец, перейдем к какой никакой практике.
Итак в первой статье, которая состоит из 2х частей, ознакомиться с которыми можно тут:
Душная фигма: 1.1 Панель настроек
Душная фигма: 1.2 Панель инструментов
В этих статьях мы изучили основные настройки, меню и инструменты программы.
Дальше предлагаю изучить то с чего начинается любой макет. Физически. Про идею, ресерч, и еще кучу этапов пока молчим.
Начинаем
Обычно все рассказывают о фреймах и группах, а автолейауты оставляют для “продвинутых”, я считаю что автолейаут это фрейм с пред-установленным поведением границы. Прокачанный способ объединения элементов
Группа, подстраивается под содержимое, из нее нельзя ничего достать перетаскиванием, нет функций обрезки содержимого, внутри нее нет ограничителей, группа не может существовать без контента
Фрейм — независимый элемент, группа зависит от содержимого
Фрейм, имеет заданные размеры, не подстраивается под контент, но есть такая функция, подстроить под содержимое. Можно использовать как маску. Можно настроить ограничители.
В работе я обычно использую фреймы и автолейауты, группы в меньшей степени
А недавно еще добавили секции, которые позволяют объединить фреймы в рабочие поля, тут тоже есть свои микро взаимодействия, которые отличают секцию от фрейма.
На этом в принципе можно заканчивать, или посмотрим подробнее?
В данной статье я выделил несколько параметров, которые помогут определить различия форматов объединения объектов.
Группа
Начнем с группы. Группа это самый базовый способ объединения элементов. Она многим знакома из абсолютно разных программ. Давайте посмотрим что такое группа в Фигме.
Для того чтобы ознакомиться с группой создадим 2 квадрата.
Выделим их любым знакомым способом(вы же умеете выделять объекты?) и попробуем взаимодействовать с тем что получилось.
Начнем с выделения, как вам выделять группу?
В целом группу довольно легко выделить, но не так просто выделить то что находится внутри группы. Исходя из этого первый вывод в том что в группу можно объединить то, с чем в последствии будем работать как с одним целым.
Дальше попробуем взаимодействовать с границами группы.
Если мы потянем за любую границу группы, мы заметим что содержимое группы так же меняет свой размер.(Ограничители стоят в состоянии Скейл, но о них позже, пока просто запомните).
Следующий критерий, взаимодействие с элементами внутри группы
Итак, чтобы выделить объект внутри группы, мы можем воспользоваться несколькими способами.
Выбрать группу, и в списке слоев выбрать нужный объект внутри группы.
Нажать на нужный объект 2 раза правой кнопкой мышки
Ну и самый комфортный вариант выбрать объект с зажатой клавишей CMD
После выделения мы можем переместить объект. Выделим и переместим объект, после чего выделим группу. Тут вы увидите что границы группы перестроились под перемещенный объект. Это говорит о том что у группы по сути нет своих границ, границы группы выражаются границами объектов которые находятся внутри группы.
Попробовав изменить размер, добавить объект или сделать что либо еще внутри группы, вы получите такой же эффект.
Есть один момент когда можно увидеть границы группы вне объекта, когда у один из объектов в группе сделать полностью прозрачным. Границы группы все равно будут учитывать данный объект. Но если убрать видимость объекта, он перестанет учитываться в группе. Этот момент схож с поведением объектов в коде.
Дальше рассмотрим добавление объектов внутрь группы
Выше мы уже указали что добавленные объекты будут менять границы группы. А как их можно добавить в группу?
Тут есть не так много способов.
Один из них, если объект будет новый, выделяем любой объект внутри группы, и нажимаем создать новый объект, текст, фигура, фрейм и создаем объект. Так как у вас был выделен объект внутри группы, новый объект так же появиться в группе.
Еще один способ, если объект уже есть на холсте, перетянуть его внутрь группы на панели слоев.
А так же исключение объектов из группы
В случае группы единственный способ достать объект из группы это вытащить его оттуда из панели слоев(так как обычно это долго, группу разбирают и потом собирают обратно)
Фрейм
Фрейм обладает более гибкими настройками, это наша рабочая зона. По сути это то с чего начинается макет. Также у фрейма самый большой список настроек в панели дизайна. Но начнем с начала.
Выделение фрейма
Тут все не так как было с группой. Если просто навести на фрейм вы не выделите фрейм, нужно навести рядом с названием фрейма, на уголок. Так же если навести на объект внутри фрейма, вы выделите объект, а не фрейм, как если бы вы выделяли группу. Но если навести внутрь фрейма и зажать CMD, можно выделить фрейм. Сейчас рассматриваем простой случай первой степени вложенности, фрейм внутри фрейма внутри фрейма не рассматриваем.
Так же если тянуть и выделять, то будут выделяться вначале объекты внутри фрейма, а сам фрейм выделиться когда выделение полностью закроет границы фрейма.
Взаимодействие с границами
Теперь перейдем к взаимодействию с границами фрейма.
Итак, мы выделили фрейм и начинаем взаимодействовать с его границами. По умолчанию поведение элементов внутри фрейма настроенно так, что если мы изменяем правую и нижнюю границу, размер фрейма меняется, объекты остаются на месте и не меняют размер. Но если менять левую и верхнюю границы, то объекты внутри как бы держатся за эти границы и тянутся вместе с фреймом.
Пока держим это поведение в уме, и принимаем что так оно пока и есть. Если честно, в большинстве случаев оно так и будет, я например меняю границы фрейма с зажатым CMD и пока пишу эти статьи понял что он у меня почти всегда зажат.
Так что держим в уме и идем дальше.
Взаимодействие с элементами внутри фрейма
Мы уже поняли что выделить объект внутри фрейма довольно просто. Что еще?
Попробуем переместить объект, недалеко, и посмотреть что будет.
Надеюсь вы не вытащили объект из группы, пока что рано.
А так же на панели дизайн стоит посмотреть включен ли параметр Clip content.
Если вы уже подвигали объект, вы поняли что границы свои фрейм не поменяет, да и вообще, ничего делать не будет, разве что обрежет объект по своим границам. Так же будет если менять размер объектов внутри.
Добавление объектов внутрь фрейма
В целом, с этим нет сложности, просто берем объект и переносим внутрь фрейма. Кстати, если вам не нужно добавлять объект во фрейм, зажмите пробел, перед тем как вести мышку над фреймом.
Исключение объектов из фрейма
Ну и тут тоже все просто, берем объект, выносим мышкой за границы фрейма и все, готово
Секция
Новый способ группировки который мы все так ждали, секция это что-то вроде фрейма, для фреймов. Сейчас поясню на примере взаимодействия
Выделение
Тут все как у фрейма, только название секции с обводкой изза чего в него проще попасть.
Взаимодействие с границами
Изменение границ, никак не влияет на элементы внутри секции так как у элементов нет ограничителей. В целом все схоже с фреймом
Взаимодействие с элементами внутри
Элементы легко выделить и переместить, что довольно удобно, но по сути так же как и во фрейме
Добавление объектов внутрь секции
Вот тут уже поинтереснее, еще отличия. Чтобы добавить объект внутрь секции, можно не только переносить объекты туда, но и перемещать границу секции на объект. Попробуйте поставить любой объект рядом с секцией и после этого подвинуть границу секции на этот объект. очень удобно.
Исключение объектов из фрейма
Все так же, нужно убрать объект из секции, передвиньте границу, или вытяните объект за границу.
Так же дополнительной особенностью, из-за чего секции нужны в работе можно отнести взаимодействие с прототипами, а точнее отсутствие взаимодействия. Таким образом можно прототипы собирать на отдельные секции.
Хотя, какие там прототипы, если вы только начинаете изучать фигму?
Автолейаут
Ну вот мы и добрались. Крутая и сложная штука. Как многие считают. Но как только мы ее освоим, вы будете все заворачивать внутрь автолейаутов. Так как это оптимальный вариант. Но не в этой статье, в этой статье просто обзор. Так же как мы не упоминали ограничители.
Выделение
Выделяется так же как и фрейм, тут отличий нет
Взаимодействие с границами
По умолчанию, взаимодействие с границами такое же как и у фрейма, но есть дополнительные настройки которые все меняют. Справа, где указывается размер, можно увидеть параметры, которые будут настраивать поведение автолейаута.
Взаимодействие с элементами внутри
Объекты внутри автолейаута легко выделить, а так же переместить. В отличии от фрейма и секции при перемещении объекта, если стоят стандартные настройки, АЛ схлопнется(потому что стоит режим Hug) Эти настройки, а так же настройки положения элементов внутри АЛ помогают настроить большинство возможных состояний
Добавление объектов внутрь группы
Добавлять новые объекты можно как и в любом фрейме. При добавлении новых объектов в АЛ, они добавляются с отступами и как бы раздвигают или подстраиваются к соседним элементам. На данном этапе, это основная информация, которая нужна об этом способе группировки
Исключение объектов из фрейма
Исключать объекты можно так же как из фрейма. В этом они схожи.
Заключение
Напоминаю про Телеграм, там можно обсудить все это дело.
Используйте группировку объектов правильно, и тогда ваш проект будет выглядеть чище.
В файле прикрепил пример, как можно использовать разные виды группировок, дублируйте себе, смотрите-разбирайте, повторяйте.
Хлопайте, если вам помогла эта статья и подписывайтесь, чтобы быть в курсе новых статей. Я пытаюсь их публиковать более систематизированно.
Дальше будем разбирать ограничители, так же отдельно обсудим тему автолэйаутов, копонентов и как этим пользоваться.
Если есть что добавить, пишите в ТГ
