Как сделать рамку в фигме

Как сделать в Figma так, чтобы рамка растягивалась вместе набираемым текстом?

Как сделать в Figma так, чтобы рамка растягивалась вместе набираемым текстом? Чтобы не происходит перенос строк как в Paint’e. Ужасно неудобная и непривычная логика после Photoshop. Помогите, пожалуйста)

• Вопрос задан более двух лет назад
• 3081 просмотр

1 комментарий

Простой 1 комментарий

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

Решения вопроса 0
Ответы на вопрос 2

По всей вероятности, судя по приложенному скриншоту, выставлен третий тип выравнивания текста «Fixed Size» — см. иконки на скриншоте ниже:

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

Ответ написан более двух лет назад
Комментировать
Нравится 2 Комментировать

UI дизайнер, LLC Agaev Digital

Нажми букву K на клавиатуре, она активирует пропорциональное масштабирование.

Руководство по работе с изображениями в Figma

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

освойте профессию
графический дизайнер с нуля

Содержание

1. Как создать рабочую область
2. Как добавить изображение в Figma
3. Как повернуть изображение
4. Как масштабировать или обрезать изображение
5. Как поменять яркость и контрастность изображений
6. Как добавить текст на изображение
7. Как работать со слоями
8. Как добавить рамку к изображению
9. Как добавить эффекты
10. Как поменять форму изображения
11. Удаляем фон

Как создать рабочую область

20 месяцев
профессия графический дизайнер с нуля до про

Станьте графическим дизайнером, обучаясь на реальных задачах

Для работы с картинками нужно создать новую рабочую область. Это можно сделать на главной странице, нажав на значок «+» или кнопку Design file:

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

Здесь важно помнить, что клавиша Ctrl используется на компьютерах с системой Windows, а на macOS вместо нее будет использоваться клавиша Cmd.

20 месяцев
профессия графический дизайнер с нуля до про

Станьте графическим дизайнером, обучаясь на реальных задачах

Как добавить изображение в Figma

Первый способ

Используйте сочетание клавиш Shift+Ctrl+K в открытой рабочей области. В появившемся окне найдите нужное изображение и нажмите кнопку «Открыть»:

Теперь выбранное изображение появится в рабочей области:

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

Второй способ

Открываем папку с нужной картинкой, зажимаем ее левой клавишей мыши и перетаскиваем в рабочую область в Figma:

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

Третий способ

Этот способ полезен, если нужно скопировать изображение из интернета прямо в Figma. Выбираем картинку и нажимаем на нее правой кнопкой мыши. В появившемся меню жмем «Скопировать изображение»:

Возвращаемся в рабочую область Figma и вставляем картинку с помощью опции Paste here (Вставить) или сочетания Ctrl+V:

Четвертый способ

Его можно использовать, если нужно вставить изображение в необычную форму. Для этого:

• Выделяем объект, в который нужно вставить картинку.
• Справа в меню Fill (Заливка) открываем окно с редактированием цвета
• В нем нажимаем на иконку Image (Изображение).

В настройках появится кнопка Choose Image (Изменить изображение), нажав на которую можно будет поместить изображение внутрь фигуры.

Как повернуть изображение

Если положение картинки в рабочем пространстве вам не подходит, и ее нужно повернуть на 180 градусов, выделите картинку курсором и слева в блоке Fill нажмите на иконку Rotate 90º (Вращать) до тех пор, пока картинка не повернется так, как вам нужно:

Как масштабировать или обрезать изображение

В настройках есть четыре способа масштабирования изображений:

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

Если в выпавшем меню выбрать Fit (Подогнать), то картинка будет подстраиваться по высоте, чтобы ее было видно во фрейме целиком:

Если в выпавшем меню выбрать Crop (Обрезать), то картинку можно кадрировать — обрезать изображение и зафиксировать любую его часть:

Если выбрать Tile (Плитка), то можно заполнить миниатюрами картинки весь прямоугольник:

профессия | 20 месяцев

графический дизайнер с нуля до про

Станьте дизайнером, который нужен в маркетинге, PR, IT. Дадим не только знания, но и реальный опыт в профессии

Как поменять яркость и контрастность изображений

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

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

В Figma есть несколько категорий настроек:

• Exposure (Экспозиция)
• Contrast (Контраст)
• Saturation (Насыщенность)
• Temperature (Температура)
• Tint (Оттенок)
• Highlights (Интенсивность света)
• Shadows (Интенсивность тени)

как сделать визитку в Figma

Как добавить текст на изображение

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

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

• шрифт;
• размер текста;
• тип выравнивания (по правому краю, по левому краю или по середине);
• интервал между символами и строками.

Как работать со слоями

Если текст не видно на макете, то можно создать дополнительный слой. Для этого в блоке Fill нужно нажать на «+»:

По умолчанию он появится в формате Solid (Заливка), но его можно поменять на Gradient (Градиент) или даже другую картинку. Проще всего будет сделать заливку одним цветом.

Если на нашем макете выбрать черную заливку с прозрачностью 50%, то мы получим хорошо видимый текст и просматриваемую картинку.

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

Как добавить рамку к изображению

Для добавления рамки нужно кликнуть на изображение и в блоке слева найти компонент Stroke (Черта). Дальше нажимаем на значок «+», и появится рамка, созданная по умолчанию:

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

Рамки работают, как слои — их тоже можно накладывать друг на друга.

Как добавить эффекты

Для примера возьмем красный прямоугольник. Выделим его в рабочей области и во вкладке Effects (Эффекты) в блоке справа нажмем на «+», чтобы открылись настройки эффектов:

В Figma есть несколько базовых эффектов:

• Drop shadow (Падающая тень)
• Inner shadow (Внутренняя тень)
• Layer blur (Размытие объекта)
• Background blur (Размытие фона)

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

Следующий эффект — Inner shadow или внутренняя тень. Его настройки похожи на Drop shadow, только тень будет падать не на фон за объектом, а внутрь объекта. Так будет создаваться ощущение, что объект находится на заднем плане:

Layer blur размывает весь объект. Степень размытия можно настроить, выбрав значение от 0 до 100 в панели настроек:

Чтобы увидеть эффект Background blur, нужно сделать прямоугольник немного прозрачным, например, на 50%. А вторым слоем под прямоугольником расположить другой объект, например, круг. Внутри прямоугольника будут размываться все объекты, находящиеся на нижних слоях. Так создается эффект матового стекла:

как сделать эффект неона в Figma

Как поменять форму изображения

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

Например, можно взять фото и наложить его на фигуру. Важно, чтобы фотография, которую вы хотите обрезать, была именно сверху. Затем нужно зажать Ctrl, выдеить оба объекта и сверху на панели нажать на иконку маски:

Если кадр встал внутри фигуры не так, как нужно, можно выделить фотографию на панели слоев и сдвинуть в нужное положение.

Удаляем фон

Самый простой способ удаления фона — с помощью плагина Remove BG. Скачать его можно на сайте Figma Community, а потом зарегистрироваться на странице remove.bg.

На сайте нужно получить ключ: нажать на иконку своего аккаунта справа вверху → My account → API Keys → + New API Keys → Create API Keys и скопировать его.

Идем в Figma: сверху слева нажимаем на Main menu → Plugins → Find more plugins → в поиске ищем Remove BG → Set API Key → вставляем скопированный ключ.

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

Немного ждем и получаем мопса без фона:

профессия графический дизайнер с нуля до про

Маркетинг, PR, IT — мы не знаем, какую сферу вы выберете, когда станете графическим дизайнером. Но знаем, что вы сможете им стать, получив реальный опыт. Тот, который оценят работодатели

Два важнейших инструмента в Figma: полный гайд

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

При этом, она еще относительно молода и постоянно развивается. Не так давно в нашем списке желаний все еще были мощные функции, такие как Auto Layout и Variants (не говоря уже о Smart Animate, поддержке gif и плагинах). Если вы, как и я, всегда стремитесь идти в ногу со временем, вы захотите узнать, как применять Auto Layout и Variants в своих системах дизайна. Но не буду врать, к этому придется привыкнуть. Эти инструменты требуют, чтобы вы придерживались дисциплинированной архитектуры и не приветствуют быстрые и грязные экспериментальные изменения фреймов (также известных как артборды).

Так стоит ли оно того? Безусловно, и вот почему.

Сначала о главном: О чем мы говорим?

Auto Layout

Проще говоря, Auto Layout ( или авторазметка) позволяет объединить несколько слоев в одну строку или один столбец, причем каждый слой равноудален от другого.

Когда вы комбинируете слои с помощью Auto Layout, они будут заключены в «рамку» (или “фрейм”). Как и любой другой фрейм в Figma, фреймы Auto Layout могут быть сгруппированными.

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

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

Итак, как вы можете изменять элементы внутри фрейма Auto Layout?

Во-первых, я уже отмечал, что авторазметка позволяет создать строку или столбец. Вы можете изменить любой кадр с одного на другой, нажав стрелку вниз (для столбца) или стрелку вправо (для строки). Вы также можете изменить «пространство между» каждым слоем, увеличивая или уменьшая число рядом с символом ]〡[. Кроме того, вы можете настроить заполнение всего кадра (т.е. пространство вокруг), увеличивая или уменьшая число рядом с символом ▣. И, наконец, можно определить, как слои будут выровнены относительно рамки авторазметки. Они могут быть выровнены в любом направлении по осям X и Y (т.е. сверху-слева, сверху-в центре, сверху-справа, по центру-слева, по центру-в центре, по центру-справа, снизу-слева, снизу-в центре, снизу-справа).

В дополнение к этим явным элементам управления авторазметкой, существуют ограничения на фреймы авторазметки, которые Figma называет «Изменение размера». Изменение размеров позволяет вам определять следующие моменты:

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

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

Variants

Для того чтобы понять, что такое Variants (т.е. Варианты (компонентов)), необходимо иметь базовое представление о Компонентах Figma. Те из вас, кто пришел из мира Sketch, знают компоненты под другим названием: «Символы». И Компоненты, и Символы концептуально являются синонимами «шаблонов». Другими словами, они позволяют нам создать мастер-шаблон дизайна. Каждый раз, когда мы дублируем мастер, мы создаем «экземпляр» оригинала. Экземпляр всегда совпадает с эталоном, поэтому любые изменения, внесенные в эталон, каскадируются на каждый экземпляр. Это может сэкономить вам много времени и свести к минимуму риск создания несогласованных проектов с течением времени. Например, допустим, вы преобразовываете красную кнопку в компонент. Если вы решите изменить красную кнопку на синюю, каждый экземпляр этой кнопки в вашей системе дизайна также изменится на синий. Иными словами, вам не нужно вручную обновлять каждую кнопку — достаточно обновить первую созданную кнопку. Представьте это как отношения родителя и ребенка: родитель устанавливает правила, а ребенок следует им.

Но что, если вам нужно несколько кнопок? Например, первичная кнопка и вторичная кнопка. В этом случае вы создадите два компонента: один под названием «primary», а другой под названием «secondary». Затем вы сгруппируете эти компоненты, назвав каждый из них с помощью синтаксиса именования Figma. Синтаксис выглядит следующим образом:

[Категория] / [Подкатегория] / [Под-подкатегория] / […]

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

А название нашей вторичной кнопки будет выглядеть следующим образом:

И Figma будет отображать их на своей боковой панели вот так:

Как вы видите, Figma сгруппировала оба экземпляра в папку под названием «Buttons». В этом примере мы использовали только одну подкатегорию, но вы можете иметь столько, сколько вам нужно. Например, возможно, я хочу иметь активное и неактивное состояние для каждого типа кнопок. Это будет выглядеть следующим образом:

1. Кнопки / Основные / Активные
2. Кнопки / Основные / Неактивные
3. Кнопки / Вторичный / Активный
4. Кнопки / Вторичный / Неактивный

Каким бы мощным ни был этот синтаксис, представьте себе его применение к более сложным компонентам. или даже к компонентам, вложенным в компоненты (например, компонент кнопки внутри компонента формы внутри компонента заголовка). Чем больше ваша система проектирования, тем более утомительным, трудоемким и склонным к ошибкам становится этот процесс.

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

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

На изображении выше видно, что каждая кнопка теперь представлена как один компонент. С правой стороны кнопка объединения вариантов была заменена двумя рядами свойств. В свойстве 1 указан тип кнопки (например, Primary или Secondary), а в свойстве 2 — состояние кнопки (например, Active или Inactive). Щелкнув на имени свойства, вы можете переименовать его. Например, я переименовал эти свойства в «Тип» и «Состояние».

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

Все довольно просто, но можно сделать еще проще. Если переименовать свойство «State» в «Active» и изменить значения на «True» или «False», Figma сообразит и преобразует выпадающий список в переключатель. Когда он включен, отображается активное состояние. В выключенном состоянии отображается неактивное состояние.

Figma по сути рассматривает свойства как переменные. Как и в математике или коде, переменная — это имя, равное значению. Например, если X = 10, то 5 + X = 15, потому что X эквивалентно значению 10. Аналогично, наши свойства требуют имени (например, «Тип») и значения (например, Primary или Secondary). Это можно записать и по-другому: Тип = Первичный.

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

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

Хорошо, так в чем же преимущество?

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

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

Второе и, возможно, более важное преимущество — совместимость с разработчиками. И Auto Layout, и Variants говорят на языке кода. Вы, вероятно, знаете, что в Figma есть вкладка «Inspect», которая преобразует ваши проекты в простой код для облегчения процесса преобразования статических проектов в динамические интерфейсы. Возможно, вы не знаете, что до появления Auto Layout, Figma позиционировала элементы «абсолютно» внутри фрейма. Для тех из вас, кто не знаком с абсолютным позиционированием, просто знайте, что в мире адаптивного дизайна это. абсолютно. ужасная идея (или, если вам интересно, вы можете узнать больше здесь). Вместо абсолютного позиционирования современные элементы фронтенда позиционируются относительно друг друга (т.е. относительное позиционирование). Авторазметка позиционирует элементы относительно, позволяя разработчикам получать более значимые фрагменты кода из вкладки Inspect. Это может показаться тривиальным, но это не так. В конце концов, ничто не имеет значения, если реальное приложение не отражает макеты. Чем больше мы можем сделать, чтобы помочь разработчикам в реализации нашего видения, тем лучше.

Отлично, а в чем подвох?

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

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

Выводы

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

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

Как делать прототипы в Figma: кнопки, прокрутка и поп-апы

Рассказываем, как сделать прототип интерфейса в Figma, чтобы показать его клиенту, разработчику или арт-директору.

Вячеслав Лазарев
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

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

Рассказываем, как превратить ваши картинки из Figma в полноценный прототип — с рабочими кнопками, прокруткой и переключателями.

Интерфейс для прототипирования

На панели настроек справа в самом верху есть три вкладки: Design, Prototype и Inspected. Все настройки прототипов находятся в Prototype.

Основные настройки прототипов

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

Background — цвет фона.

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

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

Кнопки и навигация

• Перейдите во вкладку Prototype.
• Выделите любой фрейм на макете. На одной из его сторон появится кружок — зажмите его и тяните к другому фрейму.
• Чтобы сделать кнопку Назад, выберите любой фрейм и на вкладке Prototype нажмите на плюсик напротив слова Interactions. В первом поле укажите Tap, а во втором — Back.
• Чтобы запустить прототип, нажмите на синюю кнопку .

Прокрутка

• Перейдите во вкладку Prototype.
• Выделите фрейм, в котором нужна прокрутка. Чтобы она работала, высота вашего фрейма должна быть больше высоты экрана устройства.
• На вкладке Prototype в пункте Overflow scrolling выберите нужный формат прокрутки — горизонтальный, вертикальный или общий.
• Чтобы зафиксировать верхнюю и нижнюю панель приложения, перейдите на вкладку Design и в блоке Constraints нажмите галочку напротив Fix position when scrolling.
• Чтобы запустить нужный экран прототипа, зажмите кнопку и перетащите её к нужному экрану, а затем нажмите на неё.

Всплывающие окна

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

Как настроить поп-ап

• Перейдите во вкладку Prototype.
• Выделите фрейм, по нажатию на который должен появиться поп-ап. На одной из его сторон появится кружок — зажмите его и тяните к другому фрейму, который будет выполнять функцию поп-апа.
• В появившемся окне Interaction details вместо Navigate to выберите Open overlay.
• Выберите ваш поп-ап, нажмите на плюсик напротив слова Interaction, затем — на появившийся пункт и в окне Interaction details вместо None выберите Swap overlay.
• В появившемся поле в том же окне вместо None выберите дополнительный поп-ап.
• Чтобы проверить прототип, перетащите кнопку на нужный фрейм и нажмите на неё.

Готово. Теперь у вас есть поп-ап, который открывается после нажатия на кнопку. А если нажать на него, он поменяется.

Внутренние ссылки

Часто в навигационной панели может понадобиться ссылаться на внутренние модули, например на блок «О компании». В прототип можно добавить и это по примеру простых кнопок.

Как сделать внутренние ссылки

• Перейдите во вкладку Prototype.
• В основном фрейме с экраном приложения выделите другой, по нажатии на который нужно прокрутить страницу. На одной из его сторон появится кружок — зажмите его и тяните к другому фрейму внутри основного.
• В появившемся окне укажите отступ сверху, чтобы экран не прокручивался «впритык».
• Чтобы проверить прототип, перетащите кнопку на нужный фрейм и нажмите на неё.

Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!

Больше о Figma

• Умное копирование в Figma: зачем нужно и как пользоваться
• 5 лайфхаков в Figma, которые помогут работать быстрее
• 5 полезных плагинов для Figma: проектирование интерфейса
• Как делать варианты элементов интерфейса
• Тени в интерфейсах: зачем они нужны и как их рисовать
• Как создать тёмную тему