Как работать с фреймами в 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, появится срез, размер которого вы сможете регулировать. В левой панели слоев вам будет доступен список этих срезов.

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

Итак, из этого урока вы узнали, что такое фреймы и слайсы, а также как используются эти инструменты на практике.

Полезные ссылки:

• Бесплатный видеокурс по Figma от GeekBrains;
• Профессиональный курс Figma 2.0 для новичков от SkillBox;
• Полноценный онлайн курс по веб-дизайну с нуля от SkillBox.

Самые продвинутые приемы Figma 2022 года

Как и всегда, Figma не преминула произвести впечатление на дизайнеров и представила несколько новых фантастических функций, скрытых у всех на виду. Некоторые из них находились там и раньше, но до сих пор оставались незамеченными. Итак, ниже вы найдете лучшие приемы, которые значительно облегчат работу в Figma!

Видеоверсия этой статьи (прим. на английском языке):

Если вы хотите наглядно увидеть, как используются новые функции Figma, есть видеоверсия этой статьи.

Кстати, я использую горячие клавиши Mac. Если вы работаете на PC (прим. в Windows), используйте эквиваленты, указанные ниже. Это работает в большинстве случаев. Есть некоторые исключения, о которых я обязательно скажу. 

1. Быстрое копирование ссылки на файл (cmd+L)

Щелкните курсором внутри файла и нажмите cmd + L. Таким образом ссылка на файл будет скопирована в буфер обмена. Теперь вы можете поделиться ей где угодно.

Создавайте ссылку на конкретный элемент

Если вы выбрали определенную страницу, фрейм или элемент, при переходе по ссылке откроется именно то, что вы указали при ее создании. Великолепно!

Создание ссылки на определенную область экрана

2. Быстрая вставка элементов и прототипов за пределами Figma

Используйте горячие клавиши cmd + L, чтобы скопировать ссылку на определенную страницу или фрейм и вставить ее вне Figma. Вы можете поделиться целой областью или выбрать конкретный фрейм для совместного использования. Это невероятно удобно не только для оформления документов, создания дизайн-систем и гайдов по стилю, но и для демонстрации элементов на других веб-сайтах. Например, я могу вставить изображение прямо сюда, в статью (смотрите ниже). 

‍Обязательно попробуйте:

CMD+L Demo (embedded)

‍Теперь самое главное: вставка прототипов. Эта функция работает в том числе и для прототипов. Это открытие сделало мой день. И безусловно прототипы обновляются автоматически.

‍Нажмите на ссылку и убедитесь в этом сами:

CMD+L Demo (embedded)

3. Корректируйте текст, цвет и другие показатели

Выберите фигуру с заливкой и откройте меню с цветовой палитрой. Удерживайте нажатой клавишу Shift и с помощью клавиш со стрелками «вверх» и «вниз» меняйте цвет объекта. Вы можете увидеть шаг корректировки значения цвета. При использовании колесика мыши у вас есть возможность менять оттенок. Нажав клавишу Alt, можно скорректировать размер шрифта, непрозрачность или значения других полей, например, высоты строки.

Изменение текста, цвета и других показателей

💥 Совет: для изменения параметров шрифта или высоты строки, используйте шаг корректировки, равный 4 пкс или 8 пкс. По умолчанию он равен 10. Чтобы скорректировать его значение, нажмите cmd + / и введите слово «nudge». При изменении расстояния между элементами обязательно удерживайте нажатой клавишу Alt, чтобы видеть, на какое количество пикселей оно меняется.

Изменение значения шага корректировки, на которое меняется расстояние между объектами.

4. Настройка значений некоторых полей с помощью специальной стрелки 

При наведении курсора на некоторые поля свойств в Figma появляется специальная стрелка. Просто зажмите клавишу мыши и перемещайте стрелку влево и вправо. Удерживайте Shift, чтобы увеличить скорость настройки. Это работает с любым полем настройки значений, которое отображает стрелку при наведении на него курсора. 

‍Настраивайте любое поле, которое показывает специальную стрелку, с помощью мыши

5. Экспортируйте объект в формате PNG без использования раздела Export

Нажмите cmd + shift + c (или через контекстное меню с помощью правой кнопки мыши), чтобы скопировать фрейм в формате png в буфер обмена. Теперь вы можете вставить его в любое место внутри вашего файла или за его пределами. Это удобно для вставки png-файла в Slack, презентации или электронные письма, а также для создания мокапов без необходимости экспортировать изображение.

