Какая опция изображения сохраняет соотношение сторон картинки figma
Перейти к содержимому

Какая опция изображения сохраняет соотношение сторон картинки figma

  • автор:

Новый auto-layout в Figma за 5 минут

Новый auto-layout в Figma обновили и анонсировали в мае 2022 года. Некоторые вещи в нем остались без изменений, некоторые функции оказались совершенно новыми, а некоторые элементы просто переместили или дополнили приятными мелочами, которые тоже советуем не пропускать.

У многих возникли проблемы с тем, чтобы разобраться в новых функциях и понять, как использовать старые в новых условиях. Уделите нам 5 минут времени, и мы расскажем обо всем, что касается нового auto-layout.

обзор функций

Видеоверсия этого туториала здесь:

Однако обратите внимание, что теперь слои располагаются в том порядке, в котором они показаны на холсте, что стало намного более логичным! Спасибо Figma за это, старый обратный порядок меня действительно раздражал.

2. Меню auto-layout: те же функции, новый вид

Внешний вид меню автомакета изменился, давайте разберемся.

сравнение старого нового меню

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

�� СОВЕТ: cmd + щелчок для нотации CSS

Зажмите cmd и кликните на поле заполнения . Теперь вы можете использовать запятую, как в CSS. Или введите одно значение для всех. Мелочь, а приятно!

3. Новинки: возможность регулирования на холсте ��

Помимо меню auto-layout, теперь у вас есть и элементы управления на холсте. Если вы наведете курсор на рамку auto-layout, вы увидите маленькие розовые маркеры, которые сможете перетаскивать. Это работает для настройки расстояния и заполнения.

�� СОВЕТ: увеличьте с помощью установленных значений смещения

Удерживайте Shift при перетаскивании, увеличивая и уменьшая заданные значения смещения.

�� СОВЕТ: нажимайте на области auto-layout, чтобы установить конкретное значение

Нажмите на области интервалов auto-layout, выделенные розовым цветом на холсте, чтобы установить конкретное значение.

�� СОВЕТ: Равные горизонтальные и вертикальные отступы

Удерживайте alt при перетаскивании, чтобы получить одинаковые отступы для регулировки по горизонтали или вертикали. Или удерживайте shift + alt при перетаскивании, и все отступы изменятся одинаково.

4. Новинки: отрицательный интервал! ��

Хорошо, вот это то нововведение, которое меня действительно радует. Теперь можно установить отрицательное расстояние между элементами, что означает, что вы можете «складывать» элементы стопкой!

Итак, у меня есть карточки с auto-layout, и я добавлю еще одну. Теперь я могу использовать элемент управления на холсте или меню, чтобы установить отрицательное значение интервала между ними и создать стопку. Это работает и в случае вертикального, и в случае горизонтального выравнивания.

А еще это очень крутая вещь для создания прототипов, столько новых возможностей!

Расширенное меню

Если щелкнуть по трем точкам в меню auto-layout, откроется меню расширенной компоновки.

новое расширенное меню

5. Режим интервала: те же возможности, но с новыми приятными сочетаними клавиш

Начнем с моих любимых, packed и space between. Здесь не много нового. Так же, как и в старом auto-layout, по умолчанию используется packed, который сохраняет установленный интервал между вашими элементами. Для отступа между ними будет использоваться все доступное пространство, благодаря чему будут создаваться равные промежутки между непосредственными дочерними элементами.

�� СОВЕТ: переключайтесь с помощью меню выравнивания + X

Это очень удобно, поскольку я часто использую эти параметры и мне часто нужно копаться в меню. Используйте поле выравнивания и нажимайте X для переключения между space between и packed.

�� СОВЕТ: введите «auto», чтобы установить space between

Нажмите на маркер регулирования расстояния на холсте и введите «auto» в поле ввода значений. Так вы переключитесь на режим space between. Если вы добавите значение, все вернется в режим packed.

6. Новинки: теперь можно включить exclude stroke (внешний контур)

В расширенном меню auto-layout теперь можно найти возможность включить или исключить обводку, что очень удобно для избегания «столкновений» элементов. Плюс это делает компоненты более аккуратными.

7. Новинки: изменение порядка наложения

Здесь вы можете изменить порядок наложения, если у вас есть элементы с отрицательным интервалом. Обратите внимание, что это не меняет порядок в меню слоев!

