Собрали в одной подборке множество полезных уроков для тех, кто хочет освоить Фигму или перейти на нее с других редакторов. В подборке есть как уроки по освоению интерфейса самой программы, так и по созданию дизайна цифрового продукта.
Всем привет! На связи графический дизайнер Дмитрия Сугак. Сегодня я расскажу вам о популярной программе для графического, веб и UX/UI-дизайна. Речь идет о бесплатном онлайн редакторе Figma. Мы рассмотрим, что же из себя представляет этот сервис и поговорим о его функциях, особенностях, вариантах работы.
что такое фигма?
Что такое Figma и для чего она нужна?
Figma — это онлайн-редактор, который предназначен для графической работы. С его помощью можно создавать векторную графику, презентации и даже прототипы сайтов и приложений. Программа пользуется спросом среди маркетологов, разработчиков и, конечно, дизайнеров.
Одно из преимуществ сервиса — возможность оставлять комментарии к макету в режиме онлайн. Делать это можно не только в браузере, но и через установленную версию на ПК. Работать с Figma достаточно просто. Специальная подготовка для этого не требуется.
почему фигма так популярна среди дизайнеров?
Причин пользоваться сервисом достаточно много. Я расскажу об основных преимуществах дизайна в Фигме:
1. Многопользовательский режим. Это один из самых главных аргументов в пользу программы. Сегодня нет ни одного графического редактора, который может похвастаться тем же. Суть многопользовательского режима состоит в том, что над проектом может одновременно работать целая команда дизайнеров. Это избавляет от необходимости создавать дополнительные чаты в мессенджерах.
Настроить приватность тоже просто: можно предоставить доступ не ко всему проекту, а к отдельному объекту. Кроме того, вы имеете возможность ознакомить заказчика с итоговой работой, даже если у него нет аккаунта в Figma.
2. Файлы в облаке. Хранить информацию на диске уже давно неактуально. Figma идеально подходит для верстки, поскольку результаты работы сохраняются в облаке автоматически. Чтобы скачать файлы, нужно выбрать в меню раздел «Файл» и нажать «сохранить как fig».
3. Кросс-платформенность. Вы можете получить доступ к проекту с любого устройства. Главное — иметь выход в интернет. Это избавляет от рутины в виде экспорта компонентов в Фигме. Чтобы открыть ссылку с доступом, не обязательно даже наличие аккаунта.
Однако учтите, что вносить изменения в проект можно только с ПК.
4. История версий — еще одна причина использовать именно этот сервис. Когда над проектом работает несколько специалистов, найти виновника недочетов бывает непросто. В Фигма это делается с помощью истории изменений. Версии можно сохранять вручную.
Также можно указывать внесенные изменения. Это позволит эффективно отслеживать процесс. Фигма в бесплатной версии позволяет запоминать корректировки за 30 ближайших дней.
5. Стоимость. Бесплатная версия программы вполне подойдет для личного пользования. Многим фрилансерам её хватает. Бесплатный аккаунт позволяет: работать с тремя проектами одновременно и предоставить редакторские права двум пользователям. Professional — это платный тариф Фигма.
Он не имеет ограничений, о которых я говорила выше, плюс — можно делиться библиотеками с пользователями. Обойдется он в 15 $ в месяц. Organization — третий тариф, который подойдет крупным командам. Он стоит 45 $ в месяц, оплата требуется сразу за год.
Источник: ddesign.moscow
Графический редактор Figma
Figma – кроссплатформенный графический редактор, разработанный специально для дизайнеров, занимающихся подготовкой макетов для веб-сайтов, разработкой интерактивных элементов и визуализацией интерфейсов.
Функционал полностью адаптирован под работу через браузер, доступна поддержка многопользовательского режима и встроенная система контроля версий, а для работы даже подписка и та необязательна. Проблемы возникнут лишь с переводом – интерфейс до сих пор не доступен на русском языке.
О программе
Конкурентов и аналогов у редактора предостаточно: Photoshop, Adobe XD, Sketch, Canva. И до появления Figma у веб-дизайнеров, проектировщиков, аналитиков и специалистов по интерфейсом возникали проблемы.
Тот же Photoshop слишком требователен к системе, а функционально скорее нацелен на обработку фотографий, Adobe XD вынуждает сразу оформлять подписку, Sketch не доступен на компьютерах с операционными системами семейства Windows, а Canva переполнена Premium-элементами и едва ли справится с полноценными макетами для сайта.
Figma запускается, online, в браузере, не обязывает приобретать дополнительный контент и разрешает работать бесплатно, а еще предлагает целую коллекцию сторонних инструментов, автоматизирующих часть процессов и разрешающих сходу сосредоточиться на разработке визуала целого сайта, состоящего из 50 и более страниц.
Особенности редактора
Сильных сторон у Figma предостаточно:
Интуитивный интерфейс с предсказуемой навигацией. Перевод на русский язык до сих пор не появился, но разработчики беспрерывно снабжают новичков всплывающими подсказками;
Впечатляющая оптимизация: даже в браузере Figma молниеносно справляется с поставленными задачами и не нагружает систему;
Встроенная система контроля версий – редактор подготавливает промежуточные копии текущей работы и сохраняет на жестком диске или в облаке под разными именами для возвращения к подходящей версии;
Специальные вкладки для работы с текстом и переносом информации о стилях в редакторы кода: веб-разработчикам более не приходится подготавливать CSS-код вручную;
Продуманный режим кооперативного взаимодействия и система презентаций (макеты в Figma демонстрируются заказчику с водяными знаками и в низком разрешении);
Поддержка плагинов и шаблонов, частые обновления и желание разработчиков обойти конкурентов по жанру превращают редактор почти в универсальный инструмент каждого веб-разработчика.
Для кого предназначен
Работают в Figma дизайнеры – те, кто разрабатывает тематический контент для веб-сайтов, блогов, информационных ресурсов; UX-проектировщики, занимающиеся интерфейсами для мобильного и компьютерного программного обеспечения; маркетологи, представляющие новый продукт; а еще аналитики и руководители проектов, следящие за результатом работы.
Фотографам или художникам редактор не пригодится – возможностей для обработки снимков или рисования недостаточно.
Возможности
Функционал у Figma разнообразный: разработчики продумали и целую коллекцию творческих инструментов (сетки, фреймы, линейки), и кроссплатформенную поддержку и систему полноценного кооперативного взаимодействия (включая интеграцию со Slack) с разделением обязанностей, комментариями и возможность в реальном времени вносить правки в подготовленные коллегами работы на соседнем холсте.
Многопользовательский режим редактирования
Подготовленные иллюстрации и макеты в том же Photoshop приходится каждый раз экспортировать и передавать коллегам по электронной почте или через мессенджеры.
Долго и не слишком удобно. Figma меняет подход и разрешает открыть доступ к конкретному проекту в любой момент и позвать коллег. У приглашенных «союзников» появится или полный доступ к редактированию или частичный (комментарии, указатели) – все зависит от выбранных настроек.
Облачный сервер хранения файлов
Браузерная версия Figma переносит макеты, иллюстрации и иные креативы или в облачное хранилище (никаких ограничений по объему загруженных файлов не предусмотрено, но переносить информацию напрямую нельзя) или на жесткие диски, если редактор загружен на компьютер в десктопном варианте.
После авторизации контент синхронизируется между рабочими платформами автоматически. В зависимости от выбранных настроек многопользовательского режима часть работ станет доступна и коллегам, друзьям или помощникам.
Компоненты
Каждый интерактивный элемент разработчики разрешают помечать специальными стилями для последующего «глобального редактирования». Формат следующий: дизайнер подготавливает кнопку, задает стиль Button, а после выставляет параметры цвета, размера и обводки, которые переносятся на каждый интерактивный элемент по всему макету с подобным стилем. Полноценная и практически неповторимая автоматизация творческого процесса.
Фреймы
Встроенная коллекция специальных шаблонов, предназначенных для работы с контентом под конкретные платформы (смартфоны, планшеты) с заданным соотношением сторон и предустановленным разрешением. Искать информацию в сети вручную не придется – достаточно довериться фреймам из Figma.
Сетки
Панель Grid Layout разрешает выставить специальные направляющие с определенными размерами. Подготовленные сетки полноценно редактируются – сдвигаются, растягиваются или фиксируются, а еще скрываются и вызываются обратно с помощью горячих клавиш.
Инструменты
Панель инструментов в Figma обширна и содержит как возможности для масштабирования, так и для добавления рамок, срезов, текста и градиента к конкретным интерактивным элементам или фону. Там же располагает кнопка для комментирования собственных или чужих работ в режиме многопользовательского взаимодействия.
Пипетки
Информация о цвете в Figma собирается с помощью пипетки – крайне распространенного инструмента, доступного в каждом графическом редакторе. Любопытная особенность пипетки из Figma – возможность вынести курсор за пределы интерфейса и перетащить информацию о цвете хоть с соседней вкладки.
Линейки
Линейка в Figma активируется комбинацией клавиш Shift + R и выводится в левой части интерфейса – рядом с информацией о добавленных слоях. Отображаются размеры макета или интерактивных элементов в миллиметрах и разрешают мгновенно добиться симметричности во всей работе сразу.
Фигурки
Набор базовых геометрических фигур не слишком разнообразен – круг, квадрат, треугольник, звезда. Но зато поддерживается загрузка дополнительных элементов формата PNG, да и каждая фигура полноценно сочетается с остальными.
Иконки
Часть иконок доступна в Figma по умолчанию, но за дополнительными – включая социальные сети – разработчики предлагают загружать в виде специальных шаблонов, интегрируемых в систему.
Версия desktop
Хотя Figma разрабатывался в качестве полноценного кроссбраузерного графического редактора, десктопные версии со временем стало возможным скачать их на официальном сайте. Дистрибутив поддерживается компьютерами с операционными системами Windows и MacOS.
Работа в десктопной версии частично ограничена – потребуется доступ к интернету, но лишь в том случае, если необходима работа с коллегами в реальном времени и доступ к облачному хранилищу. Формально Figma разрешает работать и в локальном режиме – подготавливать работы и переносить на жесткий диск.
Есть ли бесплатный доступ
Распространяется редактор по модели Freemium: почти 90% контента доступно без ограничений, подписок и разовых платежей, но за дополнительные преимущества – неограниченное количество проектов и работу вместе с 3 и более коллегами – предстоит платить.
И кроме стартового тарифа предусмотрены:
Professional. Стоимость – 12 долларов в месяц. Открывает доступ к бесконечному количество проектов и безлимитной истории правок, системе «приватных» проектов с ограниченным доступом и встроенному мессенджеру, предназначенному для общения с коллегами или обсуждения появившихся вопросов в голосовом чате.
Organization. Стоимость – 45 долларов в месяц. Кроме преимуществ тарифа Professional включает встроенную аналитическую систему, копирайты, режим демонстрации результатов в виде специальных презентаций и неограниченную техническую поддержку. Рассчитан на работу в полноценной команде или организации, настраивается для целого комплекта компьютеров сразу.
Виды шаблонов
Шаблоны для Figma встречаются и «локальные» (разрешают собирать отдельные веб-элементы – меню с навигацией, рекламные креативы, выпадающие списки), и «глобальные» – в виде полностью подготовленных макетов веб-страниц со всеми иконками, баннерами и внутренними разделами.
Публикуются иллюстраторами и более эксклюзивные комплекты, нацеленные на работу с мобильными операционными системами (гайдлайны для iOS и Android с заранее подготовленными иллюстрациями) или с развлекательными сферами, вроде игровой индустрии.
Plugins
Дополнительный контент для Figma выпускается регулярно: в сети встречаются и шаблоны для подготовки веб-интерфейсов и макетов, и комплекты шрифтов, и тематические расширения, автоматизирующие часть действий или открывающих доступ к новым настройкам. Ниже – парочка примеров:
Charts. По запросу добавляет на холст линейные, круговые и иные диаграммы и графики. Подходят и для сайтов ради демонстрации достижений бренда или производителя, и для интерактивных инфографиков.
Chroma. Подготавливает наборы цветовых решений для конкретного макета в зависимости от заданных параметров. Разрешает мгновенно оформить целый комплект элементов.
Coda. Переносит информацию из Wikipedia, GitHub или Jira в конкретные части подготовленного макета для наглядного представления работы текстовых блоков или интерактивных элементов.
DesignLint. Автоматически находит несоответствия в макете, связанные с шрифтами, цветом заливки и сторонними графическими элементами. Подсказывает дизайнерам, какие части макета необходимо подправить.
Добавляются найденные плагины через отдельный раздел, выбираемый через контекстное меню в правой части интерфейса десктопной версии редактора, или сверху – на панели быстрого доступа – в браузере.
Освоение программы
Курсов для обучения работы с графическим редактором Figma, с каждым годом появляются все больше – редактор обретает долгожданную популярность, а потому и обрастает верными последователями:
Figma.INFO. Наборы тематических уроков на русском языке, сосредоточенных вокруг верстки и дизайна макетов сайтов и отдельных интерактивных элементов, включая навигационные панели, баннеры и кнопки. Дополнительно рассматриваются частые ошибки веб-дизайнеров и выдаются рекомендации для новичков.
Курс «Основы веб-дизайна». Видеокурс, разделенный на тематические лекции и сосредоточенный вокруг практических испытаний и лишь базовой теории. Специалисты по веб-дизайну расскажут, как настроить рабочее место, добавить коллег и приступить к работе над макетами или графическими элементами. После каждого урока открывается доступ к подготовленным макетам и наборы с дополнительными заданиями для оттачивания навыков.
Учебная программа «Figma с нуля доPro». Платный курс от Skillbox длительностью в 8 недель (стоимость без скидок – 32 000 рублей). Затрагивает, базовые, продвинутые и профессиональные навыки веб-дизайнера. После прохождения программы выдается специальный сертификат, а вместе с тем открывается доступ к целой серии проектов, доступных для добавления в личное портфолио. Учеба разворачивается в режиме реального времени – курс ведут профессиональные преподаватели – а проверяют работу наставники и менторы.
Полезное видео
Дополнительная информация по теме статьи в видео:
Заключение
Figma – революция в мире графических редакторов, предназначенных для разработки макетов и иного контента для сайтов и информационно-развлекательных ресурсов.
Встроенное облачное хранилище, доступ к инструментам из любого браузера, кроссплатформенная поддержка и никаких обязательных подписок – пора отложить в сторону Photoshop и воспользоваться намного более прогрессивной платформой, способной автоматизировать некоторые процессы и облегчить творческую жизнь.
Источник: junior3d.ru
Обзор Figma
Figma — графический редактор для прототипирования и разработки интерфейсов сайтов, приложений и программ, создания иллюстраций и векторной графики. Его главная фишка — простота освоения. Веб-дизайнерам достаточно несколько дней, чтобы изучить возможности сервиса. Маркетологам потребуются базовые знания для выполнения мелких и несложных задач.
Разработчик предоставляет два варианта использования Figma: через браузер или путем установки программы на Mac или Windows. В обоих случаях вам удастся настроить совместный доступ для командной работы над проектом.
Рассмотрим ключевые возможности редактора, плюсы и минусы, интерфейс и режимы.
Возможности Figma
Основные функции для дизайна:
инструмент «Перо» для рисования в любом направлении;
шрифты OpenType для расширения возможностей дизайна;
опция Auto Layout для создания адаптивных проектов;
инструмент Arc для быстрого проектирования дуги.
Основные функции для создания прототипов:
преобразование файлов статического дизайна в интерактивный интерфейс без кодирования;
Smart Animate для автоматической анимации схожих объектов;
динамические наложения для создания нескольких слоев с интерактивным содержимым;
применение GIF-файлов для показа анимационного дизайна, видеоэлементов и тонкой анимации;
переключение между файлом дизайна и живым прототипом с мгновенным отображением изменений.
Функционал для проектирования:
хранение дизайнерских элементов для всей команды с возможностью их поиска, создания стилей для совместного использования;
публикации библиотек с фонами, шрифтами, логотипами и прочими элементами;
встроенная аналитика для сбора данных об использовании библиотек и другие метрики, позволяющие оценить эффективность дизайнерской среды.
Функционал для совместной работы:
В бета-версии запущен инструмент FigJam — интерактивная доска для командной генерации идей и обсуждений. Для мозгового штурма предложены стикеры, эмодзи, диаграммы, мудборды для исследований (доски с изображениями и данными для сбора реакций команды).
До конца 2021 г. FigJam предоставляется полностью бесплатно.
Преимущества и недостатки
Figma имеет ряд весомых плюсов:
бесплатная версия с лимитом по количеству пользователей и проектов;
работа в облаке и через программу с хорошей производительностью;
загрузка своей библиотеки компонентов, неограниченное облачное хранение файлов;
фреймы (холсты в холстах) с предустановленными размерами для разных устройств — телефонов, планшетов, компьютеров;
интеграции — для тестирования прототипов (Maze), для продуктивности (Slack, Asana), для разработчиков (Zeplin, Avocode, zeroheight);
плагины — для работы с графикой (Blobs и Get Waves, Image Palette), для анимации (GiffyCanvas, LottieFiles), для организации работы (LilGrid, Design Lint).
Из минусов: отсутствие русскоязычной версии; работа только с подключенным интернетом, но с возможностью внесения изменений оффлайн, чтобы синхронизировать их позже.
Тарифы
Figma предлагает 3 тарифных пакета:
Бесплатный навсегда — ограничен двумя пользователями и одним проектом, имеет все базовые инструменты для дизайна.
Professional ($15 в месяц) — больше функций для совместной работы небольших команд, безлимит по количеству создаваемых проектов. Студентам и преподавателям бесплатно.
Organization ($45 в месяц) — все инструменты, включая частные плагины, аналитику и усиленную безопасность, чтобы использовать сервис в масштабе всей организации.
Регистрация
Настольные приложения для macOS и Windows скачивайте здесь. Если вы работаете на разных устройствах, лучше использовать браузерную версию. При выборе обоих вариантов, все изменения будут синхронизироваться.
Откройте стартовую страницу и нажимайте на одну из кнопок.
Система запросит регистрацию с помощью аккаунта Google или через электронную почту.
Затем нужно верифицировать адрес почты, перейдя по ссылке в письме, которое вы получите от Figma.
Готово, вы стали пользователем редактора. Система сразу предлагает создать команду.
Вы получаете ссылку на команду, которую можно отправить участникам. Второй вариант — ввод адресов электронной почты участников команды для приглашения.
На последнем шаге выбирается тарифный план. Подключаю бесплатный.
Интерфейс: горизонтальная панель
В правом верхнем углу пол иконкой аватарки расположены настройки профиля. Пройдемся по вкладкам.
Plagins — управление плагинами (просмотр и удаление).
Settings — смена имени и аватарки, создание публичного профиля в сообществе Figma, включение/отключение оповещений о действиях пользователей, включение библиотеки для всех файлов, удаление аккаунта.
Get desktop app — скачивание настольной версии.
Add account — добавление аккаунта.
Log out — выход из аккаунта.
Search — поиск по файлам, пользователям, проектам, плагинам и файлам в сообществе Figma. Результаты можно сортировать.
New — под кнопкой скрыты опции для создания нового дизайна, интерактивной доски, импорт, доступ к шаблонам дизайнов и интерактивных досок.
Для шаблонов есть деление на категории и выбор размера.
Интерфейс: вертикальная панель
Recent — отображает файлы, которые недавно просматривались или редактировались пользователем.
Как в этой, так и в следующей вкладке при нажатии на виджет правой кнопкой мыши появляются дополнительные функции.
Drafts — хранилище файлов, над которыми ведется работа. Отдельно показываются недавно удаленные файлы. При нажатии на + дублируются опции, выполняемые кнопкой New.
Нажимая на вкладку Commynity, вы перейдете в сообщество Figma. Здесь можно найти плагины и файлы, которые выложили другие пользователи.
Следующий блок отображает проект и команду. При наведении на вкладку появляется значок + для создания нового проекта или команды. Каждый проект имеет 3 вкладки: описание, участники, настройки.
По сути, команды — это папки, с помощью которых структурируются данные, например, хранение важных файлов, иконок, логотипов. Поэтому ими стоит пользоваться, даже работая с сервисом в одиночку. В самом низу находится кнопка создания команды.
Обзор инструментов
Создаем проект для работы: нажимаем на + рядом с Team Project и выбираем Design file. Переходим в рабочее пространство.
В левом верхнем углу расположены 3 вкладки:
Layers — панель слоев, где будут выводиться элементы проекта в виде структуры;
Assets — содержит компоненты, которые можно массово редактировать;
Pages — список страниц, для добавления новой нажимается знак плюса.
Меню гамбургер позволяет совершать действия с файлами и объектами.
Рабочая панель
Состоит из нескольких вкладок с набором инструментов.
Move — перемещение объектов;
Scale — изменение масштаба объекта с сохранением пропорций обводки, теней и других элементов.
Инструменты для рабочей области:
Frame — создание рабочей области (фрейма);
Slice — создание фрагментов для экспортирования.
Инструменты для создания фигур:
прямоугольник;
линия;
стрела;
эллипс;
многоугольник;
звезда;
вставка изображений.
Pen (перо) — рисование прямых и изогнутых линий;
Pencil (карандаш) — рисование произвольных и векторных линий.
T — создание текста.
Рука — перемещение по проекту.
Написание и показ комментариев.
Режим прототипирования
Для переключения на режим создания прототипов нажмите справа Prototype. Здесь удастся создавать интерактивные прототипы, связи между элементами и фреймами и многое другое, чтобы проект отображался в виде презентации.
Режим Inspect
При переключении на этот режим и наведении курсора на объект, справа можно увидеть отдельные части кода, которые могут потребоваться при верстке.
Вывод
Мною вкратце рассмотрены только основные инструменты Figma. Этого достаточно, чтобы понять, насколько программа простая и удобная. В ней наиболее удачно реализованы функции проектирования сайтов и интерфейсов.
Несмотря на множество достоинств, Figma не заменит Photoshop и Illustrator в качестве продвинутого графического редактора. Зато она универсальная и позволяет в ускоренном темпе выполнять поставленные задачи. А еще видно, что разработчик стремится закрыть больше потребностей своих пользователей, внедряя смежные инструменты, такие как интерактивная доска FigJam.
Думаю, профессиональным веб-дизайнерам нужно владеть несколькими программами, включая сложные комбайны типа Photoshop. Владельцы бизнеса, маркетологи и специалисты, в команде которых есть мастер веб-дизайна, смогут самостоятельно выполнить несложные задания с помощью Figma.
