Прототип — это модель сайта или приложения. С ней заказчику проще оценить, как люди будут пользоваться продуктом. Чтобы создать прототип сайта, дизайнер отрисовывает экраны и создаёт связи между ними.
Рассмотрим основные инструменты Figma для создания прототипов сайтов.
ФРЕЙМЫ
Фрейм или артборд — основной элемент дизайна в Фигме. Это документ, в котором будут создаваться страницы сайта. Вы можете задать размер фрейма самостоятельно или выбрать готовые размеры экранов популярных устройств (ноутбуков, планшетов, смартфонов) ― в панели инструментов справа. Когда вы создаете дизайн сайта внутри фрейма, для каждого элемента сайта (фигура,
изображение, текст) в панели свойств слева добавляются слои. Вы можете сгруппировать отдельные элементы сайта или разбить фрейм на объекты сочетаниями клавиш:
- Ctrl+Alt+G (для Windows), Cmd+Opt+G (для MacOs) ― объединить объекты во фрейм;
- Ctrl+Shift+G(для Windows), Cmd+Shift+G (для MacOs) ― разбить фрейм на объекты.
МОДУЛЬНАЯ СЕТКА
Сетка в Фигме помогает упорядочить все элементы дизайна во фрейме. Для сайтов на Тильде используйте в Фигме 12 колоночную модульную сетку (Bootstrap) с отступом 40 пикселей, отступы по бокам экрана — 103 пикселя. Для настройки сетки нажмите «+» в блоке Layout Grid. Задайте количество колонок, их цвет и прозрачность. Вы также можете настроить тип сетки — сделать её адаптивной, выровнять по центру или краю.
ВЕКТОРНЫЕ ФОРМЫ
Создавайте векторные объекты инструментом Shape Tool. С его помощью можно отрисовывать различные элементы интерфейса (фигуры, иконки). Основные векторные объекты ― это прямоугольник, линия, треугольник, стрелка, круг, звезда. Вы можете вставлять векторные объекты произвольной формы или зажать клавишу Shift и вставить объект правильной формы.
КРИВЫЕ ЛИНИИ
Инструмент Pen Tool позволяет рисовать кривые линии в Фигме и несложные векторные формы (иконки и графику). Используйте дополнительную опцию Bend Tool
для скругления кривых или Paint Bucket для заливки закрытого контура.
ИЗОБРАЖЕНИЯ
Добавьте одно или несколько изображений в макет через панель File, инструмент Place Image или просто перетащите их с рабочего стола. Изображение в Фигме вставляется как шейп (фигура), а не как отдельный объект.