fbpx
1

Компоненты Figma с фиксированным соотношением сторон

Сохраняйте соотношение сторон вложенного элемента при изменении размера родительского элемента.

До появления Figma Auto Layout наши дни были мрачными и полными ужасов. Чтобы отобразить разные состояния одного и того же элемента, нам приходилось создавать массу компонентов. С Auto Layout 2.0 все изменилось. Стало намного проще изменять кнопки, списки и карточки. Но, едва поставив последнее обновление, мы уже жаждем новых функций…

Хотели бы вы добавить в Auto Layout следующие функции?

  1. Асимметричные внутренние отступы.
  2. Отрицательные внутренние отступы.
  3. Фиксированное соотношение сторон.
Компоненты Figma с фиксированным соотношением сторон

И сегодня, мы добавим хотя бы одну из них…

Проблема соотношения сторон

Типичный пример – компонент карточки с изображением обложки, которое должно растягиваться, сохраняя соотношение сторон при изменении ширины карточки, например:

Компоненты Figma с фиксированным соотношением сторон
Ожидаемый результат

Но мы знаем, что с обычным вертикальным Auto Layout это невозможно – обложка будет просто растягиваться по горизонтали, сохраняя фиксированную высоту:

Компоненты Figma с фиксированным соотношением сторон
Фактический результат

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

Я так устал управлять компонентами карточки в нашем основном проекте. Приходилось создавать новые варианты для всех карточек, чтобы поддерживать все 5 точек останова. И все это только, чтобы иметь обложку с фиксированным соотношением сторон… Затем мы начали новый проект, и возникла та же проблема… А потом она повторилась в моем личном проекте!

Решение

Я снова начал новый тред, описывающий эту проблему, и 4 месяца спустя Mr.Biscuit предложил невероятную идею диагонального ресайзера (посмотрите также его Figma Challenge и результаты, достигнутые его участниками – это просто потрясающе!).

Позже я обнаружил аналогичную концепцию в сообществе Figma, опубликованную намного раньше.

Тем не менее, это было не совсем то, чего я хотел. Когда я растягиваю карточку изнутри, то контролирую только эту карточку. Но представьте себе изменение размера многоколоночной сетки с большим количеством карточек внутри. Редактирование всех карточек будет выматывающим занятием… Мне нужно было обычное поведение – карточка с гибкой шириной, которая при изменении содержимого растягивалась и сжималась, сохраняя соотношение сторон.

Однако концепция была настолько интересной, что посеяла семена надежды. И я немного поэкспериментировал с ней.

Компоненты Figma с фиксированным соотношением сторон
Запись экрана сделана прямо в Figma

Как это работает

Я придумал, как добиться нужного результата, но, честно говоря, не до конца понял, как это работает…

Концепция заключается в следующем:

  1. Вы переносите два объекта с разрешением 0 пикселей в Auto Layout. Секрет в том, что в Figma 001px становится 0px.
    Этот приём мне показал Роман Назаренко, а затем мы сделали многие компоненты с такими 0-пиксельными фреймами, чтобы «хакнуть» Auto Layout.
    То же самое мы видим в концепции Mr.Biscuit.
  2. Этот фрейм поворачивается и превращается в вертикальный Auto Layout с 0 отступами.
  3. Вуаля!
Компоненты Figma с фиксированным соотношением сторон

Проблемы:

  1. Вертикальный размер содержит субпиксели: фрейм 160x100 pxстановится 162x25 px – но давайте не будем учитывать это.
  2. Вертикальный размер пропорции ограничен. Чтобы добиться фиксированного соотношения 1: 1, между ними нужно добавить еще один Auto Layout. Чтобы создать более высокий компонент, например, с соотношением сторон 3: 4, нужен еще один:
Компоненты Figma с фиксированным соотношением сторон

Вы можете заметить, что углы и направления Auto Layout хаотичны. Какой угол применить и какой макет выбрать, горизонтальный или вертикальный? Ответ: я не знаю. Результат выше был получен после нескольких часов экспериментов, когда я настраивал углы и менял направление десятки раз.

Для каждого нового соотношения я добавил новый компонент обложки (cover component) и разместил его экземпляры на трех карточках разной ширины. Поверх них я разместил полупрозрачные прямоугольники соответствующей ширины и нужного соотношения сторон. Затем поворачивал диагональный ресайзер в компоненте обложки по одному градусу, а затем по 0,1º и даже 0,01º для достижения необходимого результата (здесь пригодилась опция «Show Outline» и масштабирование, чтобы подогнать края с максимальной точностью). Это может показаться слегка безумным, но это было не так уж и сложно:

Компоненты Figma с фиксированным соотношением сторон

На данный момент мной создано 12 компонентов обложки с разными соотношениями сторон, и можно легко добавить гораздо больше:

Компоненты Figma с фиксированным соотношением сторон
Все компоненты Figma

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

Компоненты Figma с фиксированным соотношением сторон

Исходник Figma

Что дальше?

Figma, ты просто супер!

Однако мы продолжим улучшать функциональность до Auto Layout 3.0 и даже после его релиза, потому что это часть нашей повседневной творческой рутины!

2 Комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Архитектура компонентов в Figma
Подробнее

Архитектура компонентов в Figma

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

Представляем Figma Mirror для Android

Сегодня мы рады сообщить, что приложение Mirror от Figma стало доступно для Android. Если вы хотите проверить, как выглядят ваши проекты в действии, вы можете отображать их в режиме реального времени на устройствах Android.

Лучшие статьи, раз в неделю, с доставкой на почту

Total
17
Share