img
img
16 апреля 2022
16 апреля 2022
9 мин
65

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

В Figma делают прототипы, интерфейсы, векторную графику, презентации.

img
Автор статьи
Анастасия Хамидулина
Копирайтер, редактор
img

Графический редактор Figma появился в 2016 году. Тогда уже было несколько программ, чтобы разрабатывать интерфейсы. Гиганты — Sketch и Adobe XD. Но уже через три года Figma обогнала последний по популярности.

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

Что делают в Figma

✔️ Прототип

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

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

Прототип Figma для оценки юзабилити

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

✔️ Интерфейс

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

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

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

✔️ Векторная графика

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

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

Поэтому все иконки отрисовывают в векторе. И в Figma для этого есть привычные инструменты:

  • Перо

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

Как использовать перо в Figma

Механика не отличается от других векторных программ: перемещайте узлы, удаляйте, вытягивайте по обеим сторонам или по одной

  • Карандаш

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

Карандаш Figma

Фигура сразу превратится в векторный объект

  • Простые фигуры

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

Как работать с простыми фигурами в Figma

Выберите размер, цвет фигуры и обводки

✔️ Юзабилити-тест

Это проверка прототипа. Ее важно проводить до начала разработки, чтобы избежать критичных ошибок. Изменить прототип намного быстрее и дешевле, чем исправлять код.

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

✔️ Презентации

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

Как сделать презентацию в Figma

Презентацию можно экспортировать в PDF

✔️ Логотипы

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

Как сделать логотип в Figma

Логотип экспортируют в векторный формат, например в SVG

Инструменты

⭐️ Сетки и макеты

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

Как использовать сетку в Figma

Чтобы создать новый фрейм, выберите соответствующий инструмент на панели сверху

Затем нужно настроить его размер и задать сетку, по которой будете работать.

Как настроить размер сетки в Figma

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

По умолчанию Figma создаст сетку типа Grid, похожую на тетрадь в клеточку.

Размер сетки по умолчанию Figma

Обычно Grid используют для мобильных приложений

Чтобы поменять сетку, на той же панели нажмите на Grid, затем на +, выберите тип сетки Rows, задайте нужные параметры.

Работа с типографикой Figma

У вас получится полноценная сетка для работы, например, с типографикой

Кроме сетки есть направляющие. Примените их ко всей странице или только к выделенному фрейму. Для этого включите линейку в рабочей области — Shift + R. Перетащите направляющую.

Что такое направляющая в Figma

Если отпустите клавишу мыши в области фрейма, она будет видима только для него. За пределами — направляющая будет работать для всей области

⭐️ Слои и группы

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

Как работать с группами в Figma

Вся информация об объектах находится слева от рабочей области

⭐️ Стили

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

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

Работа со стилями заголовков Figma

Для этого выделите нужный блок с текстом, перейдите в меню настроек справа, нажмите Что такое Figma и как с ней работать и далее +

Создание нового стиля в Figma

Дайте понятное название этому стилю и нажмите Create style

Как отредактировать стиль в Figma

Чтобы отредактировать сохраненный стиль, зайдите в его настройки

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

⭐️ Компоненты

Это объекты, копии которого меняются вместе с ним. Например, в проекте должно быть много кнопок. Чтобы не редактировать каждую из них, создайте одну и сделайте ее компонентом. Для этого нарисуйте простой прямоугольник, задайте ему нужные параметры и впишите текст. Затем сгруппируйте все элементы: Ctrl + G на Windows и ⌘ + G на Mac.

Далее превратите эту группу объектов в компонент с помощью символа Что такое Figma и как с ней работать в верхней части экрана. Либо сочетанием клавиш: Ctrl + Alt + K на Windows и ⌘ + Alt + K на Mac.

Как настроить группу в Figma

Скопируйте кнопку и меняйте настройки этой группы объектов

Если изменить настройки скопированного объекта, они никак не повлияют на исходный компонент.

Как ткрепить объект от исходного компонента

Чтобы открепить объект от исходного компонента, выберите Detach instance в меню

⭐️ Auto Layout

Эта функция нужна, чтобы задавать отступы между объектами и автоматически выравнивать соседние модули.

Функция Auto Layout в Figma

Кнопка с Auto Layout подстроится под длину текста автоматически: ее размер не придется редактировать

Функция Auto Layout находится на панели справа. Выберите, как выстроятся объекты внутри фрейма:

↓ — по вертикали;

→ — по горизонтали;

Что такое Figma и как с ней работать — отступы между элементами;

Что такое Figma и как с ней работать— одинаковые поля со всех сторон.

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

Packed — расположить элементы рядом друг с другом.

Space between — распределить элементы равномерно по всему фрейму с Auto Layout.

⭐️ Плагины

Сообщество Figma активно развивается, поэтому есть огромное количество плагинов, чтобы облегчить работу.

Плагины условно делят на несколько типов:

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

Подходящий инструмент ищите на официальной странице сообщества Figma.

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

💣 Режим совместной работы

В Figma одновременно могут работать несколько участников — и на Windows, и на MacOS. Все изменения сохраняются автоматически. Еще можно оставлять комментарии к любым элементам.