Быстрый экспорт изображения в формате PNG без использования раздела Export с помощью сочетания клавиш shift+cmd+C

6. Функция Left-Right в разделе Constraints

Не представляю свою работу без этой функции. В разделе Constraints при указании значения Left-Right при наличии сетки внутри фрейма, дочерние объекты будут использовать столбцы сетки в качестве своего родительского контейнера. Если вы хотите, чтобы ваши элементы идеально взаимодействовали с сеткой, установите в разделе Constraints значение Left-Right.

При заданных значениях Constraints “Left and Right” дочерние элементы всегда будут считать сетку родительским элементомИспользуйте значение Constraints — Left and right, чтобы связать контент с сеткой

Эта функция хорошо работает для текста, групп или других фреймов. Но она не подходит при использовании ауто лейаутов. Маленькая хитрость: просто разместите свой ауто лейаут внутрь группы, после чего вы сможете установить значение Constraints для нее.

7. Использование страниц и фреймов в библиотеке для организации компонентов 

Вы, вероятно, знакомы с правилом наименования компонентов через «/». Знаете ли вы, что добавление мастер-компонента во фрейм работает по такому же принципу? И это еще не все. Для создания мета-категорий вы также можете использовать страницы.

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

При размещении компонента на определенной странице или фрейме он автоматически отражается в библиотеке (Assets).

В примере были созданы общая страница (GENERAL) и страница для мобильных устройств (MOBILE) (можно было бы настроить по одной странице для каждого брейкпоинта (прим. контрольные точки, проходя через которые, дизайн сайта меняется и адаптируется под новые условия) или одну библиотеку для сайта и одну — для приложения, или для Android и iOS). Внутри страницы расположены фреймы, в которые помещаются компоненты. Это могут быть отдельные компоненты или наборы компонентов с вариантами.

💥 Совет: Если вы переходите из старой библиотеки Figma или импортированной из Sketch, в которой используется метод организации посредством слэша («кнопка/основная/активная/дополнительно/и др.»), и хотите переключиться на подход страниц и фреймов, вы можете использовать функцию пакетного переименования Figma и удалить все префиксы. ‍

8. Скриншот прямо в Figma

Приготовьтесь задействовать сразу 4 пальца и одновременно нажать shift + ctrl + cmd + 4, чтобы сделать скриншот определенной области (+пробел для создания скриншота всего окна). Скриншот будет сохранен в буфере обмена, а не на рабочей области. Теперь вы можете вставить его прямо в Figma с помощью сочетания клавиш cmd + V. Для Windows попробуйте сочетание alt + print screen.

Поддерживайте порядок на рабочей области и копируйте скриншоты прямо в Figma

Теперь вы можете использовать функцию упорядочивания элементов в Figma (выберите все элементы одинакового размера, после этого в правом нижнем углу появится маленькая квадратная иконка). Нажмите ее, чтобы выровнять хаотично расположенные элементы определенным образом.

💥 Совет: для того, чтобы обрезать изображение, дважды щелкните кнопку мыши, удерживая клавишу Alt.

9. Скопируйте редактируемый SVG-объект из браузера

Вместо того, чтобы экспортировать объект в SVG-формате и импортировать его обратно в Figma, можно копировать его прямо из кода страницы. Выберите SVG-изображение в браузере и щелкните правой кнопкой мыши, чтобы выбрать режим «проверить элемент» (Inspect). Откроется консоль браузера и элемент SVG, который можно выбрать в инспекторе. Выберите источник изображения еще раз. Затем в представлении изображения снова щелкните правой кнопкой мыши для режима проверки, а затем на всем элементе SVG (!!), щелкните правой кнопкой мыши и выберите «Копировать элемент». Теперь можно вставить его в свой Figma-файл, и он останется масштабируемым и редактируемым со всеми его слоями.

Копируйте редактируемый SVG-объект прямо из браузера

10.

Как разломать мастер-компонент

Если у вас есть компонент с несколькими вложенными экземплярами, который вы хотите разломать, откройте меню быстрого поиска с помощью сочетания клавиш cmd + /, вбейте в строку поиска слово “Instances”. Теперь можно выбрать detach all instances (прим. отвязать все экземпляры) or detach all nested instances (прим. отвязать все вложенные экземпляры). При этом они сохранят свои настройки, будучи фреймом и ауто лейаутом. И да, ломаем мастер-компонент только в крайнем случае. 

Ломаем мастер-компонент

11. Быстрый поиск нужного элемента в слоях (Иерархия объектов)

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

Иерархия объектов

12. Добавление свойств объектам, объединенным с помощью Union selection 

Если вы объединяете объекты в один с помощью функции Union Selection, то его углы можно сглаживать, используя радиус. Возможность менять отдельные элементы объекта объединения останется. Также можно использовать компоненты и добавлять их к объекту объединения или применять к компонентам цвета и стили объекта объединения.

Добавление свойств объектам, объединенным с помощью функции Union selection

13. Сортировка и перемещение стилей на панели инструментов

Присвоение названия каждому стилю с помощью “/” занимает много времени, особенно если речь идет о создании стилей для шрифтов. Поэтому, знание того, что их можно сгруппировать на панели свойств, стало важным открытием.

Сортировка и перемещение стилей на панели свойств

Выберите стили и нажмите cmd + G, чтобы сгруппировать их, а затем дать название группе. Теперь вы можете сортировать и перетаскивать стили внутри папок и между ними.

14. Добавьте “_”, чтобы сделать стили невидимыми для других

Хотите задать стиль, но не готовы показывать его другим? Чтобы убедиться, что он случайно не появится в публичной библиотеке стилей, просто добавьте “_” к его названию, например, “_highlight”, и тогда его никто не увидит.

Добавьте “_”, чтобы сделать стили невидимыми для других

15. Добавляйте описания для стилей

При присвоении названия стилю в его настройках под строкой имени есть небольшое поле. Оно называется Description (прим. Описание). То, что вы там напишите, будет отражено в описательной подсказке при выборе стиля. Это удобно с целью добавления дополнительной информации о цели создания стиля. Раньше оно отображалось и в режиме inspect, но, похоже, это было изменено.

Описание стиля будет отражено в описательной подсказке при его выборе

16. Знаете ли вы, что изображению может быть присвоен стиль?

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

Изображению можно присвоить стиль

17. Использование названий при указании цветов

Знаете ли вы, что можно просто ввести название цвета в цветовое поле? Вероятно, это не имеет значения для создания аккуратного дизайна пользовательского интерфейса и его финальной версии, но удобно для быстрого тестирования или для указания на ошибку (прим. , например зеленый круг возле фрейма, означает, что все в порядке, а красный говорит о том, что в нем есть недоработки. В этом случае оттенки зеленого и красного не влияют на конечный результат). Поддерживаются все названия W3 CSS Color module (они немного странные, поэтому обычно я выбираю зеленый, синий и желтый).

Использование названий при указании цветов

18. Игнорирование ауто лейаута

Мне нравятся ауто лейауты, но иногда они ужасно раздражают, если нужно быстро добавить или опробовать элемент. Есть маленькая хитрость, о которой я не знала, но хотела бы знать раньше! При перетаскивании элемента просто нажмите пробел, чтобы он располагался поверх ауто лейаута.

Игнорирование ауто лейаута при зажатом пробеле

19. Быстрая настройка автоматической ширины текста

Хотите, чтобы для текста была установлена автоматическая ширина (auto-width)? Легко! Просто дважды щелкните на текстовое поле. Готово.

Двойной клик по текстовому полю позволит изменить настройки его ширины на автоматические (auto-width)

20.

Переключатель между режимами Design и Prototype (shift+E)

Это также один из тех очевидных приемов, которыми раньше я не пользовалась. С помощью сочетания клавиш Shift+E можно переключаться между режимами Prototype и Design.

Переключатель между режимами Design и Prototype (shift+E)

21. Установка любого фрейма в качестве обложки проекта

Раньше приходилось настраивать верхнюю страницу вашего дизайна в качестве обложки проекта. Теперь в этом нет необходимости! Можно просто выбрать фрейм и превратить его в обложку. Выберите фрейм, щелкните правой кнопкой мыши и выберите “set as thumbnail”.

Установите любой фрейм в качестве обложки

22. Скрывайте курсоры других членов команды

Не хотите, чтобы курсоры ваших коллег были видны в общем файле во время работы? Нет проблем, вы можете просто скрыть их через Menu>View>Multiple cursors (прим. Меню>Вид>Несколько курсоров) или просто нажать alt + cmd +/.

Скрывайте чужие курсоры с помощью alt + cmd +/

23.

Используйте % для настройки высоты строки

