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

Для чего нужна Figma

Фигма полезна всем, кто связан с дизайном и разработкой. Она подходит для прототипирования, создания интерфейса, векторных изображений, презентаций, юзабилити-тестов, логотипов.

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

Интерфейсы. Фигма позволяет отрисовать все иконки, формы, кнопки, раскрывающиеся блоки и анимировать их.

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

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

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

Логотипы. В Фигме можно создавать не только иконки и кнопки, но и полноценные логотипы.

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

Совместная работа в Figma

Одна из причин популярности Figma – возможность совместной работы. Проекты доступны для просмотра всем членам команды. Любой из них может изменять дизайн, оставлять комментарии к проекту и просматривать историю версий.

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

Как начать пользоваться Figma

Чтобы начать создавать дизайн в Figma, нужно зарегистрироваться на официальном сайте программы figma.com. Вы можете выбрать бесплатный тариф с ограниченным набором функций или платные пакеты с расширенными возможностями. Figma не ограничивает пользователей из России в использовании инструмента, но не принимает оплату с российских карт. 

Сервис можно использовать в режиме онлайн, а также скачать десктопную программу или мобильное приложение со страницы figma.com/downloads. Чтобы проверять корректность отображения прототипов на мобильных устройствах, скачайте на смартфон приложение Figma Mirror (Android/iOS).

Интерфейс Figma

Интерфейс Figma разделяется на инструменты для работы с графическими изображениями и на менеджер файлов. 

Менеджер файлов

Менеджер файлов содержит настройки профиля и проектов.

Профиль. В настройках профиля можно изменить имя, установить аватарку, настроить пароль и email. Здесь же есть опции смены тарифа и возможность при необходимости удалить аккаунт Figma.

Поиск. В поиске можно найти нужные файлы и проекты. 

Последние файлы. В Фигме работает автосохранение, и все изменения отображаются в истории. Последние открытые файлы сохраняются в соответствующем блоке. Все сохраненные файлы отображаются во вкладке Recent.

Плагины. Фигма имеет множество плагинов, которые ускоряют, оптимизируют ее работу, добавляют новые возможности и инструменты. 

Новый файл. Создать его можно через кнопки Drafts или New File. Для удобства файл лучше сразу переименовать. 

Команда. Фигма позволяет работать в команде, но в бесплатной версии в проекте могут участвовать только два человека. Чтобы начать совместный проект, нажмите на New Team и придумайте команде название. Чтобы добавить участника, пригласите его присоединиться к проекту по электронной почте.

Проекты. Проект – это папка, в которой хранятся все принадлежащие к ней файлы. Бесплатная версия позволяет создать до трех папок проектов, платный тариф снимает это ограничение. Внутри одной команды также можно создать несколько проектов, для этого нужно нажать на New Projects. 

Редактор файлов

Редактор содержит инструменты для работы с файлами. Он включает в себя три области: рабочую область, панель инструментов и панель слоев.

Поиск. Элемент Search поможет в поиске пунктов меню, если вы забыли нужную вам команду. 

Панель File. Панель предлагает инструменты манипуляции с файлами: создание, импорт из Sketch, сохранение и просмотр истории изменений, а также отдельный пункт для его экспорта в формате PDF. 

Панель Edit. Эта панель нужна для работы с элементами дизайна в файле. Чтобы применить к элементу команду, его нужно выделить. Тогда его можно будет скопировать как код CSS, SVG или PNG-файл с помощью Copy As. Чтобы вставить скопированный элемент в левом верхнем углу другого объекта, воспользуйтесь командой Paste Over Selection. 

Чтобы создать несколько объектов одного цвета, примените команду Set Default Properties – скопируйте цвет нужного объекта, а следующие элементы будут автоматически в него окрашены. 

Цвет отдельного объекта можно скопировать пипеткой Pick Color. Цвет выделенной точки на рабочей области будет установлен в настройку Fill у выделенного слоя.

Группа команд Select All with подсвечивает все похожие объекты: с одинаковыми свойствами, заливкой, шрифтами, эффектами и т.д.

Панель View. Панель просмотра позволяет масштабировать макет, за это отвечают команды Zoom In/Zoom Out. 

Функция Rules отображает линейку и вытягивает направляющие.

Чтобы увидеть, как будет выглядеть объект на экране, посмотрите на него в пикселях с помощью команды Pixel Preview. 

Для расширения рабочей области скройте панель слоев и интерфейс функцией Layers Panel, Show/Hide UI.

