Концепт: как можно улучшить инструмент Image в Figma

В статье много GIF-анимаций!

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

Статья состоит в основном из GIF-анимаций. В правой части анимации находится окно Image, в котором показаны настройки изображения. А в левой — тестовый фрейм, который демонстрирует то, как влияют эти настройки на изображение при изменении размера.

Я сделал редизайн окна Image, изменил размеры элементов, их расположение, убрал поле «100%» оттуда, где его значение менять нельзя. Поменял иконку вращения изображения, а главное — добавил возможность выравнивать изображение внутри контейнера. Превью изображения в окне Image теперь показывает, как будет выровнена картинка внутри контейнера. Далее я расскажу об этом подробнее.

P.S. Под контейнером я не имею ввиду фрейм или группу. Контейнер — это фигура или объект, у которого изображение является содержимым (заливкой).

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

И если пропорции картинки отличаются от пропорций контейнера, то верх и низ или правая и левая стороны картинки «обрезаются», тем самым, возможно, скрывая важную часть изображения.

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

Если мы будем растягивать изображение в режиме Fit, то картинка в контейнере не обрезается, как в режиме Fill, а всегда отображается полностью. Даже если пропорции контейнера не совпадают с пропорциями картинки.

В контейнере появится пустое пространство, но картинка всё равно сохранит свои пропорции и будет отображаться полностью. Но опять же, Figma всегда выравнивает картинку по центру контейнера. А было бы неплохо, если бы мы сами могли выбирать выравнивание в зависимости от своих потребностей. Давайте посмотрим, как это могло бы работать:

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

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

На такой случай я сделал чекбокс Fix proportions, чтобы можно было заблокировать изменение пропорций, после того как вы всё настроили.

Если чекбокс Fix proportions не стоит, значит, картинка будет растягиваться, нарушая свои пропорции при изменении размера контейнера (как режим Scale).

Если включить чекбокс Fix proportions, появляются кнопки выравнивания. В таком случае режим Crop работает практически так же, как и режим Fill.

В режиме Tile я также добавил возможность выравнивать изображение внутри контейнера. Сейчас Figma по умолчанию выравнивает изображение по верхней и левой сторонам контейнера.

Но и тут было бы неплохо иметь возможность выравнивать картинку так, как нам нужно. Давайте посмотрим примеры того, как это могло бы работать.

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

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

Автор иллюстрации Kyle Lambert.