Помимо порядка наложения вы также всегда можете использовать старые добрые стрелки клавиатуры — это изменит порядок слоев.

8. Новинки: выравнивание текста по базовой линии

Для этого вам нужен хотя бы один текстовый элемент. В расширенном меню теперь можно выбрать выравнивание по центру (по умолчанию) или по базовой линии текста.

�� СОВЕТ: переключайтесь с помощью меню выравнивания + B

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

9. Новинки: абсолютное позиционирование ��

Этот тоже фантастика. Теперь вы можете установить для элемента абсолютное позиционирование. Сначала вам нужно перетащить его в рамку auto-layout, а затем вы увидите опцию абсолютного позиционирования в меню фреймов. Когда элемент позиционируется абсолютно, вы можете перемещать его, куда хотите, и установить ограничения. Это отлично подходит для таких вещей, как пузырьки оповещения и предупреждения. Абсолютно крутая функция!

�� СОВЕТ: проверяйте точность значений в режиме Inspect mode

абсолютный в режиме проверки

10. Меню изменения размера: как раньше, только в новом месте и с новыми шорткатами

Я была немного шокирована, когда впервые открыла новый auto-layout, поскольку меню изменения размера исчезло! Но нет! Оно просто переместилось в секцию настройки фрейма. Оно работает так же, как и старое доброе меню изменения размера, но в нем есть несколько новых приятных шорткатов.

сравнение старого нового меню

�� СОВЕТ. Используйте новые сочетания клавиш для изменения размера.

Hug vertical дважды щелкните по верхней или нижней линии рамки в auto-layout.

Hug horizontally дважды щелкните по левой или правой линии рамки в auto-layout.

Заполнить контейнер → удерживайте alt , нажимая то же, что описано выше.

11. Все нравится, но чего еще не хватает:

Как обычно, впечатлена последним обновлением. Но все еще надеюсь, что скоро появится нормальная настройка соотношения сторон для изображений! О, как бы хорошо было иметь встроенное соотношение сторон, потому что тогда бы я смогла прекратить использовать хакерские (тем не менее отличные) решения. Также для таких дислектиков, как я, полная интеграция Grammarly была бы просто сказкой!

7 распространенных проблем дизайна в Figma (и как их исправить)

С дизайном в Figma иногда возникают мелкие проблемы и неудобства, которые мы не умеем решать. Возникают они из-за автоматической компоновки, ограничений, групп, фреймов, компонентов или дубликатов. Здесь мы собрали практические способы преодоления 7 самых распространенных проблем дизайна в Figma, с которыми вы точно сталкивались.

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

1: Выравнивание по неправильной стороне

Распространенные причины: автоматическая компоновка (Auto layout) или настройки ограничения (Constraint).

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

Выравнивание текста

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

Автоматическая компоновка и изменение размера по горизонтали

Если это не сработает, вам нужно изменить настройки автоматического выравнивания макета (auto layout) и установить для всех дочерних слоев горизонтальное изменение размера с параметром «заполнить контейнер» (fill container).

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

Как только это будет сделано, убедитесь, что проблемные слои имеют поведение горизонтального изменения размера «заполнить контейнер». Как вы можете видеть выше, примеры с «фиксированной шириной» и «объем содержимого» не дают желаемых результатов с выравниванием по левому краю. Справа установка для них «заполнить контейнер» исправляет это.

Почему «заполнение контейнера» важнее всего

Заманчиво использовать выравнивание по левому краю и оставить слои с параметром «hug contents», но рассмотрим случай переноса текста. Выше левая сторона показывает использование подхода «hug», а правая сторона использует подход «fill». Обтекание текстом будет вести себя более естественно и не будет изменять размер родительского фрейма, если вы выберете подход «fill».

2: Не получается комбинировать различные варианты выравнивания или автоматического размещения (auto layout) вместе

Распространенные причины: настройки auto layout или неиспользование вложенных фреймов.

Поскольку автоматическая компоновка работает только с фреймами, необходимо использовать вложенные фреймы (создавать фреймы внутри фреймов). Это позволит вам смешивать слои с разным выравниванием и расположением. На изображении выше в первом примере используется один вид расположения слоев (вертикально сверху вниз). Во втором же примере благодаря «подфрейму», который включает надпись «Figma» и кнопку, стало возможным расставить слои как угодно.

