курсы онлайн-обучения созданию и дизайну сайтов в Figma дистанционно для UX/UI и веб-дизайнеров – МАДП «ПЕНТАСКУЛ»

Чем вам будет полезен этот курс?

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

На курсе вы освоите инструменты Figma по подробным видеоурокам в формате скринкастов — записи экрана с комментариями эксперта. С первых занятий вы начнете практиковаться и создадите несколько проектов для портфолио. А после курса вы сможете найти первых клиентов и брать заказы на разработку прототипов в Figma.

Курс подойдет вам, если…

1. Вам интересна сфера веб-дизайна и вы хотите начать ее освоение с конкретного инструмента — редактора Figma.

2. Вы мечтаете о творческой работе и хотите уже через 3 месяца взять первые проекты на фрилансе.

3. Вы графический дизайнер и хотите предложить своим клиентам дополнительные услуги — создание прототипов сайтов и приложений.

4. Вы делаете первые шаги в веб-дизайне и пока не уверены в своих силах, поэтому хотите получить системные знания от экспертов.

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

6. Вам важно учиться у дизайнеров-практиков и получать обратную связь по каждой работе.

Почему Figma?

Вы сможете:

• Разрабатывать прототипы сайтов и приложений, не имея навыков программирования
• Создавать удобный для пользователей дизайн интерфейсов и адаптировать его для мобильных устройств
• Выполнять заказы на фрилансе и работать из любой точки мира

Доход

от 60 000 P

доход начинающего веб-дизайнера, работающего в Figma

от 15 000 P

стоит дизайн лендинга на фрилансе

Вакансии

более 1800

вакансий на HH. ru, где требуется владение Figma

более 1500

задач на фриланс-площадках (*по данным за 2022 год)

Практические работы на курсе

Лендинг для онлайн-школы

Интернет-магазин техники

Мобильное приложение онлайн-школы

Вы будете знать

1. Основные инструменты и возможности Figma для веб-дизайнера.
2. Основы работы с типографикой, цветом, композицией при создании прототипов.
3. Принципы работы с векторной и растровой графикой в Figma.
4. Правила адаптивной верстки сайтов для различных устройств.

Вы будете уметь

1. Разрабатывать в Figma прототипы лендингов, основных страниц интернет-магазина и мобильных приложений.
2. Делать созданные вами прототипы интерактивными.
3. Создавать UI-kit — набор элементов интерфейса.
4. Работать с FigJam и создавать мудборды для проектов.

Сертификат Московской академии дизайн-профессий Pentaschool

Как вы освоите Figma

Зачисляетесь, получаете доступ к личному кабинету

Смотрите видеоуроки в формате скринкастов (запись экрана) в удобные день и время

Изучаете предложенные нами дополнительные материалы по теме

Выполняете практические домашние задания и получаете доступ к следующим модулям

Получаете обратную связь от преподавателей — практикующих дизайнеров

Забираете лучшие работы в свое портфолио, проходите итоговое тестирование и получаете сертификат

Проекты студентов

Александр Лазарев
Лендинг детейлинг-центра

Александр Лазарев
Лендинг интернет-магазина

Шабнам Амирасланова
Лендинг интернет-магазина Daisy

Марина Соломина
Лендинг интернет-магазина Elma

Андрей Чучунков
Тренировка насмотренности — перерисовка сайта Ростелеком

Анна Врублевская
Лендинг курса английского языка

Лариса Виктурова
Лендинг курса английского языка

Лендинг услуги Интерактивная визуализация пространства для дома

Преподаватель курса

Программа обучения

Программа состоит из 3 модулей. Вы будете двигаться от основ Figma к созданию интерактивных прототипов сайтов и приложений для вашего портфолио.

• 1. Основы Figma

  Содержание курса:

  • Интерфейс и основные инструменты Figma
  • Оформление мудборда в FigJam
  • UX-дизайн. Настройка сетки и структура страницы в Figma, создание прототипа
  • Создание User-flow для лендинга
  • UI-дизайн. Работа с цветом, типографикой и изображениями
  • Адаптивный дизайн для веб-версии лендинга

  Задания на курсе:

  • Создать мудборд для лендинга в FigJam
  • Повторить макет формы обратной связи в Figma
  • Создать User-flow для лендинга
  • Создать прототип одностраничного сайта и настроить его компоненты
  • Настроить в прототипе текстовые и цветовые стили
  • Сделать адаптивную мобильную версию лендинга с опорой на видеоурок

  Результат:

  • Познакомитесь с основными инструментами Figma и научитесь создавать в программе прототипы лендингов

  3 часа теории

  9 часов практики

