Фреймы, фигуры, картинки и другие объекты
Изменение размера элемента на макете — рутинная дизайнерская задача. В Figma есть несколько инструментов для этой цели и доступны тонкие настройки в зависимости от типов объектов. Если хотите узнать все о возможностях масштабирования в программе, эта статья для вас.
Разбираем основные способы изменения размеров изображений, фигур, текстов, сеток и фреймов — для новичков и продвинутых пользователей.
Подходят для любых фреймов, фигур и картинок.
Самый простой и распространенный способ: кликаем на объект и произвольно растягиваем его до нужных размеров. Можно тянуть за уголок или за одну из сторон, по умолчанию картинка или фрейм всегда будут масштабированы с сохранением пропорций. А фигуры (шейпы) — нет. Чтобы сохранить пропорции в них, тянуть нужно с зажатым Shift.
Если нужно обрезать объект справа, слева, сверху или снизу, следует тянуть за нужную сторону с зажатым Ctrl.
Этот способ удобен, когда нужно подогнать картинку под размеры фрейма или масштабировать элемент произвольно, на глаз. Можно растягивать один или несколько объектов одновременно. Для работы с несколькими объектами их сначала нужно выделить с зажатым Shift.
При нажатии на элемент справа появляется панель настроек. Находим там раздел Layout → Dimensions. В полях W и H, width и height, указаны ширина и высота объекта соответственно. Можем поменять их — ввести любое значение.
Справа от высоты расположена небольшая квадратная иконка — Lock aspect ratio. Это как раз та опция, которая отвечает за сохранение пропорций объекта. По умолчанию она включена для фреймов и картинок и отключена для фигур, но вы можете сами отрегулировать эту настройку для каждого объекта. Когда зажат Lock aspect ratio, то и при растягивании объекта мышкой, и при вводе конкретных значений в пикселях, пропорции останутся неизменными. Например, если мы поменяем высоту круга на 700, ширина тоже автоматически увеличится до 700. При отключенном Lock aspect ratio увеличение высоты просто превратило бы круг в овал.
Представим, что нам нужно увеличить фрейм со всеми элементами внутри. Если просто потянуть за края, изменится только размер фрейма. Картинка и шейп останутся прежними.
Чтобы не подгонять все элементы вручную, можно воспользоваться инструментом Scale — масштабирование. Нажимаем на фрейм → кликаем горячую клавишу K → в поле Scale указываем нужный масштаб, например, х2.
Фрейм вместе с объектами увеличился в 2 раза:
При увеличении/уменьшении объектов нужно учитывать мелкие детали, которые влияют на общее восприятие дизайна.
Скругление углов. Один и тот же радиус скругления совершенно по-разному выглядит на картинках разного размера.
Рассмотрим на 4 картинках со стороной в 200, 500, 1500 и 5000 px. Установим радиус скругления углов 50 градусов.
Самое маленькое изображение — отчетливо округлое. У картинки в 1500 px мы видим лишь слегка скругленные углы.
У изображения в 5000 px скругление почти незаметно:
Обводка. Ее можно добавить к шейпу или картинке через раздел Stroke в панели настроек. Для примера возьмем круг и сделаем черную обводку толщиной 5 px.
Если мы сейчас изменим размер круга, то обводка останется такой же. Но нам нужно сделать так, чтобы она поменялась пропорционально. Для этого нажимаем на объект с обводкой, кликаем правую кнопку мыши и выбираем Outline Stroke. Инструмент выделит Stroke в отдельный слой.
Фигура и обводка стали двумя разными объектами, и работать с ними одновременно неудобно. Объединим их: выделяем оба, нажимаем правую кнопку мыши и выбираем пункт Group Selection/кликаем горячие клавиши Ctrl + G.
Готово. Теперь можно произвольно менять объект так, чтобы обводка пропорционально увеличивалась и уменьшалась.
Для сравнения: так выглядит масштабирование: слева исходный круг, справа сверху — обычное масштабирование, снизу — с применением Outline Stroke.
Единицы измерения. Figma ориентирована на цифровой дизайн, поэтому по умолчанию работает с пикселями, и изменить это нельзя. Для расчета размера в сантиметрах можно использовать специальные плагины.
Unit Converter переводит сантиметры в дюймы, пиксели, миллиметры и DPI.
Real Scale Preview автоматически рассчитывает физические размеры объектов Figma.
Дополнительные возможности фреймов. При создании фрейма (горячая клавиша А) вы можете либо растянуть прямоугольник произвольной формы, либо выбрать готовый формат на панеле справа. Есть варианты для экранов разных устройств, для презентаций и соцсетей, а также форматы А4, А5 и А6 для полиграфии. Это удобно, чтобы не переводить сантиметры в пиксели и не вводить значения вручную.
В Figma изображения можно вписывать внутрь других объектов разными способами. Представим, что нам нужно разместить картинку целиком внутри фрейма. Как это сделать: дважды кликаем по изображению, чтобы появился инструмент для обрезки — Crop → растягиваем обрезку до размеров фрейма.
В окне для редактирования находим открывающееся меню — над картинкой. Там есть 4 варианта действия: Fill, Fit, Crop и Tile.
Fill. Изображение полностью заполняет выделенное пространство и частично обрезается.
Fit. Картинка вписывается в рамки целиком, без обрезания. Если соотношение сторон изображения и поля не совпадают, остаются пустые поля. У нас, например, вертикальная картинка и горизонтальный фрейм, поэтому справа и слева — пусто.
Crop. Стандартный инструмент для обрезки. Допустим, мы хотим убрать пустые поля по краям. Обрезаем их так, чтобы осталась только картинка.
Tile. Плитка из одинаковых картинок уменьшенного размера, равномерно вписанных в объект.
Размеры плитки можно настраивать в процентах от исходных параметров изображения. Наша картинка изначально была 1000х1000 px, а при 50% стала 500х500 px.
Универсальные способы из предыдущего раздела для текста не подходят. Изменить его размер можно только с специальном разделе на панели настроек — Typography.
В поле вводим произвольное число или выбираем вариант из открывающегося списка:
Также есть быстрый способ подогнать текст под размер контейнера. Это пригодится в тех случаях, когда нужно вписать текст во фрейм, фигуру, готовый шаблон.
Для примера попробуем разместить текстовый блок внутри шейпа. Сделаем что-то вроде обложки:
Переносим текстовый блок в прямоугольник. Нажимаем на текст и растягиваем контейнер для него так, чтобы он совпал с границами фигуры.
Открываем раздел Actions в нижнем меню:
Переходим к плагинам и виджетам, Plugins & Widgets, ищем autosizetext:
Запускаем плагин и делаем ресайз для выбранного поля. Текст адаптируется к размерам контейнера.
Автораскладка (автолейаут) — это инструмент для автоматического расположения элементов внутри фрейма по горизонтали, вертикали или сеткой (она пока работает в бета-версии).
Суть в том, что лэйаут сохраняет заданные размеры и отступы.
Мы установили раскладку по вертикали, скопировали фрейм и поменяли текст. Расположение и расстояние до картинки не поменялось.
Сетка — это вспомогательный инструмент для расположения объектов внутри фрейма. Она задает границы и ориентиры, которые помогают дизайнеру поддерживать композицию.
Добавить сетку можно через раздел Layout Guide на панели справа. Настраиваются количество колонок/рядов, ширина, отступы и межколонники.
Для каждого типа объектов есть свои параметры настроек размеров, которые позволяют решить любые дизайнерские задачи: сделать макет интерфейса, креатив для сторис или адаптировать рекламный баннер к разным форматам. Выбирайте удобные способы в арсенале Figma и тестируйте вспомогательные плагины!
Читайте только в Конверте
Email-рассылки почти бесплатно только в феврале!
Промокод FB26K даёт скидку 99% на первый месяц тарифа «Лайт» или «Стандарт». До 28 февраля включительно.
Искренние письма о работе и жизни, эксклюзивные кейсы и интервью с экспертами диджитала.
Проверяйте почту — письмо придет в течение 5 минут (обычно мгновенно)
Читать нас в ТГ 
