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

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 копировать. Расширенные возможности

Все три буфера обмена работают независимо и не перезаписывают друг друга.

Обычное копирование (crtl+c/ctrl+v или cmnd+c/cmnd+v)

Самое привычное для большинства пользователей копирование.

Скопированный объект будет вставлен в активный фрейм с теми же параметрами расположения (отступами слева и сверху).

Результат копирования в Фигме

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

Видео: копирование в Figma

 

Тег video не поддерживается вашим браузером

Вставить на месте другого элемента

Чтобы вставить скопированный элемент рядом (на месте) другого произвольного выделенного (выбранного) элемента, используйте сочетание Shift + Command + V. Скопированный элемент будет иметь те же параметры X и Y.

Видео: копирование в место рядом с другим элементом в Figma

 
</spa
Тег video не поддерживается вашим браузером

Дублирование элемента

Дублирование выполняется сочетанием ctrl+d или cmnd+d. Дублирование фактически объединяет две команды crtl+c/ctrl+v или cmnd+c/cmnd+v, но помимо этого, если вы сдвинете первый продублированный элемент, то следующий продублированный будет сдвинут на такое же расстояние от предыдущего.

1. Выбрать элемент
2. Нажать ctrl+d или cmnd+d
3. Сдвинуть дубль
4. Применять пункт 2 необходимое количество раз

Видео: дублирование в Figma

 

Тег video не поддерживается вашим браузером

Такой способ удобен для создания группы одинаковых элементов

Перетаскивание с зажатым Option (Alt)

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

Видео: копирование перетаскивающем с Alt или Option

 

Тег video не поддерживается вашим браузером

Копирование стилей

Данная процедура применяет все стили одного элемента к другому.

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

1. Заливка
2. Обводка
3. Эффекты
4. Шрифты
5. Позиционирование
6. Скрепления

1. Длина и высота
2. Расположение элемента

1. Выделяем исходный элемент
2. Жмем crtl+alt+c или cmnd+option+c
3. Выделяем один или несколько элементов, к которым нужно применить стиль
4. Жмём ctrl+alt+v или cmnd+option+v

Видео: копирование стилей

 

Тег video не поддерживается вашим браузером

Изображения для примера мы взяли из плагина Unsplash

Копировать как PNG

Любой слой можно скопировать в качестве растрового изображения PNG, подробнее читайте в этой статье.

Как скопировать в фигме. Дублирование. Работаем по умному.

Многие начинающие пользователи задаются вопросами «Как скопировать в фигме?». Это может быть, что угодно: элементы, текст, изображения, фрейм, слой и т.д. В этой инструкции поговорим про копирование и дублирование элементов в Figma. Вы будете работать намного продуктивнее и по умному. Смотрите видео ниже или прочитайте статью.

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

Первый способ, который можно использовать, чтобы скопировать любой элемент в фигме — нажмите комбинацию клавиш «Ctrl + C». Чтобы вставить нажмите «Ctrl + V». Это работает также как и в других программах.

Второй способ для копирования — это выбрать элемент, нажать на клавишу «Alt» и потянуть его в сторону с зажатой левой клавишей мыши.

Если вы хотите, чтобы скопированный элемент перемещался только по одной оси (X или Y), то нужно зажать Shift. Тогда он будет перемещаться по горизонтали или по вертикали. Это удобно, если вам нужно разместить элементы по одной оси. Рекомендую использовать для выравнивания.

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

Чтобы дублировать элементы в фигме, рекомендую сделать следующее. Скопируйте любой элемент с помощью клавиши Alt и перетащите элемент с нажатием левой клавишей мыши. Поместите копию в стороне (например на расстоянии 35 px от первого элемента).

Нажмите на комбинацию горячих клавиш «Ctrl + D». Элементы будут дублироваться и появляться на заданном ранее расстоянии (35 px).

Дублируя и копируя элементы таким образом вы сэкономите огромное количество времени на работе и будете работать по умному.

Заключение

