Как перевернуть элемент в фигме
Горячие клавиши в Figma
Ниже я привел скриншоты с разделами, а также с переводом.
Вкладка №1 (Основные параметры)
Вкладка №2 (Инструменты)
Вкладка №3 (Просмотр):
Вкладка №4 (Масштабирование):
Вкладка №5 (Инструмент “Текст”):
Вкладка №6 (Векторные изображения):
Работа с точками векторных изображений (Эти функции я не использую)
Вкладка №7 (Выделение):
Вкладка №9 (Редактирование):
Вкладка №10 (Трансформирование):
Вкладка №11 (Выравнивание):
Вкладка №12 (Компоненты):
Как отразить элемент по горизонтали
Фигма позволяет быстро отразить любой элемент по горизонтали и вертикали.
Есть два способа отразить что-то в Figma по горизонтали.
Flip Horizontal
Команда Flip Horizontal доступна из контекстного меню и через сочетание клавиш Shift + H.
Отразить по горизонтали в Figma
Данная операция приводит к отражению элемента с полным сохранением пропорций в горизонтальной плоскости и размеров элемента.
Отраженный элемент (Flip Horizontal)
Изменение ширины перетаскиванием
Если вы наведете на грань элемента курсор, зажмете и переместите в горизонтальной плоскости, то вы измените ширину элемента. Если путь курсора пересечет другую горизонтальную грань, то вы «выверните» элемент наизнанку. При этом стоит учитывать, что пропорции элемента в таком случае будут произвольными, а высота — неизменна.
Если при этом вы зажмете Shift, то пропорции будут неизменны, а размеры элемента — произвольными.
Отраженный элемент (перетаскивание + Shift)
Играй бесплатно в браузере!
Заполните форму, мы сделаем иконку
и добави ее в коллекцию
Как отразить элемент по вертикали
Фигма позволяет быстро отразить любой элемент по горизонтали и вертикали.
Есть два способа отразить что-то в Фигме по вертикали.
Flip Vertical
Команда Flip Vertical доступна из контекстного меню и через сочетание клавиш Shift + V.
Отражение по вертикали в Figma
Данная операция приводит к отражению элемента с полным сохранением пропорций в вертикальной плоскости и размеров элемента.
Отражение по вертикали в Figma (Flip Vertical)
Изменение высоты перетаскиванием
Если вы наведете на грань элемента курсор, зажмете и переместите в вертикальной плоскости, то вы измените высоту элемента. Если путь курсора пересечет другую вертикальную грань, то вы «выверните» элемент наизнанку. При этом стоит учитывать, что пропорции элемента в таком случае будут произвольными, а высота — неизменна.
Отражение по вертикали в Figma (изменением высоты)
Если при этом вы зажмете Shift, то пропорции будут неизменны, а размеры элемента — произвольными.
Как в Figme поднять или опустить слой
Слои в Фигме можно увидеть в левой части экрана, они располагаются сверху вниз в порядке убывания. То есть слой, расположенный в списке выше, будет перекрывать слой, расположенный ниже.
Эллипс в самом низу
Вы можете перенести слой на нужную позицию с помощью перетаскивания его мышкой (drag’n’drop) — это удобный способ для точного размещения слоя на нужном уровне.
Если вам нужно отправить слой наверх или вниз, вы можете воспользоваться специальными командами, которые можно вызвать из контекстного меню для конкретного элемента.
Команды для перемещения слоев
На изображении мы расположили четыре квадрата, которые мы будем перемещать, и две другие фигуры — треугольник и эллипс. Квадраты мы объединили в группы, а треугольник и эллипс находятся соответственно над и под этой группой.
Обратите внимание, что эти команды действую строго внутри родительской группы или фрейма.
Когда мы двигали квадраты, это никак не влияло на расположение треугольника и эллипса. Если мы применим Bring to Front для эллипса, он будет перекрывать и всю группу с квадратами целиком, и треугольник.
Эллипс после Bring to Front 
Эллипс после Bring to Front — перекрывает все элементы
10 скрытых возможностей графического редактора Figma
Дизайнеры интерфейсов и веб-разработчики ценят онлайн-сервис Figma за быстроту, гибкость и интуитивно понятный набор инструментов. Однако у него есть целый ряд полезных функций, о которых мало кто знает. Рассказываем о возможностях, которые будут интересны начинающим и продвинутым пользователям.
Совет 1: Как быстро создать квадрокруг
Квадрокруг — особая форма значка, которая становится все более популярной в UI-дизайне. Часто используется в приложениях iOS.
В Figma создать такой элемент просто.
Перейдите к настройкам радиуса на правой панели и выберите параметр для отображения отдельных углов. Теперь щелкните значок меню, и вы увидите возможность создания радиуса прямоугольной формы. Также на панели можно выбрать фигуры, похожие на элементы интерфейса iOS.
Совет 2: Использовать имя цвета вместо HEX
По умолчанию цвета в Figma обозначаются в формате HEX. Однако эту настройку можно поменять. Для этого введите имя цвета во входных данных, где обычно отображается шестнадцатеричное значение. Вот пример результата:
Имя можно придумать любое, насколько хватает фантазии. Нельзя сказать чтобы эта функция имела практическую пользу, но она точно добавит удовольствия от использования программы.
Совет 3: Как быстро переименовать фрейм
Как правило, для изменения имени фреймов используют горячие клавиши CTRL + R (для Windows) и CMD + R (для iOS). На самом деле достаточно дважды щелкнуть на текущее имя фрейма на холсте, и оно будет доступно для редактирования.
Совет 4: Как отрегулировать размер текстового слоя в соответствии с содержимым
Чтобы размер текстового слоя имел ту же ширину, что и его содержимое, достаточно двойного щелчка по правому краю слоя. Все произойдет автоматически.
Совет 5: Как обойти ограничения при изменении размера фрейма
В Figma при изменении размера родительского фрейма все остальные внутренние элементы автоматически расширяются или сворачиваются. Однако это не всегда уместно.
Чтобы обойти эту автоматическую настройку, необходимо перетаскивать край фрейма, удерживая клавишу CTRL (для Windows) или CMD (для iOS). Благодаря этому ограничения будут игнорироваться. Изменение ширины или высоты фрейма никак не отразится на элементах внутри.
Совет 6: Предварительный просмотр элементов в режиме контуров
Режим контуров (outline) полезен, если нужно убедиться, что структура компонента или фрейма выполнена правильно.
Нажмите клавиши CTRL + Y (для Windows) или CMD + Y (для iOS), чтобы активировать режим контуров. Нажмите ярлык еще раз, чтобы выключить его.
Совет 7: Как копировать и вставлять эффекты
Чтобы скопировать эффект или стиль в Figma, щелкните край строки с параметром. После этого скопируйте с помощью клавиш CTRL + С (для Windows) или CMD + С (для iOS), затем выберите целевой слой и нажмите CTRL + V (для Windows) или CMD + V (для iOS).
Такая функция существенно экономит время.
Совет 8: Как группировать с помощью фрейма
Используйте комбинацию клавиш CTRL + ALT + G (для Windows) или CMD + OPTION + G (для iOS) чтобы объединить элементы внутри фрейма, а не только стандартную группу.
Группировка фреймом предпочтительнее стандартной группы, так как впоследствии элементы можно быстро превратить в компоненты, использовать автоматический макет и так далее.
Совет 9: Как заменять компоненты функцией стрелок
Заменять компоненты и перемещаться по ним можно с помощью функции стрелок. Это удобнее, чем щелкать мышкой по каждой позиции меню.
Совет 10: Как настроить переключение между вариантами
Обычно варианты компонентов отображаются в виде раскрывающихся списков. Чтобы упростить работу с вариантами из двух опций, можно создать формат переключателя. Для этого одному варианту присвойте имя «Да», «Верно» или «Вкл.», а второму — «Нет», «Ложь» или «Выкл.». Переключатель появится автоматически.
Дополнительный совет: как перемещать компоненты между документами
До августа 2021 года в Figma не было простого способа перенести компоненты в другую библиотеку. Для этого необходимо было воссоздавать их.
Теперь для этого нужно выбрать компоненты, которые следует переместить, вырезать их из исходного файла и вставить в новое место назначения. Если документ является библиотекой, документы, использующие его, получат обновление, которое уведомит вас о некоторых устаревших компонентах. Все, что вам нужно сделать, это подтвердить изменения и указать новую библиотеку.