Уроки Figma для начинающих: бесплатные видео для домашнего обучения
Популярность онлайн-сервиса для разработки интерфейсов и прототипов обусловлена удобством, многофункциональностью и практичностью. Работать можно в браузере, скачивания не требуется, для одного пользователя разрешен бесплатный доступ с минимальными ограничениями, а после оплаты в Фигма появляется возможность подключения к проекту заказчиков и коллег.
Мы подобрали лучшие уроки для начинающих по основам Figma для самостоятельного изучения на дому. В статье собраны видео, которые ускорят процесс освоения сервиса, помогут научиться проектировать, создавать компоненты, применять плагины.
Первое знакомство
YouTube-канал Toolbar предлагает желающим освоить азы Figma. Информация доносится доступным языком, подкрепляется наглядной демонстрацией экрана. Преподаватель покажет, где находится поиск по документам, отображение последних файлов, черновики, панель опций и слоев. Затем перейдет на обзор инструментов. Приводится местоположение и назначение «Линии», «Стрелки», «Эллипса», «Многоугольника», «Звезды», «Пера», «Карандаша». Объясняется, за что отвечают настройки «Фрейм», как скруглять углы геометрических фигур, применять точки модификации. Перечисляются горячие клавиши, позволяющие парой нажатий вызвать нужную функцию.
С чего начать?
Анна Блок упомянет сильное преимущество программы, продемонстрирует интерфейс в приложении и в браузере, объяснит, как передать ссылку разработчику, открыть полученную ссылку, загружая макет. Затем Анна проведет краткий обзор, позволяющий новичкам быстрее сориентироваться. Она покажет принцип зуммирования, местонахождение панели, отображающей слои, информационной панели (просмотр/извлечение данных), покажет инструменты для изменения выбранного поля, добавления текста, управления пером, оставления комментариев при работе с другим человеком. Для лучшего усвоения покажет применение на примере.
Главная страница интернет-магазина
На примере интернет-магазина электроники Денис Тимошицкой продемонстрирует отрисовку главной страницы. Отсутствие монтажа позволит новичкам проследить за манипуляциями в режиме реального времени, уловить ход мыслей автора, вместе с ним разобраться с допущенными ошибками. Денис объяснит, что такое встроенные стили, как сделать обводку/подчеркивание элемента, создать логотип, работать со шрифтом, оформлять иконки, карточки категорий (новостной раздел, подвал), изменять векторный объект, делать графу поиска, окрашивать текст, варьировать прозрачность подложки.
Сетка Bootstrap
Максим Солдаткин, выпускник Британской высшей дизайнерской школы, создал собственный обучающий проект и видеоблог, где публикуются курсы разных преподавателей. Этот ролик – урок Алексея (куратор школы Максима Солдаткина), где рассказывается о применении сетки Bootstrap и ее скачивании, объясняется, почему она состоит из 12 колонок, каких правил придерживаться в процессе работы. Приводятся особенности отображения на адаптивных устройствах. Тема разбирается на примере (Алексей взял для этой цели адаптивный сайт), что даст возможность начинающим вникнуть в суть, быстрее понять тонкости и нюансы.
Glassmorphism
Эксперименты с дизайнами, постоянный поиск решений, привлекающих внимание пользователей к веб-странице новизной, приводит к появлению интересных вариантов оформления. Одним из таких новшеств стал глассморфизм (стекломорфизм), пришедший на смену неоморфизму. Попробовать свои силы в создании стекломорфизма поможет видеоурок Алексея Быкова. Алексей показывает, как искать файлы в разделе «Комьюнити», настраивать стилистику, выбирать и применять яркий фон, снижать его непрозрачность, добавить матовости прозрачному стеклу (нужно выбрать правильный эффект), отрегулировать уровень матовости. Зрители узнают, как добавить объем, прибегнув к обводке, сделать градиент под углом, «поиграть» с оттенками, добавив контраста, оттенить кнопку, убирать обводку.
Редизайн
Софья Филиппова не ставила целью записать подробную обучающую инструкцию, она просто поделилась процессом редизайна сайта салона красоты. Девушка оставила изначальный фирменный стиль, текстовые вставки, но изменила визуальный облик главной страницы. В старой версии проблемы крылись в отсутствии акцентов на важных блоках, страничка больше походила на шаблон, а не результат деятельности специалиста. Софья Филиппова – руководитель веб-студии Filippova Design, школы Filschool, проекта Filshop, предлагающего одежду для фрилансеров. YouTube-канал, где делится опытом в сфере веб-дизайна, Софья основала в 2016 году.
Плагины
TexTerra – агентство, предоставляющее комплексные маркетинговые услуги в Интернете – SMM, контент-маркетинг, контекстная реклама, разработка сайтов, лендингов, приложений, фирменного стиля, брендовой политики. Сотрудники обладают немалым опытом в разных направлениях и могут поделиться полезными «фишками». Александра Паршина сняла видеообзор 10-ти лучших плагинов, способных ускорить действия, требующие в обычном режиме нескольких манипуляций, отнимающих драгоценное время. В ролике рассматриваются следующие варианты: Better Font Picker, Spellchecker, Image Palette, Image Tracer, To Path, Content Reel, Isometric, Similayer, Unsplash, Remove.bg. Ведущая сделает краткий обзор каждого, поясняя его возможности и способ применения.
За 45 минут
Несмотря на простоту освоения, облегчить новичкам понимание функционала графического редактора помогают лишь качественные видеоуроки. Интенсив от Max Shirko, предоставляющий зрителям полный видеообзор главных инструментов – находка для новичков. Макс собрал в ролике 13 коротких уроков, посвященных разбору определенной темы. Просмотр этой подборки поможет сэкономить время и силы на поиск разбросанной по просторам Интернета информации. Автор уделит внимание фреймам, сетке, объектам, изображениям, кривым, тексту, выравниванию, стилям, плагинам, функции «Поделиться», переносу в Tilda.
10 лайфхаков
Дмитрий Матвеев предлагает подборку неочевидных «фишек», способных сэкономить время. Приводятся следующие лайфхаки: автокопирование, построение диаграммы за несколько секунд, добавление картинок с компьютера в нужный контейнер, сохранение отступов при адаптиве, изменение размера кнопки по тексту, скругление углов, перемещение объекта по фрейму горячими клавишами, заданный шаг движения фигуры, усовершенствование чек-боксов (цвет, прозрачность, толщина, преобразование в компоненты). Дмитрий – арт-директор магазина Wildberries, занимается брендингом, каллиграфией, леттерингом, преподаванием. На своем канале делится лайфхаками и полезными навыками, приобретенными за многолетний опыт.
UI kit
Чтобы не приходилось тратить время, создавая элементы с нуля, существует облегченный подход: один дизайнер делает набор графических элементов, а другие скачивают и используют для своих нужд. Готовый файл с набором графических элементов называют UI kit. Он позволяет взять готовые кнопки, формы, поля, заменить их, получив интерфейс, аналогичный исходному варианту. Метод применим для интернет-магазина, мультимедийного приложения, информационного сайта. Как сделать UI kit покажет автор этого видеоролика, но сначала объяснит, почему это не всегда целесообразно.
Получить доступ к Figma можно с компьютера на Windows/MacOS, или с мобильного устройства в любом браузере. Зарегистрировавшись, специалист имеет возможность подробно познакомиться с функционалом, заняться обучением, разобраться в плюсах/минусах, после чего решить, нужна ли ему платная подписка для коллективной деятельности. Вся работа производится в облаке, что исключает необходимость передавать файлы друг другу. Достаточно отправить ссылку, которую удобно просмотреть с любого устройства, вне зависимости от его места нахождения. Нужен лиши стабильный Интернет.
Смотрите также:
8 ноября 2022