Как изменить размер фото в фигме

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

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

Figma — это веб-инструмент для совместной работы над дизайнами, который позволяет не только создавать интерфейсы, но и эффективно управлять вложенными элементами, включая изображения. В отличие от традиционных графических редакторов, здесь нет понятия «разрешения» в DPI — всё строится на пикселях и векторах. Это означает, что при изменении размера фото важно понимать, как ведёт себя растровое содержимое внутри векторной среды. Многие пользователи сталкиваются с проблемой потери качества, особенно если увеличивают картинку сверх её оригинальных размеров. Однако при правильном подходе можно минимизировать риски и достичь идеального результата.

Содержание статьи:

Основные способы изменения размера
Пошаговый алгоритм ручного изменения
Точное управление через панель свойств
Как быстро дублировать с изменением размера
Сохранение пропорций и блокировка масштаба
Когда можно (и нужно) разрывать пропорции
Работа с группами и компонентами
Автомасштабирование с помощью Constraints
Ошибки и как их избежать
Экспорт изображений в нужном размере
Экспертное мнение
Вопросы и ответы
Заключение

Основные способы изменения размера

Изменить размер изображения в Figma можно несколькими способами: вручную, через панель свойств, с помощью сочетаний клавиш или автоматических плагинов. Каждый метод имеет свои преимущества и лучше подходит для разных задач. Например, при работе с прототипом может потребоваться быстрое масштабирование, а при подготовке ассетов — точные значения.

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

Второй способ — использование горячих клавиш. Комбинация Shift + → увеличивает ширину на 10 пикселей, аналогично работают стрелки в другие стороны. Если зажать Alt, можно дублировать изображение при перемещении. Эти комбинации полезны при выравнивании нескольких элементов.

Третий способ — работа с плагинами. Например, плагины типа «Image Resizer» позволяют задавать предустановленные размеры (например, 32×32, 64×64) одним кликом. Это особенно актуально при создании иконок или аватаров.

Пошаговый алгоритм ручного изменения

Откройте ваш файл в Figma и найдите нужное изображение.
Кликните по нему, чтобы выделить. Появятся маркеры по краям.
Наведите курсор на один из угловых маркеров (лучше использовать нижний правый).
Зажмите левую кнопку мыши и тяните в нужном направлении.
Для сохранения пропорций удерживайте клавишу Shift.
Отпустите кнопку, когда достигнете нужного размера.

Полезно знать: При ручном масштабировании Figma показывает текущие значения ширины и высоты рядом с курсором — это помогает ориентироваться без перехода в панель свойств.

Точное управление через панель свойств

Для профессионального дизайна недостаточно приблизительных значений. Часто требуется установить точные размеры, например, 128×128 пикселей для иконки или 1920×1080 для баннера. В таких случаях используется правая панель свойств (Inspector), где можно ввести числовые значения.

После выделения изображения в правом верхнем углу интерфейса появляются поля W (ширина) и H (высота). Просто кликните по одному из них и введите нужное число. После ввода значение применяется мгновенно.

Если вы хотите изменить только одно измерение, а второе оставить без изменений, просто введите значение в одно поле. Однако будьте осторожны: если значок цепочки между W и H активен, изменение одного параметра повлияет и на другой. Чтобы избежать этого, отключите связь, кликнув по иконке цепочки.

Поле	Функция	Горячая клавиша
W (Width)	Ширина изображения в px	Alt + → / ←
H (Height)	Высота изображения в px	Alt + ↑ / ↓
Цепочка	Блокировка/разблокировка пропорций	—
X, Y	Позиция на холсте	Стрелки

Как быстро дублировать с изменением размера

Иногда нужно создать несколько версий одного изображения в разных размерах. Быстрый способ:

Выделите изображение и нажмите Ctrl+C, затем Ctrl+V.
Вставьте копию рядом.
Измените размеры в полях W и H.
Повторите для других вариантов.

«Используйте команду “R” для временного переключения в режим Rectangle Tool — это позволяет быстро нарисовать рамку нужного размера, а затем вставить туда изображение через Drag & Drop.” — Анна Петрова, UX-дизайнер, 7 лет в Figma