Панель Preferences. Позволяет управлять пользовательскими предпочтениями. С помощью пунктов Snap to Geometry, Snap to Pixel Grid, Snap to Objects настраивается привязка к геометрии / объектам / сетке. 

Функция Highlight Layers on Hover подсвечивает мелкие элементы дизайна при наведении на них курсора. 

Команда Keyboard Zooms into Selection позволяет масштабировать макет относительно выбранного на экране элемента.

Инструменты для работы с графикой Figma

Часть интерфейса Figma содержит инструменты для работы с дизайном: изображениями, фигурами, шрифтами, слоями.

Фреймы.

Фрейм (артборд) – это основной элемент в виде законченного документа. Фреймом может быть завершенный дизайн страницы сайта или макет экрана приложения. Можно выбрать предложенные программой размеры фрейма или задать собственный. 

Фрейм объединяет внутри себя объекты и слои. Их можно сгруппировать или разбить на еще более мелкие сочетаниями клавиш. Чтобы объединить объекты во фрейм, используйте сочетание Ctrl+Alt+G для Windows или Cmd+Opt+G для MacOs. 

Фреймы разбиваются сочетанием Ctrl+Shift+G для Windows или Cmd+Shift+G для MacOs, 

а группируются с помощью команды из меню Object → Group Selection или сочетанием клавиш Ctrl (Cmd) + G.

Для выравнивания объектов по оси X/Y или между элементами используйте правую панель инструментов. 

Готовый фрейм скачивается одним файлом. Перед этим убедитесь, что объекты не выходят за пределы фрейма, иначе они не отобразятся на макете. 

Модульная сетка.

Модульная сетка в Figma позволяет упорядочить и выровнять все элементы дизайна страницы. Оптимальный формат – модульная сетка из 12 колонок, но вы можете задать любое удобное вам количество. Чтобы настроить сетку, нужно нажать на «+» в блоке Layout Grid справа. Настраиваются цвет колонок, уровень прозрачности, отступы между колонками и по бокам от экрана. 

Чтобы добавить вертикальный ритм, нужно еще раз нажать на «+» в блоке Layout Grid.

Векторные формы.

Для дизайна векторных объектов используйте инструмент Shape Tool. С его помощью отрисовывают иконки, логотипы и другие векторные изображения. Основные формы, доступные в редакторе – это прямоугольник, линия, треугольник, стрелка, круг, звезда. Их можно вытягивать в произвольной форме или сделать объект правильной формы с помощью зажатой клавиши Shift. Чтобы растянуть объект из центра, нажимайте Alt.

В Figma есть все возможности для работы с объектами: изменение расположения и цвета, растяжение по оси X/Y, скругление углов с помощью инструмента Corner Radius,

изменение толщины линий в пункте Stroke.

Раздел Effects позволяет добавить фигуре тень или размытие.

Кривые.

Pen Tool – это инструмент для рисования кривых линий, несложных иконок и графики.

Подробные и детальные иконки лучше нарисовать в Photoshop или Sketch.

Дополнительная опция Bend Tool позволяет скруглять кривые линии. 

С помощью Paint Bucket можно закрашивать закрытый контур. 

Изображения.

В макет можно добавлять изображения или через панель File → Place Image или с помощью перетаскивания картинки с рабочего стола компьютера. Figma воспринимает изображения не как отдельные объекты, а как shape – фрейм-прямоугольник, изменяемый параметрами Fill, Fit, Crop, Tile. 

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

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

Инструмент Crop позволяет обрезать картинку. 

Узор или паттерн создаются с включенным параметром Tile.

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

Градиент добавляется через значок «+» в панели свойств. Доступно четыре вида градиента: 

Linear (Линейный) 

Radial (Радиальный)

Angular (Угловой) 

Diamond (Ромбовидный).

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

Векторные объекты можно использовать в качестве масок. Чтобы сделать маску, создайте объект и перенесите слой ниже фотографии. Выделите оба слоя и кликните на Object → Use as mask.

Фигма поддерживает формат SVG, но вставляет изображение как фрейм. Перейдите в слои, объедините векторные объекты в группу клавишами Ctrl+G и перетяните их выше фрейма.

Эффекты и маски.

Figma позволяет работать с заливкой фреймов и текстовых слоев. Инструменты заливки находятся в левой панели свойств. Выберите цвет, прозрачность и тип заливки. Всего есть шесть типов заливки: сплошной цвет (Solid), линейный градиент (Linear), радиальный градиент (Radial), угловой градиент (Angular), радиальный с четырьмя лучами (Diamond), изображение (Image). По умолчанию для объекта выбран режим ровной заливки Solid.

