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

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

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

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

4. Умное выравнивание элементов
Если в Фотошопе выравнивать элементы приходится вручную, то здесь Фигма снова на шаг впереди. Больше никаких мучений с пикселями! Сервис настраивает нужное вам расстояние, которое изменяется вслед за движением мыши буквально на ходу. Захотите поменять местами блоки с фиксированным расстоянием — нет проблем. Отступы при этом тоже сохраняются.

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

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

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

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

Итак, с вариантами разобрались. Если хотите загрузить приложение, введите в поиск Figma desktop app. Но я считаю, что работа в Фигма онлайн ничем не отличается, так что выбор за вами. Если вы будете работать в браузерной версии, то вам обязательно нужно скачать font installer, чтобы те шрифты, которые вы загружаете на компьютер, появились в браузерной версии Figma.

После прохождения регистрации (которая займет всего пару минут), создайте новый файл при помощи горячей клавиши ctrl + N. Сейчас вы, дистанционно повторяя со мной, изучите базовые функции Фигмы.

Вы можете пройти короткое обучение, где вы всего за 1 день освоите Фигма и создадите свои первые дизайн-макеты. Подробнее об обучении. Этот мини-курс посвящен Figma - мощному редактору дизайна. Вы погрузитесь в мир Figma с нуля, изучив базовые функции программы и освоив их на практике.

Вас ждут уроки:

1. Установка и знакомство с интерфейсом.
2. Создание проекта и работа с инструментами.
3. Изучение основных элементов дизайна: линий, фигур, текста и других.
4. Работа с компонентами и сохранение проекта.

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

И самое прекрасное - редактор Figma абсолютно бесплатен! Нет никаких подписок или ежемесячных платежей. Просто скачайте приложение на компьютер или начните работать в браузере.

Подробнее об обучении

Больше курсов по работе в бесплатном онлайн редакторе Figma:
1. Курс "Графический дизайн в Figma + нейросети" от онлайн-школы ddesign.moscow
2. Курс "Figma" от онлайн-школы Contented
3. Курс "Figma с нуля до PRO" от онлайн-школы Skillbox
4. Курс "Веб-дизайн с нуля до PRO"

Вернемся к теме статьи. Чтобы создать фрейм, зажмите на клавиатуре F и выберите настройки макета на правой панели. Очень удобно, что разработчики Фигма задали фиксированные значения для разных устройств и форматов. То есть вам не придется гуглить размеры экрана IPhone 13 или листа А4. Достаточно просто выбрать его из предложенных вариантов.

Также справа вы можете найти сетку, настройки слоя, обводки, различные эффекты (внутренняя тень, внешняя тень, размытие слоя и размытие фона), встроенные в Фигма шрифты, изменить форму и размер элементов, а также экспортировать файл в любом формате (доступно 4 варианта: jpeg, png, svg, pdf).

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

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

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

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

Кстати, я обещала поделиться названием плагина для анимации в Фигма. Называется он Figmotion. Есть ещё много интересных плагинов, которые позволят заметно улучшить ваш дизайн-макет, не выходя за пределы этого бесплатного онлайн-редактора.

Фигма — программа для дизайна, которая всего за 5 лет стала базовой (или даже основной) в работе многих специалистов. Её любят за возможность творить в команде, создавать крутые дизайны и векторные элементы, применять множество функций, используя плагины для Фигма. Освоив этот редактор, вы сможете делать карточки товаров для маркетплейсов, рекламные баннеры и креативы, посты для соцсетей, сайты, презентации и многое другое.

Вас может заинтересовать:
1. Курс "Графический дизайн в Figma + нейросети" от онлайн-школы ddesign.moscow
2. Курс "Figma" от онлайн-школы Contented
3. Курс "Figma с нуля до PRO" от онлайн-школы Skillbox
4. Курс "Веб-дизайн с нуля до PRO"