Баннер
Технологии

Графический редактор Figma: что это, возможности для дизайнера

Оксана Есарева
/ 9 октября 2023 16:25
1.4 тыс.
12 мин.
Текст изменился / 16 января 2024

Часами вырезаете картинку, вручную подбираете цветовую палитру, а потом все переделываете, потому что в мобильной версии дизайн не смотрится? Хватит это терпеть: изучайте Figma! Рассказываем о возможностях этого передового инструмента.

figma
Figma  — удобный инструмент визуализации, работать с ним одно удовольствие

В чем удобство и революционность Figma 

Сегодня без Figma не представить появление на свет практически ни одного сайта или мобильного приложения. 

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

Откуда такая популярность? Дело в том, что Figma — это феноменально гибкая среда, которая ускоряет разработку визуала и прототипов веб-страниц, позволяя подключить к проектированию сразу всю команду: дизайнера, маркетолога, проджект- и аккаунт-менеджеров и даже самого заказчика, если потребуется. 

Figma — революционный продукт по сравнению с популярными графическими редакторами от Adobe Photoshop до Sketch. 

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

Еще одно преимущество программы — в отличие от громоздких дизайн-инструментов у нее нет жестких требований к системе. Достаточно видеокарты уровня Intel HD Graphics 4000 или Nvidia 330m.

Технологии сегодня развиваются очень быстро, программное обеспечение постоянно обновляется, и «железо» вашего компьютера может просто не поспеть за прогрессом. 

Если компьютер стал работать медленнее, постоянно нагревается и шумит, а  никакая чистка не помогает, вероятно, настало время купить новый. Оформив карту «Халва», вы сможете приобрести технику в магазинах-партнерах с рассрочкой на несколько месяцев.

152 458 ₽кешбэк
владельцы Халвы получили вчера
Счётчик кэшбека Халвы владельцы

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

Ключевые особенности Figma:

  1. Облачный сервис. Изменения отражаются онлайн сразу при появлении. В любой момент можно посмотреть и забрать в работу последнюю версию макета или оперативно внести изменения из любой точки мира. И не нужно ждать, пока дизайнер освободится или вернется с обеда, чтобы отправить вам картинку. 
  2. Коллективная работа. В общем рабочем поле удобно оставлять друг другу комментарии, вносить мелкие правки, создавать новые версии макетов для A/B тестов, вести согласование и переписку. И все это без вереницы писем на e-mail и бесконечных чатов в соцсетях, которые отнимают драгоценное время.
  3. Кроссплатформенность. Сервис работает с любого браузера на устройствах с любой операционной системой — с ПК, планшета или смартфона. Дополнительные приложения устанавливать не придется.
    Впрочем, если хотите работать с Figma без интернета, например, во время долгих авиаперелетов, ничто не мешает установить десктопную версию.

Обзор функционала

Хорошие новости: даже в бесплатной версии пользователю доступен абсолютно полный, не урезанный набор инструментов. 

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

фигма
Возможности Figma почти неисчерпаемы
фигма
Что еще можно делать с помощью этой программы
фигма
Программа подходит даже для учебных задач
фигма
Даже новичок может работать в «Фигме», используя готовые шаблоны изображений

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

Еще одно нестандартное применение сервиса —  создание квизов и простых логических игр: ребусов, пазлов, «крестиков-ноликов».

Мнение эксперта

Ольга Владимировна Гаврилова
Ольга Владимировна Гаврилова
дизайнер Совкомбанка

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

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

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

Правда, курсы стоят недешево и могут обойтись в 100 000 рублей и больше. Нет свободных средств прямо сейчас? Возьмите кредит на обучение в Совкомбанке, чтобы не откладывать мечту!

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

Особенности работы с редактором для разных специалистов

Как уже отмечалось, «заточенность» под командную работу — одна 

из ключевых черт Figma. Но в чем, кроме согласования и внесения правок, она заключается? Какие возможности графического редактора пригодятся в работе разным профессионалам креативной сферы?

1. Дизайнеру

