Figma программа платная или нет

Каждый, кто работал с Google Docs, знает, насколько удобно хранить и редактировать документы онлайн. Можно вместе работать над статьями, открывать их с любого компьютера, создавать инструкции и презентации с общим доступом.

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

Что такое Figma

Это графический редактор для веб-дизайна. В Figma можно создавать:

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

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

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

Можно ли давать полный доступ в Фигме? Сравнение тарифов Фигмы. Действительно ли Figma бесплатная?

Преимущества Figma для работы

Исходники документов хранятся в облаке

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

Командная работа над макетами

Как и в Google Docs, в Figma можно работать над документом вместе: давать доступ на просмотр и редактирование, параллельно работать над макетом — на экране будут видны курсоры разного цвета.

Благодаря этому все участники проекта лучше понимают контекст. Например, дизайнер разрабатывает прототип приложения, а UX копирайтер прямо в Figma пишет тексты для интерфейса.

Инструмент бесплатен для индивидуальных пользователей

Если вы работаете в аккаунте сами, все функции бесплатны. Просто регистрируетесь и начинаете работать. Можно давать доступ на просмотр документа — это тоже бесплатно.

Бесплатные email рассылки

Создайте аккаунт в SendPulse и отправляйте до 15 000 писем бесплатно каждый месяц!

Сколько стоит Figma

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

Бесплатный план

План дает базовые возможности:

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

• нельзя совместно редактировать документы;
• история версий хранится 30 дней.

$12 за пользователя с правами редактирования/месяц

Расширенные возможности для командной работы:

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

$45 за пользователя с правами редактирования/месяц

Это план для больших организаций.

Как пройти регистрацию в Figma и получить все платные функции бесплатно

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

Как начать работать с Figma

После регистрации на почту приходит приветственное письмо со ссылкой на раздел «Помощь», видеоуроки, форум и другие ресурсы:

Интерфейс понятный — слева панель со слоями, которая включает элементы проекта, сверху панель инструментов, справа панель свойств.

Когда вы начинаете работать с редактором, появляются уведомления с подсказками:

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

Как научиться работать в Figma

Познакомиться с редактором и изучить основы предлагают в онлайн-университете «Нетология». На сайте доступны записи открытых занятий «Figma: лайфхаки быстрой работы дизайнера».

Практические уроки по работе с Figma на русском есть на YouTube каналах:

• «Наука Дизайна», 15 уроков;
• «Школа дизайна UX Mind School», 12 уроков;
• «Moscow Digital Academy Дизайн и практика», 6 уроков.

Электронную книгу «Руководство по Figma» выпустил дизайнер интерфейсов Александр Окунев. В книге рассматриваются 23 темы: обзор интерфейса, формы, перо и векторные сети, градиенты с примерами в Figma, кадрирование и цветокоррекция, компоненты, оверрайды и другие.

Новости и советы по работе с редактором публикуют в Телеграмме:

• Figma Design Channel — официальный канал новостей и советов по Figma;
• «Фигма-чат» — здесь участники задают вопросы по работе в редакторе и помогают друг другу советами;
• Figma Tips — публикует новости, подсказки, обзоры функционала, горячие клавиши, ресурсы.

Возможности Figma

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

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

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

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

Компоненты

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

Компоненты в Figma можно делать основными (Master components) и зависимыми (Instances). Если вы нарисовали кнопку, сделали ее компонентом, а потом скопировали, то первая кнопка будет основным компонентом, а вторая — зависимым. Изменения, которые вы внесете в основной компонент, будут применятся к зависимому.

Чтобы сделать элемент компонентом, выберите опцию «Создать компонент» на верхней панели или кликните правой кнопкой мыши на слое и в меню выберите «Создать компонент» (Create Component).

Создать зависимый компонент можно несколькими способами: удерживать Alt при перетаскивании, использовать команду Duplicate или обычный копипаст:

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

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

Эта функция позволяет создавать сложные векторные формы. В Figma линия не обязательно должна выходить из одной точки и замыкаться. Можно разветвлять линию, рисовать из любой точки:

Кроме того, векторные сетки облегчают работу с HTML: можно скопировать SVG код из внешнего источника и вставить его как векторный слой прямо в редактор. Или сохранить векторный объект из Figma как SVG код. Для этого кликните правой кнопкой мыши на элементе, выберите «Копировать как SVG» и вставьте код в HTML или другой веб-проект, с которым работаете.

Встроенное комментирование, редактирование и доступ

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

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

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

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

Чтобы просмотреть историю версий, выберите в выпадающем меню сверху опцию «История версий». Справа на странице появится панель с историей изменений. Версиям можно присваивать названия, восстанавливать, дублировать.

В бесплатной версии видны изменения за последние 30 дней. В платной сохраняется история всех изменений с момента создания проекта.

Как работать в Figma: создаем макет электронной книги

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

1. Залогиниться и создать новый документ.

2. Нажать на панели вверху «+» и создать рамку (Frame), чтобы разместить объект на полотне.

3. Заполнить проект слоями: текстовыми блоками, прямоугольниками и рисунками.

Вот, что у нас получилось:

Ограничения Figma

Редактор создан в первую очередь для веб-дизайна. Поэтому в нем неудобно работать с полиграфией. В Figma нет CMYK палитры и переключения размерности сетки на см/мм. Чтобы подготовить макет для баннера, листовки или ролл-апа для печати, нужно созданный в Figma файл загрузить в другую программу, что предназначена для полиграфии. И только потом его отдавать на печать.

Еще одно ограничение Figma в том, что макеты из Photoshop нельзя импортировать прямо. Один из вариантов — перевести их в формат Sketch, а потом перенести в Figma.

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

Figma выглядит как хорошо продуманный инструмент, сделанный дизайнерами для дизайнеров. Главные достоинства редактора:

• Позволяет совместно работать над документами — создавать и редактировать командой в режиме реального времени.
• Хранит документы в облаке — макеты не занимают место на диске, их не нужно заливать, чтобы показать коллегам или заказчику.
• Кроссплатформенность — возможность работать с редактором на Windows, Mac, Linux.
• Возможность создавать интерактивные прототипы, векторные сетки, главные и зависимые компоненты.

Надеемся, что обзор сделал для вас Figma более понятной и вдохновил на работу. Создавайте в Figma макеты и маркетинговые материалы для email рассылок в SendPulse!

Источник: sendpulse.com

Figma

Онлайн-конструктор для создания прототипов и дизайна сайтов, и интерфейса приложений.

Похожие на Figma

Описание Figma

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

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

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

Особенности Figma:

• Создание прототипов продукта.
• Создание дизайна пользовательских интерфейсов.
• Коллекция шаблонов.
• Контроль версий.
• Сотрудничество дизайнеров и разработчиков.
• Экспорт в SVG и CSS.
• Взаимодействие с участники при помощи комментирования и оставления эмоций.
• Интеграция с популярными сервисами: Dropbox, Zeplin, Jira, Trello и другими.

Интересные факты

1. Основанная Диланом Филдом компания привлекла 50 миллионов долларов, достигнув оценки капитализации в 2 миллиарда долларов в 2020 году.
2. Один из создателей не закончил учёбу, чтобы принять стипендию Тиля, которая предоставила 100 тысяч долларов на реализацию идеи стартапа.
3. Первая версия Figma была представлена ​​3 декабря 2015 года в качестве предварительной программы по приглашению, а первый общедоступный релиз был выпущен 27 сентября 2016 года.
4. 22 октября 2019 года Figma запустила своё сообщество, где дизайнеры могли публиковать свои работы для просмотра и редактирования.
5. При помощи дополнительных настроек интеграций и работы с плагинами Figma может значительно увеличить функциональность. Например, при помощи интеграции с Google Таблицами можно в реальном времени подгружать актуальные данные в макет.
6. Интерфейс Figma и его возможность к совместной работе позволяет использовать сервис не совсем по назначению — можно хранить заметки, проводить голосования при помощи ползунков и т. д.
7. Созданные в Figma прототипы или дизайны пользователи могут внедрять на сайты, использовать в презентациях, инструкциях и других материалах.

Источник: startpack.ru

Какие есть ограничения у бесплатной версии?

Написано, например, 3 projects, но в чем это проявляется? Как понимаю я могу создать любое количество новых проектов или во время работы все же появится это ограничение и получится так, что понадобиться либо скачивать проекты себе на компьютер (вообще возможно ли в фигме такое?) или покупать платную подписку, чтобы не копить огромное количество аккаунтов и не потерять нужные проекты из-за этого.

Всем спасибо за ответы

• Вопрос задан более трёх лет назад
• 29349 просмотров

Комментировать
Решения вопроса 2

Дизайнер веб-интерфейсов

1. Вы можете создавать неограниченное количество макетов, при этом «проектов» сможете создавать только 3.

Проект — это подобие категории, в которой хранятся макеты, к проекту можно выдать максимум 2 доступа на редактирование.

2. Нет, все макеты сохраняются пожизненно и их бэкапы не требуются.

Все ограничение бесплатной фигмы можно посмотреть тут: https://www.figma.com/pricing/

Из основного:
• Максимум 2 редактора
• 30 дней храниться история макета
• Нет командной библиотеки компонентов
• Нет контроля за передачей ссылок и нет приватных проектов.

Платить за Figma стоит только тогда, когда над проектом работает команда.

Ответ написан более трёх лет назад
Нравится 4 16 комментариев

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