После этого вам, вероятно, надо будет настроить параметры auto layout и параметры изменения размера по горизонтали, так как это часто влияет на ширину родительского фрейма. В составе горизонтальной строки большинство дочерних слоев у меня обычно используют параметр «hug», и один элемент — параметр «fill container». Таким образом, они всегда будут занимать все пространство родительского фрейма.

Не забывайте установить для ваших «строчных» элементов значение «заполнить контейнер» (fill container).

Когда я не уверен, я обычно выбираю в качестве слоя с параметром «fill» текстовый слой.

В качестве альтернативы, если вы не работаете с текстом и у вас есть несколько элементов фиксированной ширины для «заполнения» всей строки, попробуйте настройку режима интервалов. Обновление auto layout, выпущенное в мае 2022 года, позволяет вам установить поведение «space-between».

3: Изменение размера фрейма или артборда работает неправильно

Распространенные причины: использование групп вместо фреймов или настройки Constraint.

Обычно это происходит при использовании группы вместо фрейма. Группы будут масштабировать размеры слоев так же, как это работает в презентации Powerpoint. В то же время фреймы корректироваться в зависимости от настроек constraints (ограничений), как в браузере. Если вы не намеревались добиться эффекта искажения, лучше превратите свои слои во фреймы.

Если вы использовали фрейм, проблема может возникнуть именно с настройкой Constraint на дочернем слое. Отсутствие изменения размера можно исправить, обновив значения этих настроек. Отмените превращение во фрейм или измените размер родительского фрейма, чтобы он соответствовал содержимому внутри. Затем установите параметр «слева и справа» для Constraint, чтобы настроить ширину, и «сверху и снизу», чтобы настроить высоту.

Если это продолжает вас раздражать, стоит напомнить себе, когда использовать группу или фрейм.

Еще одна вещь, которую стоит упомянуть…

Если у вас в проекте есть дробные числа и значения после запятой, например 4,42, СТОП!

Если вы не уверены на все сто, что так и надо, старайтесь избегать этих дробных единиц. Хотя в CSS и есть функция, помогающая воспроизвести такие значения в браузере, она совместима только с 18,97% пользователей во всем мире. Не здорово, если мы пытаемся быть инклюзивными и доступными.

В общем, давайте без дробных чисел.

4: Растягивание слоев и компонентов при изменении размера

Распространенные причины: использование неправильного инструмента для ваших компонентов или слоев.

Если предыдущий совет не сработал, причина может быть в обычном использовании неправильного инструмента. Использование инструмента указателя (клавиша v ) лучше всего работает с компонентами, основанными на настройках ограничений (Constraint), чтобы сохранить размеры вашего контента (как если бы он был в интернете). Если вы не используете ограничения или это сложный объект, лучше использовать инструмент масштабирования (клавиша k ).

5: Отсутствие параметра «Hug contents» по горизонтали

Распространенные причины: не применяется auto layout.

Фрейм будет иметь поведение «hug contents», только если для него включена автоматическая компоновка (auto layout). В примере выше я не устанавливал автоматическую компоновку, потому что это был только один текстовый слой. Превращение его в компонент также конвертирует этот слой во фрейм, но вам все равно нужно добавить автоматическую компоновку, чтобы указать параметр «hug contents».

6: Дубликат или экземпляр компонента не работает или не выглядит так же

Распространенные причины: попытка редактирования экземпляра или неудачное дублирование.

Если это экземпляр главного компонента, вы можете проверить, в чем дело, сбросив все изменения в этом экземпляре. Выберите его, перейдите в меню «еще» справа от параметров экземпляра и выберите «reset all overrides».

Если это не работает или это не компонент, не волнуйтесь. Выполните следующие шаги:

  1. Используйте функцию «отменить» — работает, только если вы недавно редактировали элемент. Можно сделать копию своей работы с помощью Cmd + c ( Ctrl + c ) перед отменой, а затем вставить, как только вы найдете последнюю рабочую конфигурацию.
  2. Проверьте настройки изменения размера или ограничений — это займет немного времени, но часто они могут случайно измениться при двойном щелчке по слою или фрейму. Выберите проблемные слои и проверьте их настройки.
  3. Переделайте 🙁 — это может занять некоторое время, но если вы не можете найти проблемную конфигурацию, то может быть быстрее начать заново. Это отличная возможность создать компоненты, если вы еще этого не сделали.

7: Не могу редактировать свой компонент

Распространенные причины: попытка редактирования экземпляра.