• 2. Дизайн сайтов в Figma

  Содержание курса:

  • Создание мудборда и User-flow, настройка сетки для интернет-магазина
  • Разработка главной страницы интернет-магазина в Figma
  • Разработка страниц каталога, результатов поиска и карточек товара в Figma
  • Разработка страниц корзины в Figma
  • Создание интерактивного прототипа
  • Цвет, изображения, анимация: как работать с векторной и растровой графикой в Figma
  • Подготовка UI-kit

  Задания на курсе:

  • Сделать настройку сетки и компонентов, как это показано в уроке
  • Сделать UX-прототип главной страницы интернет-магазина, как это показано в уроке, повторить все настройки
  • Сделать UX-прототип страницы каталога, страницы результата выдачи и карточки товара для вашего проекта
  • Сделать UX-прототип страниц корзины
  • Настроить для вашего прототипа стили, цвет и параметры текста
  • Сделать ваш прототип сайта интерактивным
  • Создать векторные иконки для сайта и настроить анимацию

  Результат:

  • Вы перейдете к созданию многостраничных сайтов, научитесь создавать их интерактивные прототипы и работать с основными типами страниц. Изучите принципы юзабилити и подготовите проект для портфолио

  8 часов теории

  12 часов практики

• 3. Дизайн мобильных приложений в Figma

  Содержание курса:

  • Особенности проектирования мобильных приложений и создание User-flow
  • Проектирование главной страницы приложения и результатов поиска
  • Подготовка к работе: настройка рабочей области
  • Создание прототипа главного экрана и структура страниц
  • Создание интерактивного UX-прототипа
  • UI-дизайн мобильного приложения в Figma

  Задания на курсе:

  • Создать каркасную модель мобильного приложения на основе приложенного брифа
  • Настроить интерактивный прототип, чтобы продемонстрировать логику взаимодействия с приложением
  • Оформить созданный прототип в дизайн-концепцию, создать стили для текста, графики и цветов

  Результат:

  • Вы научитесь собирать основные экраны мобильных приложений в Figma, настраивать компоненты и создавать интерактивные прототипы

  8 часов теории

  12 часов практики

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

• Intel HD Graphics 4000 (или позднее).
• Nvidia 330m (или позднее).
• ATI Radeon HD 4850 (или позднее).

Список изучаемых программ: 

• Figma

Бесплатно 

Ссылка на программу

Учебный план программы повышения квалификации «Дизайн интерфейсов в Figma» доступен по ссылке

Успейте присоединиться к ближайшему набору и получите полезные навыки со скидкой 35%

Должность
Дизайнер Figma

Зарплата от
60 000P

Ваши навыки по итогу обучения

• Разбираюсь в инструментах Figma, умею работать с текстом, изображениями, шейпами, модульными сетками.
• Создаю кликабельные прототипы сайтов.
• Умею разрабатывать дизайн мобильных приложений в Figma.
• Знаю, как оптимизировать информационную структуру сайта.
• Работаю с фотоконтентом, создаю баннеры в Figma.
• Умею готовить презентации проектов для заказчиков.
• Понимаю принципы композиции.

Отзывы студентов

Мехельсон Анна

Менеджер, Москва,

Учиться не всегда было просто из-за моей жизненной ситуации, так как у меня очень плотный график на работе, но с поддержкой команды академии мне удалось совместить учебу и работу. Хочу поблагодарить нашего ментора за классное сопровождение. Она много помогала с организацией учебного процесса, с закрытием хвостов, и решением вопросов, связанных с защитой диплома.

Читать полностью

20. 03.2021

Ачиткин Олег

Руководитель проектов, Санкт-Петербург

Хочу отметить, что процесс организован хорошо, все знания по программам даются структурированно, было много практики и общения. Несмотря на дистанционный формат, все организованно так, чтобы студент не оставался один на один с домашним заданием. Есть закрытые чаты в Телеграм с преподавателями, где можно задавать любые вопросы и читать разборы домашних работ. Коммуникации в Pentaschool я ставлю пять с плюсом. Также мне понравились закрытые воркшопы, на которых разбирали кейсы преподавателей, получая реальную информацию и проходя практику.

Читать полностью

27.02.2021

Колесова Инга

Маркетолог, Москва

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

Читать полностью

24.01.2021

Иванихина Елена

ИП, Новосибирск

