фигма создание сайта обучение
20 бесплатных онлайн-курсов по Figma
Для начинающих с нуля в 2021 году.
1. «Figma. Начальный уровень» от GeekBrains
Длительность: 5 уроков, каждый по 30 минут.
Формат: видеоуроки + домашние задания.
Программа обучения:
Чему научитесь: пользоваться графическим редактором Figma на базовом уровне и с его помощью делать несложные макеты сайтов.
Преподаватель: Илья Полянский. Ведущий дизайнер цифровых продуктов в «Почте России». Опыт работы — 7 лет.
💰 На правах рекламы. «Профессия UX/UI-дизайнер» от Contented 💰
Продолжительность курса: 9 месяцев.
Документ об окончании: удостоверение о повышении квалификации установленного образца.
Формат: видеоуроки + домашние задания с проверкой и обратной связью от личного наставника + общение с другими студентами в закрытом комьюнити + удалённая стажировка.
Программа обучения:
Чему научитесь:
2. «Основы Figma» от «Нетологии»
Длительность: 16 лекций общей продолжительностью 17 часов, 7 из них уделено теории, а оставшиеся практике.
Формат: видеолекции и упражнения.
Программа:
Чему научитесь:
3. «Бесплатный курс: Веб-дизайн с нуля» от YouTube-канала «Уроки Web, Mobile и UI/UX дизайна в Figma»
Длительность: 84 урока, продолжительность от 10 секунд до 10 минут.
Формат: видеоуроки.
Программа обучения: студенты рассмотрят все аспекты работы с Фигмой, начиная от установки и запуска программы и заканчивая проектированием адаптивного дизайна.
Чему научитесь:
4. «Курс Figma» от YouTube-канала «Наука Дизайна»
Длительность: 15 уроков, продолжительность каждого 5–25 минут.
Формат: видеоуроки.
Программа обучения: манипуляции с объектами, слои и маски, сетки и направляющие, а также другие темы, которые необходимо знать для прототипирования.
Чему научитесь:
5. «Уроки Figma» от UX Mind School
Длительность: 12 уроков, продолжительность 5–20 минут.
Формат: видеоуроки.
Программа обучения: слушатели узнают об азах работы с популярнейшим графическим редактором, а также несколько лайфхаков от профессионального веб-дизайнера.
Чему научитесь:
6. «Бесплатный подробный курс по Фигме» от Алексея Бычкова
Длительность: 21 урок, продолжительность 5–25 минут.
Формат: видеоуроки.
Программа обучения: студентам предстоит познакомиться с Figma и понять принцип её работы. Основные темы: панель слоев, модульная сетка, привязки, цвет, эффекты. Слушатели узнают, как установить плагины в Фигме и как создать ссылку на проект.
Чему научитесь:
Автор курса: Алексей Бычков — дизайнер со стажем более 17 лет. Автор двух книг по дизайну. Основал онлайн-школу по веб-дизайну.
7. «Figma» от Алексея Бычкова
Длительность: 36 уроков, продолжительность 2–40 минут.
Формат: видеоуроки.
Программа обучения: учащиеся узнают о различных плагинах для Фигмы, в том числе и FigJam. Также слушатели узнают о «фишках» профессионального веб-дизайнера. В конце курса преподаватель на примерах покажет, почему Figma лучше, чем Photoshop.
Чему научитесь:
Автор курса: Алексей Бычков.
8. «Уроки Figma» от Дениса Тимошицкого
Длительность: 22 урока, продолжительность 2–36 минут.
Формат: видеоуроки.
Программа обучения: в курс включены создание логотипа, дизайна мобильного приложения и многостраничного сайта. Студенты узнают о компонентах Фигмы, создании якорных ссылок и горячих клавишах.
Чему научитесь:
9. «Дизайн многостраничного сайта в Figma» от Дениса Тимошицкого
Длительность: 17 уроков, продолжительность 20–35 минут.
Формат: видеоуроки.
Программа обучения: на курсе детально рассматривается тема проектирования многостраничного сайта с помощью Фигмы.
Чему научитесь:
10. «Дизайн интернет-магазина в Figma» от Дениса Тимошицкого
Длительность: 8 уроков, продолжительность 10–40 минут, также есть видео, которое длится 70 минут.
Формат: видеоуроки.
Программа обучения: в курс включены отрисовка главной страницы, каталога и карточек товаров, служебных страниц. Также студенты рассмотрят создание UI-кита — инструмента, ускоряющего разработку дизайна.
Чему научитесь:
11. «Проектирование и дизайн мобильного приложения» от Дениса Тимошицкого
Длительность: 15 уроков, продолжительность 15–25 минут.
Формат: видеоуроки.
Программа обучения: слушатели узнают о нюансах проектирования дизайна мобильных приложений.
Чему научитесь:
12. «Дизайн и вёрстка из Figma в HTML + CSS + JS» от Дениса Тимошицкого
Длительность: 5 уроков, продолжительность 17–40 минут.
Формат: видеоуроки.
Программа обучения: на курсе подробно разбирается создание первого экрана сайта и его последующая вёрстка.
Чему научитесь:
13. «Бесплатные уроки по Figma» от Евгения Смольского
Длительность: 20 уроков, продолжительность 2–17 минут.
Формат: видеоуроки.
Программа обучения: студенты узнают о горячих клавишах, которые ускорят работу в Фигме. Познакомятся со стилями, с компонентами и размытым градиентом. Также в курс включены занятия по созданию дизайна мобильного приложения.
Чему научитесь:
14. «Уроки Figma» от Moscow Digital Academy
Длительность: 12 уроков, продолжительность 4–27 минут, также есть один ролик, который идёт 60 минут.
Формат: видеоуроки.
Программа обучения: студенты познакомятся с Фигмой, создадут первый прототип и превратят его в красивый сайт.
Чему научитесь:
15. «Уроки Figma» от YouTube-канала Disarto
Длительность: 29 уроков, продолжительность 5–50 минут.
Формат: видеоуроки.
Программа обучения: проектирование музыкального приложения, прототипирование и анимация. Детальный курс, в котором рассматриваются темы, необходимые для понимания Фигмы, в том числе фреймы и группы, слои и ограничения, стили и сетки. Учащиеся рассмотрят различные плагины Figma и научатся их использовать в работе.
Чему научитесь:
16. «Уроки Figma» от Figma.Center
Длительность: 107 уроков, основная часть роликов длится 1–5 минут, но есть и несколько больших видеоуроков по 30–60 минут.
Формат: видеоуроки.
Программа обучения: максимально подробный курс, на котором рассматриваются все темы, нужные для работы с Фигмой. Слушатели узнают, что такое мокапы, прототипы и варфреймы. Познакомятся с плагинами.
Чему научитесь:
17. «Уроки Figma» от GloryANT
Длительность: 12 уроков, продолжительность 4–8 минут.
Формат: видеоуроки.
Программа обучения: в курс включены фигуры, слои, сетка, ограничители, стили и эффекты. Также учащиеся познакомятся с FigJam.
Чему научитесь:
18. «Figma уроки» от Амира Исламова
Длительность: 13 уроков, продолжительность 5–25 минут.
Формат: видеоуроки.
Программа обучения: слушатели познакомятся с Фигмой, создадут свой первый сайт, научатся пользоваться различными плагинами и узнают о лайфхаках, облегчающих работу.
Чему научитесь:
19. «Уроки Figma для новичков и джедаев» от Виктора Теплова
Длительность: 35 уроков, продолжительность 1–25 минут.
Формат: видеоуроки.
Программа обучения: курс познакомит учащихся с различными секретными техниками профессионального дизайнера и расскажет о плагинах, упрощающих работу. Главные темы: умные таблицы, компоненты, Auto Layout, иконки и логотипы. Слушатели смогут оптимизировать рабочий процесс и создавать дизайн быстрее.
Чему научитесь:
20. «Уроки по Figma» от YouTube-канала «Дизайн Легко!»
Длительность: 11 уроков, продолжительность 20–50 минут.
Формат: видеоуроки.
Программа обучения: в курс включены артборды, модульная сетка, градиенты, маски. Студенты узнают, как правильно размещать текст и создавать векторные формы.
Чему научитесь:
Профессиональный копирайтер. Более 100+ работ в портфолио. Пишу про онлайн-образование.
Дизайн сайта в фигме за 15 минут: делаем макет с иллюстрациями
В этом уроке разбираемся как сделать дизайн сайта в фигме за 15 минут на практике. Будем делать дизайн макет Landing Page с иллюстрациями. Вы узнаете, где брать качественные иллюстрации бесплатно и как их использовать в своём проекте.
Подготовка к созданию дизайна сайта
Первым делом вам нужно скачать и установить комплект, который я для вас подготовил. С его помощью вы сможете ускорить работу при создании Landing Page. Нажмите здесь, чтобы скачать комплект
Чтобы установить комплект перейдите в раздел «Drafts» и перетащите его к другим файлам, которые у вас есть. Также слева, сверху есть иконка «Import». Можете её нажать и выбрать файл «Sirius.fig» на вашем компьютере.
Установка плагина с иллюстрациями для создания дизайна сайта в фигме
В этом уроке мы будем использовать плагин с иллюстрациями «Storyset by freepik», который вы можете установить перейдя по ссылке. Для его установки нажмите на кнопку «Install» сверху, справа.
Пошаговая инструкция по созданию дизайна сайта в Figma
Создание первого экрана
Первым делом, вам нужно взять элементы из комплекта, который вы ранее установили. Рекомендую взять шапку и раздел с текстом, как показано выше. Поместите шапку к тексту.
Чтобы активировать плагин, который мы установили «Нажмите на меню слева», далее перейдите в «Plagins» и выберите из списка «Storyset by freepik».
В плагине можно выбрать стиль иллюстраций. Выбираю первый из списка, затем клацаю на нужную мне иллюстрацию.
Помещаю иллюстрацию во фрейм к нашим элементам и тексту.
Выбираю фрейм и в правой панели, внизу надписи «Fill» ставлю значение цвета #241543.
Затем меняю цвет текста на белый.
Удаляю не нужные элементы в иллюстрации. Чтобы выбрать какой-то элемент, нажимаю на клавшу «Ctrl» и кликаю на левую клавишу мыши для выбора объекта за 1 клик.
Создаю круг с помощью инструмента «Ellipse».
Помещаю круг во фрейм и перемещаю на задний план. Для этого нажимаю на комбинацию горячих клавиш «Ctrl + Alt + [».
Изменяю цвет круга на #3B246B.
Создание карточек внизу первого экрана
Затем копирую из комплекта карточки товара. Для копирования нажимаю «Ctrl + C».
Чтобы вставить элементы нажимаю «Ctrl + V».
Копирую верний элемент из карточки зажав левую клавиши мыши и клавишу Alt. Тяну в сторону.
Создаю внутри этого прямоугольника ещё один прямоугольник. Для этого активирую инструмент «Rectangle» сверху.
Выбираю 2 элемента и выравниваю их относительно друг друга, нажав на иконки, как показано выше.
Выделяю 2 прямоугольника, нажимаю правую клавишу мыши и выбираю «Frame seleciton».
Переименовываю слой на «Img».
Копирую группу элементов с зажатой клавишей «Alt».
В итоге создаю 6 прямоугольников, как показано выше.
Запускаю плагин с иллюстрациями «Storyset by freepik» и нажимаю на прямоугольник. Затем на иллюстрацию. Аналогичную операцию проделываю с другими 6 прямоугольниками.
Выбираю кнопки и цены, с зажатыми клавишами «Ctrl» «Shift». Затем удаляю нажав на клавишу «Backspace».
Получаются карточки, без цены и кнопки.
Перемещаю созданные прямоугольники с иллюстрациями между прямоугольниками, которые находятся в карточках товара.
Удаляю не нужные элементы сверху карточек. Получается 3 карточки с иллюстрациями.
Дублирую карточки, нажав на «Ctrl + D». Затем помещаю 3 оставшиеся иллюстрации в эти карточки.
Получилось 6 карточек с иллюстрациями.
Перемещаю карточки к нашему фрейму.
Изменение цвета в дизайне сайта с иллюстрациями в Figma
Далее выбираю иллюстрации и справа, внизу надписи «Selection colors» выбираю синий вместо того синиего цвета, который есть сейчас.
Все элементы имеют значение «Синий» в цветовой палитре.
Если его изменить например на розовый, то цвет всех элементов также изменится.
Можно дополнительно скопировать какие-то элементы в комплекте. Например текст с цифрами.
Затем разместить их внизу заголовка.
Удаляю подзаголовок и меняю цвет вставленного текста на белый.
Вот, что получается в итоге использования этих иллюстраций, плагина и комплекта, который я для вас подготовил. Как сделать страницы с ошибкой 404 смотрите в видео выше.
Заключение
Итак, в этом видео вы узнали как сделать сайта (дизайн лендинг пейдж) в фигме. Также разобрались с плагином, который позволяет вставлять классные иллюстрации. Смотрите другие уроки по веб-дизайну, которые помогут разобраться в программе Figma и набить руку.
20 лучших курсов по Figma (онлайн обучение)
2 комментария 04.12.2019 обновлено 3 месяца назад
Все больше UX/UI и веб-дизайнеров переходят с Photoshop или Sketch на Figma. Это новый, более удобный и функциональный редактор для прототипирования.
Мы подобрали 10 платных и 10 бесплатных онлайн-курсов по Figma на русском языке. Выбирай подходящий для себя курс и научись создавать прототипы, интерфейсы для сайтов и приложений.
Наш ТОП
Платные онлайн-курсы по Figma
Платные курсы — это:
Онлайн-курс «Figma для дизайнера» от Skillbox
Длительность курса:
2 месяца. 8 обучающих модулей.
Стоимость обучения:
20 000 руб.
Домашние задания:
с проверкой.
Общение с наставником:
есть.
Документ по окончании:
диплом Skillbox.
Отзывы в интернете:
отзывы Skillbox, а так же на сайтах
Google, Яндекс, Facebook.
Научись использовать инструменты, библиотеки и создавать готовые макеты в Figma. Для обучения надо выделить 3-5 часов в неделю. Преподаватель проверяет домашние задания, а в конце студенты защищают дипломный проект, который дополнит портфолио.
Автор курса:
Антон Рыбаков
10 лет опыта. Разрабатывал дизайн мессенджеров, мобильных приложений, каталогов, health-сервиса и личных кабинетов веб-ресурсов.
Клиенты: Сбербанк, Mail.ru, Capital group, Ростелеком, Quelle, johnson & johnson.
Курс обучения Figma состоит их 8 блоков:
Нюансы:
«Вводный курс по работе с графическим редактором Figma» от Geekbrains
Длительность курса:
6 видеоуроков.
Стоимость обучения:
5 900 руб.
Домашние задания:
без проверки.
Общение с наставником:
нет.
Документ по окончании:
нет.
Отзывы в интернете:
на специальной странице
и на площадках Google, Яндекс, Facebook.
Отзывы о курсе на оф. странице.
Научись работать с фигурами и компонентами. Начни разрабатывать прототипы лендингов, интерфейсы, кнопки. Видеокурс знакомит с графическим редактором и учит использовать его основные инструменты.
Студенты пройдут 6 уроков:
Нюансы:
Видеокурс по Figma «I believe I can design» от Udemy
Длительность курса:
29 лекций. 2,5 часа видеоуроков.
Домашние задания:
практика без проверки.
Общение с наставником:
нет.
Документ по окончании:
сертификат.
Отзывы в интернете:
на оф. странице курса.
«I believe I can design» — это вводный видеокурс, который учит создавать дизайн лендингов и приложений. Купи курс и получи пожизненный доступ к видеоурокам по Figma, чтобы всегда иметь под рукой шпаргалку. Просмотр уроков возможен через компьютер, смартфон и телевизор.
Автор курса:
Анастасия Мариничева
https://dribbble.com/anmarinicheva
UI/UX Designer. Судья на Awwwards и A Design Award.
5 лет в дизайне. На портале Udemy Anastasia Marinicheva является автором только одного курса. Практикующий дизайнер работает с интерфейсами и пользовательским опытом.
Подпишись также на Instagram профиль автора курса.
Примеры работ автора курса:
Программа состоит из 5 блоков, по 2-8 лекций в каждом:
Нюансы:
Смотри также наши подборки:
Курс «Figma для UI/UX дизайнера» от Специалист.ru
Длительность курса:
8 дней. 24 ак. часа.
Стоимость обучения:
15 990 руб.
инд. обучение — 63 600 руб.
Домашние задания:
с проверкой.
Общение с наставником:
есть.
Документ по окончании:
удостоверение или свидетельство.
Отзывы в интернете:
Яндекс, Yell.
Ты может записаться на онлайн формат или пройти очный курс Figma в Москве. В программу входят 24 часа лекций, 3 лабораторных работы, 3 домашних задания и 1 итоговый проект. После обучения ты сможешь разрабатывать дизайн сайтов и с легкостью решать разные дизайнерские задачи в Figma.
Автор курса:
Бредова Елена Александровна
20 лет опыта в разработке сайтов. Работала в «Студии Артемия Лебедева» и много проектов вела на фрилансе. Владеет 5 графическими редакторами и технологиями разработки сайтов.
Елена Бредова также ведет курсы по веб-дизайну, usability и СЕО-продвижению. Отзывы о преподавательской работе ты найдешь на сайте специалист.ру.
Примеры работ автора курса:
Обучающая программа состоит из 4 модулей:
Нюансы:
Онлайн-курс «Наука Интерфейсов» от Наука Дизайна
Длительность курса:
3 месяца. 55+ уроков.
Стоимость обучения:
39 900 руб.
Домашние задания:
с проверкой.
Общение с наставником:
есть.
Документ по окончании:
сертификат.
Отзывы в интернете:
на оф. странице курса.
На курсе 80% практики. После изучения теоретического материала, студенты проходят тесты и выполняют домашнее задание. Работы проверяются автором курса, который также поможет с трудностями. Выпускники получают сертификат и 2 кейса в портфолио: дизайн сайта и мобильного приложения. Курс учит аналитике, дизайну, верстке и UX/UI.
Автор курса:
Роман Горелик
https://vk.com/gaaloo
Основатель школы «Наука Дизайна». Преподаватель в МГТУ.
В обучающие программы внедряет научный подход для быстрого достижения целей. На практике Роман работал над разными видами дизайна: интерфейсы, иллюстрация, брендинг и айдентика, дизайн интерьеров, моушн-дизайн.
Подпишись также на Instagram профиль основателя «Наука Дизайна».
Примеры работ автора курса:
Программа включает в себя 8 блоков и дополнительные материалы:
Нюансы:
Видеокурс «Веб-дизайн + верстка» от Webformyself
Длительность курса:
2 месяца. 66 видеоуроков.
Стоимость обучения:
5 970 руб.
Домашние задания:
практика без проверки.
Общение с наставником:
нет.
Документ по окончании:
нет.
Научись создавать сайты «под ключ». Видеокурс включает в себя 2 раздела — Дизайн и Верстка сайтов. Поэтому ты рассмотришь не только графический редактор Figma, но и технологии работы верстальщика, как HTML5, CSS3, CSS Grid/Flexbox Layout, CSS Sass. На обучение достаточно отводить 2-3 часа в день. По завершению курса ты пополнишь свое портфолио.
Автор курса:
Даниил Волосатов
9 лет опыта в дизайне. Владеет 4 графическими редакторами. Завершил до 2000 дизайнерских проектов и обучил более 1000 студентов веб-дизайну. Сегодня доход дизайнера около 200 000 руб./мес.
Переходи также на личный сайт-портфолио и коммерческий сайт автора курса.
Примеры работ автора курса:
Учебная программа разбита на 4 блока:
Нюансы:
Онлайн-курс «Тест-драйв: Photoshop и Figma» от W.D.i
Длительность курса:
9 дней. 29 видео уроков.
Стоимость обучения:
3 900 руб.
Домашние задания:
практика без проверки.
Общение с наставником:
только видео-разбор итоговой работы.
Документ по окончании:
нет.
Отзывы в интернете:
В Facebook и Vk.com.
Студенты смотрят лекции на онлайн-платформе, выполняют практические задачи и получают обратную связь в конце обучения. Это вводный онлайн-курс, который даст первый кейс в портфолио и поможет определиться с направлением работы. Видеокурс учит создавать веб-дизайн для десктоп и мобильных версий сайтов. Программа курса разбита на 2 секции.
Всего за 9 дней студенты пройдут:
Нюансы:
Экспресс-курс «Figma с нуля» от W.D.i
Длительность курса:
4 видеоурока.
Стоимость обучения:
900 руб.
Домашние задания:
практика без проверки.
Общение с наставником:
нет.
Документ по окончании:
нет.
Отзывы в интернете:
Vk.com, Facebook.
Недорогой, короткий видеокурс познакомит с графическим редактором Figma для создания интерфейсов. Уроки доступны только для самостоятельно изучения, без поддержки преподавателя. Видео лекции придут на электронную почту после оплаты.
Экспресс-курс по Figma включает в себя 4 урока:
Нюансы:
Бесплатные курсы и уроки по Figma онлайн
Подборка из 21 бесплатного урока по Figma от Даниила Волосатова — веб-дизайнера студии Фотошоп-Мастер. Уроки знакомят с инструментами, стилями, слоями, компонентами, плагинами и другими возможностями графического редактора.
Бесплатный онлайн-курс с чатом в Телеграм «Веб-дизайн в Figma с нуля и не только» научит основам создания макетов. Уроки доступны в плейлисте на youtube. На сайте figmadesign.ru есть также много другой полезной информации по Фигма.
«Бесплатный курс по Фигме» от автора проекта Хелп по Фигме — это 20 интересных видеоуроков. На лекциях ты рассмотришь все этапы создания макета: рабочая область, слои, компоненты, плагины, цвет, прототипирование и экспорт проекта.
Курс «Figma» на youtube от студии Наука Дизайна. Это 15 бесплатных лекций. На уроках представлены все функции Figma на момент обновления 02.2019. Курс начинается со знакомства с инструментами, и заканчивается на экспорте готового проекта.
Плейлист на youtube «Уроки Figma» от Школы дизайна – UX Mind School. Это 12 обучающих роликов, которые учат работать с основными инструментами, сеткой, компонентами, текстом, изображениями, прочее. Отдельный урок рассказывает про горячие кнопки Figma.
Бесплатный «Вводный курс по Figma» представлен 8 лекциями. Они помогут создать дизайн страниц интернет-магазина: главная и служебные страницы, карточки и каталог товаров, а также отрисовка UI-кита. Уроки доступны на FIGMA.INFO.
Курс «Веб-дизайн за 1 месяц» — это 4 большие лекции бесплатно. Уроки учат создавать Mood Board, прототипы, макеты, и подскажут, как развиваться в сфере веб-дизайна. Видео доступны на youtube (перейди по ссылке на странице курса на FIGMA.INFO).
На сервисе FIGMA.INFO доступны отдельные бесплатные уроки по Figma на русском языке. Узнай топ ошибок веб-дизайнеров, или научись создавать прототип главной страницы магазина, или же освой работу с сеткой, линейками и направляющими.
На GeekBrains также есть отдельные бесплатные вебинары по Figma. Вебинары будут полезными дизайнерам и верстальщикам. Это дополнительные учебные материалы для практикующих специалистов, а не обучающий курс.
Figmaweb.com — это обучающий портал по Фигма с бесплатными материалами. На youtube-канале студии доступны 18 уроков по Figma. Плейлист условно можно разделить на 2 блока: основы работы в редакторе и создание мобильного приложения.
Тебе также может быть интересно:
Автор, руководитель творческой группы. Чел, который отвечает на каждый ваш вопрос.