Концепт: как можно улучшить инструмент 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.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Андрей Насонов", "author_type": "self", "tags": [], "comments": 19, "likes": 15, "favorites": 33, "is_advertisement": false, "subsite_label": "design", "id": 79842, "is_wide": false, "is_ugc": true, "date": "Tue, 20 Aug 2019 23:56:43 +0300", "is_special": false }
0
{ "id": 79842, "author_id": 268568, "diff_limit": 1000, "urls": {"diff":"\/comments\/79842\/get","add":"\/comments\/79842\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/79842"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
19 комментариев
Популярные
По порядку
Написать комментарий...
2

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

Ответить
–3

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

Ответить
1

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

Ответить
0

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

Ответить
0

А в Figma вы написали?

Ответить
0

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

Ответить
0

Значит, нет вашему концепту.

Ответить
0

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

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

Ответить
0

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

Ответить
–1

Ух ты — изобрели Corel Draw

Ответить
0

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

Ответить
0

При том, что картинка в контейнере была реализована в 1997 году в пакете графики корел драв. Может и раньше, точно не помню

Ответить
0

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

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ] { "page_type": "default" }