Почему так важно освоить Figma в 2022 году?

графический дизайнер и автор блога
Дмитрия Сугак

Привет! С вами Дмитрия Сугак. Я — графический дизайнер и, как многие специалисты нашей сферы, не могу представить свою работу без Фигмы. Новички часто видят в портфолио других дизайнеров пункт о владении этим приложением. Figma — популярный онлайн-редактор, в котором дизайнер может создать всё, начиная от карточки товаров на маркетплейс, заканчивая прототипом сайта с анимацией. Сегодня я расскажу, как разобраться в Фигма всего за день. Да-да, при грамотном подходе это реально!

Figma — что это за программа и почему её так любят? Топ-6 преимуществ сервиса

Графический онлайн редактор Фигма (Figma)
1. Лучший вариант для новичков
В отличие от Photoshop, InDesign, Illustrator и других редакторов от Adobe интерфейс в Figma очень простой для понимания. Продуманность сервиса значительно экономит нервы и время дизайнеров. При желании вполне реально освоить все функции по видеоуроку и сразу же начать творить. Если повезет, можно даже найти бесплатный курс по Фигме. Один нюанс — приложение на английском, без возможности перевода. И хоть Фигма на русском — мечта многих, даже на английском можно интуитивно понять любую функцию. Обещаю, вы ни разу не откроете переводчик, даже если совсем не знаете английский. К тому же, несмотря на многофункциональность, Фигма бесплатная. А в 2022 году это существенный плюс, чтобы освоить приложение!

2. Быстрая производительность
В Фигме дизайнеру предоставляется «бесконечное» пространство, на котором можно создавать фреймы (холсты для работы любого размера). Так вот, если Фотошоп начинает тормозить от 3 фреймов высокого качества, то Фигма легко выдерживает более 50 (!) макетов — и работает так же быстро, как с одним. Это существенный плюс для тех, кого интересует создание презентаций или анимации в Фигме. Спойлер: анимацию легко создать, используя плагины для Figma, одним из которых я поделюсь ниже.
3. Автоматическое сохранение изменений
Наверное, каждый дизайнер хоть раз сталкивался с ситуацией, когда многочасовая работа не сохранилась из-за глюка приложения. К счастью, для вас эта неприятность останется в прошлом! Figma — сайт, который, как компьютерные игры, сохраняет изменения ежесекундно. Дополнительным плюсом станет наличие автокопий за последний месяц, которые Фигма также создает сама.
Автоматические сохранение черновиков в Figma
4. Умное выравнивание элементов
Если в Фотошопе выравнивать элементы приходится вручную, то здесь Фигма снова на шаг впереди. Больше никаких мучений с пикселями! Сервис настраивает нужное вам расстояние, которое изменяется вслед за движением мыши буквально на ходу. Захотите поменять местами блоки с фиксированным расстоянием — нет проблем. Отступы при этом тоже сохраняются.

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

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

Первые шаги в Figma

Вы можете выбрать любой удобный вариант работы: скачать Фигма на компьютер или пользоваться Фигма онлайн. Но предупреждаю: редактировать макеты можно только на ПК. Планшет или телефон для этих целей не подойдут. Хотя некоторые веб-дизайнеры скачивают Фигму на другие устройства, чтобы просмотреть, как выглядит адаптив сайта на разных экранах. Итак, с вариантами разобрались. Если хотите загрузить приложение, введите в поиск Figma desktop app. Но я считаю, что работа в Фигма онлайн ничем не отличается, так что выбор за вами.

Если вы будете работать в браузерной версии, то вам обязательно нужно скачать font installer, чтобы те шрифты, которые вы загружаете на компьютер, появились в браузерной версии Figma.
После прохождения регистрации (которая займет всего пару минут), создайте новый файл при помощи горячей клавиши ctrl + N. Сейчас вы, дистанционно повторяя со мной, изучите базовые функции Фигмы. Но если хотите изучить подробные видео, где я раскрываю все тонкости создания дизайна в Figma, приходите на мой авторский курс: https://ddesign.moscow/infographics. Там вы научитесь создавать не только красивый, но и функциональный дизайн на примере карточек товаров для маркетплейсов.

