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

10 хитростей Figma, которые я хотел бы знать раньше

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

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

1. Самое легкое создание кругового прогресса, которое вы когда-либо делали в своей жизни

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

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

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

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

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

Удерживайте клавишу пробела при перетаскивании объекта за пределы фрейма, чтобы он оставался внутри контейнера. Вы также можете отключить функцию «Clip contents» для фрейма, содержащего объект, чтобы вы все еще могли видеть его, когда он находится за пределами контейнера – вы также можете нажать CMD (CTRL) + Y, чтобы отобразить контуры.

4. Приведите сетку в порядок

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

5. Продублируйте последнее действие

Нажмите CMD + D, чтобы продублировать предыдущее действие. CMD + D также будет дублировать объекты, фреймы и все остальное.

6. Предварительно просмотрите цвет с помощью пипетки

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

7. CMD + / разблокировать все объекты

Сочетание клавиш СMD + / имеет массу полезных быстрых действий, которые помогут в рабочем процессе и позволят сэкономить массу времени. Если вы еще не используете его, я настоятельно рекомендую посмотреть, какие действия доступны в меню. Действие, которое я часто использую – это быстрая разблокировка всех объектов и изменение шрифтов.

8. Легко вставляйте изображения внутрь фигур-плейсхолдеров

Нажмите CMD + Shift + K, чтобы заменить заливку фигур или фреймов с кучей изображений.

9. Другие приемы с пробелом

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

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

А если этого недостаточно, вы можете удерживать клавишу пробела, чтобы запретить Figma автоматическое вложение объектов внутри фреймов или отключить auto-layout. Клавиша пробела очень удобна!

10. Content Reel + Unsplash

Content Reel и Unsplash были двумя незаменимыми плагинами, экономящими время и позволяющими избежать использования «John Doe» в качестве имени для всех пользователей. С Content Reel вы можете одним кликом мыши вставлять в свой дизайн аватары, lorem ipsum, имена, адреса и многое другое. Unsplash – это бесплатная библиотека высококачественной графики.

11. БОНУС! Исправить высоту строки за секунду

Если у вас нет определенного значения высоты строки просто введите «auto» в поле line-height, и оно автоматически отрегулируется!

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

В Figma есть прекрасный инструмент позволяющий создавать комментарии + дает возможность видеть когда они созданы и когда на них даны ответы если Вы ведете командную разработку. Но проект разросся и первоначальная структура уже не такая легкая, для оптимизации работы было принято решение разбить проект на разные файлы, и все бы ничего с горе связями мастер компонентов которые рушатся но все же вставляются всплыл еще 1 нюанс! -с Комментарии которые были присвоены к проекту и расставлены на нужных позициях, не как не копируются! хоть дублируй хоть копируй — их просто нет! Костыльный лайфхак это создать мастер компонент в виде «диалогового окна» и вызывать его через быстрый поиск когда хотим что-то закоментить, но такой прием не позволяет вести учет того что, где, кем и как было изменено, написано или прокомментировано. Какие есть пути решения данной задачи ?

Вопрос задан более двух лет назад
1961 просмотр

Комментировать
Решения вопроса 0
Ответы на вопрос 1
Плохое знание основ — причина больших бед

если верить данной странице помощи, то никак:

If you duplicate a file, Figma won’t copy comments to the new file. Comments are only kept on the original file.

КАК МОЖНО СКОПИРОВАТЬ ТЕКСТОВУЮ ИНФОРМАЦИЮ ИЗ МАКЕТА FIGMA

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

Далее, можно скопировать текст, воспользовавшись комбинацией клавиш Ctrl / Cmd + C или выбрав соответствующую опцию в контекстном меню. После этого скопированный текст можно вставить в любое другое приложение, используя комбинацию клавиш Ctrl / Cmd + V.

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

Если вы хотите скопировать только обычный текст без форматирования, в Figma также есть функция очистки форматирования. Для этого нужно выделить текст и выбрать опцию «Очистить форматирование» в контекстном меню или использовать комбинацию клавиш Ctrl / Cmd + Shift + T.

Кроме того, в Figma есть функция экспорта текста в формате TXT или HTML. Для этого нужно выделить текст и выбрать опцию «Экспортировать текст» в контекстном меню. Выбрав соответствующий формат, можно экспортировать текст и его форматирование в отдельный файл.

