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

Что такое Figma и как в ней работать
10 мин.
Нет времени читать?

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

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

Оглавление

Что такое Figma

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

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

В Figma можно создавать:

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

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

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

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

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

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

Что есть в Figma и чего нет в Photoshop:

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

Photoshop и Figma предназначены для решения разных задач. Photoshop больше подходит для работы над дизайном, а Figma — для создания макетов и прототипов.

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

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

Кому нужна 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 не обойтись.

Понравился материал?

Оставьте комментарий

Ваш комментарий:
Имя:
Email: