что такое frame в figma
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.
На этом все. Я более подробно постарался рассказать о нулевом фрейме в формате видео вот тут. Надеюсь, эта статья была вам полезна. Буду рад обратной связи. :))
Frame в Figma — подробный разбор инструмента
Инструмент Frame в Figma. Детальный разбор возможностей в программе Figma. Урок в видео и текстовом формате. Как сделать и как использовать.
Как использовать Frame в Figma? Если вы начинающий пользователь программы, то этот урок откроет вам все секреты этого инструмента.
Что такое Frame в Figma и с чем его едят?
Frame— это рабочая область, где будут размещаться элементы интерфейса, дизайна сайта или мобильного приложения.
Как сделать фрейм в фигме?
Чтобы создать Frame в программе Figma выберите иконку слева и сверху в панели инструментов. Наведите на пустую область и нажмите левую кнопку мыши. Горячие клавиши для создания фреймов — «F» и «A».
Почему 2 горячих клавиши, а не одна? Это связано с тем, что существует программа Sketch. Там есть аналог фреймов, которые называются «Артборды». Чтобы в скетче создать артборд нужно нажать на клавишу «А». Поскольку скетч — это главный конкурент фигмы, чтобы облегчить работу тем, кто переходит на фигму со скетча, разработчики решили сделать привычное для этих людей сокращение.
Если не тянуть мышкой и просто нажать на левую клавишу мыши, то будет создан фрейм размерами 100 на 100px.
Если вы будете тянуть, то можно создать произвольный размер.
Популярные размеры фреймов в Figma и шаблоны различных устройств
В правой панеле представлены популярные размеры фреймов (активно при выборе инструмента фрейм):
Выбираем другое разрешение фрейма из списка
Если выбрать фрейм, то можно изменить его выбрав в выпадающем списке справа другое разрешение либо изменить его на группу.
Чтобы изменить шаблон можно нажать на эту область и выбрать другое разрешение либо сделать из фрейма группу. Изменение «Frame» на «Group» или выбор других размеров из шаблонов. Группа позволяет объединять несколько элементов, но в отличие от фрейма в группе меньше возможностей и нет некоторых функций.
Меняем размер по умному. Как уменьшить или увеличить Frame в Figma?
Чтобы уменьшить, обрезать фрейм или увеличить фрейм, просто наведите курсор на край и потяните в сторону. Также вы можете использовать горячие клавиши, чтобы активировать дополнительные функции.
Если при изменении размера, вы будете использовать клавиши ниже, то будет вам счастье:
Ctrl — элементы внутри не привязаны к краям.
Alt — одновременное увеличение фрейма слева и справа, сверху и снизу.
Shift — пропорциональное изменение размеров.
Также можно использовать комбинации этих горячих клавиш.
Следующее как можно изменять размер фрейма — это менять ориентацию на горизонтальную и вертикальную. Например если ширина фрейма 500 пикселей, а высота 100, то можно поменять размеры местами, просто нажимая на эти иконки.
Иконка со стрелками позволяет подогнать размеры фрейма под содержимое которое есть внутри фрейма. Например возьмем график, и нажимаем на эту иконку. Размеры будут подогнаны под содержимое.
Чтобы изменить расположение фрейма по оси Х и Y можно использовать правую панель и значения которые там есть.
Значения W и H позволяют видеть и изменять размеры фрейма. Справа есть иконка цепи. Если её активировать, то размеры будут изменяться пропорционально. Например если включить эту иконку и создать фрейм 100 на 100px. То при изменении значения ширины на 140 высота тоже будет 140px. Если отключить эту иконку, то можно отдельно изменять размеры ширины или высоты.
Изменение угла наклона и скругление углов
Чтобы скруглить углы у фрейма (сделать его круглым), смотрите в правую панель. Сверху есть иконка скругления углов и иконка изменения размеров наклона угла. Также если нажать на самую правую иконку, то будет возможность скруглять любые углы отдельно.
Функция Clip content — что это?
Clip content позволяет обрезать содержимое фреймов. Например на первом изображении сверху эта галочка отключена, а на втором включена.
Как превратить фрейм в Auto Layout?
Если выбрать фрейм, то в правой панели будет надпись Auto Layout.
Если внутри фрейма будет например 3 прямоугольника, после этого вы нажмете на плюсик, то появятся дополнительные возможности.
При нажатии иконки стрелки справа, контент автоматически перестроиться. Элементы будут располагаться горизонтально.
Если выделить какой то элемент внутри Auto Layout и нажать на комбинацию клавиш «Ctrl» «D», то контент дублируется и все автоматически будет перестраиваться.
Подробнее о возможностях Auto Layout поговорим в отдельном уроке.
Сетки во фреймах
Чтобы создать сетку нажмите напротив надписи «Grids» на плюс.
После этого можно выбрать отображение сетки (Grid, column, row).
Изменение цвета фрейма и создание обводки
Чтобы изменить цвет фрейма выделите его и измените цвет, как показано на рисунке выше.
Для создания обводки нажмите плюс напротив надписи Stroke
Как сохранить фрейм из Figma в PNG, JPG, SVG, PDF
Чтобы экспортировать фреймы из фигмы и сохранить их к себе на компьютер, выберите фрейм нажмите на плюс напротив надписи «Export» в правой панели, выберите нужный вам формат для экспорта (PNG, JPG, SVG, PDF) и нажмите на кнопку «Export». Перед этим можно сделать предварительный просмотр нажав на вкладку «Prewie».
Чтобы изменить размер при экспорте, нужно выбрать из списка 1х другое значение. Если выбрано 1х, то экспорт будет один к одному. Если выбрать 2х, то масштаб при экспорте будет в 2 раза больше. Например если поставить 2х и размер фрейма 300px на 300px, то сохраненное изображение будет размером 600px на 600px.
Привязки элементов во фрейме.
Все элементы во фрейме имеют привязки. Их можно изменять справа в панеле, внизу надписи Constraints. По умолчанию привязка идет к левому верхнему углу. При изменении размера фрейма элементы будут закреплены там.
Закрепление элементов внутри фрейма при скроллинге
Елси выбрать какой-то элемент. Например меню (как на скриншоте выше), а затем поставить галочку напротив надписи «Fix position when scrolling», то этот элемент при прокрутке в режиме презентации будет закреплен.
Горячие клавиши при работе с фреймами в фигме
Как удалить фрейм в фигме
Если вам потребовалось удалить фрейм в фигме, просто нажмите клавишу «Backspace» на клавиатуре. Это позволит его убрать из вашего проекта.
2 способа как скопировать фрейм в фигме
Как объединить Frame в Figma
Есть несколько способов объединить фреймы или элементы во фрейм. Выделите нужные вам фреймы и нажмите на клавиши «Ctrl» «G», либо на правую клавишу мыши и выберите пункт «Group selection». Это позволит объединить их с помощью инструмента «Группа».
Как работают группы и фреймы в Figma
Работая в Figma, вы когда-нибудь сталкивались с проблемой выбора, что использовать фрейм или группу? Оба варианта – контейнеры для размещения объектов, но каждый имеет свои уникальные свойства и случаи использования. Не всегда очевидно, как они отличаются друг от друга, поэтому, чтобы помочь вам различать их, я написал эту статью.
Группы
Как и в других инструментах дизайна, группы в Figma позволяют объединять несколько элементов вместе в один слой верхнего уровня. Границы группы определяются ее дочерними элементами, поэтому изменение размера или перемещение этих элементов приведет к автоматическому изменению границ группы. Вы можете создать группу, выбрав объекты и нажав: ⌘ + G (Mac) или Ctrl + G (Win).
Создание группы не является деструктивным действием – это означает, что она не навсегда выравнивает или объединяет слои вместе. В любой момент вы можете разгруппировать элементы, нажав: ⌘ + Shift + G (Mac) или Ctrl + Shift G (Win).
Группы действительно полезны, когда вы хотите объединить похожие элементы и работать с меньшим количеством слоев. Например, у вас есть набор логотипов компаний, которые должны оставаться вместе. Создание группы – отличный способ объединить их в один более управляемый слой – кликнув по любому из элементов в вашей группе, вы выделите всю группу, и сможете манипулировать им, как единым объектом на холсте. Если вам нужно выбрать определенный дочерний элемент в группе, дважды кликните по нему.
Также внутри группы вы можете использовать такую функцию, как Smart Selections, чтобы настроить расстояние между элементами. В приведенном ниже примере вы можете увидеть автоматическую настройку границ группы для соответствия общим размерам дочерних элементов при изменении интервала.
Когда вы изменяете размер группы, ее дочерние элементы будут масштабироваться, как векторные изображения. Однако эффекты, контуры и размеры шрифта не будут масштабироваться. Если вы хотите, чтобы эти свойства также масштабировались, используйте инструмент масштабирования (K). Если вы хотите применить ограничения, чтобы определить, как будут изменяться размеры элементов, рассмотрите возможность использования фрейма. Ограничения, применяемые к элементам, всегда будут относиться к ближайшему родительскому фрейму, а не к границам группы. Подробнее об этом в разделе, посвященном фреймам!
Фреймы
Фрейм в Figma – это то, что мы называем «артборд» в других инструментах дизайна. Мы рассматриваем фреймы, как основополагающий элемент проектов, который может выступать в качестве контейнера верхнего уровня и / или представлять области или компоненты вашего дизайна. Фреймы и возможность их вложения являются неотъемлемой частью создания динамических макетов в Figma.
Прежде чем мы углубимся в поведение и свойства фреймов, давайте быстро рассмотрим три различных способа их создания.
Если вы хотите сделать наоборот и удалить контейнер родительского фрейма, сочетание клавиш будет таким же, как и при разгруппировке: ⌘ + Shift + G (Mac) или Ctrl + Shift + G (Win). Теперь давайте углубимся в уникальные возможности и варианты использования фреймов.
Размеры фреймов
Размеры фреймов устанавливаются независимо от их дочерних элементов. Если вы перемещаете или масштабируете дочерние элементы внутри фрейма, его границы не будут автоматически корректироваться. Если вы хотите, чтобы размеры фрейма подстраивались под содержимое, вы можете нажать кнопку «Resize to Fit» на панели свойств справа.
Также важно отметить, что компоненты в Figma ведут себя точно так же, как и фреймы. Вы можете преобразовать фрейм в компонент, чтобы повторно использовать его в других местах, и, если вы отсоедините существующий экземпляр компонента, вы увидите, что он преобразуется во фрейм.
Изменение размера с ограничениями
При изменении размера фреймы и группы ведут себя по-разному. Как уже упоминалось ранее, размер групп будет изменяться подобно векторным изображениям. Размеры фрейма будут изменены независимо от дочерних элементов. Однако, вы можете задать ограничения, которые влияют на изменение размера этих дочерних элементов относительно их родительского фрейма. По умолчанию эти ограничения установлены на «Top» и «Left».
Настройка ограничений может быть очень полезна, когда вы хотите, чтобы элементы сохраняли размер и положение относительно фрейма, что обычно требуется при создании отзывчивых компонентов. В приведенном ниже примере показаны различия между группами, фреймами и фреймами с заданными ограничениями.
Контент, выходящий за границу фрейма
Поскольку границы фрейма можно регулировать независимо от его дочерних элементов, функция «clip content» (доступная на правой панели свойств) может использоваться различными способами. Вот несколько распространенных примеров:
Сетки
Сетки макетов (Layout grids) являются уникальной функцией фреймов и могут применяться к любому фрейму или компоненту в вашем дизайне. Это действительно полезно, потому что иногда вы хотите, чтобы области вашего дизайна имели свои собственные независимые сетки. Ограничения изменения размера в Figma также могут работать в сочетании с сетками макетов. В приведенном ниже примере вы можете видеть, что на верхнем уровне есть сетка из 2 столбцов и вложенный вторичный фрейм для панели вкладок, который имеет собственную сетку из 3 столбцов. При установке ограничений, когда размер фрейма верхнего уровня изменяется, дочерние элементы изменяют размер относительно сетки макета.
Вывод
Вы можете по-разному использовать группы и фреймы (вместе или по отдельности) для достижения различных результатов.
Коротко о главном. Используйте группы, если:
Коротко о главном. Используйте фреймы, если:
Подробнее об использовании фреймов и групп читайте в нашей статье.
Если вы хотите увидеть, как создавались примеры из этой статьи, нажмите здесь, чтобы добавить копию файла в Figma.
Как и почему стоит начать работать с 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% прозрачность с обоих краёв.
Градиенты, как и обычные цвета, можно добавить в библиотеку. Если нужно изменить направление градиента, достаточно скорректировать положение направляющей линии.
Мы создали нашу первую библиотеку цветов, научились делать градиенты и добавлять их в библиотеку. Начало положено! Увидимся в следующих частях курса.