17 мая / 2021

Что такое Figma и как в ней работать

Алёна Митрофанова
Курсы по айдентике и фирменному стилю для дизайнеров и новичков >>>
Close
Существует множество графических редакторов для дизайнеров: Photoshop, Adobe XD, Sketch, Canva и т. д. Среди них выделяется Figma (Фигма) ― один из самых популярных и удобных продуктов для UX/UI-дизайна. В ней можно проектировать прототипы и работать командой в онлайн-формате. Если вы дизайнер, рекомендуем хотя бы на базовом уровне освоить Фигму.

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

Содержание

Что такое Figma

Figma ― графический кроссплатформенный онлайн-редактор. Он предназначен в основном для веб-разработчиков и дизайнеров интерфейсов. Через два блока мы расскажем, кто ещё может пользоваться редактором.

Figma можно скачать на компьютер или работать в браузере. Главное преимущество этого редактора ― возможность совместной работы над проектом. Все данные хранятся в облаке, поэтому можно работать над макетами без скачивания.
Tilda Publishing
В Figma можно создавать:

● прототипы сайтов и приложений,
● векторные иллюстрации,
● составляющие интерфейса ― кнопки, иконки и др.

Существует ли Figma на русском языке

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

Не переживайте, если не знаете английского. У сервиса дружественный интерфейс ― вы поймёте, куда нажимать. Плюс при регистрации вас ждет небольшое обучение: 6 всплывающих подсказок, которые сориентируют вас.

Чем Figma отличается от Photoshop

До появления Figma самым популярным инструментом для работы у дизайнеров был Photoshop. Но у него было достаточно минусов, чтобы при появлении нового сервиса разработчики и дизайнеры интерфейсов перешли в Figma.
Tilda Publishing
Что есть в Figma и чего нет в Photoshop:

● онлайн-доступ,
● есть бесплатный тариф,
● возможность командной работы над проектом,
● можно экспортировать отдельные элементы,
● единая система шрифтов Google Fonts,
● можно демонстрировать проект заказчику в программе,
● возможность импортировать файлы в формате Sketch,
● кроссплатформенность ― можно работать с любого устройства и из любой операционной системы,
● можно дать онлайн-доступ клиенту или руководителю для наблюдения,
● можно оставлять комментарии,
● есть техподдержка.
Photoshop и Figma предназначены для решения разных задач. Photoshop больше подходит для работы над дизайном, а Figma — для создания макетов и прототипов.

В каких профессиях может потребоваться работа с Figma

Выше мы уже сказали, что в программе Фигма в основном работают дизайнеры интерфейсов и веб-разработчики. Но есть ещё несколько профессий, которым тоже будет удобно вести проекты в этом сервисе.
Tilda Publishing
Кому нужна Figma:

● веб-дизайнерам,
● проектировщикам,
● дизайнерам интерфейсов,
● UX-исследователям,
● аналитикам,
● маркетологам,
● руководителям проектов.

Преимущества и недостатки

Фигма — это относительно новый редактор, он активно обновляется и совершенствуется.

Преимущества:

● просто освоить ― интуитивно понятно, как начать работу,
● работает быстро ― облачный сервис не задействует мощность компьютера, поэтому работа с несколькими холстами не затормаживает компьютер,
● автоматическое сохранение версий ― шанс потерять несохранённую работу сводится к нулю,
● контроль версий ― сервис делает автокопии,
● изменения в исходной копии вносятся во все остальные автоматически,
● выравнивание и привязка объектов в фрейме,
● просто работать со стилями текста,
● командная работа и комментирование,
● удобно демонстрировать макет заказчику ― есть функция встроенной презентации.

Недостатки:

● нужен интернет,
● нельзя кастомизировать горячие клавиши,
● интерфейс только на английском языке,
● ограниченность времени хранения и числа макетов в базовой версии.

Инструменты и возможности Figma

Разберёмся, как работать в Фигме, какие инструменты и возможности у неё есть.

Многопользовательский режим редактирования

До появления Figma не было доступного всем инструмента, который обеспечивал бы общий доступ к проекту. Для MacOS создали Sketch, а для других операционных систем решения не существовало.

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

Облачный сервер хранения файлов

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

Компоненты

Удобный раздел для тех, кто работает со множеством мелких повторяющихся элементов. С его помощью можно превратить группу объектов в компонент и внести изменения кликом мышки. Например, эту функцию можно использовать, если надо изменить цвет кнопок во всём макете.

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

Фреймы

Фреймы (артборд, холст) — это рабочие пространства. Чтобы вызвать панель фреймов, нажмите F. Есть библиотека предустановленных артбордов.
Можно сочетать рядом несколько фреймов, как на примере ниже:
Вы можете создать свой авторский фрейм: поставьте курсор на свободное место, нажмите и растяните прямоугольник до нужного размера.

Сетки

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

Чтобы настроить сетку, нажмите «+» рядом с надписью Layout Grid:
По умолчанию установится значение расстояния между линиями 10 px. Задайте необходимую ширину сетки:
Задайте количество колонок, их цвет и прозрачность. Вы можете настроить тип сетки, выравнивание, отступы ― кликните по стрелочке рядом с Grid.

Если вы работаете с мелкими деталями, вам может понадобиться дополнительная разметка. Чтобы добавить нужные линии, щёлкните ещё раз на «+».

Отличия десктопной версии Figma от браузерной

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

Отличия десктопной версии:

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

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

Работа с изображениями

Изображения в Фигме — это не отдельные объекты, а заливка фрейма.

Как добавить изображение:

● перетащить с рабочего стола на фрейм,
● добавить через File,
● использовать инструмент Place Image.

Изображение загружается с автоматическим параметром заполнения.

