Конечно, решать задачи можно в Adobe Photoshop, в Corel Draw и в других подобных редакторах, но для определенных целей дизайнеры предпочитают именно Figma. Мы расскажем о том, какие функции есть в этой программе, и как ими пользоваться.
Что такое Figma и для чего она нужна
Платформа была запущена в 2016 году и уже через два года стала очень популярна среди профессиональных дизайнеров. По сути, Figma — это программа, которая предназначена для индивидуальной или групповой работы над различными дизайнерскими проектами. Figma является кроссплатформенным приложением, и у него есть веб-версия, которую можно использовать в браузере, не устанавливая на компьютер никаких программ. Для работы в приложении потребуется стабильный и быстрый интернет, поскольку вся работа происходит в облаке.
Какие проекты можно создавать в Figma
С помощью Figma можно решать самые разные задачи и создавать даже сложные проекты, причем работать над ними можно в команде. Вот какие проекты можно создавать в Figma:
- Создание векторной графики. Работа над векторной графикой — это одна из сильных сторон Figma. Ее можно как создавать с нуля, так и импортировать из Sketch или Adobe Illustrator. Объекты можно переводить в масштабируемый SVG-формат.
- Создание прототипов. Под прототипом понимается модель будущего цифрового продукта. То есть это могут быть презентации сайта или мобильного приложения. Дизайнер отрисовывает страницы и создает связи между ними.
- Создание элементов интерфейса. В программе Figma также можно прорисовывать иконки, кнопки, формы обратной связи и другие детали, которые предназначаются для формирования внешнего вида цифрового продукта.
Дополнительный функционал графического редактора Figma
Однако в Figma есть и дополнительный функционал, который делает этот редактор практически универсальным. Вот что еще есть в Figma:
- Полезные плагины. В Figma можно найти достаточно много полезных плагинов, которые существенно расширяют функционал. Например, BeatFlyer Lite для создания анимационных эффектов, Humaaans for Figma для создания иллюстраций людей от Пабло Стэнли, Iconify с 40000+ векторных иконок, Bullets для создания стильных маркированных списков.
- Огромная библиотека шаблонов. В библиотеке можно найти рекламные объявления, диаграммы, концепт-карты, доски настроения (мудборды), диаграммы связей и многое другое. Причем большая часть контента доступна даже в базовой бесплатной версии редактора. Уже одно это является неплохим стимулом для использования Figma.
Как начать пользоваться Figma
Теперь о том, как использовать Figma. Конечно, сначала потребуется скачать и установить программу, а потом создать аккаунт. Только после этого можно будет полноценно пользоваться редактором. В целом процесс начала использования Figma состоит из нескольких этапов.
1. Установка
Для установки программы Figma понадобится сначала скачать установочный файл под вашу ОС с официального сайта проекта. Полная инструкция по скачиванию и установке выглядит так:
Откройте браузер, перейдите по ссылке и в блоке «Desktop Apps» щелкните по пункту «Desktop App for Windows»;
Запустите проводник, перейдите в каталог с загрузками и двойным кликом откройте только что скачанный исполняемый файл.
На этом процесс скачивания завершен. Однако даже процесс установки потребует логина в аккаунте Figma. И если его нет, его обязательно нужно создать.
2. Регистрация
В предыдущем разделе мы скачали установочный файл Figma и запустили его. Установщик сразу же требует аккаунта в Figma, поэтому его нужно создать.
В главном окне инсталлятора щелкните по пункту «Create One»;
Вы будете перенаправлены на сайт для регистрации. В строке введите адрес электронной почты и нажмите кнопку «Continue with Email»;
Придумайте пароль и нажмите кнопку «Create account»;
Загрузите ваш почтовый ящик, найдите письмо от Figma и щелкните по нему;
Нажмите кнопку «Verify Email» для подтверждения адреса электронной почты и завершения регистрации;
Далее нажмите кнопку «Open the desktop App» для запуска программы на ПК;
После перехода в приложение Figma захочет с вами познакомиться. Введите свое имя или ник и нажмите «Continue»;
На следующем этапе выберите тип своей деятельности, например, дизайн;
Далее система захочет узнать, как именно вы работаете. Если в компании, то выберите соответствующую плитку;
Затем нужно отметить, с кем именно вы будете работать над проектом. Например, со своей командой;
Если вы пока не готовы добавлять конкретных людей в свой проект, пропустите этот этап при помощи кнопки «Skip»;
Выберите причину, по которой вы обратились к Figma, например, для создания нового проекта;
Ответьте, использовали ли вы ранее Figma;
Далее выберите бесплатный тарифный план и нажмите кнопку «Continue».
На этом процесс регистрации завершен. Вы сразу же будете перенаправлены в основное рабочее окно редактора Figma. С этого момента можно будет начинать работу.
3. Интерфейс Figma
Теперь стоит подробнее рассмотреть некоторые особенности интерфейса Figma. Это даст первое представление о том, как работать с программой.
Аккаунт. В этом разделе можно настроить пользовательский профиль: сменить аватарку, выбрать новое имя, поменять пароль и адрес электронной почты, а также поменять тариф или же вовсе удалить учетную запись.
Поиск. Позволяет найти не только отдельные файлы, но и проекты, в которых вы принимаете участие. Ищет достаточно точно и работает быстро.
Последние файлы. Во вкладке «Recents» автоматически сохраняются все файлы, которые когда-либо были использованы для разных проектов.
Плагины. В этом разделе хранятся пользовательские плагины, которые существенно расширяют функционал Figma и позволяют делать действительно интересные вещи.
Новый файл. Создание нового файла в Figma происходит через меню Drafts или New File в правом углу экрана. Программа называет свежесозданный файл именем «Untitled».
Команда. Позволяет создать новый групповой проект. Нужный для этого функционал находится в разделе «Team Project».
Проекты. Это папка, в которой по умолчанию создается новый проект при добавлении команды. В ней же хранятся файлы, которые используются в конкретном проекте.
4. Создание нового проекта
Рассмотрим процесс создания нового проекта в Figma. Даже при условии наличия только английского в интерфейсе сделать это достаточно просто. Вот соответствующая инструкция:
Запустите редактор и щелкните по кнопке «Create new»;
Далее выберите «Design file», если хотите создать какой-либо дизайнерский проект;
Щелкните по плюсику и добавьте в проект страницу, над которой вы планируете работать;
Переименуйте проект, щелкнув по его названию и выбрав пункт «Rename».
Далее остается только создать дизайн при помощи соответствующих инструментов. Но здесь универсальной инструкции не предусмотрено.
Возможности бесплатной версии Figma
Бесплатная версия Figma несколько ограничена в функционале, но даже ее можно спокойно использовать для создания небольших проектов, в том числе командных. Стоит рассмотреть все возможности бесплатной версии Figma подробнее.
- В бесплатной версии есть возможность создать 3 полноценных проекта для команд и совместной работы.
- Пользователям бесплатной версии предоставляется неограниченное облачное хранилище.
- В бесплатной версии предоставляется доступ к 2 стартовым библиотекам, причем есть возможность сделать выбор, к каким именно.
- История версий всех проектов хранится целый месяц.
- Бесплатная версия дает возможность одновременной работы над одним проектом команде из двух человек.
Платная версия Figma имеет ряд существенных отличий от бесплатной. Рассмотрим их подробнее.
- Можно создавать неограниченное количество проектов и файлов.
- Есть возможность использовать неограниченное количество страниц в проектах — в бесплатной версии только 3.
- Платная версия дает доступ к нелимитируемой истории версий.
- Есть доступ к групповым и командным библиотекам.
- Доступно голосовое общение с командой прямо в редакторе.
Каким специалистам в работе пригодится Figma
Использовать Figma могут не только дизайнеры, редактор подойдет многим специалистам. Рассмотрим подробнее, кому именно он может быть полезным.
1. Дизайнер
В первую очередь Figma и была ориентирована на дизайнеров. Здесь поддерживается импорт материалов из Adobe Illustrator или Sketch в формате .SVG. Также Figma дает дизайнеру возможность хорошо продумать юзабилити интерфейса, не ограничиваясь только визуальной красотой.
2. Проджект-менеджер
Для проджект-менеджеров в Figma есть качественная и информативная диаграмма Ганта. С ее помощью он может контролировать работу всей команды и понимать, кто сколько сделал, и какие задачи вообще были выполнены.
3. SMM-специалист
SMM-щик найдет в Figma уже готовые шаблоны рекламных объявлений для соцсетей со стандартными размерами и стандартным расположением элементов. Они помогут оформлять посты и запускать таргеты с баннерами без помощи дизайнера.
4. Разработчик
Для разработчиков в Figma предусмотрен специальный режим Developer Handoff, который позволяет быстро копировать стили CSS-элементов, фрагменты кода для Android и iOS, что позволяет работать существенно быстрее.
5. Руководитель отдела маркетинга
Для маркетолога на руководящей должности есть возможность использовать Figma в качестве планировщика или майнд-карты. Ее можно использовать как интерактивную доску с задачами и даже выстраивать ассоциативные связи между объектами.
Плюсы графического редактора Figma
У Figma много преимуществ по сравнению с другими подобными платформами. Рассмотрим плюсы этого графического редактора подробнее:
- Платформа условно-бесплатна;
- Есть полная поддержка стилей;
- Доступно многопользовательское редактирование;
- Удобное выравнивание элементов;
- Постоянные обновления и улучшения редактора.
Минусы Figma
Идеального софта не существует, какие-то минусы все равно есть. То же касается и Figma. Вот основные недостатки этого онлайн-редактора:
- Только английский язык в интерфейсе;
- Низкий уровень безопасности проекта в бесплатной версии;
- Серьезные ограничения по работе с текстом;
- Недостаточная поддержка горячих клавиш;
- Непроработанный алгоритм экспорта — часто возникают проблемы при экспорте .SVG
Аналоги Figma
Figma — далеко не единственный редактор такого плана. Есть и другие платформы, которые тоже заслуживают внимания. Вот наиболее интересные аналоги Figma:
- Pixso. Китайский аналог Figma. Здесь есть все, что необходимо для командной работы, а также функция автоматической компоновки, многочисленные варианты компонентов, UX/UI и воспроизведение прототипов.
- Sketch. Популярный аналог Figma, который ориентирован в первую очередь на macOS и iOS. Годится для создания прототипов и сайтов, иконок, символов, иллюстраций, приложений и других проектов.
- Adobe XD. Этот векторный инструмент является прямым конкурентом Figma. Он предназначен для разработки, проектирования прототипов пользовательских интерфейсов, а также для решения других весьма сложных задач.
- NinjaMock. Здесь реализован стандартный набор инструментов для проектирования и дизайна. Из основных особенностей можно отметить мультиплатформенность и возможность командной работы.
Мнение эксперта
На вопросы редакции Hi-Tech Mail о Figma ответила Ася Олейниченко, продуктовый дизайнер.
Есть ли скрытые функции у Figma, о которых не знают многие пользователи?
Figma — это мощный инструмент для работы с интерфейсами, но в ней есть фишки, о которых многие не догадываются, особенно если раньше работали в Adobe:
- Компоненты и переменные. Многие новички не используют их, хотя они ускоряют работу. Можно задавать переменные для стилей (например, цветовые схемы), что помогает легко менять дизайн в один клик.
- Кнопка «K» (Scale Tool). В отличие от обычного изменения размеров, этот инструмент масштабирует не только сам объект, но и всё внутри него — шрифты, отступы, тени. Полезно, когда нужно быстро адаптировать макет.
- Режим аутлайнов (Cmd + Y). Позволяет видеть только контуры объектов без заливок и теней — удобно, если нужно проверить чистоту макета.
- История изменений. Если что-то случайно удалили, всегда можно откатиться назад и вернуть нужную версию.
Насколько полезна Figma для обычных пользователей?
Figma — это не только про дизайн, она может пригодиться и в повседневной жизни:
- Презентации. В Figma Slides есть готовые шаблоны, которые выглядят современно и структурировано. Для многих это удобнее, чем PowerPoint.
- Совместная работа. FigJam — отличное место для коллективного брейншторма, особенно если работаете в команде. Здесь можно делать групповые проекты, визуализировать идеи и обмениваться заметками в реальном времени.
- Планирование. FigJam можно использовать как личный органайзер — составлять планы на день, делать списки дел или даже организовывать рабочие процессы в формате Kanban-доски. Это особенно удобно для менеджеров и тех, кто любит порядок.
Может ли нейросеть полностью заменить Figma?
Пока нет нейросетей, которые могли бы полностью заменить редактор. Они либо делают упор на визуал, либо на структуру, но не могут полноценно учесть все аспекты проектирования.
Нейросети — это инструмент, а не замена. Они помогают автоматизировать рутинные задачи, но не заменяют исследовательскую и аналитическую работу. Figma уже внедряет ИИ. В будущем появится встроенный ИИ, который поможет с рутинными задачами (например, упорядочивать фреймы), но не сможет создать полноценный дизайн без участия человека.
Дизайн — это не только макеты. Важно не просто «нарисовать красиво», а учитывать пользовательский опыт, анализировать аудиторию и тестировать решения. Всё это требует мышления и гибкости, чего пока нет у нейросетей.
Главное о графическом редакторе Figma
Подведем итоги и выделим главное, что нужно запомнить о графическом редакторе Figma.
- Figma — это облачный графический редактор, рассчитанный в первую очередь на дизайнеров.
- Использовать Figma можно бесплатно, но с некоторыми ограничениями.
- Figma может составить конкуренцию таким серьезным продуктам, как Adobe XD.
- Для работы с Figma требуется создать аккаунт.
- Русского языка в интерфейсе нет.
- Figma может быть полезной в том числе для проджект-менеджера, СММ-щика, разработчика и руководителя отдела маркетинга.
