Что такое Figma – большой обзор продукта

Фигма является популярным дизайнерским инструментом. Уметь им пользоваться нужно не только профессионалам, но и новичкам в дизайне. С помощью этого графического редактора можно проектировать сайты, приложения, создавать другие дизайнерские продукты.

Перед вами большой обзор редактора Figma для начинающих.

Мы расскажем о его возможностях и недостатках, как установить Фигму и какие проекты можно на нем создавать.

Что такое Фигма

Фигма – это графический редактор, с помощью которого создают дизайны. Его применяют в работе дизайнеры, маркетологи, менеджеры продукта, разработчики. Для доступа в сервис нужен лишь интернет и браузер.

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

Для чего нужна Фигма

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

В нем есть возможность импортировать дизайн.

Какие проекты можно создавать в Figma

• Отрисовка интерфейсов. Внешний вид продукта – кнопочки, иконки, формы, можно создавать в редакторе с добавлением эффектов. Например, создание анимации для баннеров, кликабельные кнопки, раскрываемые списки и т. д.
• Создание прототипов – модели будущего сайта или приложения. Такой прототип можно адаптировать под мобильные устройства. Их используют, чтобы показать заказчикам, как будет выглядеть проект. В редакторе можно отрисовать нужные страницы и настроить связи между ними. Предусмотрена даже интерфейсная анимация, которая постоянно совершенствуется. Это позволяет разрабатывать прототипы, максимально похожие на реальный продукт.
• Работа с векторными объектами. Можно создавать векторную графику, импортировать векторные объекты из редакторов Adobe Illustrator и Sketch, экспортировать дизайн в формат svg.
• Developer Handoff. Режим, позволяющий увидеть вкладку «код» в панели свойств. Он упрощает работу разработчиков. Они могут использовать направляющие для определения расстояния до объектов и их размера, копировать CSS-стили элементов, их код для Android и iOS.
• Редактор позволяет создавать блок-схемы, диаграммы, графики. В фигме встроен онлайн конструктор блок схем и есть большая библиотека компонентов. С их помощью можно перетаскивать элементы на холст и за считаные минуты создавать свою блок-схему, диаграмму или график. Готовый вариант можно экспортировать в png, svg или в другом удобном формате.
• Передача макетов разработчикам. Потребуется просто дать доступ к файлу с передачей права на просмотр. В таком режиме программисту будут доступны CSS-стили элементов интерфейса. Если он делает мобильное приложение, то сможет посмотреть код для iOS или Android. Для определения размеров элементов и расстояний между ними есть направляющие.

Дополнительные возможности Фигмы

Чтобы ускорить работу и добавлять новые функции, можно использовать плагины. В программе они расположены в разделе «Browse Plugins in Community».

Какие есть полезные плагины:

• BeatFlyer Lite. Для создания анимационных эффектов.
• Humaaans for Figma. Иллюстрации людей Пабло Стэнли.
• Iconify. Содержит более 40 тысяч векторных иконок, в т. ч. самых популярных, например, Jam Icons, Twitter Emoji, Material Design.
• Bullets. Для создания стильных маркированных списков.

Добавляются плагины через раздел «Plugins». Нужно в поисковой строке ввести нужный, нажать «Install». После добавления редактор требуется перезагрузить.

Также в редакторе есть библиотека шаблонов, с помощью которой можно создавать дополнительные решения, которые можно просто скопировать и использовать по своему усмотрению. Так вы сэкономите время.

Что есть в библиотеке шаблонов:

• рекламные объявления;
• диаграммы;
• концепткарты;
• доски настроения;
• диаграммы связей.

Как установить Фигму

Работать в фигме можно через браузер, но это не очень удобно, т. к. доступ к некоторым функциям удобнее осуществлять из приложения, кроме того, редактор может тормозить.

Как скачать программу фигма на ПК:

• Откройте официальный сайт редактора, страницу https://www.figma.com/downloads/.
• Перейдите в «Desktop app»
• Выберите приложение для macOs либо для Windows.

  
  

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

Купить фигма можно и в АльбаСофт – официального поставщика программного обеспечения IT оборудования, IT услуг.

Начало работы

Как зарегистрироваться в программе:

• На официальном сайте нажмите Sign up.

  
  

• Вам будет предложено авторизоваться через Google аккаунт или ввести пароль и электронную почту.

  
  

• Введите имя и род деятельности.
• Нажмите «Create Account».
• Подтвердите регистрацию через почту.
• При необходимости создайте команду и введите e-mail людей.
• Выберите тарифный план.
• Приступайте к осваиванию редактора.

Курс «Инструменты дизайнера» от Eduson Academy

Курс «Инфографика для маркетплейсов» от Skillbox

Курс «Погружение в Figma» от Эльбрус Буткемп

Плюсы Figma

У редактора много плюсов, мы отобрали основные.

Облачное хранение данных

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

Актуальность версий

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

Кроссплатформенность

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

Фреймы

Фрейм – это отдельный законченный HTML-документ, который вместе с другими HTML-документами может быть отображен в окне браузера. По-простому – это холсты со своими отступами, направляющими, правилами выравнивания и масштабирования элементов. В редакторе есть стандартный набор фреймов с размерами популярных десктопных и мобильных устройств, распространенных бумажных форматов, фото для соцсетей. Преимуществом фрейма в фигма является то, что он может содержать другой фрейм. Чтобы создать фрейм выберите нужный пункт вменю или нажмите F на клавиатуре.

Компоненты

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

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

Многопользовательское редактирование

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

Условная бесплатность

Пользоваться фигмой можно совершенно бесплатно.

