Как открыть слои в фигме

Горячие клавиши в Figma

Ниже я привел скриншоты с разделами, а также с переводом.

Вкладка №1 (Основные параметры)

Вкладка №2 (Инструменты)

Вкладка №3 (Просмотр):

Вкладка №4 (Масштабирование):

Вкладка №5 (Инструмент “Текст”):

Вкладка №6 (Векторные изображения):

Работа с точками векторных изображений (Эти функции я не использую)

Вкладка №7 (Выделение):

Вкладка №9 (Редактирование):

Вкладка №10 (Трансформирование):

Вкладка №11 (Выравнивание):

Вкладка №12 (Компоненты):

Источник

Слои в фигме: подробный разбор панели «Layers» в Figma

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

Что такое слои в фигме и зачем они нужны?

Слои в фигме показывают содержимое вашего проекта. В панели «Layers» вы можете видеть созданные фигуры, фреймы, группы и т.д. С помощью панели слоёв, вы можете перемещать элементы наверх или вниз относительно друг друга.

Например если вы создадите 3 прямоугольника, то они будут выглядеть в панели «Layers» следующим образом.

Фрейм будет обозначен следующим образом.

Как объединить слои в фигме?

Если хотите объединить слои в фигме, то выберите нужные элементы. Нажмите на правую клавишу мыши и выберите пункт «Group selection». Также можно воспользоваться горячими клавишами «Ctrl + G».

В панели слоев появится группа. Если вы её переместите, то все содержимое будет также перемещаться. Её можете раскрыть, чтобы посмотреть что есть внутри нажав на стрелку рядом с иконкой группы в слоях.

Также вы можете объединить слои с помощью инструмента «Frame». Для этого выберите нужные слои и нажмите на правую клавишу мыши, затем выберите «Frame selection». Также можно нажать на горячие клавиши «Alt + Ctrl + G». В слоях появится иконка фрейма, которая выглядит как 2 вертикальные и 2 горизотальные линии скрещенные между собой.

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

Если хотите изменить фрейм на группу, то выберите его и справа из списка поставьте значение «Group» вместо «Frame».

Как заблокировать слой в Figma?

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

Также можно воспользоваться горячими клавишами «Ctrl + Shift + L» для блокировки слоя или его разблокировки.

Как скрыть слой в фигме?

Чтобы скрыть слой в фигме нажмите на иконку глаза напротив нужного элемента в панели «Layers» слева. Также для того, чтобы скрыть слой можно нажать на горячие клавиши «Ctrl + Shift + H».

Как выбрать заблокированный слой в Figma?

Чтобы быстро выбрать слой, который вы заблокировали, наведите на нужный вам элемент курсор мыши, нажмите на клавишу «Ctrl» и на правую клавишу мыши. Перед вами появится список всех слоёв, которые есть в этой области. Выберите нужный элемент и разблокируйте в слоях при необходимости.

Как перемещать слои вверх и вниз в фигме?

Чтобы переместить слой в фигме вверх или вниз, просто наведите курсор на нужный слой в панели «Layers» и переместите его с зажатой левой клавишей мыши вверх или вниз.

Горячие клавиши для перемещения вверх на 1 слой «Ctrl + [»

Для перемещения элемента в самый низ группы нажмите «Ctrl + Alt + [»

Если нужно переместить элемент на 1 слой наверх, то воспользуйтесь клавишами «Ctrl +]»

Для перемещения элемента наверх группы на клавиатуре нажмите «Ctrl + Alt + ]» или «Ctrl + Alt + ъ».

Как быстро переименовать слои в фигме?

Чтобы переименовать слой в фигме, нажмите на него слева в панели «Layers» 2 раза левой клавишей мыши или нажмите на комбинацию горячих клавиш «Ctrl + R».

Если после переименования нажать на клавишу «Tab», то вас переместит к нижнему слою, который можно переименовать сразу.

Если нажмёте на «Shift + Tab», то переместитесь к верхнему слою.

Массовое переименование слоёв в Figma

Если хотите массово переименовать слои в Figma, то выберите нужные элементы и нажмите «Ctrl + R». Перед вами появится всплывающее окно. Если в верхнее поле вписать какое-то имя выбранного слоя, а затем указать во второе поле новое имя, то будет изменено только это имя (лучше посмотрите видео выше, как это работает).

Как скрыть панель слоёв в фигме?

Чтобы скрыть (убрать) или открыть панель слоёв в фигме, нажмите на комбинацию горячих клавиш «Ctrl + \». В этом случае скроется панель слоев, а также панель справа (Design, Prototype, Inspect).

Если хотите скрыть только одну панель слоев «Layers» слева, то нажмите меню слева, сверху, выберите пункт «View», затем вкладку «Panels» и надпись «Show left sidebar» или нажмите на клавиши «Shift + Ctrl + \»

Как свернуть все слои в фигме?

Чтобы свернуть все слои в фигме нажмите на комбинацию горячих клавиш «Alt + L». В этом случае будут показаны только группы и фреймы, без их внутреннего содержимого.

Как выбрать дочерний элемент в группе?