Параметры заливки изображений:

● Fill ― изображение заполняет фрейм без учёта пропорций,
● Fit ― изображение должно отразиться полностью, но при несовпадении пропорций и фрейма появляется пустое место или картинка обрезается,
● Crop ― изображение можно приблизить только нужным кусочком, а лишние части обрезать,
● Tile ― изображением можно «замостить» фрейм.

Работа со стилями и цветами

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

● linear,
● radial,
● angular,
● diamond.

Чтобы добавить градиент на рисунок, кликните на «+» в разделе Fill и выберите подходящий:
Регулируйте настройки градиента: подбирайте нужный цвет, интенсивность, количество точек градиента и т. д.

Вы можете создать свой фирменный стиль или воспользоваться уже готовыми вариантами из библиотеки. Нажмите на кнопку, которая показана на скрине:
В этом списке вы можете выбрать из уже созданных стилей или собрать свой вариант. Нажмите «+» и назовите свой стиль. Так он сохранится у вас в библиотеке:

Слои и группы

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

Чтобы объединить элементы внутри фрейма, нажмите клавиши Ctrl + Alt + G на Windows и Cmd + Opt + G на MacOS.

Чтобы разгруппировать объекты, нажмите Ctrl + Shift + G на Windows и Cmd + Shift + G на MacOS.

Типографика

Figma работает с Google шрифтами ― они унифицированы и не слетают при передаче макета. Но если вы хотите использовать свои варианты, установите плагин Font Helper для десктопной версии и используйте шрифты с вашего компьютера.

Нажмите на букву Т в верхней панели сервиса, чтобы создать текст. Все настройки вы найдёте справа от рабочей поверхности:

Установка плагинов

У Figma есть библиотека плагинов, которые можно установить бесплатно. Они помогают оптимизировать работу дизайнера.
В разделе Community кликните на Plugins и прейдёте в раздел Explore:
В настройках профиля вы можете посмотреть, какие плагины у вас уже установлены.

Тарифы Figma

У Фигмы есть 3 тарифа, расскажем подробнее о каждом.

Starter

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

В тариф входят:

● неограниченное количество файлов в черновиках,
● неограниченное количество зрителей и комментаторов,
● неограниченное количество редакторов в 3 командных файлах,
● 1 командный проект,
● 30-дневная история версий,
● неограниченное облачное хранилище.

Professional

На этом тарифе у пользователей появляется больше возможностей. Он стоит 12$ с человека, если оплатить год использования, и 15$ с человека, если платить помесячно. Этот тариф предоставляется бесплатно на 2 года студентам и преподавателям направления дизайн.

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

В тариф входят:

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

Organization

Этот тариф предназначен для корпоративного использования сервиса. Ежемесячная стоимость — 45$ с человека, подписка оплачивается сразу на год.

В тариф входят:

● неограниченное количество проектов,
● неограниченная история версий,
● частные проекты только по приглашениям,
● совместно используемые командные библиотеки,
● системы проектирования для всей организации,
● централизованные команды,
● частные плагины,
● администрирование плагина,
● общие шрифты,
● sso + повышенная безопасность,
● аналитика системы проектирования.

Системные требования Figma

Параметры запуска и установки десктопной версии Figma зависят от операционной системы. Скорее всего, ваш компьютер спокойно потянет Figma.

Минимальные требования к операционной системе:

● Windows не старше 8.1,
● MacOS не старше 10.10 (Yosemite),
● Linux ― любая версия.

Для тех, кто работает в Фигме из браузера, надо следить за обновлениями приложения.

Минимальные версии браузеров для корректной работы:

● Google Chrome 58+,
● Mozilla FireFox 57+,
● Safari 11+.

Чтобы Фигма стабильно работала, на вашем компьютере должна стоять видеокарта не старше 2012 года. На современные модели такие не ставят.

Как скачать программу Figma на компьютер

У Figma есть несколько вариантов работы ― не обязательно открывать её только в браузере. Если вы, например, путаетесь во множестве вкладок, то версия для компьютера облегчит вашу жизнь.

Зайдите на сайт программы Figma в раздел Downloads. Нажмите на нужную версию согласно операционной системе и следуйте инструкциям установщика.
Если вы часто работаете с телефона или планшета, можете скачать приложение Figma Mirror для мобильных устройств.

Как пользоваться Figma

Начать работать в Figma не сложно. Расскажем, что нужно сделать для старта.

Регистрация или авторизация

Перед тем как вы сделаете свой первый проект, вам надо войти в свой аккаунт или создать его.

Нажмите кнопку Sign up.
Откроется окно, в котором вам предложат войти с помощью вашего аккаунта Google или использовать логин и пароль заранее созданного профиля. Если вы уже есть в Figma, залогиньтесь. Если вы ещё не зарегистрированы, надо создать аккаунт.

Создание нового файла

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

Разработка прототипов в Figma

Прототип — это макет сайта или приложения. В Figma можно наглядно представить, как люди будут взаимодействовать с продуктом. Дизайнер отрисовывает экраны, а затем добавляет связи между ними. Благодаря предустановленным размерам экранов устройств, можно сразу оценить прототип.
Скрин прототипа с ютуб-канала Веб-дизайн & Александр Решетников
В этой статье мы рассказали всё самое важное и полезное о Фигме. Этот сервис легко освоить новичку, потому что у него дружественный интерфейс. Это удобный онлайн-инструмент для совместной работы над проектом, который сделал проще жизнь разработчиков и дизайнеров. Если вам интересно развиваться в этом направлении, то без Figma не обойтись.
Нравится наш блог?
Подпишитесь и будьте в курсе новых статей, обучающих курсов и бесплатных мероприятий