Какие возможности у бесплатного пакета:

• Возможность создать 3 проекта для команд и совместной работы.
• Есть неограниченное облачное хранилище.
• Доступ к двум (на выбор) бесплатным стартовым библиотекам.
• Срок истории версий проектов 30 дней.
• Над одним проектом одновременно могут работать 2 человека.

Есть еще два платных пакета:

• Professional. Возможности: число проектов команд не ограничивается; доступ в настраиваемые командные библиотеки; срок истории версий проектов не ограничивается; возможность настройки пользовательских файлов и прав использования.

• Organization. Дополнительно к возможностям по тарифу Professional добавлено: возможность использования приватных плагинов; аналитика системы проектирования; общие шрифты; ветвление и слияние; единый вход в систему и т. д.

Работа со стилями

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

Удобное выравнивание элементов

Элементы в фигме выравниваются по одному клику. Просто выделяете и нажимаете кнопку. Все объекты размещаются на нужном расстоянии. Далее выровненные блоки можно взять и поменять местами простым перетаскиванием, при этом отступы сохраняются.

Обновляемость

Редактор постоянно улучшается, становится более удобным и функциональным.

Минусы Figma

Среди минусов опытные пользователи обращают внимание на следующие:

• Отсутствие корректной темной темы.
• В бесплатной версии низкий уровень безопасности проекта, что может повлечь его копирование недобросовестным заказчиком.
• Ограничены возможности работы с текстом: нельзя переносить текст по слогам, сделать отступ между абзацами, поставить межбуквенный интервал и настроить интерлиньяж.
• Набор горячих клавиш минимален, их может не хватить для быстрой работы и нет возможности их настроить.
• Иногда медленно загружаются сайты.
• Плохой алгоритм экспорта. При экспорте SVG-файлов могут возникнуть проблемы. Код на выходе довольно грязный, и весят такие файлы на порядок больше. Из-за этго не всегда получается хорошо экспортировать растровую графику.
• Нет русскоязычной версии, хотя интерфейс достаточно прост и в нем можно быстро разобраться.

FAQ

В чем отличие Фигмы от Photoshop?

У редакторов множество отличий:

Сколько стоит пользоваться фигмой?

Стоимость зависит от предоставляемого функционала. Есть три тарифа:

• Starter – бесплатный.
• Professional – 15$ за 1 редактора в месяц или 12$ за 1 редактора в месяц при оплате на год.
• Organization – 45$ за 1 редактора в месяц при оплате на год.

Как научиться работать в фигма?

Начните с просмотра видеороликов на YouTube и RuTube, вбив в поиске «Обучение фигме». Обучиться фигме онлайн можно на бесплатных курсах. Например, на обучающей платформе Нетология есть курс для начинающих «Основы Figma», где вы сможете получить необходимую базу для начала работы. Для более детального изучения можно воспользоваться платными курсами, например, обучающая платформа Skillbox предлагает курс «Figma с нуля до PRO», длительностью 8 недель. Стоимость обучения 4554 руб. в месяц при рассрочке на 6 месяцев.

Какие инструменты используются в редакторе Фигма?

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

Какие из них самые значимые:

• Текст. Пользователь получает доступ к библиотеке Google Fonts, куда при необходимости можно загружать дополнительные шрифты. Для этого нужно установить Font Installers или скачать десктопную версию программы.
• Изображения. Их можно вставлять через специальную вкладку или просто перетаскивая с рабочего стола в нужное окно. Можно регулировать насыщенность цвета, контраст и яркость отдельных фрагментов картинки. Вы можете применять векторные объекты, смешивать слои и использовать разнообразные эффекты.
• Маски и эффекты. С их помощью выбирают цвет, устанавливают прозрачность и градиент. Чтобы сочетать несколько фигур между собой, можно объединить их градиентом.
• Модульная сетка. Она применяется для упорядочивания всех объектов дизайна во фрейме.
• Компоненты. Они нужны для экономии времени при проектировании макетов. Компоненты позволяют применять необходимые изменения не к одному элементу, а к целой группе.

Панель инструментов находится в левой части программы. Она становится доступной в режиме редактирования файла.

Какие еще существуют редакторы для графических дизайнеров?

Графических редакторов много, например:

• Photoshop. Базовая программа, которую должен знать любой дизайнер, независимо от специализации. В основном используется для работы с растровыми изображениями, т. е с теми, которые состоят из множества точек — пикселей. Разработка принадлежит компании Adobe Systems. Позволяет обрабатывать фото, создавать иллюстрации, прототипы и макеты для веб-дизайна, несложные анимации и многое другое.
• Adobe XD. Популярный и функциональный инструмент для создания дизайнерских проектов, потребительских приложений, векторной графики и активных прототипов от Adobe Systems. Его называют фотошопом для прототипирования. Он не создаст приложение для вас, но поможет представить концепцию или прототип того, каким вы хотите его видеть, чтобы ваше следующее мобильное или планшетное приложение, веб-сайт или другой пользовательский интерфейс были похожи.
• Sketch. Профессиональный векторный графический редактор, заточенный непосредственно под создание графических интерфейсов: веб, мобильных приложений, десктопных программ и прочих от компании Bohemian Coding.
• Canva. Бесплатный онлайн-сервис для создания элементов графического дизайна, начиная с иллюстраций для соцсетей и заканчивая макетами для полиграфии. Пользователи могут редактировать изображения, создавать обложки, видео и презентации. Редактор помогает моделировать материалы в соответствии с дизайном бренда и вести аккаунт в единой стилистике.

Подведем итоги

Фигма самый популярный графический редактор у дизайнеров, особенно для командной работы.

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