Масштаб в фигме: как увеличить или уменьшить

Default: Click and Drag

By default in Figma, to resize an element you need to select it, then grab one of the transformation controls and drag the object as you need. Its dimensions will be displayed on a tool tip as you do so.

Press SHIFT whilst you’re doing this and you’ll constrain the proportions.

Figma’s Scale Tool

The scale tool in Figma can be found here (or keyboard shortcut K):

The cursor will change slightly, and now you can click and drag the controls in the same way, but retain the stroke width proportion as you resize the object.

The Properties Inspector

If you want to change the size of an object extremely precisely, reach for the width and height fields in the inspector:

Either drag the values with your mouse cursor, or enter the values with the keyboard.

Keyboard Shortcuts

Finally, the last way you can resize objects in Figma is with the keyboard shortcuts. Select an object, then press down CTRL on Windows, or COMMAND on Mac, then use the arrow keys to increase the width or height of the object 1px at a time. Pressing SHIFT at the same time will increase the increment to 10px to speed things up.

Center

Элемент находится на том же расстоянии от центра фрейма, его ширина изменяться не будет 

Figma resources and assets (free and premium)

Get inspired with these roundups of UI and UX kits for Figma, Graphics, Icon kits, and more!

Left&right

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

Math bonus

As a nice extra you can even perform math operations in the inspector fields. Entering 300 150 will resolve to 450 (for example) and all other common operations will work just fine.

More figma quick tips

Learn more about Figma with our written tutorials and video guides:

Right

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

Scale

Элемент будет масштабироваться пропорционально фрейму. Его высота будет изменяться

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

That’s a wrap!

And those are the 4 ways you can resize objects in Figma! I hope you enjoyed this quick guide, and don’t forget to check out our other Figma resources listed below.

When clicking and dragging doesn’t work

You’ll find that sometimes this approach doesn’t work as you might expect; like on objects with strokes for example. For example, this icon, when scaled using the same technique, gets completely distorted because the stroke stays the same width:

To prevent this you need to do things differently..

Включение горячих клавиш в фигме

Чтобы включить подсказки горячих клавиш для изменения масштаба в фигме, нажмите на иконку вопроса в правом нижнем углу. Затем выберите надпись «Keyboard shortcuts»

Переключитесь на вкладку «Zoom». Горячие клавиши, которые вы использовали будут подсвечиваться синим цветом. Те которые не использовали будут обведены рамкой.

Горячие клавиши для изменения масштаба в figma

Нажмите горячие клавиши Shift 0, чтобы изменить масштаб до 100%.

Комбинация клавиш Shift 1 позволяет увидеть все элементы на странице в вашем проекте.

Если хотите изменить масштаб до размеров фрейма, то нажмите на клавиши Shift 2.

Для переключения на новый фрейм нажмите сочетание клавиш Shift N.

Чтобы переключиться на предыдущий фрейм, нажмите клавишу «N» на клавиатуре.

Как увеличить или уменьшитьмасштаб в фигме

Чтобы увеличить масштаб в фигме нажмите на клавишу « ».

Если хотите уменьшить масштаб нажмите на клавишу «-».

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

Третий способ — нажать в верхнем правом углу на проценты и изменить масштаб следующим образом:

• Увеличить — Zoom in.
• Уменьшить — Zoom out
• Масштаб изменяется для просмотра всех элементов на странице — Zoom to fit.
• Изменить масштаб до 50% — Zoom to 50%.
• Масштаб 100% — Zoom to 100%.
• Изменить масштаб до 200% — Zoom to 200%.

Заключение

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

P.S. Вы веб-дизайнер и хотите ускорить вашу работу? Тогда получите бонусные материалы по быстрому созданию дизайна сайтов в Figma, то переходите по этой ссылке. Вы узнаете секретный метод создания дизайна сайта и сэкономите время при работе.

Автор статьи: Владимир Чернышов