Сохранение пропорций и блокировка масштаба

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

Чтобы избежать этого, используйте иконку цепочки между полями W и H. Когда она замкнута — все изменения масштабируются пропорционально. Если вы введёте 200 в поле ширины, высота автоматически рассчитается на основе исходного соотношения сторон.

Если вы случайно разомкнули цепочку, просто кликните по иконке ещё раз. Также можно удерживать Shift при ручном растягивании — это временно блокирует пропорции.

Когда можно (и нужно) разрывать пропорции

Не всегда сохранение пропорций — правильное решение. Например:

При создании баннеров с жёсткими требованиями к размерам (например, Google Ads).
Когда изображение — часть коллажа и должно заполнить заданную область.
Если используется техника «object-fit: cover» в вебе, и важно показать только центральную часть.

В таких случаях разблокируйте цепочку, но обязательно обрезайте изображение, чтобы не было пустых областей. Используйте маски: выделите изображение, создайте фигуру нужного размера, выделите оба элемента и нажмите Ctrl+Alt+M.

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

Работа с группами и компонентами

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

Лучшая практика — выделить именно изображение внутри группы. Для этого дважды кликните по группе, чтобы войти внутрь, затем выберите картинку. Теперь можно менять её размер без влияния на соседние объекты.

Если изображение — часть компонента, изменение его размера в экземпляре не затронет оригинал, если только не используется механизм Variants или Constraints. Однако, если вы измените размер в главном компоненте, все экземпляры обновятся.

Автомасштабирование с помощью Constraints

Constraints — мощный инструмент Figma для управления поведением элементов при изменении размера родительского фрейма. Для изображений можно задать:

Left & Top — закрепить в левом верхнем углу.
Center — центрировать по горизонтали и вертикали.
Scale — масштабировать вместе с фреймом.

Выберите изображение, откройте панель свойств и найдите раздел Constraints. Установите нужный режим. Например, при значении Scale изображение будет растягиваться при изменении размера фрейма, что полезно для фонов.

«Constraints — это как CSS flexbox. Они позволяют создавать адаптивные макеты без кода. Особенно полезны при работе с карточками, где изображение должно масштабироваться под разные устройства.” — Дмитрий Сидоров, Product Designer, Figma Certified Trainer

Ошибки и как их избежать

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

Первая ошибка — увеличение изображения больше оригинального размера. Растровые картинки теряют чёткость при upscale. Figma не добавляет детали — она просто растягивает пиксели. Результат — размытость.

Вторая ошибка — игнорирование масштаба страницы (Zoom). При масштабе 50% вы можете неверно оценить реальные размеры. Всегда проверяйте значения в панели свойств, а не на глаз.

Третья ошибка — изменение размера через трансформацию (Rotate + Scale), что может исказить матрицу преобразования. Лучше использовать прямые поля W и H.

Ошибка	Последствие	Решение
Увеличение > 100%	Размытость изображения	Использовать исходник с запасом по размеру
Разомкнутые пропорции	Искажение формы	Включить цепочку или использовать маску
Изменение группы вместо изображения	Сдвиг других элементов	Войти в группу и выбрать картинку отдельно
Нет маски при обрезке	Экспорт лишних пикселей	Применить маску или crop frame

Экспорт изображений в нужном размере

После изменения размера важно правильно экспортировать изображение. Figma позволяет задавать множественные форматы и размеры экспорта. Выделите изображение, перейдите в правую панель и найдите раздел Export.

Нажмите «+» рядом с Export, чтобы добавить настройку. Здесь можно указать:

Формат: PNG, JPG, SVG, PDF.
Размер: 1x, 2x, 3x (для ретины), или кастомный (например, 0.5x).
Обрезку: по умолчанию экспортируется только видимая часть (если есть маска).

Если вы хотите экспортировать изображение в другом разрешении, не равном текущему, укажите множитель. Например, 2x создаст файл вдвое больше по каждому измерению. Это полезно для ретина-экранов.

