Изменение размера элемента внутри инстанса. Приёмы и фишки — Дизайн на vc.ru

7348
просмотров

Всем привет, меня зовут Андрей Насонов, я работаю UI/UX дизайнером, это моя серия статей про фишки, трюки и прочие штуки в Figma.

Другие статьи из этой серии

• Разметка элементов в Figma
• Компонент в Figma с нулевыми размерами
• Изменение размера элемента внутри инстанса (Эта статья)

Что такое «Custom size component»?

Это компонент в котором размер изменяется за счёт отступов «spacing» между двумя элементами с шириной или высотой 0px.

Изменение ширины компонента с помощью «spacing»

Про элементы с нулевыми размерами я писал ранее в статье «Компонент в Figma с нулевыми размерами»

Зачем это нужно?

На данный момент в фигме всё ещё нельзя задавать размер фреймов внутри инстансов. Это доставляет некоторые неудобства, и из-за этого приходится либо создавать много одинаковых компонентов разного размера, либо делать детач инстанса и изменять размер элемента вручную. Чтобы избежать и того и другого я придумал приём который всё-таки позволяет это делать.

Задавать размер фреймов внутри инстансов можно благодаря «Custom size component».

Стандартным способом невозможно задать размер элемента внутри инстанса

Важно! Речь идет именно о том, чтобы задавать элементу конкретный размер в пикселях, а не абстрактный размер с помощью настойки автолейаутов «Fill container» или настроек «Left and right» и «Scale».

Типы Custom size component

Заполняемый — Внутри такого компонента можно разместить другой фрейм или другой компонент который будет расширяться вместе с «Custom size component».

Не заполняемый — Такой компонент является самостоятельным и внутри него ничего не размещается кроме нулевых компонентов. Чаще всего к такому компоненту применяют заливку, скругления углов и прочие стили.

Примеры применения

Изображение внутри компонента

Используя «Сustom size component» можно изменять размер изображения внутри каждого инстанса. Это заполняемый компонент. Пример в Figma

Изменение размера изображения внутри компонент карточки

Линия прогрессбара

Пример в Figma

Изменение ширины прогрессбара

Хендлер скроллбара

Пример в Figma

Изменение размера хэндлера

В элементах «Линия прогрессбара», «Хендлер скроллбара» — «Custom size component» является самостоятельным.

Как сделать Custom size component?

Ниже описан процесс создания заполняемого сustom size компонента. Либо просто используйте готовый компонент.

Создание структуры:

1. Создайте Auto Layout и назовите его «Custom size component».
2. Внутри «Custom size component» создайте Auto Layout с вертикальным направлением и назовите его «1».
3. Внутри «1» создайте еще один Auto Layout но с горизонтальным направлением и назовите его «2».
4. Далее внутри «2» поместите элемент размер которого вы хотите изменять внутри инстансов.
5. Отдельно создайте Auto Layout с горизонтальным направлением и назовите его «Horizontal size».
6. Внутри «Horizontal size» создайте два фрейма, выделите их и в полях ширины и высоты впишите значение «0.0001».
7. Так же отдельно создайте Auto Layout с вертикальным направлением и назовите его «Vertical size».
8. Внутри «Vertical size» создайте два фрейма, выделите их и в полях ширины и высоты впишите значение «0.0001».
9. Переместите «Horizontal size» в «1» а «Vertical size» в «2».

После проделанных действий вы должны получить вот такую структуру слоев:

Структура слоев «Custom size component»

Настройка Auto Layout:

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

10 хитростей Figma, которые я хотел бы знать раньше

• 
  Дизайн
• 3 мин на чтение
• 
  23273

Меня всегда поражало количество полезных функций, которые Figma встроила в свое приложение. То, что раньше было обходным решением в Sketch, теперь является продуманной функцией в Figma.

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

1. Самое легкое создание кругового прогресса, которое вы когда-либо делали в своей жизни

Я понятия не имел об инструменте «Arc», пока однажды случайно не перетащил его на артборд, это просто взорвало мой мозг. Он позволяет создавать простые и красивые индикаторы прогресса.

