Гид по Фигме для начинающих веб-дизайнеров

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

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

Гид по Фигме для начинающих веб-дизайнеров

  • верстка интернет-сайта;

  • разработка графического проекта приложения с его последующей оценкой на практике;

  • работа с иллюстрациями, их удобная интеграция в инструкции на сайте магазина;

  • создание элементов оформления экрана для мобильных приложений и сайтов;

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

Рис. 1 Пример разработки интерфейса посредством возможностей Фигмы.jpg

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

Рис. 2 Разработка шаблона карты пути клиента.jpg

Как начать работать в Фигме?

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

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

Рис. 3 Рабочая область.jpg

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

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

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

  • Плагины. В пункте «Плагины» содержится информация о применяемых расширениях. Гибкость структуры сервиса позволяет установить любые дополнения.

  • Новый файл. Инициализация операции по созданию нового файла. Его наименование задается пользователем.

  • Команда. Создание команды для групповой работы над проектом. Наименование команды указывает организатор. Участники приглашаются по e-mail, каждому из них назначается роль. Бесплатный тариф позволяет назначить редакторами 2 членов команды.

  • Проекты. Раздел, посвященный актуальным проектам. Каждый проект хранится в отдельной папке. В рамках бесплатного тарифа доступно не более 3 проектов. Допускается приглашение сторонних участников путем нажатия клавиши Share.


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

Рис. 4 Окно работы с новым файлом.jpg

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

Базовый функционал Фигмы

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

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

  • Сетка. Использование модульной сетки упорядочивает элементы фрейма. Тип применяемой сетки настраивается пользователем. Оптимальное решение – использование 12-колончатого модуля.

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

  • Кривые. Применение кривых востребовано при создании нестандартных объектов. Элементы незаменимы при разработке иконок и графики. Предусмотрена дополнительная опция для сглаживания углов.

  • Изображение. Работа с изображениями, загруженными со сторонних ресурсов. Возможно изменение цвета, размеров и прочих параметров.

  • Маски и эффекты. Инструменты для эффективной заливки фреймов и работы с текстовыми слоями.

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

Рис. 5 Пример работы с текстом посредством функционала Фигмы.jpg

Что еще предлагает сервис?

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

  • Grid for Tilda Publishing. Генератор сетки для платформ Тильда. Возможность выполнения операций нажатием одной кнопки.

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

  • Iconify. Внушительный набор векторных иконок для любых проектов.

  • Figmotion. Плагин, упрощающий добавление прототипов анимации.

  • Blobs. Дополнение для более простого и удобного рисования.

  • Humans to Figma. Готовые варианты иллюстраций и дизайна.

Возможно использование прочих плагинов, благо их количество постоянно растет.

 Рис.=


Минусы работы в Figma

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

Заключение

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

Полезные статьи

Frontend web разработчик
Техподдержка и ведение сайта
Ведение и продвижение сайтов