Введение в Figma: начальные уроки

Figma завоевывает любовь и признание дизайнеров из-за простоты и функциональности. С программой стало возможным онлайн, в облачном сервисе, разработать интерфейс и кликабельный прототип, не загружая гигабайты на свой ноутбук. Бесплатный редактор отодвинул таких монстров дизайна как Photoshop или Illustrator. Если вы решились начать обучение, то на ресурсе TutorTop собраны рейтинговые курсы для обучения Фигме с нуля.

От иконок и логотипов до интернет-магазинов и суперкейсов

Удобный интерфейс программы и функционал позволяют быстро разобраться новичку.
В Фигме можно абсолютно бесплатно создавать векторную графику и сохранять в современном формате svg: надо только зарегистрироваться на сайте!

Графические инструменты Figma

Множество уроков Figma для начинающих помогут самостоятельно освоить инструменты:

• сетки и направляющие (структурировать наполнение приложений и веб страниц в
• адаптивном дизайне);
• фреймы (упорядочить наполнение макета);
• векторные формы и фигуры (изменять, пропорционально масштабировать, работать с цветом и эффектами);
• прозрачность (где залить более светлым цветом фигуру, а когда изменить прозрачность);
• слои (грамотно использовать слои, не блокируя содержимое для верстальщика);
• стили (упростить работу над проектом, сделать его узнаваемым и единообразным);
• шрифты.

Рекомендации к самостоятельному обучению. Изучить инструменты, попробовать создать дизайн страницы, landing-page.
Освоение на курсах. Освоить последовательность работы с инструментами, чтобы экономить время на переделывании макета.

Создание кликабельных прототипов

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

К элементам макета: меню, кнопке, карте можно добавлять типы взаимодействия (триггеры) пользователя (переход по клику, наведение курсора, перетаскивание и прочее).

Рекомендации к самостоятельному обучению. Стоит ознакомиться с триггерами и поэкспериментировать, просмотрев бесплатные уроки по Фигма.
Освоение на курсах. Создать конечный продукт для пользователя.

Специфичные функции Figma

✦ ШАБЛОНЫ ✦
В редакторе можно воспользоваться шаблонами (раздел templates), это оценят SMM-специалисты, кураторы и менеджеры. Диаграммы, карты, схемы, шаблоны для популярных соцсетей значительно упростят работу и улучшат результат.

✦ КРОССПЛАТФОМЕННОСТЬ ✦
Браузеры (Opera, Chrom, Mozilla и др.) открытые на компьютере, ноутбуке и мобильном устройстве позволят работать с проектом, вносить изменения.

✦ ОНЛАЙН-КОММЕНТИРОВАНИЕ И ОБЛАЧНОЕ ХРАНЕНИЕ ✦
Специалист, участвующий в создании проекта и заказчик могут оставить комментарии к проекту. Хранение данных в облаке и автоматическое сохранение помогут воссоздать копию макета, откатить внесенные изменения до любого этапа.

✦ БИБЛИОТЕКА ПЛАГИНОВ НА ВСЕ СЛУЧАИ ЖИЗНИ ✦
Множество плагинов ускорят процесс работы и автоматизируют действия: вставку изображений, иконок; создание определенной, часто используемой сетки; анимирование прототипа, рисование векторных деталей и объектов.

Уроки по Фигма с нуля в Youtube помогут расширить представление о дополнительных возможностях онлайн-редактора.

Сдача макета верстальщику

Фигма упростила работу с веб-проектами не только дизайнерам, но и верстальщикам. Фишка ее в том, что front end разработчик точно перенесет информацию обо всех элементах, придуманных креативщиками: цвет в веб раскладке, тень, уровень прозрачности объекта. Всю информацию ему нужно будет только скопировать и внести в код. Такой функционал фотошопу даже не снился!

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

В отличие от конкурентов, Фигма поддерживает командную работу и параллельные правки проекта: все участники получают доступ к макетам и отслеживают вносимые коллегами изменения. Изучение этой программы на уровне начинающего – обязательно для профессий и соискателей в сфере IT и веб-разработки: менеджерам, кураторам проекта, UX/UI дизайнерам и, конечно, верстальщикам с программистами.

Рекомендации к самостоятельному обучению. Ознакомиться с функцией командной работы.
Освоение на курсах. Отточить навык совместной работы и включить готовый кейс в резюме.

Начинающему веб-дизайнеру

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