2. Используйте инструмент масштабирования, чтобы избежать искажения

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

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

3. Перетаскивайте объекты за пределы фрейма, удерживая их внутри контейнера

Удерживайте клавишу пробела при перетаскивании объекта за пределы фрейма, чтобы он оставался внутри контейнера. Вы также можете отключить функцию «Clip contents» для фрейма, содержащего объект, чтобы вы все еще могли видеть его, когда он находится за пределами контейнера – вы также можете нажать CMD (CTRL) + Y, чтобы отобразить контуры.

4. Приведите сетку в порядок

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

5. Продублируйте последнее действие

Нажмите CMD + D, чтобы продублировать предыдущее действие. CMD + D также будет дублировать объекты, фреймы и все остальное.

6. Предварительно просмотрите цвет с помощью пипетки

При использовании инструмента «Пипетка» (i) удерживайте левую кнопку мыши, чтобы просмотреть как меняется цвет элемента.

7. CMD + / разблокировать все объекты

Сочетание клавиш СMD + / имеет массу полезных быстрых действий, которые помогут в рабочем процессе и позволят сэкономить массу времени. Если вы еще не используете его, я настоятельно рекомендую посмотреть, какие действия доступны в меню. Действие, которое я часто использую – это быстрая разблокировка всех объектов и изменение шрифтов.

8. Легко вставляйте изображения внутрь фигур-плейсхолдеров

Нажмите CMD + Shift + K, чтобы заменить заливку фигур или фреймов с кучей изображений.

9. Другие приемы с пробелом

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

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

А если этого недостаточно, вы можете удерживать клавишу пробела, чтобы запретить Figma автоматическое вложение объектов внутри фреймов или отключить auto-layout. Клавиша пробела очень удобна!

10. Content Reel + Unsplash

Content Reel и Unsplash были двумя незаменимыми плагинами, экономящими время и позволяющими избежать использования «John Doe» в качестве имени для всех пользователей. С Content Reel вы можете одним кликом мыши вставлять в свой дизайн аватары, lorem ipsum, имена, адреса и многое другое. Unsplash – это бесплатная библиотека высококачественной графики.

11. БОНУС! Исправить высоту строки за секунду

Если у вас нет определенного значения высоты строки просто введите «auto» в поле line-height, и оно автоматически отрегулируется!

Источник: UxPub

• #Figma
• #лайфхаки
• #советы
• #фишки

• 
  
• 
  3
• 
  

Sizze

Auto Layout — это функция Figma для создания компонентов и фреймов, которые адаптируют свой размер к содержимому внутри них (в отличие от ограничений, которые адаптируются к изменениям в их среде).

Auto Layout — это размещение элементов рядом друг с другом внутри фрейма. Они могут быть выровнены по вертикали или по горизонтали. Figma поддерживает только одно направление за раз, вертикальное или горизонтальное. Если вы хотите создать компоненты, использующие оба направления, вам необходимо объединить или вложить несколько кадров автоматического макета.

Автоматическая компоновка — это свойство фрейма, поэтому его нужно применить к фрейму.

‍ — Вы можете вставить нужные элементы на артборд, а затем сделать из них рамку со свойством авторазметки, зажав клавишу Shift+A. Свойство автоматического размещения автоматически появляется на панели слоев, что обозначается значком сетки вместо обычного значка рамки.

— Либо можно сначала завернуть элементы в рамку через комбинацию Ctrl+Alt+G, потом нажать плюсик в правой панели автораскладки.

 – Чтобы удалить автоматический макет из фрейма, выберите фрейм и нажмите на правой боковой панели или нажмите Shift + Option/Alt + A. чтобы отрегулировать расстояние между ними. Нажмите, чтобы открыть поле интервала и введите конкретное значение.

Регулировка отступов автомакета

Наведите указатель мыши на отступ на краю фрейма и с помощью ручки отрегулируйте отступ с этой стороны. Нажмите, чтобы открыть поле заполнения и введите определенное значение. Нажмите и удерживайте Option (Alt), чтобы изменить противоположные стороны. Нажмите и удерживайте Option (Alt) + Shift, чтобы изменить все значения отступов одновременно.