В этой статье вы узнали как быстро и легко скопировать любой элемент в фигме. Также разобрались с инструментом дублирования. Теперь вы сможете работать быстрее и по умному. Это сработает для фреймов, текста, векторных фигур, слоёв, групп и т.д. Желаю создавать крутые проекты.

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

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

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

Move tool «V»

Первая клавиша это то чем мы пользуемся наверное большую часть времени Move tool , или же привычная мышка перемещения можно выбрать клавишей “V”. А также нажатие клавиши “Esc” зачастую перекинет вас на этот инструмент.

Frame tool “F”

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

Text tool “T”

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

Rectangle tool “R”

Нарисовать прямоугольник, при нажатии появится прямоугольник со сторонами 100х100 пикселей. Нажать и тянуть можно создать прямоугольник с произвольными сторонами, если в этот момент нажать и удерживать клавишу “Shift” то будет создаваться квадрат, добавив клавишу место в которое вы нажали станет центром фигуры, добавив клавишу “Alt” появится возможность передвигать фигуру которую вы рисуете. Эти добавления клавиш так же относятся и к фрейму и к элипсу. “Space”

Ellipse tool “O”

Рисуем овал, дополнительные клавиши такие же как и у прямоугольника.

Pick color “I”

Пипетка, позволяет выбрать цвет не копаясь в глубинах палитры.
Эту клавишу я нашел для себя пока готовил статью.

Pen tool «P»

Всем кто ранее работал в подобных программах известно как “перо”. Выбирается клавишей “P”. Позволяет создавать фигуры или линии произвольного вида и размера.

Group Selection «Ctrl+G»

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

Measure to Selection «Alt»

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

Resize from Center «Alt»

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

Resize Proportionally «Shift»

Уже упоминалось. Выделили, тянем за угол, увеличиваем пропорционально, можно тянуть за стороны и так же увеличивать сохраняя пропорции, экспериментируем, смотрим что получается, так же с помощью этой клавиши можно поворачивать объекты на 45° , 90°.
Противоположная сторона останется на месте, куда тянем туда и увеличивается.

Move While Resizing «Space»

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

Deep Select «Ctrl+Click»

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

Ignore Constraints(Frame only) «Ctrl»

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

Duplicate «Alt» «Ctrl+D»

Создать копию, можем выбрать объект, зажать то копия создастся на расстоянии на которое вы перетянули объект, от той копии которую вы только создали. “Alt” и потянуть этот объект, это будет копия нашего основного объекта. создаст копию на том же месте где находится сам объект. Если копию перетянуть и еще раз нажать “Ctrl+D” “Ctrl+D”
Чтоб все понять нужно открыть фигму и смотреть.

Show/hide UI «Ctrl+/»

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

Zoom to 100% «0»

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

Copy Properties «Ctrl+Alt+C» (Paste Properties «Ctrl+Alt+V»)

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

Flip Horizontal «Shift+H»(Flip Vertical «Shift+V»)

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

Align Centers «Alt+H» «Alt+V»

Отцентровка. Это типа товарищ того что выше, нажали и все по центру. Тут так же нужно следить что выбрано, если просто объект то он отцентруется по фрейму, если объекты рядом горизонтально то можно их выравнять нажав “Alt+V” , вертикальные собрать в столбик можно кнопками поклацай, разберешься. “Alt+H”

Use as Mask «Ctrl+Alt+M»

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

Edit shape or image «Enter»

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

Place Image «Ctrl+Shift+K»

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

Set Opacity «Shift+1…0»

Вот еще один помощник, меняем прозрачность 1 это 10%, 0 это 100%.

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

И второй бонус это листик А4 который можно положить возле клавиатуры пока изучаете программу.

Так же о фигме Статья по фреймам и группам

Моя телега для связи, если нужно (@Vladislav_Grigorenko)

Не забывайте отметить статью если она вам понравилась! и поделиться если есть с кем)

Запустил серию статей «Душная фигма» где стараюсь с начала рассказать о программе все что знаю, если интересно залетайте на первую статью на медиуме.