💣 Облачный сервер

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

💣 Десктопное приложение и Figma Mirror для смартфонов

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

Мобильное приложение нужно, чтобы демонстрировать прототип, дорабатывать версию продукта для смартфона.

💣 Импорт Sketch-файлов

Чтобы перенести файл Sketch в Figma, достаточно просто перетащить его. Еще можно скопировать отдельные элементы из Sketch. Для этого щелкните по ним правой кнопкой мыши и скопируйте их как SVG.

Тарифы

1️⃣ Бесплатный тариф:

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

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

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

2️⃣ Figma Professional — $12 за редактора в месяц при годовой оплате, $15 — при ежемесячной:

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

Тариф бесплатный для студентов и преподавателей.

3️⃣ Figma Organization — $45 за редактора в месяц, только годовая оплата:

  • общеорганизационные библиотеки;
  • аналитика дизайн-системы;
  • управление доступом к ссылкам;
  • неограниченное количество команд;
  • частные плагины.

Тариф подходит дизайн-студиям с большой командой и крупными проектами.

Из-за санкций на момент публикации статьи платные тарифы неактуальны: Figma приостановила продажи в России. Доступен только базовый бесплатный тариф.

Как зарегистрироваться и установить

Зайдите на страницу https://www.figma.com/

Как зарегистрироваться и установить Figma

Нажмите Sign up

После регистрации вы сможете сразу создать проект в браузерной версии. Либо скачать ПК-версию или мобильную программу.

Освойте Figma с нуля на курсе «Профессия веб-дизайнер». За три месяца научитесь делать сайты-одностраничники, рекламные баннеры и интерфейсы, соберете проекты в портфолио, чтобы было проще находить заказчиков. Во время учебы выполните реальные заказы для «Перекрестка», Hoff, Qiwi и других крупных брендов.

Главное о Figma

  • В Figma создают прототипы, интерфейсы сайтов и приложений, иконки, презентации, логотипы, проводят юзабилити-тестирование.
  • В Figma удобно демонстрировать прототип заказчику, работать одновременно с командой, передавать проект разработчикам.
  • Figma может заменить Photoshop и Illustrator: в ней тоже обрабатывают векторную и растровую графику.
  • Есть бесплатный тариф для Windows и MacOS. Если в проекте участвует большая команда, нужна платная версия.
img
Подпишитесь на рассылку, чтобы Не упустить что-нибудь новое
Просто и понятно о том, как получить новую профессию


    Дадим нужные знания и поможем получить работу!
    Регистрируйтесь на курс и учитесь у экспертов-практиков.
    Профессия
    за 3 месяца
    Веб-дизайнер

    Курс для новичков, которые хотят с нуля освоить востребованную и творческую профессию, собрать портфолио и потренироваться на реальных проектах.

    3 085 ₽/мес.
    4 059 ₽/мес.
    Ещё по теме
    img
    Дизайн
    На какой платформе создать сайт: обзор лучших конструкторов

    Разбираем плюсы и минусы Wix, Site123 и еще четырех платформ.

    25 апреля 2022
    8 мин
    верстка сайтов
    конструктор сайтов
    img
    Дизайн
    Что такое мудборд, для чего он дизайнеру и как его создать

    Мудборд помогает определить и визуализировать концепцию, уточнить ТЗ.

    18 апреля 2022
    9 мин
    мудборд
    img
    Дизайн
    Кто такой веб-дизайнер, чем занимается и как им стать

    Средняя зарплата веб-дизайнера — 86 341 ₽. На доход влияют опыт и регион.

    18 апреля 2022
    7 мин
    выбор профессии
    карьера
    img
    Дизайн
    Как оформить красивую презентацию

    Презентации оформляют не только в PowerPoint: подойдут сервисы Canva, Prezi и другие.

    16 апреля 2022
    8 мин
    презентации
    img
    Дизайн
    Как сделать красивый дизайн сайта

    Типичные ошибки: перегрузить сайт, использовать устаревшие эффекты.

    16 апреля 2022
    8 мин
    figma
    tilda
    верстка сайтов
    img
    Дизайн
    Графический дизайнер: кто это, чем занимается и как им стать

    Графический дизайнер передает цели и задачи бизнеса через визуальные элементы.

    13 апреля 2022
    9 мин
    карьера
    img
    Дизайн
    Это реально: из философа — в дизайнера интерфейсов

    История о том, как решиться освоить профессию с нуля и справиться с трудностями.

    22 марта 2022
    10 мин
    ui-дизайн
    ux-дизайн
    дизайн сайтов
    личная история
    смена профессии
    смена сферы
    img
    Дизайн
    Что такое портфолио и как его правильно заполнить

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

    24 февраля 2022
    8 мин
    карьера
    портфолио
    img
    Дизайн
    Что такое Trello и как им пользоваться

    Trello подойдет малому бизнесу, стартапам и фрилансерам с небольшими проектами.

    24 февраля 2022
    7 мин
    trello
    инструменты
    img
    Дизайн
    Что такое референсы и где их искать

    Референсы нужны, чтобы на примерах чужих работ продумать и согласовать идею.

    24 февраля 2022
    6 мин
    референсы