Всем привет! Я – дизайнер и стараюсь постоянно прокачивать навыки новыми обучалками. В Pentaschool – это не первое мое обучение. Мне нравятся многие фишки этой онлайн-школы. Во-первых, это возможность учиться в любом месте и времени, я могу всю неделю заниматься работой, выделив на учебу только два дня, а могу сидеть над занятиями по ночам. Во-вторых, здесь преподают хорошие люди и профессионалы. В школе я узнала много клевых людей, это и преподаватели, и мои сокурсники. Все всегда готовы прийти тебе на помощь, если ты отстала или чего-то не поняла. В-третьих, на курсе есть такая опция, как поддержка после обучения. Для новичков в дизайне, делающих первые шаги в диджитал – это невероятно крутая штука, ведь если у тебя будут какие-то проблемы с дизайном, опытный наставник поможет их решить. Даже завидую, у меня такого не было в начале пути)

Читать полностью

29.01.2021

Кречетова Мария

Дизайнер, Пермь

Выбрала для себя школу Pentaschool из-за возможности обучения у практиков и постоянного доступа к материалам курса. Это очень круто, ведь курс постоянно обновляется, и я всегда получаю самую свежую информацию из первых рук. Много сил было вложено в практические задания, но моё портфолио и дипломную работу отметили эксперты, поэтому всё не зря!

Читать полностью

25. 03.2021

Почему Pentaschool

5 лет
специализируемся на обучении дизайнеров

5500
довольных студентов

4000
вебинаров в нашей базе знаний

91%
студентов рекомендуют обучение в Pentaschool по данным otzovik.com

• Бессрочный доступ к материалам курса после успешного завершения обучения
• Обратная связь от практикующих экспертов
• Входим в сообщество дизайнеров со всего мира

Учитесь выгодно

Стоимость обучения

Скидка

-35%
До 9 декабря

от 4 750 P

в месяц по рассрочке банка-партнёра

Рассрочка 0% без первого взноса и переплат

30 000 P

19 000 P

Срок обучения — 3 месяца Обучение с выдачей сертификата

В стоимость входит:

• более 30 видеоуроков по инструментам и возможностям Figma
• более 20 практических заданий с проверкой и персональной обратной связью от экспертов
• дизайн сайтов и мобильного приложения в Figma для портфолио
• бессрочный доступ к материалам курса после успешного завершения
• регулярные онлайн-вебинары
• доступ к библиотеке вебинаров на время курса и еще 90 дней после выпуска

Показать еще

Вы также можете позвонить нам самостоятельно по номеру 8 800 550-76-72

Звонок для вас абсолютно бесплатный

Вопросы и ответы

Да. Обучение построено таким образом, что вы сможете совмещать занятия с работой, заботой о семье или другими обязанностями.

Да. Этот курс подходит как для практикующих дизайнеров, у которых пока нет опыта работы с онлайн-сервисом Figma, так и для новичков. Для поступления вам не требуются специальные навыки или знания.

Конечно. Наши эксперты внимательно проверяют практические работы и дают развёрнутые комментарии.

Один видеоурок длится 15-20 минут. Если вы не хотите отстать от учебного плана, вам нужно уделять занятиям 2-3 часа в день.

Да. У нас вы можете оформить беспроцентную рассрочку. Вы сможете получить её даже в том случае, если вы не являетесь гражданином РФ.

Быстрый старт в Figma. Обзор интерфейса и основных инструментов

Как работать в Figma: разбираемся в интерфейсе и создаем первый макет в новой части гайда с Академией дизайн-профессий Pentaschool.

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

Шаг первый. Знакомство с главным меню

Чтобы начать работать в Figma, необходимо пройти регистрацию. После этого вам станут доступны основные инструменты редактора. Вы можете пользоваться как браузерной версией (это удобно, если вы запускаете Figma с разных устройств), так и приложением, которое можно скачать здесь. На главном экране вы увидите недавние файлы (вкладка Recents). Если вы новичок и пока еще не создавали проекты, на рабочем столе будут доступны только шаблоны, разработанные другими авторами. Как только вы сохраните свой первый макет или откроете файл, созданный другим пользователем, он отобразится на этом экране.

Главный экран рабочего стола Figma 

Находить файлы можно через поиск (строка Search в верхней панели). Отдельного внимания заслуживает раздел Community – в нем вы сможете искать шаблоны, иконки, иллюстрации и плагины, которые можно использовать при создании макетов.  

Примеры шаблонов из раздела Community 

