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

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

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

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

Что нового

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

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

Новое окно Image. Режимы: Fill, Fit, Crop, Tile
Старое окно Image. Режимы: Fill, Fit, Crop, Tile

Режим Fill

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

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

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

Изображение выровнено: горизонтально — по левой стороне, вертикально — по верху
Изображение выровнено: горизонтально — по левой стороне, вертикально — по центру
Изображение выровнено: горизонтально — по левой стороне, вертикально — по низу
Изображение выровнено: горизонтально — по центру, вертикально — по верху
Изображение выровнено: горизонтально — по центру, вертикально — по центру
Изображение выровнено: горизонтально — по центру, вертикально — по низу
Изображение выровнено: горизонтально — по правой стороне, вертикально — по верху
Изображение выровнено: горизонтально — по правой стороне, вертикально — по центру
Изображение выровнено: горизонтально — по правой стороне, вертикально — по низу

Режим Fit

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

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

Изображение выровнено: горизонтально — по левой стороне, вертикально — по верху
Изображение выровнено: горизонтально — по левой стороне, вертикально — по центру
Изображение выровнено: горизонтально — по левой стороне, вертикально — по низу
Изображение выровнено: горизонтально — по центру, вертикально — по верху
Изображение выровнено: горизонтально — по центру, вертикально — по центру
Изображение выровнено: горизонтально — по центру, вертикально — по низу
Изображение выровнено: горизонтально — по правой стороне, вертикально — по верху
Изображение выровнено: горизонтально — по правой стороне, вертикально — по центру
Изображение выровнено: горизонтально — по правой стороне, вертикально — по низу

Режим Crop

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

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

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

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

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

Режим Tile

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

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

Изображение выровнено: горизонтально — по левой стороне, вертикально — по верху
Изображение выровнено: горизонтально — по левой стороне, вертикально — по центру
Изображение выровнено: горизонтально — по левой стороне, вертикально — по низу
Изображение выровнено: горизонтально — по центру, вертикально — по верху
Изображение выровнено: горизонтально — по центру, вертикально — по центру
Изображение выровнено: горизонтально — по центру, вертикально — по низу
Изображение выровнено: горизонтально — по правой стороне, вертикально — по верху
Изображение выровнено: горизонтально — по правой стороне, вертикально — по центру
Изображение выровнено: горизонтально — по правой стороне, вертикально — по низу

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

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

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

0
19 комментариев
Написать комментарий...
Кирилл Конюх

Иконка переворота была лучше: вашу можно спутать с «обновить», а старую нет

Ответить
Развернуть ветку
Serge Demichev

Что вы так от фигмы тащитесь. Тормозная хреновина.

Ответить
Развернуть ветку
Sakari Sauso

Когда у меня ноут сломался и пришлось взять старый на время, invision, даже не открылся, а Figma почти летала

Ответить
Развернуть ветку
Андрей Насонов
Автор

как по мне менее тормозной чем другие

Ответить
Развернуть ветку
Serge Demichev

То есть вы на серьезе говорите, что веб-приложение работает быстрее нативного))

Ответить
Развернуть ветку
Sergey Gosha

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

Ответить
Развернуть ветку
Serge Demichev

Так я и не говорю про ФШ. Я в Sketch работаю. Да и в Adobe есть XD. Я уже не говорю про то как частенько у Figma проблемы с серваками.

Ответить
Развернуть ветку
Evgeny Shpilevoy

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

Ответить
Развернуть ветку
Sergey Gosha

Работаю 5 дней в неделю, почти год,, проблем с серверами не испытывал ни разу. Скетч, я виндос? XD лагучее дерьмо, хотя клауд лицензия.

Ответить
Развернуть ветку
Serge Demichev

Ну и плагин тот же есть на Sketch. Кстати, я не совсем понимаю флоу, по сути тот же Github. Такие плагины были ещё года 2 назад.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Андрей Насонов
Автор

Нет, по моим наблюдениям это бесполезное занятие)

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

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

И получается, что два инструмента делают одно и то же, хоть и 2 не совсем интуитивно понятен

Ответить
Развернуть ветку
Андрей Насонов
Автор

я бы не сказал что одно и то же, в режим Fill картинка выравнивается относительно своего изначального размера, а в режиме Crop относительно откадрированой части изображения.
Хотя думаю можно было бы совместить эти два режима.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Андрей Насонов
Автор

При чем тут корел ?

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Андрей Насонов
Автор

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

Ответить
Развернуть ветку
16 комментариев
Раскрывать всегда