Я сталкиваюсь с этим все время. Вечно забываю, что нельзя редактировать, добавлять или удалять слои в экземпляре. Главный компонент можно редактировать свободно, но в экземпляре можно изменить только содержимое слоев или скрыть слои с помощью переключателя видимости.

Существует 3 метода внесения необходимых изменений, а также краткая информация о том, когда использовать каждый из них:

  • Создайте новый вариант — отлично, если вы будете использовать его несколько раз или хотите сохранить ход своих мыслей при дизайне. Сделайте дубликат главного компонента и «объедините их как варианты», если это еще не сделано.
  • Разорвите связь с главным компонентом (Detach instance) — если у вас мало времени и, скорее всего, вы больше не вернетесь к этому, просто щелкните правой кнопкой мыши по элементу, разорвите связь экземпляра с главным компонентом (detach instance) и внесите изменения как обычно. Это не жульничество, а прагматичность.
  • Замените связи — если ваш экземпляр использует вложенные подкомпоненты, вы можете выполнить для него замену экземпляра. Этот способ может быть неудобным и немного более запутанным, но он имеет место быть.

Заключение

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

  • Неправильная настройка автоматического макета или параметров изменения размера;
  • Непонимание разницы между группами и фреймами;
  • Просто пытаюсь отредактировать компонент ��

Сохраняйте спокойствие, ознакомьтесь с моими советами выше и продолжайте дизайнить будущее интернета.

Теги

Присоединяйтесь к нашему сообществу!

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

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

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

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

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

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

Решение

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

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

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

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

Запись экрана сделана прямо в Figma

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

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

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

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

Проблемы:

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

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

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

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

Все компоненты Figma

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

Что дальше?

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

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

Механизм экспорта растровых изображений в Figma: как изменяется качество изображения

Механизм экспорта растровых изображений с масштабированием в Figma полезен для разработчиков Android и iOS . Это связано с разной плотностью пикселей на экранах мобильных устройств. Для максимального использования возможностей устройств рекомендуется экспортировать изображения под конкретную плотность пикселей.

Android-разработчики при экспорте из Figma используют масштабирование x1, x1.5, x2, x3 и x4. iOS-разработчики предпочитают x1, x2 и x3.

Экспорт изображения в Figma

Но стоит ли всегда ожидать более высокое качество при экспорте с масштабированием из Figma?

Retina дисплеи

Если у вас установлен Retina дисплей, Figma автоматически увеличит плотность пикселей. Это полезно для просмотра дизайна, но после экспорта может возникнуть вопрос: почему изображение при экспорте в x1 выглядит хуже, чем в Figma? Чтобы отключить адаптацию под Retina, перейдите в «Zoom/view options» в правом верхнем углу, затем выберите «Pixel preview» -> «1x«.

Установка Pixel preiew = 1x

Ниже приведено сравнение изображений с опциями «1x» и «Disabled«.

Если хотите предварительно увидеть, как будет выглядеть изображение после экспорта с масштабированием x1, установите 1x в меню Pixel preview.

Оригинальное растровое изображение в Figma — ключ к максимальному качеству при экспорте и минимальным размерам изображения

Прежде чем вы экспортируете изображение из Figma, кто-то должен его импортировать. Импортированное в Figma изображение представляет собой максимальное разрешение, которое пользователь может получить при экспорте. Figma сохраняет оригинальное изображение и, в зависимости от него, изменяет количество пикселей при экспорте или изменении размера внутри Figma. Рассмотрим, как это работает на примере.

Предположим, дизайнер загрузил растровое изображение размером 200×200 пикселей в Figma, а затем уменьшил его высоту и ширину вдвое. В этот момент Figma хранит оригинальное изображение 200×200 пикселей, но пользователь в Figma видит уменьшенное изображение размером 100×100 пикселей.

Теперь разработчик хочет экспортировать изображение из Figma (где размер изображения 100×100 пикселей) с масштабированием x1, x2 и x4. В результате он получит изображения размерами 100×100 пикселей, 200×200 пикселей и 400×400 пикселей соответственно.

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

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

Таким образом, если в Figma была загружена картинка размером 200×200 px, а вы экспортируете эту картинку с масштабированием x2, вы получите более тяжелую по объему данных картинку, но качество изображения останется прежним.

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

Максимальное разрешение изображения в Figma

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

  • Разработка под iOS
  • Разработка мобильных приложений
  • Разработка под Android
  • Дизайн мобильных приложений

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *