Figma для начинающих: фреймы, компоненты и прототип

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

В этом руководстве создадим экран списка и экран деталей. Сначала разберём фреймы и слои, затем добавим Auto Layout, компонент и переход. Задача для первого интерактивного прототипа проста: найти заказ, открыть его и вернуться к списку.

Возьмём приложение для обработки заказов. В списке будут три карточки: «Заказ № 1042 — Собирается», «Заказ № 1043 — Отправлен» и «Заказ № 1044 — Ожидает оплаты». На втором экране покажем состав заказа № 1042, его статус и кнопку «К списку». Это небольшой, но законченный сценарий: макет должен не только выглядеть аккуратно, но и объяснять, что произошло после нажатия.

1. Холст, фреймы и слои

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

Как устроен файл

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

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

В нашем примере назовите фреймы «Заказы — список» и «Заказ 1042 — детали». Внутри первого отделите заголовок, список карточек и нижнюю навигацию, если она нужна. Текст номера заказа, статус и кнопка должны находиться внутри своей карточки. Если кнопка случайно лежит рядом с карточкой, а не внутри неё, совместное перемещение и изменение размеров будут работать не так, как ожидается.

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

Основные свойства объектов

Добавьте фрейм для карточки, а внутри него — номер заказа, статус и текст «Открыть заказ». Пока кнопка представлена только надписью: ниже мы создадим для неё контейнер с Auto Layout и зададим ему фон. Выделяйте объект, чтобы менять его свойства на панели Design.

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

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

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

2. Компоненты и прототип

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

Автолейаут (Auto Layout)

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

Выделите текст кнопки и нажмите Shift + A. У созданного фрейма с Auto Layout задайте заливку, скругление, внутренние отступы и размер по содержимому. Фоном кнопки служит сам фрейм — отдельный прямоугольник за текстом не нужен. Замените надпись более длинной. Если нужен значок, добавьте его в тот же контейнер.

Для кнопки «Открыть заказ» попробуйте горизонтальные отступы 16 px и вертикальные 10 px. Это начальные значения для упражнения, а не обязательный размер для всех интерфейсов. Затем замените надпись на «Посмотреть состав заказа»: фон должен расшириться вместе с текстом, а отступы — остаться прежними. Если надпись обрезается, сначала проверьте размеры текста и контейнера, а не уменьшайте шрифт.

Теперь примените вертикальный Auto Layout к фрейму карточки с номером, статусом и кнопкой, а три карточки объедините в вертикальный список. Вложенные контейнеры позволяют задать расстояние между карточками отдельно от расстояния между элементами внутри каждой карточки. Этот принцип описан в руководстве Figma по Auto Layout.

Чтобы список менялся вместе с экраном, примените вертикальный Auto Layout к внешнему фрейму: заголовок и список станут его дочерними элементами. Для списка и карточек задайте ширину Fill container, чтобы они занимали доступное место, и высоту Hug contents, чтобы они вмещали содержимое. У длинного текста задайте ширину по контейнеру и автоматическую высоту с переносом строк. Кнопку оставьте размером по содержимому.

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

Компоненты и экземпляры

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

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

Отделяйте общую конструкцию от данных конкретного заказа. Стиль кнопки «Открыть заказ» общий; номер и статус у каждой карточки свои. Поменяйте скругление в основном компоненте кнопки и убедитесь, что экземпляры обновились. Затем измените надпись только в одном экземпляре и посмотрите, какое отличие сохранилось. Так проще понять связь компонентов, чем копировать готовую библиотеку целиком.

Переходы между экранами

Создайте второй фрейм с деталями заказа. Во вкладке Prototype свяжите действие на карточке с этим экраном и выберите нужный переход.

Свяжите кнопку в карточке № 1042 с фреймом деталей именно этого заказа. Укажите на нём тот же номер и статус «Собирается». Если на первом экране заказ «Отправлен», а на втором внезапно «Собирается», участник будет разбираться в противоречии, а не в навигации. В инструкции Figma по прототипированию показаны выбор области нажатия, связь с целевым фреймом и настройка начального экрана сценария.

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

Для учебного сценария достаточно сделать рабочей одну карточку и явно определить задачу: «Узнайте, что входит в заказ № 1042». Если показываете прототип без сопровождения, остальные карточки тоже должны вести к осмысленному результату либо не выглядеть интерактивными. Нельзя оставлять все карточки внешне одинаковыми, но считать ошибку пользователя доказанной только потому, что он выбрал несвязанный элемент.

Предпросмотр

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

Проверьте макет на изменениях

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

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

Импорт и экспорт

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

Доступ и комментарии

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

Ресурсы сообщества

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

3. Частые вопросы о начале работы

Нужно ли сначала изучить все инструменты?

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

Как проверить, что я понял настройки?

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

Что показать разработчику?

Передайте выбранную версию макета, состояния, переходы и пояснения к правилам. Список размеров и цветов не заменяет описание поведения формы или ошибки.

4. Как продолжить проект в Pixso

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

В Pixso продолжите ту же задачу, а не собирайте новый набор декоративных экранов. Покажите коллеге список и попросите найти состав заказа № 1042, не объясняя, куда нажимать. Обсудите конкретный момент затруднения: например, непонятную подпись действия или незаметный возврат. Так следующий вариант макета будет отвечать на наблюдение, а не просто отличаться цветом.

Закрепите навык на своём экране

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