Полезно знать: Перед экспортом убедитесь, что изображение имеет нужный размер. Figma экспортирует именно те пиксели, которые вы видите в редакторе, с учётом всех трансформаций.

Экспертное мнение

«Многие дизайнеры забывают, что Figma — это не Photoshop. Здесь нельзя «улучшить» качество изображения после увеличения. Единственный надёжный способ — использовать high-res исходники. Я рекомендую хранить ссылки на оригиналы в описании файла или в специальном фрейме с ассетами.” — Екатерина Морозова, Lead UI Designer, опыт в Figma с 2018 года

Она также отмечает важность системы имён: «Если вы работаете в команде, называйте слои с изображениями понятно: avatar-user-64px, banner-main-1920, а не Image 1, Image 2. Это упрощает поиск и изменение размеров позже».

Вопросы и ответы

Можно ли изменить размер всех изображений сразу?

Прямой функции нет, но можно использовать плагины, например, «Batch Image Resizer». Выделяете несколько картинок, указываете целевой размер, и плагин применяет изменения ко всем.

Почему изображение становится размытым после увеличения?

Потому что Figma работает с растровыми данными «как есть». Увеличение не восстанавливает потерянные детали — оно просто растягивает пиксели. Используйте исходники с запасом по размеру.

Как сделать, чтобы изображение автоматически подстраивалось под размер фрейма?

Примените Constraint «Scale» или используйте Auto Layout. В Auto Layout изображение можно настроить на растяжение по ширине или высоте.

Можно ли изменить размер изображения через API?

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

Поддерживаются ли SVG с изменением размера без потерь?

Да, векторные изображения (SVG) можно масштабировать без потери качества. Но если SVG загружен как растровый объект, он ведёт себя как обычное изображение.

Заключение

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

Для стабильного результата работайте с high-res изображениями, используйте маски при обрезке и экспортируйте с правильными настройками. Автоматизация через плагины и Constraints сэкономит часы рутинной работы.

Изменяйте размер через панель свойств для точности.
Блокируйте пропорции иконкой цепочки или клавишей Shift.
Используйте маски, чтобы обрезать изображения без потерь.
Применяйте Constraints для адаптивного поведения.
Экспортируйте с нужными множителями (1x, 2x, 3x).

⚠️ Дисклеймер — нажмите, чтобы развернуть

Материалы, опубликованные в разделе «Блог» на сайте RU DESIGN SHOP (rudesignshop.ru), носят исключительно информационный и ознакомительный характер и не являются руководством к действию, финансовой рекомендацией, медицинской услугой, ветеринарным назначением либо рекламой товаров и услуг, включая азартные игры. Публикации не содержат призывов к участию в азартных играх и не направлены на продвижение соответствующих операторов.

Безопасность применения товаров и веществ: при использовании строительных материалов, бытовой химии, пестицидов и агрохимикатов необходимо строго следовать инструкциям производителя и действующему законодательству Российской Федерации, включая Федеральный закон РФ от 19.07.1997 № 109-ФЗ «О безопасном обращении с пестицидами и агрохимикатами».

Упоминание товарных знаков, брендов и организаций носит исключительно информационный характер и не означает наличие партнёрских отношений или одобрения со стороны правообладателей.

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

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

Правовая ответственность: решения, принятые на основе опубликованной информации, пользователь принимает самостоятельно и на свой риск; редакция и авторы несут ответственность в пределах, установленных законодательством Российской Федерации.

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

Упоминание организаций с ограниченным статусом: компания Meta Platforms Inc. (социальные сети Facebook и Instagram) признана экстремистской организацией решением суда РФ, её деятельность запрещена на территории Российской Федерации; любые упоминания приводятся исключительно в информационных целях.

Авторские права и источники: информация собирается из открытых источников; её актуальность указывается на дату публикации и может изменяться.

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

Персональные данные и cookies: сайт использует cookies и обрабатывает персональные данные пользователей в соответствии с Федеральным законом № 152-ФЗ «О персональных данных» и Политикой конфиденциальности RU DESIGN SHOP.

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