В Figma высота строки задается в px/pt, что немного утомляет. Мне нравится использовать общие значения, как в CSS, например: line-height=1.5. К сожалению, вы не можете установить высоту строки в единицах CSS, но можно использовать %. Это позволяет менять размер шрифта, сохраняя единую высоту строки.

Используйте % для удобной настройки высоты строки

Высота строки в px/pt рассчитывается следующим образом: текст размером 16px и значением высоты строки 1.5 или 150% соответствует формуле: 16*150%=24px/pt. Кстати, в режиме inspect этот параметр все равно будет отображаться в px!

групп или фреймов Figma. Наконец понять различия… | Olivier Van Biervliet

В предыдущем посте мы обнаружили функциональность Smart Selections в Figma. Они позволяют выполнять неявную группировку и являются быстрым способом работы с несколькими объектами.

Однако при работе со многими слоями и объектами нам нужен более формальный способ их объединения. Обычно для этого вы используете группу, но Figma предлагает еще один вариант: Кадры .

На первый взгляд, Фреймы очень похожи на Группы, так что давайте углубимся и узнаем их индивидуальные особенности.

Основы

Начнем с основ. Каждое графическое приложение уже имеет функцию группировки: вы выбираете несколько объектов, нажимаете ⌘G (Ctrl-G в Windows) и вуаля: ваш список слоев теперь будет выглядеть чище благодаря сворачиваемой группе.

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

Границы группы изменяются в соответствии с содержащимися объектами

Примечание. Чтобы напрямую выбрать что-либо в группе, щелкните его, удерживая нажатой клавишу ⌘/Ctrl, или дважды щелкните его, или щелкните его в списке слоев слева.

Дополнительно

Сам групповой объект имеет отношение к родительскому элементу в вашем документе. По умолчанию ограничения группы будут установлены на «Слева» и «Сверху», как вы можете видеть здесь по пунктирным линиям:

Группа имеет ограничения по умолчанию «Слева» и «Сверху» по отношению к своему родительскому элементу

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

Изменение размера группы всегда приводит к изменению размера содержимого. Если вам нужно сохранить то же соотношение сторон, вы можете удерживать Shift при изменении размера.

Изменение размера группы изменяет размеры объектов внутри нее

Обратите внимание, что объекты в группе будут иметь одинаковые ограничения слева и сверху по умолчанию, но это не имеет большого значения, поскольку сами объекты определяют границы группы. Не имеет смысла связывать их с левой границей, если они определяют эту границу в первую очередь.

Если вы хотите или должны использовать ограничения для объектов в вашей группе, вместо этого вам нужно использовать фреймы. Мы вернемся к этому позже.

Основы

На первый взгляд кажется, что между группами и кадрами нет большой разницы. Вы выбираете свои объекты и используете ⌥⌘G (Ctrl-Alt-G в Windows), чтобы превратить их в рамку. Аналогичным образом они свернутся в списке слоев.

Создать кадр так же просто, как создать группу

Примечание. Отмена кадрирования аналогична разгруппировке: ⇧⌘G (Ctrl-Shift-G).

Дополнительно

При настройке фрейма его начальные размеры основаны на его содержимом. Однако границы вашего фрейма на самом деле не зависят от того, что находится внутри.

Ваш фрейм подобен окну (окну просмотра или артборду, если хотите), через которое вы смотрите и видите объекты за ним. Таким образом, когда вы изменяете размер фрейма, вы изменяете размер только того окна, через которое просматриваете.

Как видно на анимации, объекты могут частично выпадать из кадра. В зависимости от Clip Content настройка, внешние части будут видны или нет.

Используйте флажок «Вырезать содержимое», чтобы скрыть внешние части.

В качестве альтернативы можно изменить положение содержимого и сбросить границы кадра с помощью кнопки «Изменить размер по размеру» . Обратите внимание, что вам нужно навести или повторно выбрать рамку, чтобы увидеть ее измененные размеры.

Используйте функцию «Изменить размер по размеру», чтобы снова охватить все содержимое.

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

Установка ограничений для объектов во фрейме работает должным образом

Примечание: удерживайте ⌘, чтобы игнорировать ограничения при изменении размера фрейма (Ctrl в Windows).

Варианты использования

• Позиционирование объектов частично за пределами кадра позволяет использовать интересные варианты выравнивания.

В этом примере за пределами рамки виден темно-серый фон. Когда мы выравниваем другие объекты с этим фреймом, он будет выравниваться с реальными границами фрейма.

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

Установка пользовательских ограничений содержимого фрейма для поведения, подобного компоненту

• Вы можете скрыть часть фрейма, поместив его за границы, а затем открыть при необходимости.

Используйте переключатель «Содержимое клипа» вместе с границами фрейма, чтобы показать/скрыть дополнительные части дизайна. это в следующем сообщении в блоге.

Сетка Figma внутри фрейма

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

Группа, определяемая дочерними элементами

Группы наиболее подходят для простого объединения элементов, которые принадлежат друг другу, например, логотипа и названия бренда, чтобы упростить управление ими в списке слоев. Содержимое группы должно оставаться вместе при изменении размера, потому что оно не придерживается ограничений.

Фрейм независим от своих дочерних элементов

Фреймы наиболее подходят для компоновки дочерних элементов , которые принадлежат друг другу, но поддерживают определенное отношение друг к другу (путем использования ограничений). Поэкспериментируйте с содержимым клипа и пользовательскими ограничениями, чтобы полностью понять возможности.

Примечания :

Настройки групп/рамок применяются к дочерним элементам — например, цвет заливки и радиус угла

1. Группы и рамки могут иметь как цвет фона, так и цвет заливки. Сначала это может сбивать с толку. Цвет фона соответствует цвету самой группы/фрейма (красный на снимке экрана выше), а цвет заливки применяется ко всем элементам, которые являются частью фрейма/группы (серый прямоугольник со скругленными углами).
2. Группы и фреймы не могут иметь закругленные границы. Опять же, этот параметр применяется только к детям. Поэтому, если вы хотите иметь закругленный штрих или фон, вам нужно добавить прямоугольник с той же шириной и высотой, что и ваша группа/фрейм. Для фрейма вам также необходимо установить ограничения на Масштаб.
3. Изменение размера группы приведет к изменению размера только векторных фигур внутри нее, но не границ их штрихов или текстовых объектов. Если вы хотите, чтобы это произошло, вам нужно использовать инструмент масштабирования (K).
4. Перетаскивание дочернего элемента за границы фрейма удалит его из фрейма. Это легко увидеть в списке слоев. Верно и обратное: перетаскивание элемента поверх фрейма, чтобы он полностью находился внутри границ, сделает его частью этого фрейма.
   Вы можете переопределить это поведение, перетащив элементы в кадр или из него в списке слоев слева.

Внутри нашего внешнего слоя путем перетаскивания — или переопределения его в списке слоев

Я надеюсь, что это проливает свет на различия (и сходства) между группами Figma и фреймами. В следующем посте мы перейдем к Grids.

Если у вас есть какие-либо вопросы или пожелания по дизайну или Figma, пишите мне на [email protected]!

Если понравилось, не забудьте похлопать в ладоши 👏

Дополнительную информацию о Hackages можно найти на нашей обучающей платформе 7 . Мы управляемая сообществом компания, которая предлагает высокоуровневое обучение новейшим фреймворкам и технологиям, связанным с JavaScript. Мы также любим вносить свой вклад в открытый исходный код и организовывать бесплатные общественные мероприятия по всей Европе!

Почему в Figma 9 следует использовать фреймы, а не группы0001

На первый взгляд группы и фреймы очень похожи. Оба они позволяют организовать ваш файл путем вложения слоев (дочерних) под один верхний слой (родительский). Это позволяет легко объединять несколько слоев, выбирать их все сразу или перемещать их по дизайну. В этой статье я расскажу обо всех различиях между ними и объясню, почему вы должны использовать только фреймы.

Группы и фреймы

Фреймы обладают множеством особых возможностей, которых нет у групп. Фреймы — это больше, чем просто набор вложенных слоев. Они сами по себе являются объектами, которые могут содержать вложенные слои (например, группу), изменять размеры и стили (например, прямоугольник), использовать сетки и макеты (например, «артборд») и изменять размер (с ограничениями и автоматическим расположением). Как видно из таблицы ниже, фреймы намного мощнее 💪.

Так почему вообще существуют группы? Насколько я могу судить, они существуют только потому, что дизайнеры привыкли использовать их в других инструментах дизайна, и Figma облегчает их переход, включая их. К концу этой статьи вы поймете весь потенциал фреймов и больше никогда не захотите использовать группу (или прямоугольник).

Сверхмощные фреймы

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

1) Независимое изменение размера

