Как пользоваться Figma: первый макет, компонент и прототип

Эта инструкция — для тех, кто открывает Figma впервые. За полчаса вы нарисуете два простых экрана мобильного приложения, сделаете кнопку-компонент и свяжете экраны в прототип. Шаги написаны для браузера на компьютере; в приложении для Windows и macOS интерфейс такой же. Интерфейс Figma на английском, поэтому названия инструментов приведены так, как они подписаны в программе.

Зарегистрируйтесь и создайте файл

Откройте figma.com и зарегистрируйтесь через почту или аккаунт Google. После входа сервис спросит о вашей роли и предложит выбрать тариф — выберите бесплатный.

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

Добавьте фрейм под экран телефона

Нажмите клавишу F или выберите инструмент Frame на панели инструментов. Справа появится список готовых размеров: выберите один из телефонов. На холсте появится белый прямоугольник — это ваш экран. Дважды щёлкните по его названию в списке слоёв и переименуйте, например, в «Главная».

Фрейм — основа всего в Figma: внутри него располагаются элементы, по нему считаются отступы и именно фреймы потом связываются в прототипе.

Нарисуйте заголовок и кнопку

Нажмите T, щёлкните внутри фрейма и напечатайте заголовок. Размер, шрифт и цвет меняются на правой панели. Затем нажмите R и нарисуйте прямоугольник для кнопки, скруглите углы в свойствах и выберите цвет заливки. Добавьте поверх прямоугольника текст «Далее».

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

Превратите кнопку в компонент

Выделите кнопку и нажмите Ctrl+Alt+K на Windows или Cmd+Option+K на Mac. Значок слоя станет ромбом — это главный компонент. Скопируйте кнопку и вставьте копию в другое место: копии связаны с главным компонентом.

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

Сделайте второй экран

Выделите фрейм «Главная» и продублируйте его клавишами Ctrl+D или Cmd+D. Переименуйте копию во «Второй экран», поменяйте заголовок и добавьте любые элементы, например картинку: файл с компьютера можно просто перетащить на холст.

Свяжите экраны в прототип

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

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

Поделитесь макетом

Нажмите Share в правом верхнем углу, введите почту коллеги или скопируйте ссылку и выберите права: только просмотр или правка. Коллеги смогут оставить комментарии прямо на макете — для этого в режиме комментариев нужно щёлкнуть по нужному месту. Файл сохраняется автоматически, прошлые версии доступны в истории версий.

Если что-то пошло не так