Figma для недизайнеров: кому и зачем нужен сервис

Что такое Figma?

Figma — онлайн-сервис, созданный в первую очередь для веб- и UX/UI-дизайнеров. В основном в Figma создают прототипы и дизайн-макеты сайтов, интерфейсы мобильных приложений, корпоративных порталов. Работать можно как в браузерной версии сервиса, так и в десктопной – для этого нужно скачать Figma на компьютер (ссылка на оф. сайт для скачивания: https://www.figma.com/downloads).

Рабочее пространство Figma максимально удобно и интуитивно понятно. Представьте, что это тот же Paint, но чуточку сложнее:) Если человек, далекий от дизайнерских программ, откроет Фотошоп или Иллюстратор, то наверняка впадет в ступор от обилия кнопок, панелей и инструментов. В Figmа все гораздо проще, поэтому освоить ее на базовом уровне не составит труда. А мы расскажем, зачем и, главное, как это сделать.

<i>Сравнение интерфейсов Adobe Illustrator (вверху) и Figma (внизу)</i>
Сравнение интерфейсов Adobe Illustrator (вверху) и Figma (внизу)

Почему вам нужно освоить Figma

На практике функционал сервиса выходит далеко за рамки веб-дизайна. В Figma можно создавать посты и сторис для соцсетей, макеты для таргетированной рекламы, презентации, мудборды, баннеры, открытки, листовки и так далее. Если у вас в команде нет работающего 24/7 дизайнера, вы иногда (или часто) презентуете что-то клиентам, если хотите ускорить работу и приобрести +1 полезный скилл и повод гордиться собой – эта статья для вас. А сейчас расскажем о некоторых форматах подробнее.

Мудборд

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

<i>Мудборд, созданный для презентации концепции сайта</i>
Мудборд, созданный для презентации концепции сайта

Презентация

Power Point – это хорошо, но клином свет на нем не сошелся, а многие PP-шаблоны давно устарели. Если раньше для создания стильных презентаций лидером у недизайнеров была Canva (теперь недоступна в РФ), то сейчас самое время обратиться к Figma. Помните, что дизайнеры уже все сделали за вас. В Figma есть раздел «Комьюнити», в котором пользователи со всего мира выкладывают готовые иллюстрации, иконки, плагины, текстуры, шаблоны и т.д. В случае с презентацией вводите в строку поиска «Presentation Template» и выбирайте подходящий шаблон. Вам останется заменить картинки и текст.

<i>Стартовая страница раздела Комьюнити</i>
Стартовая страница раздела Комьюнити
<i>Выдача результатов по запросу Presentation Template</i>
Выдача результатов по запросу Presentation Template

Баннеры и ресайзы

<i>Баннер для школы актерского мастерства</i>
Баннер для школы актерского мастерства
<i>Ресайзы баннеров для магазина одежды</i>
Ресайзы баннеров для магазина одежды

Посты и сторис

Сервис уже знает самые популярные форматы и их размеры в пикселях, поэтому вам даже не нужно вводить ничего вручную. Выбирайте «Post»/«Stories», и чистый фрейм необходимого размера перед вами. Можно не только создавать посты, но и выстроить их в сетку перед публикацией. Поместите на рабочее поле готовые картинки, выровняйте и оцените результат.

<i>Панель выбора размера фрейма (рабочей области) в пикселях</i>
Панель выбора размера фрейма (рабочей области) в пикселях
<i>Сторис, созданные в Figma</i>
Сторис, созданные в Figma
<i>Посты, созданные в Figma</i>
Посты, созданные в Figma
<i>Плагины в разделе Комьюнити</i>
Плагины в разделе Комьюнити

С чего начать изучение

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

  • Рекомендуем пройти базовый курс по Figma от Tilda Education. Ссылка: https://tilda.school/figma-free-course-0
  • Для углубленного изучения подойдет книга Саши Окунева «Руководство по Figma». После каждого мини-урока предлагается выполнить небольшое задание, чтобы закрепить материал. Ссылка: https://slashdesigner.ru/figma-guide
  • Для тех, кто «на ты» с английским, есть курс от DesignLab, он также учит работать в Figma с нуля. Пройти его можно здесь: https://designlab.com/figma-101-course/introduction-to-figma

Особенности сервиса