Размер фрейма не зависит от его дочерних элементов (вложенных слоев). Перемещение или изменение размера дочерних элементов не изменит размер родительского фрейма. Это означает, что родительский фрейм может быть точно такого же размера, больше или меньше, чем его дочерние элементы. Позволяет делать множество вещей, например добавлять внутренние отступы, создавать эффект «маски» или включать взаимодействие прокрутки в прототипе (примеры ниже). В отличие от групп, где группа должна быть точно такого же размера, как и ее дочерние элементы.

Совет: Измените размер фрейма, чтобы он идеально соответствовал его содержимому, выбрав фрейм и щелкнув значок «Изменить размер по размеру» в правом верхнем углу панели дизайна.

2) Применить s

стили

Подобно прямоугольникам, рамки — это объекты, которым можно придать стиль. К ним можно применить заливку, обводку или тень. Также они могут иметь закругленные углы. Этот уровень гибкости означает, что фреймы можно использовать в качестве основы для проектирования (почти) чего угодно. Например, кнопка может быть сделана только со стилизованной рамкой (синяя с закругленными углами) и одним текстовым слоем. В отличие от групп, где необходимо добавить второй слой для фона (что делает невозможным автоматическое расположение).

3) Содержимое переполнения

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

A. Создайте эффект маски с включенным параметром «Clip Contents». Например, показ части объекта, «вытекающей» из кадра в качестве фона.

Фото из системы проектирования UI Prep

B. Создайте эффект скрытия/отображения при разработке с включенным параметром «Clip Contents». Например, показ большего или меньшего количества элементов в раскрывающемся меню.

Фото из системы проектирования UI Prep

C. Создайте эффект прокрутки при прототипировании с включенным параметром «Clip Contents». Например, горизонтальная прокрутка для взаимодействия с каруселью.

Фото из системы проектирования UI Prep

D. Создайте плавающий эффект для добавления содержимого без изменения размера/расстояния между кадрами с выключенным параметром «Clip Contents». Например, отображение статуса или значка уведомления на аватаре.

Фото из системы проектирования UI Prep

4) Изменение размера с помощью ограничений

Ограничения изменения размера могут применяться к дочерним элементам фрейма (вложенным слоям). Они используются для «ограничения» или «прикрепления» дочерних элементов к верхней/нижней/центральной/левой/правой части кадра или для масштабирования при изменении размера. Например, некоторые дочерние элементы в компоненте разбиения на страницы могут быть ограничены справа, а другие — слева.

Фотография из системы проектирования UI Prep

5) Изменение размера с помощью

auto Layout

К фреймам можно применить автоматическое расположение для создания широкого диапазона (автоматического) поведения при изменении размера. Автоматическая компоновка определяет направление роста кадра, расстояние между дочерними элементами (вложенными слоями), внутреннее заполнение и то, как каждый отдельный дочерний элемент будет реагировать на изменения. Это очень мощная функция, которую можно использовать по-разному. Узнайте больше об автоматической компоновке и о том, как ее использовать, здесь. Ниже приведены несколько примеров.

A. Создайте компонент, ширина которого будет увеличиваться/уменьшаться в зависимости от количества контента. Например, кнопка с динамическим текстом.

Фото из системы проектирования UI Prep

B. Создайте компонент, высота которого будет увеличиваться/уменьшаться при различном количестве содержимого. Например, открытка с динамическим текстом.

Фотография из системы проектирования UI Prep

C. Создайте компонент, в котором содержимое будет расширяться/сжиматься, чтобы соответствовать различным размерам кадра. Например, таблица, которая может подстраиваться под разные устройства.

Фото из системы проектирования UI Prep

Совет: Поместите несколько слоев в рамку автомакета, выбрав их все и нажав «Shift» + «A».

6) Макеты и сетки

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

Фото из системы проектирования UI Prep

7) Создание компонентов

Чтобы создать компонент, все слои компонентов должны быть размещены в одном фрейме. Хотя, если эти элементы размещены в группе, Figma автоматически превратит группу во фрейм, когда вы нажмете «создать компонент».

Фото из системы проектирования UI Prep

Задание с фреймами

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

Советы по быстрому созданию фреймов в Figma

• Нарисуйте новый фрейм: нажмите «F» и перетащите мышь на пустую область или на существующие слои, чтобы вложить их в новый фрейм.
• Поместите выбранные слои в кадр:  Выберите один или несколько слоев и нажмите «Command» + «Option» + «G», чтобы поместить слои в новый кадр.