Во время работы легко переключаться между разным специализированным ПО, начиная работу в одном и продолжая в другом. Например, доступен быстрый экспорт дизайна в формате .svg и, наоборот, импорт изображений из Adobe Illustrator или Sketch. 

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

Это оптимизирует время на «примерку» уже готового дизайна к требованиям по функционалу будущего ресурса. 

2. Проджект-менеджеру

Один из главных инструментов на его вооружении — диаграмма Ганта. Работать с ней можно и  в Figma. Временная шкала диаграммы помогает контролировать все этапы выполнения задач по проекту. 

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

3. SMM-щику

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

Упрощается создание версий множественных рекламных объявлений для ABS-тестирования.

4. Разработчику

В режиме Developer Handoff веб-разработчик быстро копирует стили CSS-элементов, фрагменты кода для Android и iOS, получает данные о технических параметрах, свойствах изображений и других объектов. Это позволяет работать намного быстрее.

5. Руководителю отдела маркетинга

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

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

figma для дизайнера
«Фигма» полезна не только дизайнеру, но и маркетологу. Внутри множество готовых шаблонов для составления графиков, диаграмм, стратегий и воронок. Источник: figma.com 

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

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

  1. Remove BG умеет удалять фон с изображения за 3–5 секунд.  
  2. Image Palette создает цветовую палитру на основе загруженной фотографии и поддерживает единую стилистику макета. 
  3. Image Tracer пригодится, если надо конвертировать растровое пиксельное изображение в векторное. 
  4. Color Kit генерирует более светлые или темные оттенки любого цвета. 
  5. Webgradients и uiGradients — это  готовые наборы цветовых градиентов: 170 и 350 соответственно. 
Факт дня
В государстве Палау в 2007 году выпустили серебряную монету номиналом 5 долларов США с изображением Девы Марии и маленьким флаконом святой воды.

Может ли Figma заменить Photoshop и другое сложное ПО 

Несмотря на обширные возможности и революционность, программу для дизайна «Фигма» не стоит рассматривать как замену Adobe Photoshop, Illustrator, InDesign и Sketch. Все-таки у каждой программы своя специфика, «фишки» и особые возможности, которых нет у других.

  • Figma создана для упрощения рутины в сфере веб-дизайна, удобного прототипирования и создания интерактивных интерфейсов.
  • Photoshop незаменим, если нужна сложная обработка растровой графики, цветокоррекция фото, создание коллажей, фотомонтаж.
  • Adobe Illustrator работает с векторной графикой, позволяет создавать логотипы и разрабатывать фирменные стили.
  • InDesign используют для верстки макетов печатных изданий: книг, журналов и других. 

Из программных продуктов Adobe объекты можно импортировать в Figma и тут же продолжить работу или сделать ее коллективной.

В этом смысле для веб-дизайнера Figma — это еще и практичный инструмент коммуникации с другими сотрудниками, далекими от дизайна. У того же Illustrator крайне сложный профессиональный интерфейс, а в Figma все просто и быстро. 

Если в свое рабочее поле в программах Adobe дизайнер просто побоится пустить аккаунт-менеджера — вдруг верстка слетит —  то из «Фигмы» сотрудник сам возьмет нужную информацию.

Также Figma интегрируется с редактором векторной графики Sketch и Principle, приложением, которое создает анимацию элементов. 

«Фигма» не стоит на месте. Создатели ее постоянно совершенствуют и расширяют функционал. Разработчики держат руку на пульсе, следят за современными трендами, чтобы сделать работу представителей креативного класса легче, приятнее и быстрее.

Выводы 

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

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

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

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

Статьи про технологии у вас в почте

Подпишитесь на подборку статей на тему технологий. Все самое интересное из рубрики Технологии будем присылать вам на почту.
Хотите узнавать о новых публикациях не заходя на сайт?
Подписывайтесь на анонсы в ВК и Телеграме
banner image
1.4 тыс.
Оксана Есарева
Оксана Есарева
Разбираюсь в банковских продуктах и актуальном законодательстве. Со мной ваши финансы точно не запоют романсы.
Баннер