Автор: Рубрики: Общее Просмотрено: 215
Возможности Figma. Сервис для разработки веб-дизайна
07Ноя2019

Все, кто работает с сервисом Google Docs уже наверняка знает все преимущества подобной системы. Хранение и редактирование документов онлайн – достаточно удобное, особенно если над одним документов работает группа людей с общим доступом и с разных устройств. Для удобной работы веб-дизайнеров также есть специальный инструмент, который во многом способен упростить трудовые будни. Это сервис под названием Figma

Figma

В этой статье рассмотрим преимущества и возможности Figma.

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

  • интерактивные прототипы сайтов и мобильных приложений;
  • специальные элементы интерфейса – иконки, кнопки, меню, окна, формы обратной связи;
  • векторные изображения.

Документы программы как и в Гуглдокс хранятся в облаке. Поэтому одновременно над проектом могут работать несколько сотрудников, при этом нет необходимости скачивать файлы для правки. Вход в Figma можно осуществить через браузер или же скачать программу на свой ПК. Программа работает на Windows и Mac ОС. Десктопная версия позволяет работать оффлайн, а при  подключении интернета синхронизировать данные для дальнейшей работы.

Основные преимущества Figma:

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

Доступны аналогичные функции, что и в Google Docs – общий доступ на просмотр и редактирование файлов, параллельная работа группы людей. Инструмент бесплатен для личного использования. Для старта работы необходима только регистрация. 

Стоимость Figma.

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

Ограничения в работе следующие:

  • совместное редактирование;
  • хранение версий 30 дней.

Для получения общих прав Редактирования необходимо оплатить 12 дол. за пользователя в месяц.

Преимущества командной работы:

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

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

Преимущества данного тарифного плана состоят в следующем:

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

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

На YouTube каналах доступно очень много разных видеоуроков и инструкций, среди которых можно выделить:

  • «Наука Дизайна», 
  • «Школа дизайна UX Mind School».

В Телеграмме это каналы с новостями и советами:

  • Figma Design Channel (официальный);
  • «Фигма-чат» (форум пользователей сервиса);
  • Figma Tips.

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

Рассмотрим основной функционал сервиса Figma.

Прототипирование.

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

Что такое “компоненты”?

Компоненты – специальный UI элементы в проектах, которые повторяются. Компоненты можно создавать из кнопок, иконок, полей, меню, заголовков, форм и блоков. Выделяют две группы компонентов –  основные (Master components) и зависимые (Instances). То есть первая нарисованная кнопка будет основной, а если вы ее скопировали и сделали компонентом, то вторая уже зависимая. И изменения первой подтянутся для изменения второй кнопки. Это очень удобная функция, которая максимально часто применяется в сервисе Figma.

Векторные сетки.

С их помощью можно разрабатывать сложные векторные формы. Линии в Figma не обязательно должны замыкаться или выходить из одной точки. Линии можно разветвлять и рисовать откуда необходимо. Векторные сетки делают работу с HTML во многом проще, например, вы копируете SVG код из внешнего источника и добавляете его в качестве векторного слоя в редакторе. 

Функционал встроенного комментирование, редактирования и доступа.

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

Контроль версий.

Отслеживание истории действий каждого пользователя, восстановление предыдущих версий документов доступно в Figma. Особенность сервиса в том, что он автоматически сохраняет версии, если вы закрыли вкладку проекта или последнии 30 мин. не вносили никаких изменений.Все версии проекта можно восстанавливать и дублировать. Бесплатная версия – это хранение за последние 30 дней. В платной версии доступна вся история проекта с момента его создания.

Ограничения сервиса Figma:

  • не подходит для работы с полиграфией (отсутствует CMYK палитры и нет переключения размерности сетки на см/мм);
  • нет возможности напрямую импортировать макеты из Фотошоп, для начала их необходимо переводить в sketch формат.

Давайте все-таки подытожим и выделим основные преимущества программы Figma:

  • Совместная работа над документами в режиме реального времени.
  • Хранение информации в удаленном “облаке” и возможность доступа к ней с любой точки.
  • Windows, Mac, Linux поддерживают работу с данным сервисом.
  • Большое количество полезного функционала, включая интерактивные прототипы, векторные сетки, компоненты и много другого полезного для работы в сфере веб-дизайна.

Надеюсь, что данная статья вдохновила попробовать работать в Figma. Если у вас есть дополнения по обзору, будем рады увидеть их в комментариях под статьей.

216 раз(а) 1 Сегодня просмотрено раз(а)
  • Владимир Дот

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

    • Семён Семёныч

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

      • Владимир Дот

        А тебе никогда не хотелось просто создать что-нибудь своё? В play markete конечно много всго есть, но оно вдоль и поперёк в рекламе и шпионских модулях. Оно мне нужно?