Можно переключиться на режим градиента Linear – это градиент с осью, вдоль которой изменяется цвет. Крайние точки градиента можно менять, настраивая его направление и скорость перехода оттенков. Чтобы добавить в градиент несколько цветов, нажмите на шкалу перед палитрой.

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

Текст.

В Figma доступны шрифты Google Fonts. Есть возможность дополнить их своими шрифтами в десктопной версии или через браузер, но тогда придется установить Font Installers. Набор инструментов для работы с текстом стандартный: начертание, размер, выравнивание, высота строки, отступ между параграфами и красная строка.

Тип текстового блока изменяется в меню Advanced Type. Всего есть три типа:

width – ширина текстового блока подстраивается под контент, 

height – высота текстового блока подстраивается под контент,

fixed – для блоков фиксированной ширины.

Figma позволяет перевести шрифт в кривые с помощью команды Flatten и двойного клика на текст. 

Результат можно сохранить в формате .svg и вставить в дизайн.

Компоненты.

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

Чтобы сделать объект или группу объектов компонентами, их нужно выделить, а затем нажать на Create Component или применить сочетание клавиш Ctrl+Alt+K. Цвет слоя компонентов станет фиолетовым. При этом родительский компонент будет помечен иконкой с 4 ромбами, а дочерние – иконкой с одним ромбом.

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

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

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

Стили. 

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

Сохраните шаблон из компонентов и стилей, чтобы создать собственную дизайн-библиотеку для будущих проектов. 

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

Цвет. Создайте стили с заливкой в основных цветах дизайна, подпишите их названия и укажите код цвета.

Эффекты. Создайте стили размытия, тени слоя или фона.

Дополнительные возможности

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

• Chart и Charts – генерируют графики и диаграммы по заданным значениям.

• Table Creator – создание таблиц по заданным параметрам.

• Material Symbols – набор редактируемых иконок и эмодзи. 

• Iconify – набор стоковых иконок.

• Photos – набор фотографий из бесплатных фотостоков, доступна генерация изображений нейросетями.

• Fishtext in Russian – генерация текстов Lorem Ipsum на кириллице.

В инструменте Keyboard Shortcuts настраиваются горячие клавиши. В меню горячих клавиш синим будут подсвечены используемые комбинации, а серым – те, которыми вы не пользуетесь. 

Фреймы из Figma экспортируются в удобном для вас размере и формате. Иконки можно сохранить в формате .svg, изображения – в .jpeg или .png, а макетам и масштабируемым векторным объектам подойдет формат PDF.

Начало работы в Figma

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

Работа с шаблонами в figma 

Шаблоны в Фигме – это макеты для создания разных графических элементов: диаграмм, ментальных карт, брейнштормов и др. Шаблоны удобно использовать для простых задач и типовых решений. Они отлично демонстрируют возможности редактора, поэтому подойдут новичкам для начала работы. 

Создание нового файла в figma 

Работа с новым файлом позволит раскрыть все возможности Фигмы и создать дизайн любого продукта. 

Определите монтажные области. Перед началом работы в Figma определите монтажные области. Возможно, вам их понадобится несколько, особенно в том случае, если вы делаете прототип сайта с несколькими страницами. Самую верхнюю область сделайте вашим UI-kit. Эта область особенно полезна, если проект большой и над ним работают несколько дизайнеров. Для маленьких проектов с небольшой командой он не обязателен.

В UI-kit сохраняют все повторяющиеся графические элементы дизайна: кнопки, формы, поля. В это поле добавляют элементы, которые используются в проекте несколько раз. Это позволяет при необходимости вносить изменения во все элементы сразу и не тратить время на поиск родительского компонента. UI-kit позволяет, во-первых, сохранить единообразие всех элементов, во-вторых, сэкономить время на их изменение и в-третьих, облегчить другим дизайнером ориентацию в макете проекта. 

Кроме UI-kit, определите монтажную область проекта. Если это, например, макет посадочной страницы, может потребоваться несколько областей под размеры экранов компьютеров, мобильных устройств и планшетов. 

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

Выберите модульную сетку. Модульная сетка – это горизонтальные, вертикальные и диагональные линии и блоки заданной ширины. Она определяет вид макета, помогает организовать пространство и элементы внутри него. В Фигме есть разные виды модульных сеток, которые можно объединять – это делает работу с макетами очень удобной.