Дочерние элементы автоматического макета 

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

2. Нажимайте клавиши со стрелками вверх (1) и вниз (4), чтобы изменить порядок элементов в рамке автоматической компоновки.

3. Выберите элемент и нажмите Command/Ctrl + D, чтобы продублировать его. Figma добавит копию к существующему автоматическому макету.

Параметры и элементы управления автоматической компоновки

Свойства автоматической компоновки на панели дизайна предоставляют элементы управления направлением, интервалами, отступами и выравниванием, а также расширенные настройки компоновки.

Кадры автоматической компоновки указывают свое направление компоновки с помощью значков на панели слоев.

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

Параметры изменения размера для объектов автоматического макета и их дочерних элементов доступны в свойствах фрейма на панели дизайна.

Направление автоматической компоновки, заполнение, выравнивание и дополнительные свойства доступны в разделе автоматической компоновки панели дизайна.

Гибкое изменение размера

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

Параметры изменения размера кадра находятся ниже свойств размера кадра.

Содержимое Hug будет соответствовать размеру вложенных объектов фрейма.

Фиксированный задает размер объекта как определенное значение, не зависящее от его содержимого.

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

‍ Кнопки

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

Для значка обычно параметры изменения размера установлены на «фиксированный», но для текстовой метки установлено значение «обнимающий контент».

Давайте попробуем сделать с вами вот такую ​​кнопку.

1. Вы можете добавить автоматический макет к любому кадру. Давайте добавим его к этой кнопке, чтобы посмотреть, как это работает. Выберите кнопку на холсте и нажмите + в разделе автоматического макета на правой боковой панели. Вы также можете щелкнуть элемент правой кнопкой мыши и выбрать «Добавить автоматический макет» или использовать сочетание клавиш Shift + A.

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

3. Добавьте значок и поместите его в рамку на панели слоев, перетащив слой значка на слой рамки.

‍ Меню

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

Теги и значки

Такие элементы должны расширяться и сворачиваться в зависимости от текстового содержимого внутри.

Модалы

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

Цены

В этом примере цена компонента должна увеличиваться или уменьшаться по мере изменения списка функций. Хотя элементы должны заполнять контейнер по горизонтали, они должны охватывать содержимое в вертикальном пространстве, поэтому здесь мы использовали вертикальный автоматический макет.

Вот несколько советов по автомакетам: 

1. Вам не нужно везде использовать Auto Layout. Некоторым компонентам или экранам это может не понадобиться.

2. Свойство автоматической компоновки работает для фреймов, а не для групп. Группы не имеют возможности контролировать размер, как фреймы. К счастью, если вы хотите превратить группу во фрейм для использования автоматического макета, все, что вам нужно сделать, это выбрать его и нажать кнопку Auto Layout Plus на панели справа. Группа станет рамкой с автоматическим позиционированием.

3. Автоматические макеты помогут упростить процесс создания приложений. Вы также можете предварительно просмотреть экраны своего приложения после их импорта в Sizze и проверить его на своем устройстве, загрузив приложение Expo.

‍

‍

Автомакет в Figma — все, что вам нужно знать | Имран Хосен Саджиб

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

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

Кнопки, сделанные с автоматическим расположением

Кроме того, тот факт, что эта функция изменяет размер элемента, помогает в разработке адаптивных интерфейсов. Чтобы адаптироваться к различным устройствам, вам не нужно проектировать один и тот же элемент в двух разных измерениях. Вместо этого вы можете создать только один элемент и использовать инструмент Auto Layout.

Карточка, сделанная с использованием автомакета

Автомакет можно применить к чему угодно. Есть три способа применить автоматическую компоновку.

1. Автоматическую компоновку можно применить, просто нажав Shift + A после выбора элементов.
2. Параметр для добавления автоматического макета появляется на панели свойств (правая панель) в разделе «Дизайн», когда выбраны группы, рамки или любое содержимое.
3. Автоматическую компоновку также можно применить непосредственно из параметров, появляющихся при нажатии правой кнопки мыши.

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

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

Чтобы изменить направление элементов на рамке, нажмите на стрелки, указывающие горизонтальное и вертикальное направление.

После применения автоматической компоновки режим распределения определяет, как будут распределены объекты в кадре. Есть два режима распределения-

Упакованный режим: Объекты в кадре будут сгруппированы вместе. Используйте этот параметр, чтобы объекты в кадре располагались как можно ближе друг к другу и были выровнены друг с другом.

Расстояние между: Объекты в кадре имеют пространство между собой, равномерно распределенное по направлению и выравниванию, заданным для кадра. Используйте этот параметр, чтобы растянуть объекты по кадру.

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

Ярлык: Щелкните поле выравнивания и нажмите X для переключения между пробелами и упакованными.

Элементы выравниваются автоматически при применении автоматического расположения, но что более интересно, выравнивание не ограничивается только одной позицией в пространстве. Когда элементы разного размера сгруппированы с помощью Auto Layout, вы можете указать, следует ли расположить их слева, справа или по центру

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

Выравнивание в основном зависит от режима распределения предметов.

Параметр выравнивания в режиме распределения между интервалами: Если для вашего распределения установлено значение «Промежуток между», у вас есть три варианта для каждого направления:

1. Автоматическая вертикальная компоновка : Слева, по центру, справа
2. Горизонтальная автоматическая компоновка : Сверху, по центру, снизу те же девять вариантов для каждого направления:
   1. Вверху слева
   2. Вверху по центру
   3. Вверху справа
   4. Влево
   5. В центре
   6. Вправо
   7. Внизу слева
   8. Внизу по центру
   9. Внизу справа

   Padding — это внутреннее поле элемента. Заполнение управляет пустым или белым пространством между границей фрейма автоматического макета и дочерними объектами фрейма на различных компонентах, включая саму кнопку. Отступы могут быть установлены одинаково, по вертикали и горизонтали или иметь разные значения для верхнего, правого, нижнего и левого отступов. мы используем это для разработки оптимальных вентиляционных отверстий.

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

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

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

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

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

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

   Hug content
   Второй вариант — Hug content, который поддерживает правильные отступы и пробелы, позволяя вам использовать Auto Layout для настройки ширины или высоты любых внутренних элементов в группе. Чтобы автоматически изменять свой размер в соответствии с его дочерними объектами, установите рамку автоматического макета на Обнимание содержимого. Соблюдая значение заполнения, фрейм будет поддерживать наименьший возможный размер, чтобы окружить объекты внутри него.

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

   Контейнер заполнения
   Третий и последний вариант — Контейнер заполнения. Если используется параметр Контейнер заполнения фрейма автоматической компоновки, объекты будут растягиваться, чтобы заполнить ширину и/или высоту родительского фрейма с сохранением заданных отступов и интервалов.

   Если абсолютное положение объекта не включено, вы не можете применять ограничения к его дочерним объектам в рамке автоматического макета. Но вы можете указать, как элементы будут вести себя при изменении размера рамки или объектов внутри нее, используя функцию изменения размера.

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

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

   Когда позиция выбрана как абсолютная, вы можете указать, где именно вы хотите, чтобы этот элемент находился, независимо от того, сколько пикселей в ширину или высоту имеет ваше устройство.
   Вы видели, что при работе с автоматической компоновкой она позволяет вам легче организовывать различные элементы, которые сгруппированы вместе, и что вы не можете свободно перемещать их, когда она применяется. Или, по крайней мере, не без включенного абсолютного положения.
   Для активации выберите любой слой, группу или компонент в группе с помощью автоматического макета и активируйте параметр, расположенный справа от поля «Y» на панели дизайна справа.

   Когда текст комбинируется с объектом, например кнопкой и значком, а слои с разной высотой размещаются вертикально по центру и располагаются в горизонтальном автоматическом макете, базовая линия текста прекрасно их выравнивает.
   Чтобы включить выравнивание по базовой линии текста, щелкните меню […] в свойствах автоматического макета, чтобы открыть дополнительные настройки макета и проверить параметр выравнивания по базовой линии текста.