Чтобы вернуться на главный экран из Community, кликните на иконку, расположенную в левом верхнем углу. 

Кнопка возврата на главный экран 

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

Меню настроек профиля в Figma 

Шаг второй. Создание макета

Для создания макета нажмите на кнопку New design file на рабочем столе или в панели Drafts. Перед вами откроется пустой бланк. Новый файл будет называться Untitled, но вы можете переименовать его, перейдя во вкладку Rename в меню Drafts или дважды кликнув по названию левой кнопкой мыши.

Панель Drafts в рабочем окне Figma

Основные объекты в Figma – фреймы. Фрейм – это рабочая область: экран мобильного приложения или страница сайта. Если вы знаете, для какого устройства будете создавать дизайн-макет, вы можете выбрать фрейм соответствующего размера. Для этого зайдите в меню Frame (значок решетки в левом верхнем меню). Справа откроется список доступных форматов.

Выбор доступных фреймов

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

Фреймы для смартфонов 

Одно из преимуществ Figma в сравнении с другими аналогичными программами – возможность совместной работы. Чтобы создать командный проект, вернитесь на главный экран (кнопка Back to files в верхнем левом углу). Далее нажмите на значок Create new team. 

Создание команды в Figma

Этим действием вы создаете команду, которой необходимо придумать название. После этого откроется окно, где вам будет предложено пригласить участников. Вы можете назначить их редакторами (они смогут изменять файлы) или же ограничить их доступ режимом просмотра. В бесплатной версии Figma права могут быть только у двух человек, включая вас. Если вы пока не знаете, кто будет участвовать в создании дизайна, пропустите этот этап – изменить список участников можно позднее. 

Создание команды

Командный проект представляет собой папку, в которой находятся файлы, относящиеся к вашему дизайну. В ней могут храниться десятки файлов. Каждая созданная вами команда может иметь несколько проектов одновременно, однако в бесплатной версии Figma можно создать не более 3-х совместных проектов. Если вы часто работаете в группе с большим числом участников (например, разработчиками, дизайнерами, менеджерами продукта), вам пригодится платная подписка, которую можно оформить на сайте редактора. 

Если же вы работаете самостоятельно и хотите просто предоставить доступ к вашему макету другому человеку, создавать командный проект не нужно. Достаточно выбрать файл и нажать кнопку Share в верхнем левом углу. Откроется окно, в котором вы сможете пригласить участников, указать, смогут ли они вносить изменения в макет, а также скопировать ссылку на проект. 

С помощью кнопки Share вы можете открыть доступ к файлу другим людям

Шаг третий. Работа с фигурами и текстом

При разработке практически любого макета используются примитивы – геометрические фигуры. С их помощью создаются иконки, кнопки и другие элементы дизайна. Чтобы добавить примитив в файл, выберите нужную фигуру в меню. Затем выделите область на макете, на которой вы хотите разместить объект. 

Выбор примитивов в Figma

Размещение примитива на макете

Как и в других векторных редакторах, например в Adobe Illustrator, при размещении примитива создается новый слой (layer). Вы можете редактировать фигуру – изменять размер, вращать, скруглять углы, менять ее положение на макете и т.д. Чтобы объект был правильной формы, при создании зажмите клавишу Shift. А если вы хотите создать сложную фигуру с большим количеством опорных точек, воспользуйтесь инструментом Pen.

Когда вы нажимаете правой кнопкой мыши на слой, открывается меню его настроек. В нем вы можете выбрать расположение слоя, скрыть/показать, сгруппировать, копировать и т.д. Но чтобы работать со слоями было быстрее и проще, используйте горячие клавиши. Посмотреть список горячих клавиш легко – нажмите на значок вопроса, который находится в нижнем правом углу. В открывшемся меню выберите кнопку Keyboard shortcuts. 

Просмотр горячих клавиш 

Еще одна функция, которая упрощает работу с примитивами – использование модульных сеток. С их помощью вы сможете быстро выровнять элементы на макете. Чтобы включить сетку, выберите фрейм и нажмите на значок «+» рядом с кнопкой Layout grid. Автоматически будет создана простая сетка с шагом в 10 пикселей, но вы можете регулировать этот параметр – например, выбрать Rows (горизонтальное деление) или Columns (вертикальное), изменить размер шага, комбинировать несколько сеток в одном документе.

Создание модульной сетки 

В созданные примитивы вы можете загружать изображения с вашего жесткого диска. Для этого используйте функцию Place image или перетащите картинку из папки в выделенный примитив.

