Не пропусти интенсив по Telegram
Content Oriented Web
Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.
Сервис Figma: основные функции и принципы работы
Копычев Никита
Figma-джедай
Левина Ильяна
Та самая королева конверсии
Как стать клиенто-ориентированной компанией?
Понятно будет даже не дизайнерам
Сервис Figma: основные функции и принципы работы
Онлайн-сервис Figma обладает мощным потенциалом, несмотря на относительную простоту интерфейса. Пользователям не нужно обладать специализированными знаниями и навыками, чтобы разрабатывать собственные проекты при помощи данной программы. Чтобы максимально раскрыть все возможности сервиса и научиться правильно их использовать, вам следует пройти курс Skillbox по Figma. На нем вы узнаете о тонкостях и неочевидных опциях программы, которые помогут вам сэкономить время в будущем.
Figma: что это такое
Figma – это онлайн-инструмент для специалистов в области веб-дизайна и разработки интерфейсов. Кроссплатформенный сервис поддерживает работу на любой операционной системе (Windows, macOS, Linux). Процесс проектирования происходит в онлайн-программе.

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

  1. Пользователь может получить доступ к дизайн-макету напрямую через браузерное окно.

2. Несколько пользователей имеют возможность работать над одним проектом совместно.

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

Некоторые веб-дизайнеры называют Figma онлайн-сервисом, совершившим революцию в области программ для разработки интерфейсов. При помощи данного инструмента пользователи проектируют, создают прототипы и работают совместно с коллегами прямо через браузерное окно. Поэтому он стал невероятно актуальным во время глобальной пандемии.
Ключевые возможности онлайн-сервиса
Теперь, когда вы узнали, что такое онлайн-сервис Figma и для чего он нужен, разберемся в его основных функциях и возможностях.
Возможность многопользовательской работы
До разработки и выпуска программы Figma процесс совместной работы нескольких веб-дизайнеров над общим проектом было достаточно сложно организовать. Разработчики Adobe Photoshop не соглашались на корректное открытие макета для пользователей, не установивших необходимые шрифты. Либо партнеры вносили корректировки в собственные копии проекта и забывали сообщать об этом друг другу.

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

Для сотрудничества с другими пользователями необходимо создать команду, кликнув на кнопку «New team». Дальнейшие действия понятны на интуитивном уровне: вам нужно вписать название для группового проекта, выбрать один из тарифов, и все готово.

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

Данная опция может быть крайне полезной в определенных случаях. Представьте, к примеру, что вы разработали около 30 макетов в Adobe Photoshop и отправили их заказчику на финальную проверку, а он ответил вам письмом с просьбой откорректировать пункт меню в шапке. 

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

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

Фреймы
Фреймы в Figma имеют некоторую схожесть с артбордами в Adobe Photoshop, но являются более гибкими в работе. Их можно масштабировать и группировать. Программа предлагает несколько предустановленных размеров фреймов, подходящих под размеры определенных устройств: Phones, Tablet, Desktop, Watch, Paper, Social Media. Так что пользователю не придется вспоминать нужные размеры и путаться в них.

Сетки
Благодаря панели Grid Layout у веб-дизайнеров есть возможность разрабатывать сетки любого вида в короткие сроки:

  • программа предоставляет огромное количество сеток;

  • любая сетка может быть с легкостью откорректирована и зафиксирована;

  • при желании расцветка сетки может быть изменена.

Десктопная версия
Да, Figma является онлайн-сервисом. Но программа имеет и десктопную версию. Чтобы работать с ней, необходимо зарегистрироваться и подключиться к Интернету. Материалы будут сохраняться локально и, если нужно, импортироваться в браузерную версию инструмента.

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

  • не больше двух редакторов;

  • не больше трех проектов;

  • сохраненные версии будут удалены через месяц.

Веб-дизайнеры, которым не подходят данные условия, могут перейти на версию Professional либо Organization. Ежемесячная стоимость первого тарифа – 12 долларов, а второго – 45 долларов. 

Разница в ценах обусловлена количеством функций для командной работы. Тариф Professional позволяет пользователю:

  • редактировать документы;

  • сохранять откорректированные версии без временных ограничений;

  • создавать личные проекты и давать другим пользователям доступ к ним.

Возможности тарифа Organization:

  • создание команд;

  • сохранение авторства проекта за заказчиком, когда разработчики деактивированы;

  • загрузка собственных шрифтов.
Хотя в данной статье была разобрана лишь небольшая часть возможностей онлайн-инструмента Figma, наверняка он уже заинтересовал вас. У любого веб-дизайнера в приоритете стоит скорость работы над проектом и коммуникация с коллегами и заказчиками в процессе. Со всеми этими задачами справится программа Figma.
Читайте ещё на тему
"Дизайнерам"