Figma для новичков: что это такое, возможности, кому полезна
Figma — это графический онлайн редактор с большим функционалом, но при этом простой в использовании.
Изначально Figma была разработана для веб-дизайнеров, как альтернатива Adobe Photoshop. Это было в 2012 году.
Дизайнеры отмечают, что Figma гораздо быстрее, чем Photoshop, и не перегружена лишними функциями, бесполезными для веб-дизайна.
Сейчас 10+ лет спустя данным сервисом пользуются не только веб-дизайнеры и дизайнеры, но и маркетологи, разработчики, менеджеры и т. д.
Figma используют для создания баннеров, схем, графических рисунков, логотипов и, конечно, веб-дизайна (веб-дизайнеры — по-прежнему основные пользователи сервиса).
Особенности Figma
- Сервисом можно пользоваться индивидуально (только вы работаете над проектом) или командой (один проект редактируют два и более пользователя);
- Figma полностью бесплатна для индивидуальных пользователей. Также в бесплатной версии вместе может работать команда из максимум пяти человек с ограничениями по количеству проектов. Если требуется больше, нужно платить;
- В интерфейсе Figma доступно только два языка: английский и китайский. Но даже люди без знания этих языков легко осваивают сервис.
Где взять и как установить Figma?
Сервис доступен только онлайн, т. е. с подключением интернета.
Кстати проекты, созданные в Figma хранятся в облаке под надёжной защитой. Поэтому файлы доступны пользователю в любое время в любой точке мира.
Есть две версии Figma:
1) Браузерная, в которую переходят по ссылке figma.com. Используя её, не надо ничего скачивать и устанавливать. Нужен только любой современный браузер (Chrome, Opera, Safari, Mozilla и т. д.);
В редких случаях могут возникать проблемы при использовании браузерной версии Figma. Обычно их легко исправить. Подробные инструкции читайте на help.figma.com по этой ссылке.
1) Приложение для десктопа, которое можно скачать по этой ссылке на официальном сайте.
Разницы в функционале приложения и браузерной версии Figma нет. Но у приложения есть особенности:
- В него автоматически подгружаются шрифты, установленные на компьютере. Это нужно, если шрифтов, которые вам нужны, нет в коллекции шрифтов Google. По умолчанию в Figma доступны шрифты только из неё.
Чтобы шрифты с компьютера были доступны в браузерной версии, скачайте и установите на компьютер специальную утилиту (Font installer) по ссылке.
- В приложении можно одновременно открыть два и больше проекта. На сайте так сделать не получится.
- В приложении работают все горячие клавиши. Некоторые сочетания клавиш для быстрых действий в Figma совпадают с горячими клавишами браузера. Из-за этого могут возникнуть проблемы. Например, чтобы сгруппировать элементы, нужно нажать Ctrl+G, а в браузере это сочетание вызывает поиск на странице. Поэтому группировать элементы придётся по-другому.
Как начать работать в Figma?
Для начала нужно зарегистрироваться. Без регистрации пользоваться сервисом не получится. Она простая и обычная: нужна почта и придуманный пароль или можно быстро авторизоваться через аккаунт Google.
Виды проектов в Figma
Есть два вида проектов, над которыми можно работать в Figma: Design file и FigJam File. Чтобы создать новый проект, выберите тип файла на стартовой странице Figma или нажмите плюс возле иконки домика в левом верхнем углу или возле надписи «drafts» (рус. черновики).
Первый вариант подойдёт для создания дизайна сайтов и мобильных приложений, прототипирования, разработки рекламных баннеров, карточек товаров для маркетплейсов, логотипов и т. д. Это основной формат, который используют в Figma. О его инструментах подробнее написано дальше в статье.
Второй вариант, FigJam File — это относительно новый формат, в котором можно рисовать и делать схемы. Для этого есть карандаш, ручка, стикеры, легко создавать связи между элементами.
FigJam, простыми словами, это доска для ваших личных или корпоративных задач, рабочая область. Всё, что вы делаете здесь, нельзя экспортировать (сохранить в виде изображения).
Инструменты в Figma
Если вы создадите обычный Design File, то увидите такую рабочую область:
Рассмотрим её главные части, нужные новичкам:
1. Инструменты — всё, что нужно для создания дизайнов, графических рисунков, логотипов и т. д.
2. Расположение файла и его имя. В нашем примере файл в черновиках. По умолчанию файл создаётся с именем «Untitled», но его легко поменять, кликнув по нему два раза.
3. Слои — здесь показывается список элементов, которые есть в рабочей области (фигуры, тексты). Слои можно группировать и закреплять.
Также в этой области создаются страницы. Каждая страница — это новая рабочая область проекта.
4. В этой области на вкладке «Design» отображаются настройки активного элемента. Например, вы создали надпись, кликнули на неё. Тогда в этой вкладке вы можете поменять размер надписи, шрифт, интервалы и т. д.
Тут же можно экспортировать любой элемент или группу элементов (выбрать и скачать в видео изображения JPG, PNG, SVG).
Другие вкладки «Prototype» и «Inspect» нужны для веб-дизайнеров и разработчиков.
5. Рабочая область. Здесь происходит основная часть работы: создаются холсты, на которые размещают изображения и надписи, рисуются таблицы и схемы, оформляются баннеры и листовки, рисуются логотипы и т. д.
Самое важное про Figma
Figma — это простой и удобный современный инструмент, который полезен не только для профессионалов (дизайнеров), но и для людей других профессий. Её преимущества: есть браузерная версия, все файлы хранятся в облаке, все функции можно использовать бесплатно, быстрота работы.