Сафаргалин Загир Уралович

преподаватель

АУ

«Нефтеюганский политехнический колледж»

г.Нефтеюганск, Ханты-Мансийского автономного округа – Югры

Применение онлайн-редактора Фигма в системе

организации обучения студентов

Для чего нужна Фигма

В Фигме могут работать веб-дизайнеры, маркетологи, менеджеры и

разработчики. В этом разделе расскажем об основных сценариях использования

сервиса и его преимуществах перед другими графическими редакторами.

Как фигма помогает в обучении студентов. Колледж обучает студентов по

специальности информационные системы и программирование. Обучающиеся

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

экзамен по направлению создания сайта. Для обучения и практики студентов по

созданию сайта очень хорошо помогает Figma (Фигма).

Figma (Фигма) — это графический онлайн-редактор для совместной

работы. В нём можно создать прототип сайта, интерфейс приложения и

обсудить правки со студентами в реальном времени. В этой статье рассмотрим

инструменты и возможности Фигмы, популярные плагины и расскажем, где

научиться работать с сервисом бесплатно.

Прототип — это модель сайта или приложения. С ней заказчику проще

оценить, как люди будут пользоваться продуктом. Чтобы создать прототип

сайта, дизайнер отрисовывает экраны и создаёт связи между ними.

В

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

смартфона, планшета и других устройств.

Интерфейс

Элементы интерфейса — это внешний вид продукта. В Фигме можно

создать кнопки, иконки, формы обратной связи и настроить эффекты: сделать

кликабельные кнопки, раскрыть списки, создать анимацию для блоков и

попапов.

Для того чтобы для студента отправить макеты фигмы. Необязательно

каждый раз создавать новый, новые макеты можно вполне легко найти в

интернете. Рассмотрим пример создания макета фигмы.

Подготовка к созданию дизайна сайта

Первым делом скачиваем и устанавливаем комплект. С его помощью

можно ускорить работу при создании Landing Page. Чтобы установить комплект

переходим в раздел «Drafts» и перетаскиваем его к другим файлам, которые у

нас есть. Также слева, сверху есть иконка «Import».

Установка плагина с иллюстрациями для создания дизайна сайта в

фигме

В этом уроке мы будем использовать плагин с иллюстрациями «Storyset by

freepik», который вы можете установить Для его установки нажмите на кнопку

«Install» сверху, справа.

Пример создания дизайна сайта в Figma

Первым делом, берем элементы из комплекта, который мы ранее

установили. Рекомендую взять шапку и раздел с текстом, как показано выше.

Помещаем шапку к тексту.

Чтобы активировать плагин, который мы установили «Нажимаем на меню

слева», далее перейдём в «Plagins» и выбираем из списка «Storyset by freepik».

В плагине можно выбрать стиль иллюстраций. Выбирам первый из списка,

затем нажимаем на нужную нам иллюстрацию. Помещаем иллюстрацию во

фрейм к нашим элементам и тексту.

Выбираем фрейм и в правой панели, внизу надписи «Fill» ставим значение

цвета #241543. Затем меняем цвет текста на белый. Удаляем не нужные

элементы в иллюстрации. Чтобы выбрать какой-то элемент, нажимаем на

клавшу «Ctrl» и кликаем на левую клавишу мыши для выбора объекта за 1

клик.

Вот, что получается в итоге использования этих иллюстраций, плагина и

комплекта для создания примера сайта в фигме.