Figma. Что это такое и как работает?

Figma — это ништяковая альтернатива Adobe Photoshop. Эта программка настолько интуитивная, что ее легко может освоить как профессиональный UX, UI специалист, так и начинающий дизайнер. Плюс, у Figma есть бесплатная версия. 

Что же такое Figma?

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

Если Figma схожа по функционалу с Фотошопчиком, то какой тогда смысл ее использования, спросите вы? Ну, хотя бы потому, что Figma = упрощенная версия Photoshop + инструменты для редактирования векторных элементов, в частности SVG. Поэтому не приходится открывать одновременно две сложные проги. Просто, удобно и экономно.  Хотя изначально эта простота даже немного смутила меня. Тип если просто, то и не надежно и не профессионально. Ох, как я была не права…

Что по возможностям?

Кроме классного и простого функционала Figma славится своей онлайн природой. Благодаря этому одной из сильных сторон Figma является возможность работать в режиме реального времени. Вы и другие члены команды можете одновременно войти в ваш дизайн-проект и вносить в него изменения. Вам только надо добавить мэил коллеги в нужное поле — и вуаля! 

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

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

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

Все макеты, сделанные в Figma, хранятся в облаке

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

Библиотека компонентов — это еще одно преимущество Figma

Сюда можно загружать свои символы и использовать сохраненные компоненты в любом из проектов.

Компоненты – это объекты многоразового использования в дизайне, которые можно сделать в определенной стилистике. После создания такого компонента, вы можете создать и его экземпляры (это такие связанными копии этого компонента). Так что после обновления дизайна исходного компонента экземпляры тоже будут отражать изменения. Здорово, что если поменять цвет одной кнопочки в оригинальном элементе на синий, то и все копии этой кнопочки тоже станут синими! Мэджик!

Десктопная версия Figma для тех, кто боится работать в браузере 

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

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

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

Фреймы

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

Сетки или Layout Grids — это уникальная функция фреймов в Figma

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

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

Аналогов такой сетки пока не существует в других прогах.

У Figma есть бесплатные и платные тарифные планы,

в зависимости от объема проектов, а также премиум-функции для совместной работы. Бесплатная версия доступна для двух редакторов и трех проектов максимум. Но можно приобрести Professional (за 15 баксов в месяц) или Organization (за 45 баксов в месяц) тарифы. 

Figma можно установить бесплатно

Для этого надо всего лишь:

1. зайти на figma.com;
2. нажать на кнопку Sign Up и залогиниться;
3. ввести адрес электронной почты и пароль;
4. указать свои инициалы;
5. ответить на вопрос, с какой целью вы планируете использовать программу;
6. снова нажать на Sign Up;
7. нажать на иконку Resources;
8. выбрать в списке Downloads;
9. определиться со своей операционной системой – Windows или macOS – и нажать на соответствующую гиперссылку Desktop App;
10. бинго! Загрузка началась.

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

Всем успехов и интересных проектов!