Знакомимся с Figma.
Figma – один из основных инструментов веб-дизайнера. Это графический редактор, которым вы сможете пользоваться даже без платной подписки: у сервиса много базовых функций и возможностей.
Школа дизайна AI & IT технологий - ODAA.SCHOOL подготовила для вас подробный гайд по Figma, который будет состоять из 6 статей. Вместе с нами вы пошагово разберетесь в интерфейсе программы, узнаете о работе с векторной графикой, научитесь использовать плагины и разрабатывать сложные элементы дизайна. А сегодня мы предлагаем познакомиться с Figma, сравнить ее с другими редакторами и разобраться, какие проекты вы сможете здесь создавать.
Что такое Figma и для каких задач подходит?
Figma – одновременно графический редактор и программа для разработки прототипов. Это значит, что вы сможете не только создавать в ней отдельные элементы (иллюстрации, иконки), но и моделировать будущие сайты или приложения.
Программу используют веб- и UX/UI-дизайнеры, графические дизайнеры, разработчики. Она удобна для командной работы, поэтому также ей пользуются, например, менеджеры проектов и специалисты, которые работают по методике CustDev: общаются с целевой аудиторией, тестируют гипотезы и улучшают прототипы на основе тестов.
Что можно делать в Figma:
-
Элементы интерфейса: кнопки, списки, иконки, формы для приема заявок. Можно настроить для них анимацию и другие эффекты.
-
Векторную графику: логотипы, иллюстрации и другие графические элементы.
-
Макеты экранов для будущих веб-страниц и приложений. Дизайн можно сразу «примерить» на экран компьютера или смартфона.
-
Интерактивные прототипы сайтов и мобильных приложений. Когда все экраны отрисованы, вы можете выстроить связи между ними и проверить, как работает каждая ссылка или кнопка.
-
Презентации. В редакторе есть удобные шаблоны и необходимые инструменты для работы с таким форматом.
-
Схемы. Их можно рисовать в дополнении Figma Jam – это онлайн-доска для заметок, которая по функционалу не уступает платформе Miro.
Иногда Figma используют для нестандартных целей. Например, в редакторе можно нарисовать планировку дома и даже собрать логическую игру вроде пазлов или «крестиков-ноликов».
Figma. Где же ей место среди других графических элементов?
Место Figma среди графических элементов.
Наряду с Figma дизайнеру нужно владеть и другими программами. В профессиональную базу входят, например, редакторы из пакета Adobe: Illustrator, Photoshop, InDesign. При этом перед вами не будет стоять выбор – Figma или Photoshop. Эти графические редакторы не заменяют друг друга, а дополняют, так что важно освоить разные инструменты и сочетать их в работе.
Для каждого типа задач самой удобной будет одна программа:
-
В Figma работают с элементами веб-дизайна и прототипами интерфейсов.
-
В Adobe Photoshop чаще всего делают сложную обработку растровой графики, создают коллажи и фотомонтаж для оформления сайтов.
-
В Adobe Illustrator создают векторную графику: логотипы, иллюстрации, элементы фирменного стиля брендов.
-
В Adobe InDesign работают с версткой: создают макеты книг и журналов, рекламные баннеры и многое другое.
Также есть несколько технических различий между сервисами:
-
Figma – это онлайн-редактор с функциями для командной работы. Все файлы хранятся в облаке, и над ними можно работать вместе с коллегами в режиме реального времени. У Adobe тоже есть облачное хранилище. Оно позволяет синхронизировать изменения на разных устройствах, но каждым файлом может одновременно пользоваться только один человек, а не команда.
-
Figma проигрывает редакторам Adobe по количеству функций, поэтому иногда стоит совмещать в работе несколько программ. Например, если вы привыкли создавать векторные объекты в Adobe Illustrator, их можно легко импортировать в Figma.
-
Преимущество Figma – простота, скорость работы и возможность пользоваться всеми функциями бесплатно. У программ Adobe сложный профессиональный интерфейс, и это замедляет работу над некоторыми задачами.
В 2010 году, за несколько лет до Figma, на рынке появился Sketch. Этот редактор создали специально для проектирования интерфейсов, и в нем не было лишних инструментов и перегруженности. Установить его могли только пользователи macOS, но, тем не менее, Sketch очень быстро стал отраслевым трендом.
Чуть позже Adobe представили свой редактор интерфейсов XD, чтобы занять место в конкурентной нише, а в 2016 году появилась Figma. Создатели сделали программу бесплатной, кроссплатформенной и простой в использовании, чем привлекли огромное количество пользователей по всему миру.
Как установить Figma: системные требования и тарифы
Figma – облачный сервис, которым можно пользоваться прямо в браузере, поэтому устанавливать программу необязательно. Если вы часто открываете файлы с разных устройств, для вас будет удобнее онлайн-версия. Достаточно создать аккаунт на сайте Figma, и можно начинать работу. Проверьте, чтобы у вас была установлена самая свежая версия браузера.
Программу для iOS/Windows или мобильное приложение Figma можно скачать здесь. Жестких системных требований нет, важна только видеокарта компьютера. Подойдут Intel HD Graphics 4000, Nvidia 330m, ATI Radeon HD 4850 и более поздние.
Базовая версия Figma бесплатна, и она позволяет:
-
Использовать большинство инструментов и плагинов без ограничений.
-
Подключать к командной работе еще одного человека с правами редактора, кроме вас.
-
Создавать до 3 папок проектов.
-
Делиться файлами с любым количеством пользователей.
-
Хранить историю версий каждого макета не более 30 дней.
Есть и платные профессиональные тарифы. По подписке можно подключить к работе больше коллег и снять ограничения по количеству файлов, проектов и истории версий. Такие тарифы выгодны большим командам, но для начала карьеры в дизайне или индивидуальной работы подписка зачастую не нужна.
На этом мы пока закончим знакомство с графическим редактором Figma – пора переходить к практике и профессиональным лайфхакам. В следующей части нашего гайда мы будем детально разбирать интерфейс программы. Вы познакомитесь с панелью инструментов, научитесь создавать макеты и сетки в Figma, сможете сохранить себе список «горячих клавиш» и узнаете полезные приемы для работы.
