Как в фигме увеличить фрейм: Как работать в Фигме быстрее. Часть 3

Как работать в Фигме быстрее. Часть 3

Как работать в Фигме быстрее

  • Выделение объектов, перемещение и изменение размеров, панель слоёв

  • Ускорение работы с объектами, управление интерфейсом

  • Ускорение работы с компонентами, приложение Figma Mirror, другие полезные фишки

Как работать в Фигме быстрее

  • Выделение объектов, перемещение и изменение размеров, панель слоёв

  • Ускорение работы с объектами, управление интерфейсом

  • Ускорение работы с компонентами, приложение Figma Mirror, другие полезные фишки

Ускорение работы с компонентами

Можно создать несколько компонентов одновременно. Для этого выберите объекты, которые хотите превратить в компоненты, и нажмите стрелочку возле иконки Create Component в верхней панели. В появившемся списке нажмите Create Multiple Components.

Обычно замечания по макету оставляют инструментом Add → Show Comments, а заметки для разработчиков лучше писать сразу в ЦСС. Для этого выберите Master Component и введите текст в поле Description, которое появится в правой панели. Текст отобразится в виде комментария в ЦСС, который увидят разработчики.

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

Приложение Figma Mirror

Создатели Фигмы разработали мобильное приложение Figma Mirror, чтобы вы могли протестировать свой дизайн на телефоне вживую. Скачайте приложение, войдите под своим аккаунтом, затем выберите любой фрейм в документе на компьютере и он отобразится в приложении.

Круто, что любые изменения фрейма сразу же отображаются в приложении.

Другие полезные фишки

В Фигме можно включить линейки, нажав Shift + R как в Фотошопе. Линейки Фигмы удобнее — они цветом показывают ширину и высоту выбранного объекта и не заставляют смотреть на его координаты в правой панели. Это помогает быстрее оценить правильность размера и положения объекта.

Если скопировать СВГ с сайта и вставить его Фигму, код превратится в векторный объект внутри фрейма. Найдите в веб‑инспекторе нужный СВГ‑файл, нажмите на многоточие и выберите в появившемся меню Copy → Copy outerHTML. Например, таким образом можно удобно и быстро копировать логотипы из шапок сайтов в свой макет.

По умолчанию изменение размера фрейма не затрагивает его содержимое, кроме объектов со значением Scale во вкладке Constraints. Чтобы изменить размер фрейма вместе с содержимым, используйте инструмент Scale Tool (K).

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

В Фигме, как и в текстовых редакторах, можно сделать текст курсивным, жирным и подчёркнутым с помощью сочетаний клавиш Ctrl (⌘) + I, Ctrl (⌘) + B, Ctrl (⌘) + U.

P. S. Это был вторничный совет о дизайне интерфейсов. Присылайте вопросы.

ИнтерфейсФигма

Отправить

Поделиться

Поделиться

Запинить

Твитнуть

Свежак

Как изменить размер элементов в Figma • Full-Arts

Dev-Блог

Содержание статьи

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

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

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

Как изменить размер в Figma — метод по умолчанию

Метод по умолчанию для изменения размера чего-либо в Figma — просто щелкнуть и перетащить . Чтобы изменить размер элемента с помощью метода по умолчанию, все, что вам нужно сделать, это выбрать свой объект и использовать любой из элементов управления преобразованием и изменять его размер, пока вы не будете довольны.

Удерживая при этом нажатой клавишу SHIFT, вы поможете сохранить пропорции.

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

Как изменить размер объекта со свойствами в Figma

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

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

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

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

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

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

Как изменить размер объектов с помощью сочетаний клавиш в Figma

Чтобы изменить размер объекта с помощью сочетания клавиш, выберите объект, удерживайте нажатой клавишу CTRL и используйте клавиши со стрелками , чтобы изменить размер объекта. Вы можете увеличивать или уменьшать ширину или высоту на 1 пиксель за раз. Вы можете использовать сочетания клавиш в любой ситуации.

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

Как изменить размер без перемещения объектов внутри рамки в Figma

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

Конечно, это не желаемый результат. Чтобы игнорировать ограничения элемента при изменении размера, удерживайте клавишу CTRL при перетаскивании. Кроме того, удерживание Ctrl + Alt во время перетаскивания пропорционально изменит размер вашего элемента.

Вывод

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

Оригинал – тут

Список цен на услуги

1 904 просмотров

Отказ от ответственности: Вся размещенная информация была взята из открытых источников и представлена исключительно в ознакомительных целях а также не несет призыва к действию. Создано лишь в образовательных и развлекательных целях. | Так же, если вы являетесь правообладателем размещенного на страницах портала материала, просьба написать нам через контактную форму жалобу на удаление определенной страницы, а также ознакомиться с инструкцией для правообладателей материалов. Спасибо за понимание.

Если вам понравились материалы сайта, вы можете поддержать проект финансово, переведя некоторую сумму с банковской карты, счёта мобильного телефона или из кошелька ЮMoney.

Похожие записи

Когда использовать группы, а не фреймы в Figma

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

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

  1. Выберите инструмент «Рамка» ( F ) и выберите предустановленный размер устройства на панели свойств справа. На вашем холсте будет размещена новая рамка с точными размерами любого устройства, которое вы выбрали.
  2. Выбрав инструмент «Рамка», нажмите и перетащите, чтобы создать новую рамку любого размера, который вы хотите.
  3. Подобно группировке, вы можете выбрать существующие элементы на холсте и поместить их в рамку, нажав: ⌘ + Opt + G (Mac) или Ctrl + Alt + G (Победа).

Если вы хотите сделать наоборот и удалить контейнер родительского фрейма, сочетание клавиш такое же, как и для разгруппировки: ⌘ + Shift + G (Mac) или Ctrl + Shift G (Win). Теперь давайте углубимся в их уникальные функции и способы использования.

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

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

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

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

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

Совет: Если вы хотите игнорировать ограничения при изменении размера фрейма, удерживайте ⌘ (Mac) или Ctrl (Win) при перетаскивании фрейма.

Поскольку границы фрейма можно настраивать независимо от его дочерних элементов, функцию «Содержимое клипа» (доступную на правой панели свойств) можно использовать в сочетании с ней по-разному. Вот несколько распространенных примеров:

  • Скрытие содержимого за пределами рамки: При включении функции «вырезать содержимое» любая часть элемента, выходящая за пределы рамки, будет скрыта.
  • Отображение содержимого за пределами: Отключив «обрезку содержимого», вы можете позволить элементам, выходящим за пределы ваших фреймов, оставаться видимыми. Например, если вы хотите создать фрейм, содержащий цитату с висящими знаками препинания, вы можете изменить размер фрейма так, чтобы его границы были выровнены по левому краю текстового поля, оставив кавычку за пределами фрейма. В подобных ситуациях это может значительно упростить выравнивание объектов в вашем дизайне.
  • Отображение дополнительного контента: Установив надлежащие ограничения и включив «обрезку контента», вы можете создавать фреймы и компоненты, раскрывающие больше контента при их расширении. Например, у вас есть раскрывающееся меню, которое используется в нескольких местах с различным количеством опций. Это дает вам простой способ просто изменить размер фрейма, чтобы открыть больше элементов меню.
  • Переполнение содержимого в прототипах: Элементы, выходящие за границы фрейма, могут быть настроены на прокрутку внутри прототипа. Например, вы вкладываете рамку в свой дизайн, чтобы разместить прокручивающуюся карусель. Вы можете настроить поведение переполнения таким образом, чтобы его можно было прокручивать при просмотре в режиме прототипа.

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

Figma 101: Создание версии для планшета или настольного компьютера

Просмотреть все уроки

Цели обучения:

  • Узнать об ограничениях
  • Исследование некоторых шаблонов проектирования планшетов или настольных компьютеров
  • Попрактикуйтесь в адаптации дизайна мобильного приложения для экрана большего размера
  • Закрепить вчерашние навыки прототипирования

Время выполнения: 45 минут

Сегодняшний урок

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

Прежде чем вы начнете, давайте рассмотрим еще одну замечательную функцию в Figma под названием Constraints . Это особенно полезно знать при переносе дизайна с одного устройства или размера экрана на другое.

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

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

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

  1. Нажмите и перетащите, чтобы выбрать все элементы на панели навигации. Сгруппируйте эти элементы с помощью ⌘G (Mac) или CtrlG (PC). Затем преобразуйте новую группу во фрейм, используя раскрывающееся меню в верхней части Инспектора. В Figma фреймы могут быть вложенными — это означает, что один фрейм может содержать другой фрейм. Переименуйте этот новый фрейм в «Nav Bar».
  2. Далее давайте установим ограничения на то, как фрейм «Панель навигации» будет относиться к фрейму-контейнеру «Фотостраница — Меню». Выбрав рамку панели навигации, измените настройки ограничений на «Слева и справа» и «Снизу» соответственно. Это означает, что Figma сохранит положение панели навигации относительно левого и правого краев и привяжет ее к нижнему краю фрейма.
  3. Наконец, нам нужно установить, как объекты внутри рамки панели навигации относятся к своему контейнеру. Дважды щелкните рамку панели навигации, затем выберите каждый объект по очереди и установите его ограничения следующим образом:
    • Фоновый прямоугольник: слева и справа, снизу
    • Значок камеры: центр, низ
    • Стрелка назад: влево, вниз
    • Кнопка гамбургера: справа, снизу

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

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

Планшет (альбомная ориентация):

  1. Нажмите F, чтобы выбрать инструмент «Рамка»
  2. Нажмите раскрывающееся меню «Планшет» в Инспекторе
  3. Нажмите «iPad Pro 10.5»
  4. После создания кадра измените ориентацию на Альбомную в верхней части Инспектора, рядом с раскрывающимся меню, которое мы только что использовали для создания кадра.
  5. В Инспекторе добавьте сетку макета, как мы делали это в первый день, измените количество столбцов на 12 и установите отступ на 16, а поле на 32

Рабочий стол:

  1. Нажмите F, чтобы выбрать инструмент «Рамка»
  2. Щелкните раскрывающееся меню «Рабочий стол» в Инспекторе.
  3. Нажмите «Рабочий стол» (1440*1024)
  4. В Инспекторе добавьте сетку макета, как мы делали это в первый день, измените количество столбцов на 12, задайте для отступа 16 и поля 128

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

Вот контрольный список, о котором следует помнить при работе над этим:

  • Что, как пользователь, вы хотели бы согласовать между мобильной и планшетной/настольной версиями приложения? (Возможно, цвет или определенные шаблоны макета, такие как фотопоток?)
  • Точно так же, что бы вы хотели изменить? (Например, чем могут отличаться навигация и меню на планшете или компьютере?)
  • Просмотрите другие сайты, чтобы понять, как относительный масштаб, размеры и расстояние между элементами могут отличаться на более крупных устройствах.