Что такое фрейм в figma
Как объединить в фигме: элементы, слои, фигуры. 4 лучших способа.
Сегодня расскажу как объединить в фигме (Figma). Вы узнаете 4 простых способа, как объединять элементы, слои, векторные фигуры, объекты и т.д. Рассмотрим как сгруппировать элементы с помощью инструмента группа «Group» и фрейм «Frame». Также поговорим про «Union selection» и «Flatten selection».
Как объединить элементы в группу в фигме
Чтобы объединить элементы в группу (сгруппировать их) нажмите на комбинацию горячих клавиш «Ctrl + G». В панели слоёв вы можете увидеть иконку группы у этих элементов. Если нажать на стрелку напротив группы в слоях, то сможете увидеть все элементы, которые есть внутри.
Объединение элементов в Figma с помощью фрейма
Вы можете объединить элементы с помощью фрейма. Для того, чтобы сделать фрейм вокруг элементов, выберите его в панели инструментов сверху и нарисуйте его вокруг нужных объектов. Также для создания фрейма можете воспользоваться горячими клавишами «Ctrl + Alt + G»
Как разгруппировать в фигме
Чтобы разгруппировать элементы из группы или фрейма в фигме нажмите на клавиатуре 3 клавиши «Ctrl + Shift + G». Также можно нажать на правую клавишу мыши и выбрать пункт «Ungroun selection».
Объединяем векторные фигуры с помощью «Union selection»
Чтобы объединить векторные фигуры и элементы с помощью функции Union selection, выберите 2 или более векторных элемента. Сверху где есть иконка «Boolean Groups» выберите пункт «Union selection».
Объединение элементов в фигме с помощью «Flatten seleciton»
Для объединения элементов можно воспользоваться функцией Flatten selection. Для этого выберите нужные элементы и выберите эту надпись из выпадающего списка сверху.
Отличия «Union selection» и «Flatten seleciton» в Figma
При группировке элементов с помощью функции «Union selection», вы сможете редактировать фигуры стандартным образом. Например если создадите прямоугольник с помощью стандартного инструмента «Rectangle», то его можно скруглять с помощью четырёх точек на углах.
Если будете редактировать векторные элементы в группе «Flatten selection», то будут появляться векторные точки. С их помощью можно изменять размеры элементов.
Заключение
В этой статье мы поговорили как объединить в фигме любые элементы слои, фигуры и т.д. Вы узнали о 4 методах как это сделать. Если у вас есть вопросы, то обязательно напишите их ниже в комментариях.
Фреймы и слайсы в Figma
В этом уроке мы рассмотрим, что такое фреймы и слайсы. Находятся эти функции в верхней панели меню. В прошлом уроке вкратце упоминалось о фрейме, но сейчас мы рассмотрим эту тему более подробно. Работая в других программах, например, в Photoshop вам скорее всего знакома функция Artboard (монтажная область). В Figma эта функция представлена в виде Frame (фрейма), что означает рамка или кадр. Отличие в том, что, создавая монтажную область, вся работа осуществляется в ней за счет создания разных групп. Отличие возможностей Figma в том, что создается фрейм, внутри которого можно добавлять другие фреймы, за счет своей системы координат. Это дает возможность создавать адаптивный дизайн под разные устройства.
Итак, для создания фрейма можно воспользоваться вкладкой в меню. В таком случае вы можете сами задать размеры фрейма в правой части меню.
Если вы хотите адаптировать фрейм под определенное устройство, например, айфон или планшет, то нажмите горячую клавишу «F». В левой части появится список разрешений, которые используются в разных устройствах. Здесь также содержатся шаблоны фреймов для постов в социальных сетях.
После выбора подходящего размера фрейма, вы можете менять его формат в левой части переключая между Portrait и Landscape. То есть это поможет вам при создании дизайна сайта, делать его адаптивным. Например, первый фрейм может быть для компьютерной версии сайта. Затем как мы рассмотрели в предыдущем уроке при помощи клавиши «Alt» можно сделать точную копию фрейма и изменить его формат под мобильное устройство. Удобство в том, что одновременно можно создавать сразу несколько версий сайта.
Если что-то создать в рабочей области фрейма, то есть несколько вариантов это объединить, создав одну группу. Используя горячую клавишу «F» можно создавать дополнительные фреймы внутри фрейма. Горячая клавиша для создания группы ⌘ + G (Mac) или Ctrl + G (Win).
В левой части интерфейса можно увидеть, что внутри основного фрейма у вас находятся дополнительные рамки. Вы можете выделить необходимые вам элементы при помощи мыши, или выбрав в левой части меню рамки при помощи клавиши «Ctrl». Выделив интересующие вас объекты, вы можете создать группу. Это делается комбинацией ⌘ + Opt + G (Mac) или Ctrl + Alt + G (Win).
Основное отличие фрейма от группы – то что при смене размеров фрейма, размер находящихся внутри объектов меняться не будет, если конечно вы не редактировали настройки в параметрах содержания. Если фрейм станет меньше размеров объекта, то они попадут под обрезку. На макете их видно не будет.
Что касается группы, то меняя ее размер, будет меняться размер всего содержимого в ней. Так как границы группы зависят от содержания, то они упираются в крайние точки, в то время как границы фрейма могут находиться где угодно.
Для чего создавать группы объектов? Это полезно в том случае, если вы хотите объединить похожие элементы для управления ими. Это могут быть логотипы компании, которые должны быть вместе. Поэтому группировка этих элементов позволит по одному щелчку на один из логотипов выделить все сразу и перемещать их на холсте. Для выбора конкретного элемента из группы, необходимо кликнуть по нему двойным щелчком мыши.
Slice (слайсы) – переводятся как срезы, и имеют горячую клавишу «S». Данный инструмент позволяет выделять произвольную область фрейма и экспортировать ее как изображение в форматах JPG, PNG или SVG.
Эта функция используется нечасто, тем не менее стоит рассмотреть, как она работает. Выделяя какой-нибудь объект в фрейме при помощи Slice, появится срез, размер которого вы сможете регулировать. В левой панели слоев вам будет доступен список этих срезов.
В левой части настроек будет функция экспорта, радом с которой есть вкладка в виде плюсика. Нажмите на него, и вы загрузите то, что выделено слайсом.
Итак, из этого урока вы узнали, что такое фреймы и слайсы, а также как используются эти инструменты на практике.
Полезные ссылки:
Zero-pixel Frame in Figma | Нулевой фрейм в фигме
Думаю, что многие из вас сталкивались с ограниченность autolayout в Figma. Некоторые задачи невозможно решить с помощью стандартного функционала автолейаута. Ярким примером может стать один из видов floating-label. Он, находясь на границе инпута в активном состоянии, нарушает все законы физики автолейаута. Здесь важно понимать, что само поле ввода должно легким движением руки растягиваться под сетку или по ходу ввода текста. То есть, мы точно знаем, что нужен autolayout. Вместе с ним мы не можем использовать элемент, выходящий за его границы. Что делать в такой ситуации? Здесь-то и приходит на помощь тот самый костыль, о котором пойдет речь ниже.
Что такое нулевой фрейм
Нулевой фрейм в Figma — это фрейм размера 0px на 0px. Фактически, это контейнер, которого нет. Несмотря на это, мы можем манипулировать объектами внутри него.
Где мы можем его применить
Во-первых, мы можем его использовать для ограничения минимальной высоты или ширины элемента. Считай, «min-width» или «min-height» из css. Оригинальные инструменты в фигме не позволяют задавать этот тип высоты и ширины. Я использую этот костыль, в том числе, в степпере. Степпер, независимо от количества контента, должен иметь минимальную высоту. В примере она составляет 100px [смотри пример №1].
Во-вторых, для наложения одного элемента autolayout на другого. Ярким примером тому может стать кнопка «добавить». По факту она находится между контентной частью и меню-навигацией, но фактически мы ее видим поверх контента [смотри пример №2].
В-третьих, для выноса элементов за границы autolayout. С этим я уже приводил пример выше — floating-label, который находится на границе поля ввода [смотри пример №3].
Как его создать
1. Создайте обычный фрейм;
2. Установите для него высоту или 0,001 [или и то, и другое];
3. Снимите галочку с Clip content [если хотите помещать внутрь объекты].
Как переместить объект внутрь нулевого фрейма
У вас могут возникнуть трудности с помещением элементов внутрь этого контейнера. Его же почти нет, и попасть в него через drag&drop очень тяжело. Я решаю эту проблему, перемещая объекты в левом меню слоев.
Примеры использования
1. Примером, когда нужно задать минимальную высоту или ширину может служить степпер. Он обхватывает контент по высоте. Если мы введем длинный заголовок, линия растянется вместе с расстоянием между шагами. Если не использовать нулевой фрейм, шаг будет слишком близко к остальным, и это смотрится вычурно.
2. Давайте теперь рассмотрим пример, когда нам нужно поверх контента разместить объект. Допустим, у нас есть часть экрана мобильного телефона, в которой располагается контент и меню-навигация. Нам нужно вставить кнопку «+» или «добавить». Если мы просто поместим ее в автолейаут, она встанет куда-то под контент. Поэтому под него мы ставим нулевой фрейм, а внутрь кладем кнопку. Не забудьте отключить свойство Clip Content. Теперь мы можем двигать ее, куда захотим, пока она стоит в нулевом фрейме.
3. Аналогичным образом работает вынос объекта за границы автолейаута, либо размещение поверх его границ. Ярким примером служит «Floating Label» или заголовок в полях ввода, который наезжает на рамку при вводе текста. В своей практике я ставлю нулевой фрейм над контентной частью и кладу в него заголовок. Им же можно задать полю минимальную ширину.
Стоит учесть
Выставляйте значение высоты и ширины с тремя знаками после запятой. Figma не округляет значения с одним или двумя числами после запятой. Поэтому еcли указать 0,01px, вы получите соответствующее значение. Если указать 0,001px, Figma округлит это значение до нуля.
Что касается перемещения самого нулевого фрейма, постарайтесь создавать его близко к месту использования. Не создавайте его на противоположном конце холста от нужного вам объекта. Это может усложнить перенос.
Если растягивать компонент с z-px, внутри которого объект большего размера, объект тянется непропорционально зеро-пискелю. То есть, если у нас есть ячейка таблицы, внизу которой стоит бордер, бордер может уехать дальше границ при растягивании. Либо он может стать меньше по ширине, чем само поле. Лечится просто:
1) Определите минимальную ширину или высоту поля, подстройте полоску под этот размер.
2) Общему контенйнеру задайте свойство Clip сontent. Теперь части объектов, выходящие за его границы, скрываются.
Для того, чтобы не потерять созданный контейнер, его можно поместить в специально отведенную область. Например, это может быть другой фрейм с обводкой.
Еще один совет. К этому фрейму можно применить стиль или сделать его мастер-компонентом, а в описании указать «0 пкс» или «zero», или все, что «душе угодно». Таким образом, его можно будет легко найти через поиск компонентов или плагины. Но, в таком случае, вам придется его детачить каждый раз.
Для быстрого поиска копий нулевого фрейма подойдет плагин Similayer.
На этом все. Я более подробно постарался рассказать о нулевом фрейме в формате видео вот тут. Надеюсь, эта статья была вам полезна. Буду рад обратной связи. :))
Как и почему стоит начать работать с Figma
Этой записью мы открываем текстовый курс для тех, кто хочет освоить на начальном уровне популярнейший дизайнерский инструмент Figma. Весь курс в видеоформате вы можете бесплатно пройти на GeekBrains. Преподаватель — Илья Полянский, ведущий дизайнер цифровых продуктов в «Почте России».
Почему стоит выбрать редактор Figma?
Инструмент для дизайнера должен обладать широкой функциональностью и при этом быть доступным и понятным. Figma — идеальный вариант! Её основные преимущества:
Теперь, когда мы убедились, что Figma стоит того, чтобы её изучать, — пора приступить к работе!
Начало работы с Figma
Шаг 1. Регистрация:
Остаётся только скачать десктопную версию приложения.
Шаг 2. Загрузка приложения Figma:
Ура! Теперь мы готовы начать работу. Запускаем приложение и авторизуемся через браузер (тем же способом, которым зарегистрировались) и приступаем к первому уроку.
Первый урок по элементам интерфейса
Для начала рассмотрим работу Swatch Library, библиотеки цветов. Узнаем, как её создать, правильно настроить, подобрать цвета и начать с ней работу.
Ранее мы установили и запустили приложение Figma. Вот что мы должны увидеть:
Создаём новый проект, нажав на плюсик в левом верхнем углу, и сразу даём ему удобное название. Далее раскрываем список страниц в левом верхнем углу и называем первую страницу Swatch Library. Основной принцип использования страниц в Figma — разделение проекта на функциональные части. Но мы будем размещать на каждой странице отдельное задание.
Инструменты Figma
Фреймы
Инструмент, который нам сегодня пригодится, — фреймы.
Фрейм — основной элемент дизайна в Figma. Это законченный документ, который может быть страницей сайта или экраном мобильного приложения, объединяющим объекты.
Вы можете задать размер фрейма самостоятельно или выбрать готовые размеры экранов популярных устройств в панели инструментов справа.
Векторные формы
Ещё один инструмент, который мы сегодня будем использовать — векторные формы. Создавайте векторные объекты инструментом Shape Tool. С его помощью можно отрисовывать элементы интерфейса — в форме прямоугольников, линий, треугольников, стрелок, кругов, звёзд.
С чего стоит начать работу над проектом
Итак, приступаем. Создаём фрейм Desktop 1440×1024, добавляем форму прямоугольника размером 128х128, настраиваем оттенок и прозрачность в панели инструментов справа.
Создаём свою палитру цветов, дублируя первую форму сочетанием клавиш Ctrl+D.
Цвета выбираем произвольно или пипеткой, чтобы получить лучшее сочетание оттенков.
Когда вся палитра готова, сохраняем получившиеся цвета — сможем их использовать потом.
Для этого нажимаем на иконку Style на панели инструментов и через + сохраняем наши цвета с понятными вам названиями. Первая часть названия будет обозначать категорию цвета, а вторая, после слеша, будет его именем. Даём названия каждой группе цветов и получаем библиотеку.
Теперь с помощью библиотеки мы можем быстро создать фигуру или текст необходимого нам цвета.
Представим новую задачу: клиенту понравились цвета на какой-то картинке и нам необходимо их повторить. Легко! Вставляем картинку сочетанием клавиш Ctrl+Shift+K, создаём фигуры, которым передадим цвета, и с помощью пипетки идентифицируем их.
Усложним задачу: добавим градиент. Создаём ещё один ряд фигур, открываем палитру цветов и выбираем тип заливки Linear. Далее пипеткой выбираем верхний и нижний край градиента и настраиваем 100% прозрачность с обоих краёв.
Градиенты, как и обычные цвета, можно добавить в библиотеку. Если нужно изменить направление градиента, достаточно скорректировать положение направляющей линии.
Мы создали нашу первую библиотеку цветов, научились делать градиенты и добавлять их в библиотеку. Начало положено! Увидимся в следующих частях курса.
Этой записью мы открываем текстовый курс для тех, кто хочет освоить на начальном уровне популярнейший дизайнерский инструмент Figma. Весь курс в видеоформате вы можете бесплатно пройти на GeekBrains. Преподаватель — Илья Полянский, ведущий дизайнер цифровых продуктов в «Почте России».
Почему стоит выбрать редактор Figma?
Инструмент для дизайнера должен обладать широкой функциональностью и при этом быть доступным и понятным. Figma — идеальный вариант! Её основные преимущества:
Теперь, когда мы убедились, что Figma стоит того, чтобы её изучать, — пора приступить к работе!
Начало работы с Figma
Шаг 1. Регистрация:
Остаётся только скачать десктопную версию приложения.
Шаг 2. Загрузка приложения Figma:
Ура! Теперь мы готовы начать работу. Запускаем приложение и авторизуемся через браузер (тем же способом, которым зарегистрировались) и приступаем к первому уроку.
Первый урок по элементам интерфейса
Для начала рассмотрим работу Swatch Library, библиотеки цветов. Узнаем, как её создать, правильно настроить, подобрать цвета и начать с ней работу.
Ранее мы установили и запустили приложение Figma. Вот что мы должны увидеть:
Создаём новый проект, нажав на плюсик в левом верхнем углу, и сразу даём ему удобное название. Далее раскрываем список страниц в левом верхнем углу и называем первую страницу Swatch Library. Основной принцип использования страниц в Figma — разделение проекта на функциональные части. Но мы будем размещать на каждой странице отдельное задание.
Инструменты Figma
Фреймы
Инструмент, который нам сегодня пригодится, — фреймы.
Фрейм — основной элемент дизайна в Figma. Это законченный документ, который может быть страницей сайта или экраном мобильного приложения, объединяющим объекты.
Вы можете задать размер фрейма самостоятельно или выбрать готовые размеры экранов популярных устройств в панели инструментов справа.
Векторные формы
Ещё один инструмент, который мы сегодня будем использовать — векторные формы. Создавайте векторные объекты инструментом Shape Tool. С его помощью можно отрисовывать элементы интерфейса — в форме прямоугольников, линий, треугольников, стрелок, кругов, звёзд.
С чего стоит начать работу над проектом
Итак, приступаем. Создаём фрейм Desktop 1440×1024, добавляем форму прямоугольника размером 128х128, настраиваем оттенок и прозрачность в панели инструментов справа.
Создаём свою палитру цветов, дублируя первую форму сочетанием клавиш Ctrl+D.
Цвета выбираем произвольно или пипеткой, чтобы получить лучшее сочетание оттенков.
Когда вся палитра готова, сохраняем получившиеся цвета — сможем их использовать потом.
Для этого нажимаем на иконку Style на панели инструментов и через + сохраняем наши цвета с понятными вам названиями. Первая часть названия будет обозначать категорию цвета, а вторая, после слеша, будет его именем. Даём названия каждой группе цветов и получаем библиотеку.
Теперь с помощью библиотеки мы можем быстро создать фигуру или текст необходимого нам цвета.
Представим новую задачу: клиенту понравились цвета на какой-то картинке и нам необходимо их повторить. Легко! Вставляем картинку сочетанием клавиш Ctrl+Shift+K, создаём фигуры, которым передадим цвета, и с помощью пипетки идентифицируем их.
Усложним задачу: добавим градиент. Создаём ещё один ряд фигур, открываем палитру цветов и выбираем тип заливки Linear. Далее пипеткой выбираем верхний и нижний край градиента и настраиваем 100% прозрачность с обоих краёв.
Градиенты, как и обычные цвета, можно добавить в библиотеку. Если нужно изменить направление градиента, достаточно скорректировать положение направляющей линии.
Мы создали нашу первую библиотеку цветов, научились делать градиенты и добавлять их в библиотеку. Начало положено! Увидимся в следующих частях курса.