Сетка Uniform grid состоит из одинаковых равномерно распределенных полей по всей поверхности фрейма – как в тетради в клетку. Размер клеток можно задать самостоятельно, хотя по умолчанию он 10 на 10 пикселей.

Сетка Column Grid состоит из вертикальных колонок с отступом.

Сетка Row Grid состоит из строк и делит макет горизонтально.

Чтобы включить сетку, выделите фрейм, с которым работаете, и на панели настроек нажмите напротив блока Layout Grid плюсик. По умолчанию включится сетка Uniform grid, но вы можете выбрать и настроить любые в неограниченном количестве.

Для всех сеток задается количество колонок Count, ширина колонок Width, межколоночный отступ Gutter и отступ от края макета Margin. При этом Figma позволяет создавать неограниченное количество сеток в пределах одного фрейма. 

Выбор цвета. Чтобы дизайн выглядел единообразно, определите основные цвета и укажите их UI-kit. В дальнейшем вы сможете их изменять или добавлять новые, также вносите эти изменения в UI-kit. Так вы сможете отслеживать и контролировать оттенки, которые используете. Если вы дадите доступ к вашей работе другому дизайнеру, он также сможет легко сориентироваться в том, какие цвета в дизайне вы используете. 

Компоненты. Кнопки, логотипы, формы – вносите все их сначала в UI-kit, а затем дублируйте в нужные места. Если вам потребуется что-то изменить в дизайне, просто отредактируйте родительскую кнопку, а дочерние изменятся вместе с ней. При этом если вам будет нужно поменять внешний вид только одной дочерней кнопки, вы сможете сделать это без изменения всех остальных. 

Сохраняйте в UI-kit состояния компонентов, даже если используете их не везде. Это поможет легко ориентироваться в документе, и не искать нужную кнопку по всем экранам. 

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

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

Как работать с цветом в Figma

Векторные изображения в Фигме можно заполнять цветом. Для этого выберите элемент, нажмите на него, а затем на появившийся цветной квадратик внизу надписи Fill. Появится палитра: найдите подходящий цвет или впишите его шестнадцатеричное значение в поле. Таким способом в Figma меняют цвет всех элементов: прямоугольников, линий, кнопок, полей. 

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

Как добавлять картинки в Figma

Логотипы, баннеры, картинки вставляют в макет несколькими способами:

• перетащить картинку в макет;

• открыть меню File, а затем выбрать Place image;

• если нужно вставить картинку из интернета – просто скопируйте ее и вставьте в Фигме горячими клавишами Ctrl + V;

• вставить картинку из сайта unsplash.com можно с помощью специального плагина Unsplash. Он позволяет свободно использовать тысячи изображений, размещенных на сайте. 

Как сделать кнопки в Figma

Кнопки на сайтах обычно делают со скруглением. При этом они могут быть цветными или прозрачными. Чтобы добавить кнопке обводку, нажмите на нее и в правой панели напротив надписи Stroke кликните иконку плюсика. Задайте ширину для линии обводки, например, 2 px. Вверху бокового меню добавьте скругление. Впишите значение, например, 4. 

Теперь вы можете вписать в кнопку текст. Для удобства не забудьте про функцию Auto Layout. С ее помощью размер кнопки будет изменяться под размер текста.

Как работать с текстом в Figma

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

Если текст нужно разместить внутри фигуры или кнопки, Фигма сама покажет, где центр. Также можно центрировать текст, зажав shift и нажав на текст. В боковом меню появится возможность выбрать выравнивание по центру, по горизонтали и вертикали.

Как добавить иконки с помощью плагинов Figma

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

Один из популярных плагинов для иконок – это, например, Iconify. Чтобы добавить его, перейдите в раздел Community, а затем в Plugins. Откроется строка поиска. Введите название плагина, который ищете – Iconify, а когда найдете, нажмите на Install.

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

Теперь вы можете настраивать иконку, изменяя ее параметры: размер, положение на фрейме и т.д.

Заключение

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

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

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

Чтобы эффективно работать с Фигмой, разберитесь с назначением основных элементов веб-дизайна: фреймов, кривых линий, эффектов и масок, компонентов, стилей. Из них состоят прототипы, логотипы, кнопки. Основные инструменты редактирования в Figma перечислены в статье. Эти знания помогут создавать дизайн простых макетов,, элементов интерфейса. Когда вы разберетесь с основными возможностями Фигмы, сможете эффективно использовать ее в работе.