фигма для меня как для дизайнера получается по сути работает без каких либо ограничений получается, если я работаю один? и еще интересует ваше мнение на счет программы которая наиболее подходит для работы над реальными проектами с клиентами figma или xd. Сам использовал долгое время фотошоп, но понял, что пора меняться)))) Понятно, что каждому свое и тп, но для работы что чаще всего используют и на чем стоит остановить свой выбор? Спасибо вам за ответы не первый раз уже помогаете))))

MRcracker, что-то, что это. Что хотите, тем и пользуйтесь. Я выбрал Figma. Всё же после Sketch именно Figma больше походит на стандарт отрасли.

P. S. Кучу проектов в XD тоже встречал. Так что имейте её у себя на ПК, если придется внезапно работать там.

Рустам Байназаров, все равно на какой-то софт есть больше спросу и если будут проекты именно в нем, то будет плюс, а также какой-то из них развивается быстрее и имеет те функции, которых нет у другого продукта. Тот же xd был несколько лет назад очень сырым и когда я пытался его использовать, то пожалел, но спустя время он стал хорошим продуктом. Сейчас использую его, но тогда я просто потратил время. Хочется избежать подобных ситуаций почему и спрашиваю мнение людей, а в данном случае интересует мнение определенного дизайнера тк не не один раз просто мне отвечал и получал «Отметить решением»)))

MRcracker, ситуация постоянно меняется. Сегодня одно, завтра — другое. Но, в итоге, — все эти редакторы по сути одно и то же. Просто с рядом отличительных плюшек. Так что квалификацию вы не потеряете.

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

MRcracker, вот-вот. А потом вам внезапно придется работать в Sketch, поэтому не забивайте себе голову особенно. Используйте Figma :))

MRcracker, ответить сразу не смог. Я использую Figma, потому что уверен — любой программист сможет сверстать мой макет так, как он нарисован, и на это есть одна большая причина — удобный инструмент для верстки, который не требуется изучения и его сразу понимает любой программист.

На фрилансе с Figma у меня тоже проблем не было, особенно с очень удобной функцией показа прототипа, я уже давно отказался от идеи сбрасывать проект в виде PNG, а заказчики этому только рады.

По поводу первого вопроса — нет, ваш проект не могут посмотреть все, просто если вашу ссылку сольют левому человеку, он будет иметь доступ на просмотр и в один клик сможет скопировать макет себе. Но я ссылки на исходники в принципе, никому не даю)

Михаил Проскурин, Спасибо за ответ. Еще такой вопрос. Правильно ли я понимаю, то в фигме тот файл который скачивается по сути просто ссылка на макет и если я захочу сделать анимацию в какой-нибудь новомодной программе типо after effects для своего сайта, то работая в фигме я просто не смогу этого сделать? а если буду использовать adobe xd, то таких проблем у меня не возникнет?

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

Но я бы не спешил приписывать плюсы для Adobe XD, так как XD может сделать экспорт в AF, но не может этого сделать в другие программы для анимации, в отличие от Figma.

Сейчас Figma интегрируется с Haiku, Principle и Protopie — а на них делать анимацию, намного удобнее.

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

И подскажите на сколько часто фигма используется в работе в крупных проектах? Может был опыт? Просто недавно для студии было принципиально чтобы я использовал именно фигму, но студия пока такая встретилась одна))) Я просто до сих пор сомневаюсь в ней тк xd все же от adobe и она вряд ли отпустят этот рынок. Они сделают наверно все, чтобы можно было завоевать полностью этот рынок и все крутые штуки будут идти от них. В последнем релизе даже все баги почти исправили))) В работе всего 2 раза вылетел по сравнению с последним использованием программы. Это конечно похуже немного чем фигма, но штук там поболее как мне показалось полезных правда работает даже создание сетки пока кривовоато даже)))

MRcracker, скажу вам как человек, который работает и в Фигма и в Adobe XD, для меня единственный аргумент в пользу Adobe XD — анимация, больше никаких плюсов для себя я не выявил. Она не гибкая, сложная и жутко неудобная. Но Figma уже разрабатывает свой инструмент для анимации, так что и тут, этот плюс скоро исчезнет. А Figma совсем недавно окончательно завоевала рынок, предложив компаниям план Figma Organization, который предоставляет полный контроль над дизайнерами и их макетами.

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

Ну и опять же, по поводу больших проектов. Сейчас, находясь в Москве, уже не третьей работе сталкиваюсь именно с Figma, пока что всех подкупает командная работа и кроссплатформенность (чем даже Adobe XD похвастаться не может).

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

Михаил Проскурин, а давно вы xd использовали? он просто только с последними обновлениями стал радовать в работе, а раньше были одни баги))) как и у реактора брекетс от адоба. они видно не хотят пилить бесплатные продукты)))

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

Вообще, с Adobe XD познакомился полтора года назад.

Источник: qna.habr.com