Как копировать дизайн сайта в Figma/Старт в веб дизайне

Верстка сайта с нуля из Figma для начинающих #1

Чтение макетов в Figma

FIGMA: КАК КОПИРОВАТЬ И ДУБЛИРОВАТЬ. Работаем быстрее и по умному — Уроки фигма на русском

Копирование и вставка объектов в фигме. 3 способа

Как узнать все шрифты из макета Figma? Самый полезный плагин для верстальщика! Font Fascia!

Выполняю заказ на фрилансе. Дизайн Таплинк — Пошаговое объяснение дизайна сайта

Синхронизация макетов в фигме. Как открыть ссылку из браузера в декстопном приложении и наоборот

ПРАВИЛА ПОДГОТОВКИ ДИЗАЙН-МАКЕТА К ВЕРСТКЕ

Горячие клавиши в Фигма (Figma) для быстрой работы дизайнера

Всем привет! Я — графический дизайнер Дмитрия Сугак. Если вы хотите значительно ускорить свою работу в бесплатном редакторе Figma, то вам просто необходимо использовать «горячие клавиши» и комбинации клавиш. Эта статья посвящена хоткеям и самым часто используемым комбинациям клавиш в Фигма. Из-за того, что весь интерфейс программы Figma на английском языке, я буду дублировать английский текст русским переводом, чтобы вам было проще разобраться в назначении тех или иных клавиш и сочетаний.

Keyboard Shortcuts в Фигме

ВАЖНО! В редакторе Figma в отличие от Adobe Photoshop невозможно менять сочетания клавиш так, как вам удобно (подстроить всё индивидуально под себя). Вам придётся использовать те горячие клавиши и те сочетания клавиш, которые предлагают создатели Фигма.

Для начала вам необходимо открыть проект в Фигма или создать новый проект «New design file». Все существующие горячие клавиши в Фигме можно найти в разделе «Keyboard Shortcuts». Этот раздел можно открыть двумя способами:

1. Нажав сочетание клавиш «Ctrl + Shift + ?»
2. Нажав на значок вопроса в правом нижнем углу экрана

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

Чтобы убрать черное окно со всеми комбинациями клавиш просто нажмите на крестик в правом верхнем углу этого окна.

Самые важные комбинации клавиш в Фигма

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

1. Сtrl + C — копировать элемент
2. Сtrl + V — вставить элемент
3. Сtrl + X — вырезать элемент
4. Сtrl + A — выделить все элементы сразу
5. I — инструмент пипетка, выбирайте цвет
6. K — менять размер
7. V — стандартный инструмент выделения и перемещения
8. [ — переместить слой назад, за всеми слоями
9. ] — переместить слой вперед, перед всеми слоями
10. Ctrl + Shift + 4 — показать/спрятать сетки
11. Зажатый Alt — дублировать элементы / фреймы
12. Зажатый Ctrl + колесико мыши — приближаться к объектам и отдаляться от них
13. Зажатый пробел + зажатая левая кнопка мыши — перемещение по рабочей области
14. Shift + A — создать auto layout
15. Ctrl + \ — убрать или показать интерфейс редактора Фигма

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

Все горячие клавиши в Фигма с переводом на русский и описанием

Сочетание клавиш «Ctrl + Shift + ?» откроет внизу экрана окно чёрного цвета. Это вкладка Essential (в переводе с английского — «существенное», «важное»).

Во вкладке Essential можно:
1. (Show/Hide UI) Ctrl + \ — скрыть или вывести на экран интерфейс Фигмы;
2. (Pick Color) I — выбрать «пипеткой» цвет или оттенок из любого объекта и применить его в своей работе;
3. (Quick Actions) Ctrl + / — быстро найти плагины, слои или команды в Фигме.

Вкладка Tools (или инструменты):

(Move tool) V — выделение и перемещение объектов в рамках проекта;
(Frame tool) F — создание нового фрейма (рабочего пространства дизайнера в Фигме);
(Pen tool) P — рисование пером;
(Pencil tool) Shift + P — рисование карандашом;
(Text tool) T — добавление нового текста;
(Rectangle tool) R — готовый прямоугольник, параметры которого вы можете задать на правой панели;
(Ellipse tool) O — эллипс или круг (с изменчивыми параметрами);
(Line tool) L — линия;
(Arrow tool) Shift + L — стрелка;
(Add comment) C — написание комментария или заметки к выделенному объекту;
(Pick color) I — распознавание и выбор цвета при помощи пипетки;
(Slice tool) S — обрезка элемента «ножом».

Вкладка View (или вид) предназначена для того, чтобы показывать или скрывать элементы. А какие именно элементы показать / скрыть — решает сочетание клавиш:

Shift + R — показать или скрыть линейки;
Ctrl + Shift + 3 на Windows и ⌘ + Y на Mac — показать или скрыть обводку всех элементов;
Ctrl + Alt + Y на Windows и ⌘ + P на Mac — показать или скрыть пиксельный просмотр;
Ctrl + Shift + 4 на Windows и Ctrl + G на Mac — показать или скрыть сетку;
Ctrl + ‘ на Windows и ⌘ + ‘ на Mac — показать или скрыть пиксельную сетку;
Ctrl + \ на Windows и ⌘ + \ на Mac — показать или скрыть боковые панели;
Ctrl + Alt + \ на Windows и Alt + ⌘ + \ на Mac — показать или скрыть курсоры других пользователей;
Alt + 1 — показать или скрыть только слои;
Alt + 2 — показать или скрыть только компоненты;
Alt + 8 — показать или скрыть панель дизайна;
Alt + 9 — показать или скрыть панель прототипа.

Вкладка Zoom (или масштабирование) отвечает за расположение и перемещение объектов на рабочем пространстве в Фигма:

Space + drag — перемещение Zoom по рабочему пространству;
+ (плюс) — увеличение масштаба (приближение);
— (минус) — уменьшение масштаба (отдаление);
Shift + 0 — отображение один к одному (экран 1:1);
Shift + 1 — масштабирование всего рабочего пространства;
Shift + 2 — масштабирование выбранного вами элемента;
Shift + N — масштабирование предыдущего фрейма;
N — масштабирование следующего фрейма;
Page Up — поиск предыдущей страницы;
Page Down — поиск следующей страницы;
Home — поиск предыдущего фрейма;
End — поиск следующего фрейма.

Вкладка Text (или работа с текстом):

Ctrl + B на Windows и ⌘ + B на Mac — выделение текста жирным;
Ctrl + i и ⌘ + i на Mac — выделение текста курсивом;
Ctrl + U и ⌘ + U на Mac — подчеркивание текста;
Ctrl + Shift + V — вставление и сопоставление элементов;
Ctrl + Alt + L на Windows и ⌘ + Alt + L на Mac — выравнивание текста по левому краю фрейма;
Ctrl + Alt + T на Windows и ⌘ + Alt + T на Mac — выравнивание текста по центру фрейма;
Ctrl + Alt + R на Windows и ⌘ + Alt + R на Mac — выравнивание текста по правому краю фрейма;
Ctrl + Alt + J на Windows и ⌘ + Alt + J на Mac — выравнивание текста по ширине;
Ctrl + Shift + < и >на Windows и ⌘ + Shift + < и >на Mac — изменение размера текста;
Alt + < и >— изменение расстояния между символами (буквами);
Alt + Shift + < и >— изменение расстояния между строками.

Вкладка Shape (работа с фигурами и векторными изображениями в Фигма):

P — перо;
Shift + P — карандаш;
B — заливка цветом;
Alt + / — удаление заливки;
/ — удаление обводки;
Shift + X — одновременное изменение цвета обводки и заливки (они поменяются местами);
Ctrl + Shift + O на Windows и ⌘ + Shift + O на Mac — преобразование в кривые;
Ctrl + E на Windows и ⌘ + E на Mac — работа с точками векторных изображений.

Вкладка Selection (или выделение):

Ctrl + A на Windows и ⌘ + A на Mac — выделение всего;
Ctrl + Shift + A на Windows и ⌘ + Shift + A на Mac — выделение всего, кроме выбранного вами элемента;
Esc — отмена выделения;
Ctrl + click Windows и ⌘ + click на Mac — выделение слоёв, находящихся под другими слоями;
Ctrl + right click Windows и ⌘ + right click на Mac — выделение слоя на боковой панели;
Enter — выделение дочернего элемента;
Shift + Enter — выделение родительского элемента;
Tab — выделение следующего по порядку элемента;
Shift + Tab — выделение предыдущего по порядку элемента;
Ctrl + G на Windows и ⌘ + G на Mac — группировка элементов;
Ctrl + Shift + G на Windows и ⌘ + Shift + G на Mac — разгруппировка элементов;
Ctrl + Alt + G на Windows и ⌘ + Alt + G на Mac — преобразование во фрейм;
Ctrl + Shift + H на Windows и ⌘ + Shift + H на Mac — показ или скрытие элемента;
Ctrl + Shift + L на Windows и ⌘ + Shift + L на Mac — блокировка и разблокировка элемента.

Вкладка Cursor (или курсор):

Alt — выделение элемента при клике;
Alt — копирование элемента в движении;
Ctrl + click на Windows и ⌘ + click на Mac — выделение слоёв, находящихся под другими слоями;
Ctrl + right click на Windows и ⌘ + right click на Mac — показ иерархии выбранного элемента;
Alt — изменение размера относительно центра элемента;
Shift — пропорциональное изменение размера;
Ctrl на Windows и ⌘ на Mac — перемещение элемента во время изменения его размера.

Вкладка Edit (или редактирование):

Ctrl + C на Windows и ⌘ + C на Mac — создание копии элемента;
Ctrl + X на Windows и ⌘ + X на Mac — вырезание (или удаление) элемента;
Ctrl + V на Windows и ⌘ + V на Mac — вставка (или добавление) элемента;
Ctrl + Shift + V на Windows и ⌘ + Shift + V на Mac — вставка поверх выбранного элемента;
Ctrl + D на Windows и ⌘ + D на Mac — создание копии;
Ctrl + R на Windows и ⌘ + R на Mac — переименование элемента;
Ctrl + Shift + E на Windows и ⌘ + Shift + E на Mac — экспорт элемента;
Ctrl + Alt + C на Windows и ⌘ + Alt + C на Mac — создание копии свойств выделенного элемента;
Ctrl + Alt + V на Windows и ⌘ + Alt + V на Mac — вставка скопированных свойств в выбранный вами элемент.

Вкладка Transform (или трансформация):

Shift + H — отражение по горизонтали;
Shift + V — отражение по вертикали;
Ctrl + Alt + M на Windows и ⌘ + Alt + M на Mac — создание маски;
Enter — включение редактирования векторных объектов или изображений;
Ctrl + Shift + K на Windows и ⌘ + Shift + K на Mac — вставка изображения;
Alt + dbl-click — обрезка изображения;
1 — задание прозрачности элемента 10%;
5 — задание прозрачности элемента 50%;
0 — задание прозрачности элемента 100%.

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

Ctrl + ] на Windows и ⌘ + ] на Mac — перемещение элемента ближе к переднему плану;
Ctrl + [ на Windows и ⌘ + [ на Mac — перемещение элемента дальше от переднего плана;
Ctrl + Shift + ] на Windows и ⌘ + Shift + ] на Mac — перемещение элемента на передний план;
Ctrl + Shift + [ на Windows и ⌘ + Shift + [ на Mac — перемещение элемента на задний план;
Alt + A — выравнивание по левой стороне;
Alt + D — выравнивание по правой стороне;
Alt + W — выравнивание по верхней стороне;
Alt + S — выравнивание по нижней стороне;
Alt + H — выравнивание по горизонтальной линии элементов;
Alt + V — выравнивание по вертикальной линии элементов;
Ctrl + Shift + Alt + H на Windows и ⌘ + Shift + Alt + H на Mac — выравнивание с распределением горизонтального пространства;
Ctrl + Shift + Alt + V на Windows и ⌘ + Shift + Alt + V на Mac — выравнивание с распределением вертикального пространства.

Вкладка Components (или компоненты):

Alt + —показ всех элементов;
Ctrl + Alt + K на Windows и ⌘ + Alt + K на Mac — создание компонента;
Ctrl + Alt + B на Windows и ⌘ + Alt + B на Mac — преобразование компонента во фрейм;
Ctrl + Alt + O на Windows и ⌘+ Alt + O на Mac — переход к многопользовательской библиотеки.