Страницы сайтов и файлов в фигме — как их создать и сделать переходы

Главная страница программы Figma и переходы по разделам

В первом случае под страницами подразумеваются разные экраны и вкладки программы. Так, например при входе в свой аккаунт вы попадаете на главную страницу фигмы, на которой видите свои файлы. Переключаясь по меню на левой панели можно открыть страницу с недавними файлами (Recents), проектами, черновиками (Drafts) и т. д. При нажатии на кнопку Explore Community в нижнем левом углу откроется страница Фигма Комьюнити. Если вы используете десктопную версию фигмы, и при этом у вас одновременно открыты несколько файлов, сверху будут видны вкладки, каждая их которых по сути также является страницей.

Выйти на главную страницу фигмы можно просто введя адрес сайта figma.com (если работаете через браузер) или нажав на иконку с домиком (если работаете в десктопном приложении.)

Страницы файлов в фигме

Находясь в редакторе файлов, на левой панели вы увидите раздел Pages (сразу над слоями Layers). В буквальном переводе Page — это и есть страница. По умолчанию в каждом файле создается одна единственная страница с названием Page 1. При желании вы можете добавить другие страницы, переименовать их или удалить. Для перехода с одной страница на другую достаточно один раз кликнуть по её названию. Для переименования потребуется двойной щелчок.

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

Страницы сайта в фигме и как сделать переходы между ними

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

Сделать переходы между страницами можно в режиме прототипа. Для этого переходим на вкладку Prototype на правой панели, выбираем элемент-ссылку и перетягиваем стрелочку к фрейму, на который нужно перейти. При желании можно добавить для перехода анимацию. Например, вот так может быть сделана нумерация с переходом по страницам (пагинация):

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