Размещение изображения внутри примитива

При добавлении текста (кнопка T в верхнем левом углу) вы также создаете новый слой в выбранной области на макете. 

Создание текстового слоя 

Когда вы выделяете текстовую область, справа открывается панель настроек текста. Вы можете выбрать шрифт (в Figma представлены все шрифты из библиотеки Google Fonts, но также возможно добавить другие шрифты с помощью дополнения Figma Font Helper), начертание (жирный, курсив, обычный), кегль, цвет, расстояние между буквами, выравнивание и другие настройки.

Панель настроек текста в Figma

Шаг четвертый. Работа с цветом

По умолчанию все фигуры в Figma окрашены в серый. Чтобы изменить цвет заливки, выберите слой, перейдите в меню Fill (находится справа) и кликните на квадрат с цветом. Откроется цветовой круг. Вы можете выбрать цветовую модель, например RGB. Ввести код цвета можно вручную, воспользоваться пипеткой или же просто кликнуть на подходящий оттенок. Чтобы изменить прозрачность, поменяйте значение в окне, находящемся справа от значения цвета (в примере указан показатель 100%).

Настройки заливки фигуры

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

Создание градиента в Figma 

Вы также можете управлять обводкой фигур. Чтобы добавить обводку, нажмите на знак «+» рядом с кнопкой Stroke. 

Создание обводки (Stroke) 

В панели настроек можно выбрать толщину линии, ее цвет, местоположение, указать, какой тип линии нужен (пунктир или неразрывная). 

Дополнительные возможности Figma 

Возможности Figma не ограничены стандартным набором инструментов. С помощью плагинов (дополнительных модулей) вы можете значительно расширить функционал редактора – например, добавить возможность загрузки изображений прямо со стоков, создавать анимацию, генерировать диаграммы для инфографики и другое. Полный список плагинов вы найдете в разделе Community. Также вы всегда можете использовать шаблоны и элементы дизайна, представленные в библиотеке редактора.

Чтобы создавать современные, гармоничные и удобные сайты в Figma, не нужно разбираться в программировании или иметь художественное образование. В Академии дизайн-профессий Pentaschool вы с нуля освоите редактор на курсе Figma, выполните первые проекты, научитесь создавать профессиональный дизайн сайтов, получите рекомендации от экспертов и соберете портфолио, благодаря которому сможете найти заказчиков уже во время обучения. Программа разработана специально для начинающих – даже если вы никогда не занимались дизайном, вы получите все знания и навыки, необходимые для старта. 

А в следующей части нашего гайда мы подробнее поговорим о плагинах и расширенных возможностях редактора. Вы узнаете, как устанавливать дополнения Figma и какие плагины могут пригодиться каждому дизайнеру.

Цены на бесплатный, профессиональный и организационный планы Figma.

О Figma, инструменте для совместной разработки интерфейсов.

О Figma, инструменте для совместной разработки интерфейсов. Figma

Универсальная платформа для дизайна

ДизайнПрототипированиеДизайн-системыЗагрузки

FigJam

Онлайн-доска для команд

Онлайн-доскаДизайн-процессыГрупповые встречи

ОбзорКлиентыКонтакты Отдел продаж

Ценообразование

Файлы и шаблоны, которые можно мастерски дублировать, создавать ремиксы13 Бесплатно 9014 Файлы и шаблоны

Файлы и шаблоны

используйте

Плагины и виджеты

Расширьте возможности и автоматизируйте работу

События и прямые трансляцииЛучшие практикиОбразовательная программаГруппы пользователей

FrançaisDeutsch日本語

ВойтиНачать работу

Начать работу

Начать работу

В 2011 году взорвалась лампочка.

Можно ли создать инструменты для дизайнеров в Интернете?

Мы знали, что если нам это удастся…

больше людей из большего количества мест смогут получить доступ к мощным инструментам проектирования

любой человек в мире сможет, наконец, работать вместе над одним проектным файлом

и такие вопросы, как «где окончательный вариант?» останется в прошлом

Мы начали экспериментировать с возможностями браузера.

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

Эван Уоллес
WebGL Water , 2011 Браузер

В 2015 году родился первый инструмент дизайна, сочетающий доступность Интернета с функциональностью нативного приложения. И мы сделали это бесплатным для всех, чтобы начать .

Эван Уоллес и Дилан Филд
Figma 1.0 , 2015 Браузер

Не все были такими оптимистичными, какими мы были.