Либо вы можете пройти короткое обучение, где вы за 1 день освоите фигма и создадите свои первые дизайн-макеты. Подробности тут: https://ddesign.moscow/intensiv
Вернемся к обучению. Чтобы создать фрейм, зажмите на клавиатуре F и выберете настройки макета на правой панели. Очень удобно, что разработчики Фигма задали фиксированные значения для разных устройств и форматов. То есть вам не придется гуглить размеры экрана IPhone 13 или листа А4. Достаточно просто выбрать его из предложенных вариантов.
Создание фрейма в Фигме
Также справа вы можете найти сетку, настройки цветокоррекции, различные эффекты, встроенные в Фигма шрифты, изменить форму и размер элементов, а также экспортировать файл в любом формате (доступно 4 варианта: jpeg, png, svg, pdf).
Сетки в Фигме (layout grid figma)
Наверху слева вы увидите базовые для дизайнера инструменты: перо, геометрические фигуры, руку, текст и т.д. Понажимайте на каждый и протестируйте. Это самый очевидный, но рабочий метод для запоминания.
Панель инструментов Figma
На левой панели расположены слои, которые вы можете менять местами, переименовывать и группировать. Чтобы добавить фотографию в Фигма, достаточно перетащить её из галереи ПК в приложение.
Слои в Фигме (layers)

Плагины Фигма — всё, что нужно знать

Мы разобрались с основным интерфейсом, который предлагает сайт Figma. Но, я уверена, вы всё ещё недоумеваете, как с помощью такого элементарного набора инструментов дизайнеры создают настоящие шедевры. Раскрою вам секрет! Они используют плагины для Фигма.

Что такое плагины и как ими пользоваться? Каждый плагин — это программа, нацеленная на то, чтобы упростить жизнь дизайнеру. Вбейте в поисковик «Фигма плагины», и он выдаст вам более 400 названий. Понравившиеся из них ищите и скачивайте в Figma Community. С помощью плагинов можно создавать необычные фигуры, искать бесплатные иконки и картинки, удалять фон с фотографии, подбирать цветовую палитру, создавать шум, градиенты, диаграммы, 3D-элементы и даже анимировать свой дизайн.
Кстати, я обещала поделиться названием плагина для встроенной анимации в Фигма. Называется он Figmotion. Есть ещё интересные плагины, которые позволяют до неузнаваемости изменить встроенные шрифты Figma, создать из них элемент декора, чтобы разнообразить дизайн.

Подведем итог

Фигма — программа для дизайна, которая всего за 5 лет стала базовой (или даже основной) в работе многих специалистов. Её любят за возможность творить в команде, создавать крутые дизайны и векторные элементы, применять множество функций, используя плагины для Фигма. Подружившись с этим сервисом, вы станете более востребованным дизайнером на рынке труда и без проблем создадите любой проект. Желаю удачи!
ПОНРАВИЛАСЬ СТАТЬЯ?
БОЛЬШЕ СТАТЕЙ
ОБУЧАЕМ ДИЗАЙНУ С НУЛЯ ДО ПРОФИ

КСТАТИ! МЫ ЗАПУСТИЛИ КУРС ДЛЯ ЗАРАБОТКА НА ФРИЛАНСЕ

Инфографика для маркетплейсов
Лучший онлайн курс по дизайну карточек товаров для Вайлдберриз и Озон.
Вы научитесь делать карточки с инфографикой для Wildberries и Ozon и освоите редактор Figma.
После оплаты вы сразу получаете доступ к урокам. На курсе много обратной связи от автора обучения.
ПОДРОБНОЕ ВИДЕО О КУРСЕ
ЖМИТЕ, ЧТОБЫ УЗНАТЬ ПОДРОБНОСТИ