Если вы хотите переключиться на 1 слой в группе или фрейме и выбрать дочерние элементы или подгруппу, которая есть внутри, то нажмите на «Enter». В этом случае будут выбраны элементы внутри или подгруппы.

Как выбрать родительский элемент в группе?

Если вы выберите 1 элемент в группе, а затем нажмёте на клавиши «Shift + Enter», то поднимитесь на 1 слой в этой группе. Будет выбрана родительская группа в слоях.

Как удалить слой в фигме?

Чтобы удалить ненужный слой в фигме, просто выберите его и нажмите на клавиатуре на кнопку «Backspace».

Как дублировать слой в фигме?

Чтобы дублировать любой слой в фигме, нажмите на комбинацию горячих клавиш «Ctrl + D». Также можете более подробно прочитать о том, как копировать и дублировать по умному по этой ссылке.

Заключение

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

Источник

Figma — хитрости работы с редактором

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

Посмотреть полный список горячих клавиш

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

Показать/скрыть интерфейс

Такие элементы редактора, как верхняя панель управления, а также две боковые панели — слоев и настроек — занимают на экране много места и не дают в должной мере сосредоточиться на макете. Чтобы убрать все панели и оставить только рабочее пространство, достаточно нажать сочетание клавиш на клавиатуре —
Ctrl + \.

Автор статей по дизайну. В веб-дизайн пришел в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил верстку. Время от времени публикует переводы на Хабре.

Выбор цвета

Одна из самых полезных опций.

Чтобы быстро взять нужный цвет из другого места экрана, нажмите клавишу I на клавиатуре.

За пределами рабочей области цвет взять не получится.

Поиск по всем командам Figma

Если вы знаете, что хотите найти в Figma, но не уверены, где именно это находится, нажмите сочетание клавиш Ctrl + /. Откроется основное меню с активной строкой поиска.

Замена значения сдвига объекта

В Figma по умолчанию значение сдвига объекта 8px, чтобы его поменять, перейдите в главное меню, затем выберите Preferences — Nudge Amount.

В появившемся окне введите нужное значение, например, 10.

Замена группы на фрейм

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

Источник

Как в Figme поднять или опустить слой

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

Эллипс в самом низу

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

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

Команды для перемещения слоев

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

Обратите внимание, что эти команды действую строго внутри родительской группы или фрейма.

Когда мы двигали квадраты, это никак не влияло на расположение треугольника и эллипса. Если мы применим Bring to Front для эллипса, он будет перекрывать и всю группу с квадратами целиком, и треугольник.

Эллипс после Bring to Front Эллипс после Bring to Front — перекрывает все элементы

Источник

Основы Figma II. Группы. Cлои. Пипетка. Импорт изображений. Делимся проектом

Продолжаем знакомство с основами Figma. Сегодня узнаем новые приемы работы со слоями, включая выделение, перемещение, группировку, блокировку и скрытие.

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

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

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

Группы

Выполняя домашнее задание из прошлого урока вы обязательно столкнулись с проблемой управления слоями. Например, любая кнопка состоит из: прямоугольника (определяющего границы) и текстового блока (поясняющего, что эта кнопка делает). Чтобы переместить кнопку, вам прийдется сначала выделить каждую ее составляющую. А что если вы захотите переместить верхнюю часть сайта с навигационным меню, которое состоит из 5 текстовых элементов? Это уже займет некоторое время. С такими микро-задачами вы будете сталкиваться постоянно.

Чтобы решить эту проблему и существуют группы, которые позволяют работать с несколькими объектами, как с одним слоем.

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

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

Создание и удаление группы

Предположим, что нам нужно объединить несколько примитивов, составляющих кнопку в группу. Для этого:

Сворачивание и разворачивание группы

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

Вложенные группы

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

Зачем это может понадобится? Все с той же целью: для удобной и быстрой работы. Рассмотрим пример. Несколько кнопок и логотип с подложкой могут быть объединены в так называемую шапку сайта (на английском – header, читается хэдэ) – элемент дизайна, который повторяется на всех страницах и обычно содержит средства для быстрой навигации. В глазах Figma это просто группа с другими вложенными группами.

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

Перегруппировка

Иногда может понадобится переместить слой из одной группы в другую или дополнить группу новыми слоями.

Для этого достаточно перетащить слой на нужную группу в панели слоев – и он мгновенно окажется внутри. Также можно перетащить слой в нужное место между слоями внутри развернутой группы. Если слой нужно убрать из группы, то его нужно перетащить в область над группой или под ней, как показано в видео:

Выделение слоев

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

Выбираем вложенный слой

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

Чтобы спуститься ниже по дереву вложенности и выделить надпись кнопки, достаточно сделать еще один двойной клик. Как вы уже поняли, двойной клик позволяет выделить объекты на один уровень вложенности ниже текущего.

Двойной клик ускоряет выделение при работе с вложенными слоями и значительно быстрее ручного развертывания групп. Но что если уровней вложенности больше одного? Ведь прийдется делать несколько двойных кликов. Чтобы выделить объект на самом нижнем уровне вложенности, достаточно зажать Command в MacOs или Ctrl в Windows и сделать клик по объекту – это называется глубокое выделение (deep selection).

Выбираем несколько слоев (новый способ)

Зажмите кнопку Command в MacOs или Ctrl в Windows и кликайте по слоям один за другим в панели слева. Зажмите клавишу Shift и выделяйте объекты кликом или рамкой в рабочей области. Каждое новое выделение будет объединяться со старым. Этот способ очень удобен при создании групп и в комбинации с глубоким выделением.

Выбираем диапазон слоев

Если зажать кнопку Shift и выбрать два слоя в панели слева, то вы выберите еще и все слои, которые оказались между крайними слоями.

Выбираем перекрытый слой

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

Еще один вариант: зажмите Ctrl и нажмите правую кнопку мыши в область перекрытия слоя. Вместо контекстного меню сразу появится список слоев, что значительно быстрее предыдущего способа.

Эти способы выделения работают и для заблокированных слоев, но не для невидимых!

Снимаем выделение

Чтобы снять выделение в рабочей области зажмите Shift и кликните по нужному объекту или воспользуйтесь рамкой.

Чтобы снять выделение с объекта через панель слоев кликните на выделенном объекте с зажатой клавишей Command в MacOs или Ctrl в Windows.

Работа со слоями

Продолжаем знакомится с новыми приемами для манипуляции слоями. Блокировка и скрытие помогут сконцентрироваться на нужном участке страницы, а остальные команды помогут быстрее выполнять рутинные операции.

Блокировка и скрытие слоев

Иногда вы работаете исключительно над одним элементом интерфейса и случайное выделение других частей дизайна лишь помешает. В таких случаях полезно заблокировать или совсем скрыть некоторую часть слоев. Для этого:

Копирование, вырезание и вставка слоя

Для копирования объекта выделите его и нажмите Command + C в MacOs или Ctrl + C в Windows.

Чтобы вырезать объект, выделите его и нажмите Command + X в MacOs или Ctrl + X в Windows.

Для вставки выберите объект или совсем уберите выделение и нажмите Command + V в MacOs или Ctrl + V в Windows.

Копирование, вырезание и вставка объектов, такие привычные по другим программам команды, некоторых новичков в Figma вводят в недоумение. Дело в том, что позиция, куда будет вставлен объект зависит от того, какой сейчас выбран тип объекта (примитив или группа) и на каком уровне вложенности он находится. Рассмотрим все на примерах:

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

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

Вставка в позицию другого объекта

Позицией любого объекта в Figma считается его верхний левый угол. Чтобы сделать позицию вставки более предсказуемой, достаточно после копирования или вырезания выбрать объект и нажать Shift + Command + V в MacOs или Shift + Ctrl + V в Windows. Новый объект будет вставлен аккуратно в левом верхнем углу выделенного слоя.

Названия слоев

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

Переименование слоев

Чтобы переименовать слой достаточно:

Чтобы переименовать группу слоев нужно:

Задавайте названия со смыслом

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

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

Вот небольшой список типичных названий слоев, чтобы у вас было представление:

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

Импорт изображений

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

Референсы и мудборды

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

Мудборд (от англ. mood board – доска настроения) — это подборка изображений, которую составляет дизайнер, с целью показать заказчику и получить отзыв на самом раннем этапе, еще до начала работы. С помощью таких подборок мы пытаемся прощупать вкус клиента, понять его предпочтения. Лучшие экземпляры из мудборда в дальнейшем могут использоваться, как отправная точка для начала дизайна (как референсы). Как и в случае с референсами, изображениями для мудборда могут выступать дизайны других сайтов, фотографии (как примеры удачных цветовых сочетаний), иллюстрации, шрифты, наборы цветов и так далее.

Для создания мудбордов существуют специальные бесплатные сервисы: Milanote, Pinterest. Но не спешите там регистрироваться, для начала нам хватит возможностей Figma.

Импорт из буфера обмена

Чтобы работать с референсами и создавать мудборды нам нужно каким-то образом вставить картинки прямо в рабочую область. В Figma есть несколько механизмов для этого. Сначала познакомимся с самым простым из них. Чтобы вставить картинку нужно:

У Figma есть ограничение на вставку больших растровых изображений: если ширина или высота картинки превышает 4096 пикселей, то вставленный объект будет автоматически отмасштабирован до указанных величин.

Импорт из файла

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

Инструмент пипетка

Пипетка или Eyedropper Tool или Color Picker – позволяет считать цвет из любого примитива и назначить его выбранному объекту. Очень полезен для подбора цветовой гаммы на основе изображений. Мы уже знаем, как скопировать значение цвета из одного объекта и вставить его в другой. Но есть и более быстрый способ.

Быстрое присваивание цвета

Для быстрого копирования цвета достаточно:

Присваивание цвета пикселей изображения

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

Точное позиционирование

В Figma есть очень удобный инструмент для точного позиционирования, который показывает расстояние между объектами. Чтобы ним воспользоваться:

Как поделиться проектом

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

Домашнее задание

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

Выводы

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

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

Источник