Онлайн-редактор Figma — современный инструмент, который покорил многих веб-дизайнеров своей простотой и функциональностью. Рассказываем, как новичку научиться разрабатывать интерфейсы сайтов и мобильных приложений в Figma. Курсы, бесплатные видеоуроки, сервисы и другие полезности ждут вас внутри статьи.
Почему обучение работе в Figma актуально в 2022
Figma стала настоящим мастхевом для дизайнеров. Сегодня многие компании отказываются от сложных сайтов и графики — им достаточно современного лендинга или удобного и минималистичного интернет-магазина, которые можно за 5–7 дней спроектировать в Figma и реализовать в конструкторе сайтов. Кроме дизайна интерфейсов, онлайн-редактор позволяет разрабатывать визитки и логотипы, оформлять макеты постов для соцсетей и рекламные баннеры — словом, закрывает большинство потребностей клиентов дизайнера.
В отличие от громоздкого фоторедактора Photoshop, в котором веб-дизайнеры создавали макеты сайтов раньше, у Figma удобный и относительно простой интерфейс, а расширить возможности программы можно подключив разнообразные плагины. Ещё одно преимущество онлайн-редактора — многопользовательский режим. Вы можете разрабатывать дизайн-макеты сайтов и приложений вместе с командой в режиме реального времени, что особенно удобно на удалёнке.
Если вы ещё не используете Figma в своей работе или не в полной мере разобрались в фишках редактора, рекомендуем пройти профильные курсы, чтобы разложить инструментарий программы по полочкам. Не переживайте об английском языке в интерфейсе Figma — обучение на русском поможет вам быстро освоиться и в дальнейшем без труда ориентироваться в меню, даже если вы не владеете иностранным языком.
Мы попросили нашего графического и веб-дизайнера Лину Дмитриеву поделиться своими впечатлениями и опытом использования онлайн-редактора.
Пополнить арсенал практикующего специалиста новым инструментом или научиться разрабатывать мобильные и веб-интерфейсы с нуля помогут курсы по дизайну в Figma. Уроки от опытных дизайнеров-экспертов собраны в следующем разделе: Checkroi рекомендует к прохождению 8 курсов под разные цели и задачи. А если захотите познакомиться с программой самостоятельно — переходите к подборке бесплатных ресурсов.
«Как эксперту выйти на стабильные 100 000 ₽/мес» На продаже своих услуг без всякого «наставничества»
Получить план
Лучшие курсы по дизайну в Figma по версии Checkroi
Мы проанализировали программы обучения в разных онлайн-школах и составили «фирменный» топ курсов по редактору Фигма для начинающих. Видеоуроки и воркшопы познакомят вас со всеми инструментами и возможностями программы на практике, а преподаватели помогут сделать первые шаги в мире веб-дизайна.
Читайте краткие обзоры на курсы, сравнивайте условия и выбирайте ту программу, которая вам больше подходит.
Лучший вводный курс по дизайну лендингов в Figma
Вы познакомитесь с базовыми понятиями дизайна: колористикой, композицией, типографикой и юзабилити, научитесь создавать низкоуровневые и детализированные прототипы сайтов в Figma и подготавливать макеты к разработке. По итогу вы разработаете дизайн лендинга, получите сертификат и сможете записаться на дизайн-ревью к преподавателю, чтобы получить персональную обратную связь
Самый полный курс по прототипированию в Figma
2-месячный курс для начинающих и практикующих веб-дизайнеров, которые хотят создавать дизайн-макеты сайтов и приложений в Figma. Вы освоите инструменты редактора: поймёте, как проектировать и верстать адаптивные макеты интерфейсов по модульной сетке, научитесь анимировать прототипы и подготавливать их к разработке. Вы узнаете, как организовать командную работу над проектом и оптимизировать дизайн-процессы через плагины. По итогу обучения выдаётся сертификат
Для начинающих веб-дизайнеров это обязательный курс, я считаю. Потому что непонимание того, как работает инструмент, может вас сильно ограничивать в его использовании, а понимание и знание — наоборот, поднимет скорость работы и внесения правок.
Например, вы узнаете, что работа над проектом начинается с разработки дизайн-системы, в которую включаются различные состояния кнопок, переключателей, окон, шрифтовая иерархия и др. Если пропустить этот этап или не продумать его качественно, то не будет никакой организованности в макете, что в свою очередь приведёт к непониманию, как работы цифрового продукта в целом. Гибкая дизайн-система делает дизайн живым и пригодным к использованию.
На курсе вы освоите базовые принципы анимации и работы с компонентами и сможете наглядно и быстро демонстрировать, как люди будут пользоваться будущим сайтом и как будет происходить взаимодействие. Кроме того, вы научитесь правильно передавать макеты разработчикам, что поможет наладить коммуникацию с командой.
Ответьте на вопрос честно: вас не смущает ощущение, что вы как чужак и самозванец в среде дизайнеров, который наугад клацает по клавишам, интуитивно пытаясь понять, как всё устроено? На курсе вас обеспечат хорошим фундаментом, и вы сможете двигаться дальше в своем профессиональном развитии
Лучший курс по дизайну в Figma для менеджеров продукта
2-месячный курс будет полезен дизайнерам и менеджерам продукта. Вы узнаете, как создать макет продукта в Figma и протестировать его, чтобы внести правки в проект на этапе ранней разработки. Вы научитесь отрисовывать интерфейсы, собирать прототипы, анимировать их и проводить юзабилити-тесты. После защиты дипломной работы вы получите сертификат
Лучший курс по основам веб-дизайна в Figma
Веб-дизайн с нуля на Figma за 7 месяцев. Сначала вы разберётесь в инструментах онлайн-редактора и научитесь создавать интерактивные и адаптивные интерфейсы сайтов и приложений. Затем вы углубитесь в процесс разработки дизайн-проекта на заказ — от составления техзадания и «карты пути пользователя» до презентации работы заказчику. В рамках курса вас ждёт 4 спринта с практическими заданиями и итоговая работа — дизайн сайта для реального клиента. В конце курса вы получите сертификат
Лучший курс по проектированию интерфейсов в Figma с возможностью стажировки
Курс по Фигме для новичков в UX-дизайне. За 2 месяца вы научитесь проектировать пользовательский опыт и создавать удобные веб- и мобильные интерфейсы в Figma. Вы познакомитесь с историей дизайна интерфейсов и узнаете, как разрабатывать кликабельные прототипы, проводить юзабилити-тесты и презентовать проект заказчику. Уроки проводят эксперты диджитал-агентства Agima, куда лучших студентов пригласят на стажировку. После сдачи финального проекта выпускники получат удостоверения о повышении квалификации
Лучший курс по оформлению соцсетей в Figma
Курс по Фигме для маркетологов, таргетологов, smm-менеджеров и блогеров. За 21 урок вы научитесь разрабатывать дизайн-макеты постов, аватарок, обложек и баннеров для соцсетей. Вы узнаете, как создавать рамки, тень и неоновые надписи, накладывать на фотографии аппликации, градиенты и трёхмерные эффекты, нарезать изображения для карусели фотографий и бесконечной ленты в соцсетях. Вы оформите в Figma несколько макетов для соцсетей и получите сертификат
Лучший курс по продвинутым инструментам Figma
Программа для практикующих веб-дизайнеров. Вы научитесь проектировать библиотеки компонентов и наборы графических элементов — UI-киты. Вы продумаете стили интерфейса и создадите иконки, кнопки, окна, блоки меню и другие элементы дизайн-системы с возможностью их модификации. Вы узнаете, как продавать свои дизайн-продукты в официальном сообществе — Figma Community. Если у вас есть пробелы в работе редактора фигма, уроки для начинающих собраны в отдельном разделе курса — начинайте обучение с него. По завершении курса выдаётся сертификат
Лучший курс для погружения в профессию веб-дизайнера с трудоустройством
За 2 года вы узнаете, как создавать графику в редакторах Photoshop и Illustrator, научитесь проектировать пользовательский опыт, разрабатывать макеты сайтов и мобильных приложений в Figma и анимировать прототипы в программе Principle. Дополнительно вы пройдёте курс по конструктору сайтов Tilda или Readymag на выбор и ещё 3 теоретических курса по дизайну. Вас ждут дизайн-спринты с практикой и воркшопы с экспертами, а по итогам обучения — сертификат и помощь в трудоустройстве
Почему нашему выбору курсов можно доверять
В блоге Checkroi мы регулярно рассказываем о современных профессиях и онлайн-обучении. Над созданием материалов трудятся специалисты из нескольких отделов: контент-менеджеры, seo-специалисты, авторы и редакторы. Вдобавок мы подыскиваем экспертов, которые не понаслышке разбираются в той или иной теме, и просим поделиться профессиональным опытом с нашими читателями.
Прежде чем рекомендовать вам обучение Figma на курсах, мы детально проанализировали десяток программ в разных онлайн-школах — от изучаемых дисциплин и преподавательского состава до гарантий по итогам обучения. Затем отобрали лучшие курсы в разных категориях, чтобы начинающий специалист и опытный дизайнер могли найти программу под свои запросы.
На курсах из нашей подборки преподаватели понятным языком рассказывают, как работать в Figma для начинающих, отвечают на вопросы и делятся лайфхаками, а задания помогают студентам закреплять знания на практике и пополнять портфолио новыми кейсами.
Кроме краткосрочных программ на 1–2 месяца, мы добавили в топ несколько фундаментальных курсов по веб-дизайну для тех, кто хочет научиться разрабатывать интерфейсы на заказ и построить карьеру в творческой сфере. Курсы-профессии более продолжительны по времени — от 7 месяцев, зато вы пройдёте полноценную переподготовку и сможете работать по новой специальности сразу после обучения.
Вопросы из зала
Зачем платить за курсы по Figma, если в интернете полно бесплатных материалов?
В интернете действительно много материалов, но не у всех есть силы и время на самообучение. Курсы удобны тем, что дают структурированную и полную информацию — не нужно гуглить отдельно каждый инструмент, а любой вопрос можно задать напрямую преподавателю. Некоторые курсы гораздо обширнее, чем просто туториал по программе: включают подготовку по веб-дизайну, гарантированную стажировку или трудоустройство. Вариантов много — выбирайте наилучший для себя. В следующем разделе статьи мы расскажем про бесплатные материалы, с которых можно начать обучение Фигме с нуля прямо сейчас.
Смогу ли я сразу зарабатывать на дизайне, если «от и до» разберусь в Figma?
Передаём ваш вопрос напрямую дизайнеру.
Ответ будет неожиданным, но да, сможете. Вряд ли это будет хороший заработок на полноценных цифровых продуктах, ведь мы сейчас говорим о начальном этапе, когда в копилке навыков только Figma. Но даже с одной программой и базовыми знаниями в дизайне интерфейсов вы можете разрабатывать и продавать отдельные UI-киты для будущих сайтов и приложений. Их покупают другие дизайнеры, чтобы сэкономить время и начать работу сразу с основного этапа дизайна, так как разработка кита — это больше о подготовке. Как существуют стоки с иллюстрациями и иконками, так существуют и стоки с китами, которые бывают разными в своём дизайне и объёме. А дальше — зависит от вашей фантазии, желания и скилов. Удачи!
В чём отличие UI- и UX-дизайна?
Дизайн UI, User Interface — это создание внешнего вида сайта: подбор шрифтов и цветовой палитры, отрисовка иконок, создание анимации и других графических элементов. Дизайн UX, User Experience — это проектирование логики сайта: удобного для пользователя расположения и размера кнопок, блоков, меню и других элементов интерфейса. За примерами и подробностями приходите в нашу статью: «UX и UI дизайн что это: принципы, отличия, перспективы развития».
Как совместить работу с учёбой на курсах? У меня полный день, а на курсах ещё домашние задания надо делать.
Не переживайте, онлайн-курсы предназначены для взрослых людей, у которые работают, ведут быт и просто живут свою жизнь. График учёбы можно подстроить под себя: как правило, в курс входят видеолекции, которые можно смотреть в удобное время. Если в программе есть вебинары, они проводятся по вечерам и всегда сохраняются в записи. Домашние задания — посильные, чтобы студент успевал их выполнить в течение недели или в выходной. Возможно, над итоговым проектом придётся потрудиться чуть больше, зато этот кейс вы положите в портфолио. А если что-то пойдёт не так, куратор или наставник обязательно поможет решить проблему
Бесплатные курсы по работе в Figma
Если вы не планируете углубляться в веб-дизайн или пока не готовы платить за курсы, в интернете есть бесплатные материалы, которые помогут познакомиться с интерфейсом программы и разобраться в основных инструментах. Начать рекомендуем с нашей статьи-инструкции: «Как работать в Figma в 2022», а дальше — переходить к видеоурокам и практике в редакторе.
Подобрали для вас несколько курсов по программе Фигма — обучение с нуля бесплатно:
- design в Figma от Contented — 3-дневный интенсив с домашними заданиями, проверкой работ, чатом поддержки и сертификатом в конце;
- курс по Figma от Uprock — курс для быстрого старта, созданный Евгением Кузьминым, который делал проекты для таких брендов как AXE, Beeline, Coca‑cola, Lipton, Yota, СДЭК;
- курс по Figma от школы Tilda — 13 коротких уроков по работе в Figma и переносу дизайна в конструктор сайтов Tilda с небольшими заданиями для самопроверки;
- курс по Figma от Alexey Bychkov — 21 видеоурок по инструментам Figma с нескучной подачей и примерами;
- мастер-классы по веб-дизайну в Figma от школы веб-дизайна Яна Агеенко — 39 мастер-классов, на которых автор разрабатывает дизайн логотипов, сайтов, мобильных приложений и др.
- дизайн и вёрстка многостраничного сайта в Figma от Denis Timoshitskiy — 35 ютуб-урока по разработке дизайн-макета сайта и его вёрстке в редакторе Обучение на русском бесплатно;
- проектирование и дизайн мобильного приложения от Denis Timoshitskiy — за 15 видео на ютубе вы рассмотрите процесс разработки web дизайна и интерфейса для мобильного приложения.
Смотрите видеоуроки, повторяйте действия вслед за преподавателем и вскоре начнёте быстро ориентироваться в программе, горячих клавишах и инструментах. А мы подготовили для вас советы по веб-дизайну: как сделать крутой макет сайта самому.
Полезные сервисы для веб-дизайнеров в Figma
Хороший дизайн не создаётся в вакууме. Чтобы сайт или мобильное приложение выглядели гармонично и современно, нужно учитывать принципы и тренды UI-дизайна, а сделать ресурс жизнеспособным и понятным для пользователя поможет тестирование проекта на реальной аудитории.
Подобрали полезные ресурсы, которые облегчат работу над прототипами и макетами и повысят удобство ваших сайтов и мобильных приложений.
Сервисы для UI-дизайна:
- Adobe Color — бесплатный сервис поможет подобрать цвета и оттенки для сайта на цветовом круге, извлечь цвет и градиент из загруженного изображения, протестировать контрастность и др.;
- Шрифты Онлайн — каталог со шрифтами на разных языках и в разных стилях. Есть раздел с бесплатными шрифтами, но не забывайте читать условия лицензии;
- AllShrift — ещё один каталог, где можно выбрать и скачать бесплатные шрифты;
- Pixabay — большая коллекция бесплатных фото, векторных иллюстраций и видео, которые можно использовать на сайте;
- PhotoDune — платный сток с качественной графикой и видео для оформления сайтов и мобильных приложений;
- Iconfinder — более 6 миллионов иконок, векторных и трёхмерных иллюстраций. Есть бесплатные иконки и иллюстрации, остальные можно покупать поштучно или оформить подписку;
- Iconshock — здесь собрано более 800 наборов иконок в 30+ стилях. Для полного доступа к каталогу, скачиванию и кастомизации иконок нужно оформить премиум-подписку.
Сервисы для проведения юзабилити-тестов:
- Usabilla — сервис, где реальные пользователи тестируют прототипы сайтов и мобильных приложений, анализируют контент на веб-странице и др.;
- UsabilityHub — здесь вы можете поучаствовать в юзабилити-тестах других пользователей и заработать деньги или заказать тестирование своего прототипа и провести 5-секундный тест, дизайн-опрос, тест первого клика и др.;
- Optimal Workshop — на платформе можно провести пользовательские опросы, тесты первого клика, структуры сайта, элементов контента и др.
- Useberry — ещё один сервис для тестирования юзабилити сайта. Вы можете проанализировать видеозапись прохождения теста пользователем, «тепловую карту кликов», «карту пути пользователя» и др.
Ещё больше инструментов для аналитики прототипов и уже действующих сайтов вы найдёте в нашей обзорной статье: «Анализ юзабилити сайта: 11 полезных инструментов для оценки».
Что почитать в телеграме
В соцсетях можно почерпнуть много полезного: узнать тренды и новости из мира веб-дизайна, рассмотреть успешные кейсы других специалистов и потренировать насмотренность. Рассказываем, на кого стоит подписаться, чтобы глубже погрузиться в сферу веб-дизайна.
Каналы в телеграме:
- @chulakov_design — команда известной дизайн-студии пишет про проектирование интерфейсов и дизайн систем;
- @mosinkru — здесь вы найдёте полезности про дизайн, пользовательский опыт и интерфейсы;
- @nowhow — на канале выходят обзоры сайтов с хорошим дизайном со всего мира.
Заключение
Figma — удобный и функциональный онлайн-редактор, который под силу освоить любому пользователю. В нём можно создать векторную графику, оформить макет поста для соцсети и баннера для сайта, разработать интерактивный прототип веб-сервиса или мобильного приложения.
Знакомство с редактором можно начать с просмотра серии бесплатных видеоуроков. А чтобы быстро и эффективно освоить все инструменты программы и на практике научиться разрабатывать интерактивные и детализированные интерфейсы — выбирайте подходящий вам курс по Figma из наших рекомендаций и проходите обучение под присмотром опытных веб-дизайнеров.
Я не могу представить работу над дизайном без Figma. Конечно, есть и Photoshop, который отлично выполнял свои функции. Когда-то. Но Figma значительно упрощает процесс разработки дизайна сайтов и приложений. Плюс дает возможность работать в команде и крайне быстро показывать свои наработки заказчикам и коллегам. В общем, без этого инструмента уже никуда и никак