Figma признает только статичные форматы (гифки и видео вставить не получится) и не очень жалует растровую графику. Это значит, что если вам нужно удалить фон, вырезать, убрать что-то с картинки или фото, лучше сделать это предварительно в другом редакторе. Но! Вам в помощь безграничное количество плагинов из раздела «Комьюнити». Практически любой дополнительный функционал реализуется в сервисе именно через плагины. Вот некоторые из них:

  • Beautiful Shadows – создает мягкие красивые тени;
  • uiGradients – готовые градиенты на любой вкус;
  • Blobs – плагин создает разнообразные шейпы неправильной формы;
  • Unsplash – добавляет картинку с бесплатного фотостока сразу в Figma без необходимости скачивания;
  • Shaper – набор готовых трендовых векторных элементов;
  • Feather Icons – готовый набор бесплатных иконок.

Командная работа

Даже если вам самим не придется выполнять дизайнерские задачи в Figma, клиент или дизайнер могут прислать вам ссылку на свой проект (лендинг, макет, прототип и т.д.) с просьбой внести данные или оценить работу. Figma как сервис изначально подразумевает командное взаимодействие: создатель файла может раздавать права на доступ через кнопку «Share», все участники могут оставлять комментарии и вести ветки обсуждений в любом месте макета. Есть два вида доступа: «Can edit» и «View only». Чтобы запросить его, вам нужно иметь аккаунт в Figma с привязанной почтой.

<i>Пользователи и выданные им доступы</i>
Пользователи и выданные им доступы
<i>Оставленный комментарий</i>
Оставленный комментарий

Огромное преимущество сервиса в том, что не нужно скачивать множество тяжелых файлов, все данные хранятся на фигмовских серверах. Все очень быстро и наглядно – вам (или клиенту) нужно только перейти по ссылке. А еще можно вносить правки в режиме онлайн или следить за их выполнением, попутно находясь на созвоне – открыв ссылку, вы видите, что делают в данный момент другие пользователи, имеющие доступ к файлу.

Figma – прогрессивный, быстрый и простой для понимания онлайн-сервис. Умение работать в нем дает не только дополнительный дизайнерский скилл и повышает скорость работы, но еще и облегчает коммуникацию с клиентом и подчиненными. Используя Figma, вы грамотно презентуете концепции, в режиме онлайн видите, как идет работа над проектом, оперативно вносите правки и обмениваетесь гигабайтами данных одним кликом мыши.

Автор статьи: Дизайнер SMM Ingate Анастасия Максименко

Figma для недизайнеров: кому и зачем нужен сервис
3030
12 комментариев

Ооо
Фигма для меня отдельная история
Когда «закрылась» канва мне сказали «ну перейди на фигму господи»
И я как вспомнила этот страшный интерфейс с кучей всего (еще раз: сравнивала с канвой) - сразу включила отрицание: ненене, ну куда Я и Фигма, я же полный ноль в этом!
Она же для проф дизайнеров, куда мне!

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

Мне очень нравится экспериментировать, практиковать свою насмотренность и критическое мышление. Работа в Фигме меня успокаивает, могу сидеть в ней часами и доводить до своего субъективного идеала нужный мне контент.

Вот:)

P.S Black Friday уже везде прошла, так что не сочтите за рекламу, я честно не имела ее в виду. Просто я крайне довольна данной картинкой)

6
Ответить

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

1
Ответить

мне нравится фигма, пользуюсь ей с момента как канва ушли

2
Ответить

Да, она отлично выручает. И очень надеемся, что Фигма нас не покинет))

Ответить

Фирму не выучите за несколько часов, если нет опыта работы в графическом редакторе (и это не paint))

Ответить

Здравствуйте! Безусловно, вы правы. Само собой, это не paint, это было сказано с иронией) И выучить за 2 часа Фигму мы тоже не предлагаем :) Просто подчеркиваем удобство и простоту интерфейса сервиса в сравнении с другими редакторами.

1
Ответить

У меня есть ощущение, что статья началась и тут же оборвалась — а обещанное «кому» я не увидела (может, проглядела). Хотелось бы больше примеров взаимодействия, а также каких-то лайфхаков как для дизайнеров, так и для недизайнеров. Например, как пользоваться прототипами, если вам скинули на них ссылку, или что можно ограничить, какой контент в компоненте заказчик может поменять, а какой — нет.
Также я бы сделала оговорку про видео и гиф: сейчас их можно вставлять, просто двигаться они будут в прототипе, а не в режиме редактирования.

Ответить