Веб- и UX/UI-дизайнеры используют в работе специальные графические редакторы. С их помощью можно создавать мобильные приложения, сайты и другие продукты. Один из таких сервисов – Фигма. Это инструмент с многопользовательским доступом, простым интерфейсом и множеством функций. Расскажем подробнее о Figma – что это за программа, какие опции предлагает, что нужно для регистрации.
Перед началом работы с графическим редактором важно разобраться, что такое Figma и какие возможности даёт дизайнеру. Онлайн-редактор в первую очередь предназначен для совместной работы – позволяет работать над проектом команде, вносить правки, оставлять комментарии и др. Также этот инструмент используют разработчики, менеджеры и маркетологи.
Позволяет создавать различные продукты:
Все файлы хранятся в облаке и не занимают место на ваших устройствах. Предусмотрено автоматическое сохранение изменений – это поможет не потерять макет или прототип при отключении электричества или перезапуске ПК.
Фигма – онлайн-сервис с большим количеством возможностей для разработки дизайна. В нём есть всё необходимое для команды или дизайнера на фрилансе, но среда не перегружена сложными функциями, поэтому подходит и для новичков, и для специалистов с опытом.
Программа Фигма для дизайна по функционалу похожа на редактор Adobe Photoshop, но имеет существенные отличия. Её основная сфера применения – интерфейсная разработка и веб-дизайн, но инструментов здесь меньше, чем в Фотошопе. В то же время Figma не требует скачивания и установки, хотя десктопная версия и существует, позволяет работать над проектом совместно и обходится дешевле. А ещё здесь комфортно создавать векторные изображения.
У каждой из программ есть сильные и слабые стороны, к тому же их используют для разных целей. Figma – более современный редактор, его проще освоить новичкам из-за меньшего количества вкладок и панелей. Он условно бесплатный, то есть минимальным набором функций можно пользоваться без оплаты тарифа.
В Figma можно создавать различные проекты:
В платных тарифах предусмотрены дополнительные опции, например, голосовой чат для участников команды, библиотека плагинов и др.
Когда разобрались, что такое Фигма, можно переходить к регистрации учётной записи. Для этого следуйте инструкции:
После регистрации ответьте на вопросы – впервые ли пользуетесь программой, будете ли работать командой или самостоятельно, а также выберите тарифный план, для новичков подойдёт бесплатный Starter.
Работать в редакторе можно в веб-версии, не устанавливая программу на ПК или другое устройство. Но если это необходимо:
Затем нажмите на нужную ссылку, выберите место сохранения, откройте файл и установите десктопный вариант редактора.
Разработчики предусмотрели множество функций для дизайнеров, при использовании которых можно создавать продукты быстро, в том числе с минимальным набором знаний. Рассмотрим базовые возможности, с которыми работает большинство пользователей.
В редакторе можно создать модель, которая покажет, как будет выглядеть приложение или сайт. В прототипе располагаются основные элементы, например, выпадающие списки, переходы между страницами, баннеры и многое другое, причём как для ПК, так и для мобильных версий.
Для создания прототипа:
Это упрощённый процесс создания прототипа. Здесь можно делать полноценные интерактивные прототипы, в том числе с анимацией, прокруткой, кликабельными кнопками. В интерфейсе для прототипирования есть несколько удобных инструментов. Например, Device нужна для определения устройства, где будет отображаться прототип, – ПК или смартфон. Background используют для выбора цвета фона. Background – вкладка, где отражается несколько прототипов, если их более одного в макете.
Все кнопки названы интуитивно и понятны для начинающих дизайнеров. Например, для создания прокрутки нужно выбрать пункт Overflow scrolling, а для всплывающих окон это Interaction details.
Фреймами в редакторе называют рабочие области, где создаётся дизайн. С их помощью меняется размер экрана, располагаются элементы внутри. Визуально и функционально они похожи на артборды в других программах, например, в Фотошопе. Но в Фигме их можно множить – внутри одной рабочей области создавать неограниченное число фреймов.
Для начала выберите инструмент Frame, задайте размер для нужного устройства – самостоятельно или по шаблону из библиотеки. После этого можно настраивать рабочую область, например, изменить углы наклона или скруглить их, обрезать содержимое, добавлять фигуры и другие элементы, использовать сетку, выбирать цвет фона, создавать обводку, после чего экспортировать в одном из необходимых форматов – PNG, JPG, SVG, PDF.
Компонентами называют один объект или группу, связанные со своими же копиями. Например, вы создаёте какой-либо блок, а потом меняете его и автоматически – копии вне зависимости от того, где они находятся. Это относится и к простым компонентам, например, кнопкам, и к более сложным – меню навигации, модальным окнам, футерам и др.
Использование компонентов сокращает время, поскольку при добавлении изменений в один из них все копии меняются параллельно. Основные свойства сохраняет начальный компонент, который называют мастер-компонентом. Копии (экземпляр-компоненты) могут быть использованы и в текущем, и в других проектах.
Figma Community – раздел редактора, где представлены дизайнеры из разных стран. Здесь можно взять плагины или файлы, находящиеся в свободном доступе для различных устройств. С помощью фильтра можно быстро находить нужные элементы по категориям, есть раздел с топовыми файлами, на авторов можно подписываться, чтобы они появлялись в ленте первыми.
Размещённые материалы доступны для скачивания из подборки. Например, дизайнер легко найдёт здесь фоновые градиенты, иконки для соцсетей, шапки для сайтов, баннеры, 3D-иллюстрации, мокапы и многое другое.
Один из главных плюсов популярного редактора – возможность совместной работы над проектом. Доступ может получить любой член команды – дизайнер, маркетолог, разработчик. Каждый может вносить изменения и комментировать работу.
Ещё при регистрации аккаунта пользователи могут создать команду и добавить в неё участников – вкладка «Your team» в левом боковом меню. Команде нужно дать название, добавить участников, указав их e-mail.
Когда файл создан, его нужно добавить в папку «Команды», а чтобы поделиться, нажмите «Share». Поскольку файлы хранятся в облаке, каждый участник сможет получить доступ к материалам. Совместная работа возможна с любого устройства, а изменения, вносимые командой, автоматически сохраняются. К любому элементу можно оставить комментарий.
Облачное хранение удобно тем, что не нужно забивать память устройства множеством файлов. Если будете работать над проектом офлайн, обновление произойдёт автоматически при подключении к интернету.
Это сервис редактора для работы команд. Фактически это рабочее пространство для участников команды, где они могут добавлять графики, стикеры, эмодзи, схемы, идеи. Для входа в виртуальную доску нажмите на верхней панели кнопку «Мозговой штурм».
Причём это не стандартный рабочий чат, который позволяет переписываться и отправлять файлы. Это место, где участники команды делятся идеями, ищут вдохновение, вносят изменения на всех стадиях проектирования и эффективно взаимодействуют внутри редактора.
У Фигмы есть четыре тарифа:
Графический редактор имеет достоинства и недостатки.
Фигму удобно использовать по следующим причинам:
Фигма не может полностью заменить Фотошоп, где намного больше возможностей, особенно для работы с растровой графикой. Однако этот редактор удобен для определённых задач.
Фигма не подойдёт для сложных проектов с растровой графикой – ресурсов редактора не хватит. Также к минусам можно отнести ограниченный функционал в бесплатном тарифе, где доступны только три проекта. Есть и более мелкие замечания к работе редактора. Например, интерфейс на английском языке, мало типографических настроек, отсутствие возможности переносить текст по слогам, большие файлы загружаются медленно, особенно при загрузке сети и низкой скорости интернета.