Figma уроки: 65 уроков по Figma для новичков: Интерфейс, работа, компоненты — DesignLessons – все о дизайне

Содержание

65 уроков по Figma для новичков: Интерфейс, работа, компоненты

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

Основы

Веб-дизайн

Плагины

Гграфика

Figma уроки для начинающих и обучение онлайн бесплатно

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

Я рекомендую комплексно подходить к самостоятельному обучению Figma. Посмотрите различные обучающие материалы по Figma от разных авторов каналов YouTube, прочитайте книгу, изучайте статьи и лучшие практики. Как правило, бесплатное и самостоятельно обучение — это более долгий и тернистый путь. Лучше всего закончить платные онлайн курсы Figma. Если вы планируете заниматься фрилансом, веб-дизайном, хотите найти работу UI/UX дизайнером, образовательные онлайн школы будет самым эффективным решением. Во что вкладывать деньги выгоднее всего? Верно, в собственное развитие и рост. Когда вы развиваетесь, всё вокруг начинает расти вместе с вами: ваша карьера, качество жизни и способность управлять своей судьбой. Именно поэтому вкладываться в личностный рост, будь-то Hard skills или Soft skills — самое правильное решение на пути саморазвития.

Я желаю вам успехов в обучении Figma и потрясающих результатов. Пускай все ваши задумки, цели и планы сбываются. У вас все получится!

Что такое Figma?

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

Figma отлично подходит для UX/UI дизайна и бесчисленного количества экранов, имеет развитую дизайн-систему и возможность командной дизайн-работы.

Обучение Figma. Уроки онлайн бесплатно.

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

Скачать Figma

Figma Desktop

Скачать Figma для macOS
Скачать Figma для Windows

Figma Mirror

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

Скачать Figma Mirror for iOS
Скачать Figma Mirror for Android

Font Installers Figma

Также необходимо поставить установщик шрифтов, он же Font Installers Figma. Он необходим для использования кастомных шрифтов в проекте.

Скачать macOS Figma Font Installer
Скачать Windows Figma Font Installer

Видеокурс по Figma

Бесплатный подробный видеокурс Figma online из 15 уроков от «Наука дизайна».

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

Обзор интерфейса

Вводный курс Figma. Изучение интерфейса приложения.

Figma бесплатный видеокурс: интерфейс

Манипуляция объектами

Figma уроки

Фреймы и слайсы

Figma уроки для начинающих

Векторные объекты

Figma уроки на русском

Кривые и перо

Figma уроки бесплатно

Слои и маски

Figma tutorial

Текст

Цвет

Сетки и направляющие

Стили

Ограничители

Компоненты

Выравнивание и умное распределение

Прототипирование

Интеграция и экспорт

Евгений Кузьмин (CEO & Art-director студии UPROCK, топ-26 в рейтинге веб-дизайнеров по версии Tagline) делится своим опытом в вебинаре, рисует крутой дизайн, и разбирает типичные ошибки дизайнеров

Figma обучение быстрый сайт

Как создать стильный сайт в Figma

Как работать с плагинами в Figma

Полезный и интересный вебинар по работе с плагинами в Figma.

Как работать в Figma быстрее и продуктивнее

Супер полезные секреты, советы и лайфхаки от Бюро Горбунова.

Быстро работать в Фигме позволяет в первую очередь грамотное использование компонентов и построение макетов. Этому важно учиться, но для новичка не менее полезно будет освоить несколько горячих клавиш и трюков, которые не очевидны из интерфейса программы и не описаны в официальном туториале. Считаю важным о них рассказать, но отмечу, что в совете не будет ничего сверхъестественного. Это просто подсказки, которые помогут новичкам осваивать Фигму.

Как работать в Фигме быстрее

Как работать в Фигме быстрее. Часть 2

Как быстро выделять, перемещать, изменять размеры объектов в Фигме и работать с панелью слоёв.

Сегодня рассмотрим, как ускорить работу с объектами и интерфейсом программы.

Как работать в Фигме быстрее. Часть 3

В прошлый раз мы рассмотрели, как ускорить работу с объектами и интерфейсом программы. Сегодня — заключительная часть совета про горячие клавиши и трюки, которые помогают работать в Фигме быстрее. Можно создать несколько компонентов одновременно. Для этого выберите объекты, которые хотите превратить…

Заключительная часть совета про горячие клавиши и трюки, которые помогают работать в Фигме быстрее.

Книга «Руководство по Figma» от Саши Окунева

В книге 23 темы, среди которых: обзор интерфейса, шейпы, перо и векторные сети, градиенты всех типов с примерами, кадрирование и цветокоррекция, булевы группы, адаптивность, общие стили, компоненты, оверрайды и много чего ещё.

Эта электронная книга заложит солидную техническую базу для дальнейшего развития в дизайне мобильных приложений, сайтов и любых других продуктов. Рассматриваю 23 темы, среди которых: обзор интерфейса, шейпы, перо и векторные сети, градиенты всех типов с примерами, кадрирование и цветокоррекция, булевы группы, адаптивность, общие стили, компоненты, оверрайды и много чего ещё. Начинающие найдут здесь для себя правильный технический фундамент дальнейшего развития в дизайне. А те, кто работал в Скетче или Фотошопе, смогут максимально быстро перестроиться на новый редактор.

📘 Скачать книгу Руководство по Figma

Официальный сайта автора Саши Окунева

Официальные ресурсы Figma

Здесь вы можете найти множество Figma lessons на английском языке, которые помогут вам изучить Figma, повысить свои навыки проектирования и реализовать передовые методы, а также широкий спектр полезных ресурсов, созданных на основе Figma API для ускорения рабочего процесса.

Коллекция разделена на четыре основные категории:

Курсы

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

Гайды и лучше практики

Руководства и статьи, которые помогут вам принять Figma, а также множество советов и передовых практик по настройке и организации вашей дизайн-системы в Figma.

Библиотека

Хотите ускорить свой рабочий процесс с помощью систем дизайна, наборов пользовательского интерфейса, наборов значков и других библиотек компонентов в Figma? Это место, где вы можете найти всевозможные бесплатные и премиальные ресурсы.

Плагины

Хотите построить что-то на Figma Plugins API или хотите расширить возможности для автоматизации рабочего процесса? Посмотрите плагины от сообщества Figma, они потрясающие.

Community Resources Hub

Assets, courses, guides, and more! Made by the Figma community, for the community.

Бесплатные ресурсы Figma. Уроки, учебники, шаблоны, готовые проекты, дизайн-системы

Платные курсы Figma

Платные курсы — это это эффективный и быстрый способ изучить Figma, получить сертификат для будущей работы, сделать первые работы для портфолио, это поддержка сообщества, вопросы и ответы учителей, фидбеки и многое другое.

Онлайн-курс: Figma

Изучаем самый популярный инструмент среди дизайнеров путем создания своего первого прототипа

Онлайн-курс «Наука Интерфейсов» от Наука Дизайна

Онлайн-курс Наука Интерфейсов

Онлайн-курс по дизайну интерфейсов от науки дизайна

«Онлайн-курс по Figma» от HEDU

Онлайн-курс по Figma

Научитесь разработке интерфейсов и прототипированию в Figma, и получите работу в области веб-дизайна, пройдя онлайн-курс по Figma

«Вводный курс по работе с графическим редактором Figma» от Geekbrains

Вводный курс по работе с графическим редактором Figma. Современный и понятный инструмент для системного подхода к созданию диджитал продуктов. | Обучение программированию онлайн на GeekBrains | GeekBrains — образовательный портал

Экспресс-курс «Figma с нуля» от W.D.i

WDI Design School — школа огненного визуала

Освой профессию дизайнера, научись создавать топовый визуал для веб, мобайл, рекламы

Бесплатные курсы Figma онлайн

Бесплатный онлайн-курс с чатом в Телеграм

«Веб-дизайн в Figma с нуля и не только»

Уроки Figma. Справочник, курсы, уроки, учебник.

Уроки по программе Figma. Статьи, видео и курсы.

Уроки FigmaIvan Protsko

Бесплатный онлайн курс Figma «Краткий обзор программы Figma и основных инструментов.»

Игорь Колесень, Школа дизайна — UX Mind School

Уроки Figma

Geniet van je favoriete video’s en muziek, upload originele content en deel alles met vrienden, familie en anderen op YouTube.

«Бесплатный курс по Фигме» от автора проекта Хелп по Фигме

20 различныйх видеоуроков.

Хелп по Фигме | Хелп по Фигме на русском от одного энтузиаста 🙂 Видео, заметки, ответы — вот это вот все

Официальное сообщество Figma в России

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

Кому будет полезно:

Moscow | Figma

Friends of Figma

Полезные ресурсы по Figma

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

Официальный инстаграm Figma

Исследуйте большое количество артов от пользователей сообщества Figma

Официальный инстаграm Figma

Официальная страница Figma в Facebook

Самые главные новости Figma, полезные статьи и материалы.

Официальный Twitter Figma

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

Telegram канал Figma

Все самое необходимое для работы

Telegram канал Figma

Лучшие плагины для Figma
Бесплатные исходники для Figma
Наборы экранов для Figma
Генераторы для Figma
UI Kits для Figma
Wireframes для Figma
Шаблоны, макеты, иконки Figma
Шрифты для Figma
Модульные сетки Figma
Мокапы

Все это можно найти и скачать совершенно бесплатно, подписавшись на канал Figma Design.

Телеграм канал Figma Tips

Все о Фигме. Новости, подсказки, обзоры функционала, горячие клавиши, ресурсы. Без воды и левых ссылок.

Нужна помощь по Figma?

Все вопросы можно направить на официальную почту тех. поддержки Figma [email protected]

А так же если у вас появился сложный вопрос по Figma, то вы можете присоединиться к Telegram рабочему чату 💬 Figma Chat

Фигма-чат — это тяжёлая артиллерия. Он существует, чтобы помогать дизайнерам в сложных вопросах, касающихся Фигмы.
Ты сталкиваешься с проблемой, которую не можешь решить сам, задаёшь вопрос иполучаешь ответ от любого участника. Опытные дизайнеры могут узнать тут новости и поделиться опытом.

бесплатный учебник и видеоуроки на русском — Оди

Текстовый учебник и видеокурс по Figma. На русском, бесплатно.

Руководство по Figma

Саша Окунев, автор проекта /designer, выпустил свою первую книгу — иллюстрированный учебник по работе в самом прогрессивном инструменте интерактивного дизайна.

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

Саша до Figma долго использовал Sketch и проводит сравнение реализации символов и компонентов, стилей и ограничителей.

Скачать актуальную версию (PDF, на момент публикации — 69 Мб, 256 страниц)

Видеокурс по Figma

Ребята из телеграм-канала «Наука дизайна» записали бесплатный видеокурс из 15 уроков, в котором дают понятный обзор инструмента. В дополнение к книге Саши Окунева в курсе разбирают ещё работу с прототипами, слайсами и экспортирование проекта.

Плейлист на YouTube (примерно 2,5 часа).

Уроки по отдельности:

Обзор интерфейса

Манипуляция объектами

<center><ins class="lazy lazy-hidden adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="4908081011"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center>

Фреймы и слайсы

Векторные объекты

Кривые и перо

Слои и маски

Текст

<center><div class="lazy lazy-hidden advv"><ins class="lazy lazy-hidden adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></div></center>

Цвет

Сетки и направляющие

Стили

Ограничители

Компоненты

<center><ins class="lazy lazy-hidden adsbygoogle" style="display:block" data-ad-client="ca-pub-1812626643144578" data-ad-slot="3076124593" data-ad-format="auto" data-full-width-responsive="true"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center>

Выравнивание и умное распределение

Прототипирование

Интеграция и экспорт

Подписывайтесь на «Одайджест» — кураторскую рассылку для дизайнеров. Контент, который выбирают люди, а не алгоритмы.

Как работать в Figma — 14 уроков для начинающих

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

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

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

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

Целевая аудитория Фигмы – маркетологи, разработчики сайтов, менеджеры, а также дизайнеры. Основные возможности программы:

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

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

Как начать пользоваться Figma?

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

Для начала перейдите на официальный сайт программы figma.com. Пройдите регистрацию, указав адрес электронной почты, и вам будет доступна работа в онлайн версии. Что касается скачивания программы для Windows или MacOS, то необходимо перейти в раздел Figma Downloads, и выбрать версию для своего устройства.

Интерфейс Figma

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

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

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

Плагины. В этом разделе содержится список расширений, которые способны упростить и ускорить работу в редакторе. Например, расширение Unsplash позволяет искать стоковые изображения в самой программе, не выходя за ее пределы, а плагин Iconify содержит более 40 000 векторных иконок.

Новый файл. Эта вкладка предназначена для создания нового файла.

Команда. Разделе First Project представляет рабочее место вашей команды. В нем вы сможете приглашать новых участников для работы с проектом. Также в этом разделе будет представлен список ваших команд и проектов, например, команда «SMMgid».

Чтобы создать новый проект внутри команды, нажмите на вкладку «Untitled».

Таким образом, вы перейдете к редактору программы, где и производится работа.

Все возможности редактора мы рассмотрим в цикле уроков. Что вы сможете узнать из этих уроков?

В этом уроке вы увидите с чего начинается работа в программе. В нем представлены основные инструменты для манипуляции с объектами – Move, Scale, а также Лупа и Рука. Также вы узнаете, как передвигать, вращать, менять размер объектов в Figma и освоите все варианты выделения элементов.

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

Даже создание самого сложного дизайна состоит из стандартных фигур. В этом уроке вы сможете познакомиться с основными векторными объектами в Фигме, а именно прямоугольник, линия, линия со стрелкой, круг, треугольник, и звезда. Кроме того, в уроке рассказывается как задавать точные размеры этих элементов, менять их форму, обводку, и добавлять эффекты.

Для создания привлекательного дизайна сайта не обойтись без инструмента «Перо». В этом уроке вы сможете научиться пользоваться этим инструментом, и увидите, в каких случаях он может быть полезен. Также вы научитесь рисовать кривые линии и редактировать векторные объекты.

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

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

Ключевую роль в дизайне играет цвет. Как раз из этого урока вы увидите принцип работы с цветовым модулем в Фигме, и узнаете, как можно менять цвета всех объектов, с которыми вы работаете. В уроке рассказывается как создаются цвета, как они комбинируются в градиенты, а также как создаются новые цветовые стили, которое в последствии можно применять ко всем элементам проекта. Кроме того, вы узнаете для чего необходимо инструмент «Пипетка», и как его можно использовать в работе. Вы научитесь добавлять изображения в проект, и редактировать их меняя экспозицию, контрастность, насыщенность, температуру, оттенок, освещение, и тени.

Тщательно созданная сетка, подходящая для вашего контента, позволит определить структуру, иерархию и ритм вашего дизайна. Если все рассчитано точно, «строительные леса» сеток избавят вас от необходимости угадывать многие аспекты рабочего процесса. Различные типы сеток также могут помочь вам установить рациональный подход к масштабированию, позиционированию, размеру и интервалу. В этом уроке вы научитесь использовать этот важный инструмент, и увидите, как он влияет на позиционирование объектов. Здесь рассмотрено как создавать сетки, а также выполнять разметку фрейма на столбцы и строчки. Кроме того, вы научитесь использовать инструмент «направляющие» для выставления определенных границ.

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

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

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

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

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

Из этого завершающего урока вы узнаете, как интегрировать проект с другими программами, а также экспортировать макет в разные форматы. Это важно для выгрузки вашего дизайна и его дальнейшего использования в создании сайта. Кроме того, в уроке рассказывается как экспортировать CSS.

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

Полезные ссылки:

ТОП-20 бесплатных курсов по Figma [2021] для начинающих с нуля

Автор Денис Пожарский На чтение 17 мин Просмотров 2.1к. Обновлено 09.06.2021

Для начинающих с нуля в 2021 году.

1. «Figma. Начальный уровень» от GeekBrains

Длительность: 5 уроков, каждый по 30 минут.

Формат: видеоуроки + домашние задания.

С сертификатом

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

Вводный урок: Swatch Library.
Text styles.
Buttons.
Constrains.
Навигация.

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

Преимущества:

Все видеоуроки доступны с момента записи на курс и всегда будут доступны в личном кабинете.

Недостатки:

Не предусмотрена выдача диплома.
Отсутствие проверки домашних заданий.

Преподаватель: Илья Полянский. Ведущий дизайнер цифровых продуктов в «Почте России». Опыт работы — 7 лет.

💰 На правах рекламы. «Профессия UX/UI-дизайнер» от Contented 💰

Продолжительность курса: 9 месяцев.

Документ об окончании: удостоверение о повышении квалификации установленного образца.

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

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

Figma.
Базовый курс по дизайну.
Дизайн интерфейсов.
UX-исследования.
Специализация на выбор — дизайн мобильных приложений или дизайн веб-интерфейсов.
Дипломный проект.

Чему научитесь:

Проводить UX-исследования
Создавать пользовательские сценарии взаимодействия через Customer Journey Maps
Создавать интерактивные прототипы
Измерять качество взаимодействия с интерфейсом с помощью продуктовых метрик
Подготавливать дизайн для передачи в разработку
Создавать удобные и современные интерфейсы
Использовать принципы графического дизайна
Создавать дизайн-системы на основе базовых элементов
Создавать и защищать дизайн-концепции
Раскрывать свои идеи в редакторе Figma

Особенности:

Готовое портфолио по окончании обучения
Гарантированная помощь в трудоустройстве
Доступ к курсу навсегда
Бесплатная консультация для желающих начать обучение
Выпускники Contented работают дизайнерами в Mail. ru Group, OZON, Avito, «Рамблере», «Ростелекоме», Beeline
Можно оплачивать обучение в рассрочку до 24 месяцев

2. «Основы Figma» от «Нетологии»

Длительность: 16 лекций общей продолжительностью 17 часов, 7 из них уделено теории, а оставшиеся практике.

Формат: видеолекции и упражнения.

Без сертификата

Программа:

Введение в Figma.
Рекламный баннер.
Работа с интерфейсом.
Лендинг.
Адаптивный дизайн.
Мобильное приложение.
Компоненты и стили.
Кликабельный прототип приложения.

Чему научитесь:

Пользоваться ключевыми инструментами Figma.
Строить сетку, работать с текстами и пространством.
Основам UX/UI-дизайна.
Созданию лендингов и макетов сайтов
Дизайну мобильных приложений.

Преимущества:

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

3. «Бесплатный курс: Веб-дизайн с нуля» от YouTube-канала «Уроки Web, Mobile и UI/UX дизайна в Figma»

Длительность: 84 урока, продолжительность от 10 секунд до 10 минут.

Формат: видеоуроки.

Без сертификата

Программа обучения: студенты рассмотрят все аспекты работы с Фигмой, начиная от установки и запуска программы и заканчивая проектированием адаптивного дизайна.

Чему научитесь:

Создавать полноценный макет сайта.
Работать по техническому заданию (ТЗ).
Создавать проекты для портфолио.

Плюсы:

Подробный курс, рассчитанный на новичков.
Короткие ролики способствуют лучшему усвоению материала.
Все занятия в открытом доступе.

4. «Курс Figma» от YouTube-канала «Наука Дизайна»

Длительность: 15 уроков, продолжительность каждого 5–25 минут.

Формат: видеоуроки.

Без сертификата

Программа обучения: манипуляции с объектами, слои и маски, сетки и направляющие, а также другие темы, которые необходимо знать для прототипирования.

Чему научитесь:

Работать с Figma на среднем уровне.
Проектировать прототипы.

Плюсы:

Много знаний, которые пригодятся новичкам в дизайне.
Все занятия загружены на YouTube, что очень удобно.

5. «Уроки Figma» от UX Mind School

Длительность: 12 уроков, продолжительность 5–20 минут.

Формат: видеоуроки.

Без сертификата

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

Чему научитесь:

Эффективно использовать Figma.
Создавать адаптивные элементы.
Работать с растровой графикой.

Плюсы:

Ёмкий, но информативный курс.
Большое количество базовых знаний и умений.

6. «Бесплатный подробный курс по Фигме» от Алексея Бычкова

Длительность: 21 урок, продолжительность 5–25 минут.

Формат: видеоуроки.

Без сертификата

Программа обучения: студентам предстоит познакомиться с Figma и понять принцип её работы. Основные темы: панель слоев, модульная сетка, привязки, цвет, эффекты. Слушатели узнают, как установить плагины в Фигме и как создать ссылку на проект.

Чему научитесь:

Основам работы с Figma.
Проектировать макет сайта.
Использовать различные инструменты и плагины, облегчающие работу по созданию дизайна.

Плюсы:

Множество полезных знаний.
Приятный преподаватель.
Можно получить ответы на интересующие вопросы в комментариях к видео.
Дополнительные материалы в описаниях к роликам.

Автор курса: Алексей Бычков — дизайнер со стажем более 17 лет. Автор двух книг по дизайну. Основал онлайн-школу по веб-дизайну.

7. «Figma» от Алексея Бычкова

Длительность: 36 уроков, продолжительность 2–40 минут.

Формат: видеоуроки.

Без сертификата

Программа обучения: учащиеся узнают о различных плагинах для Фигмы, в том числе и FigJam. Также слушатели узнают о «фишках» профессионального веб-дизайнера. В конце курса преподаватель на примерах покажет, почему Figma лучше, чем Photoshop.

Чему научитесь:

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

Плюсы:

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

Минусы:

Требуются базовые знания Фигмы.

Автор курса: Алексей Бычков.

8. «Уроки Figma» от Дениса Тимошицкого

Длительность: 22 урока, продолжительность 2–36 минут.

Формат: видеоуроки.

Без сертификата

Программа обучения: в курс включены создание логотипа, дизайна мобильного приложения и многостраничного сайта. Студенты узнают о компонентах Фигмы, создании якорных ссылок и горячих клавишах.

Чему научитесь:

Создавать макет сайта.
Проектировать мобильное приложение.
Делать сложную инфографику.
Создавать дизайн сложного мобильного экрана.

Плюсы:

Информативные занятия.
Дополнительные материалы.
Плейлист постоянно пополняется новыми уроками.
Можно получить обратную связь в комментариях к видеороликам.

Минусы:

Необходимо знать основы работы с Figma.

9. «Дизайн многостраничного сайта в Figma» от Дениса Тимошицкого

Длительность: 17 уроков, продолжительность 20–35 минут.

Формат: видеоуроки.

Без сертификата

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

Чему научитесь:

Создавать прототип сайта.
Проектировать адаптивную версию сайта.
Использовать сетку Bootstrap.

Плюсы:

Большой курс с подробными уроками.
«Живой» канал, который постоянно пополняется новыми видеороликами.
Все ролики загружены на YouTube, что позволяет смотреть их в любое время и в любом месте.

Минусы:

Нужно знать азы работы с Figma.

10. «Дизайн интернет-магазина в Figma» от Дениса Тимошицкого

Длительность: 8 уроков, продолжительность 10–40 минут, также есть видео, которое длится 70 минут.

Формат: видеоуроки.

Без сертификата

Программа обучения: в курс включены отрисовка главной страницы, каталога и карточек товаров, служебных страниц. Также студенты рассмотрят создание UI-кита — инструмента, ускоряющего разработку дизайна.

Чему научитесь:

Создавать полноценный сайт интернет-магазина.
Рисовать UI-кит.

Плюсы:

Поэтапное раскрытие тем.
Все занятия в открытом доступе.

Минусы:

Требуются базовые знания по работе с Figma.

11. «Проектирование и дизайн мобильного приложения» от Дениса Тимошицкого

Длительность: 15 уроков, продолжительность 15–25 минут.

Формат: видеоуроки.

Без сертификата

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

Чему научитесь:

Создавать привлекательный дизайн мобильного приложения.

Плюсы:

Все занятия без «воды» и рассказаны простым языком.
Можно получить обратную связь в комментариях к роликам.
Дополнительные материалы.

Минусы:

Необходимо знать, как работать с Figma, хотя бы на начальном уровне.

12. «Дизайн и вёрстка из Figma в HTML + CSS + JS» от Дениса Тимошицкого

Длительность: 5 уроков, продолжительность 17–40 минут.

Формат: видеоуроки.

Без сертификата

Программа обучения: на курсе подробно разбирается создание первого экрана сайта и его последующая вёрстка.

Чему научитесь:

Проектировать красивый главный экран сайта.
Верстать на полупрофессиональном уровне.

Плюсы:

Множество полезных знаний.
Видеоуроки можно проходить в удобное время.

Минусы:

Без элементарных знаний о HTML, CSS и JS будет сложно что-либо понять.

13. «Бесплатные уроки по Figma» от Евгения Смольского

Длительность: 20 уроков, продолжительность 2–17 минут.

Формат: видеоуроки.

Без сертификата

Программа обучения: студенты узнают о горячих клавишах, которые ускорят работу в Фигме. Познакомятся со стилями, с компонентами и размытым градиентом. Также в курс включены занятия по созданию дизайна мобильного приложения.

Чему научитесь:

Быстро работать с Figma.
Правильно организовывать слои для веб-дизайна.
Прототипированию.
Создавать анимированные элементы.

Плюсы:

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

Минусы:

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

14. «Уроки Figma» от Moscow Digital Academy

Длительность: 12 уроков, продолжительность 4–27 минут, также есть один ролик, который идёт 60 минут.

Формат: видеоуроки.

Без сертификата

Программа обучения: студенты познакомятся с Фигмой, создадут первый прототип и превратят его в красивый сайт.

Чему научитесь:

Прототипированию.
Проектировать кликабельный дизайн-макет.
Создавать интерактивный дизайн сайта.
Быстро рисовать дизайн сайта.

Плюсы:

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

15. «Уроки Figma» от YouTube-канала Disarto

Длительность: 29 уроков, продолжительность 5–50 минут.

Формат: видеоуроки.

Без сертификата

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

Чему научитесь:

Работать с Figma.
Создавать привлекательный дизайн мобильного приложения.
Проектировать совместно с коллегами.
Использовать плагины для оптимизации рабочего процесса.

Плюсы:

Информативные занятия.
Курс подойдёт даже неопытным веб-дизайнерам.
Обратная связь — преподаватель отвечает на все вопросы в комментариях.
Постоянно появляются новые видеоуроки.

16. «Уроки Figma» от Figma.Center

Длительность: 107 уроков, основная часть роликов длится 1–5 минут, но есть и несколько больших видеоуроков по 30–60 минут.

Формат: видеоуроки.

Без сертификата

Программа обучения: максимально подробный курс, на котором рассматриваются все темы, нужные для работы с Фигмой. Слушатели узнают, что такое мокапы, прототипы и варфреймы. Познакомятся с плагинами.

Чему научитесь:

Пользоваться Figma на профессиональном уровне.
Проектировать сайты.
Использовать различные плагины, чтобы ускорить создание дизайна.

Плюсы:

Объёмный курс с большим количеством полезных знаний.
Короткие видеоуроки способствуют лучшему восприятию и усвоению информации.
Дополнительные материалы к некоторым занятиям.
Все уроки доступны сразу, поэтому можно пропустить уже знакомые темы.

17. «Уроки Figma» от GloryANT

Длительность: 12 уроков, продолжительность 4–8 минут.

Формат: видеоуроки.

Без сертификата

Программа обучения: в курс включены фигуры, слои, сетка, ограничители, стили и эффекты. Также учащиеся познакомятся с FigJam.

Чему научитесь:

Работать с Figma.
Создавать адаптивный дизайн.
Рисовать сайты вместе с другими дизайнерами, используя FigJam.

Плюсы:

Курс подойдёт новичкам.
Преподаватель изъясняется простым языком.
Регулярно появляются новые видеоуроки.

18. «Figma уроки» от Амира Исламова

Длительность: 13 уроков, продолжительность 5–25 минут.

Формат: видеоуроки.

Без сертификата

Программа обучения: слушатели познакомятся с Фигмой, создадут свой первый сайт, научатся пользоваться различными плагинами и узнают о лайфхаках, облегчающих работу.

Чему научитесь:

Создавать дизайн сайта.
Быстро работать с помощью плагинов.
Организовывать пространство в Figma.

Плюсы:

Материал подается в простой и понятной форме.
Все занятия загружены на YouTube, поэтому их можно проходить в любое время.

Минусы:

Мало информации для начинающих.

19. «Уроки Figma для новичков и джедаев» от Виктора Теплова

Длительность: 35 уроков, продолжительность 1–25 минут.

Формат: видеоуроки.

Без сертификата

Программа обучения: курс познакомит учащихся с различными секретными техниками профессионального дизайнера и расскажет о плагинах, упрощающих работу. Главные темы: умные таблицы, компоненты, Auto Layout, иконки и логотипы. Слушатели смогут оптимизировать рабочий процесс и создавать дизайн быстрее.

Чему научитесь:

Пользоваться Figma на профессиональном уровне.
Проектировать макет сайта и мобильное приложение.
Быстрее создавать дизайн.

Плюсы:

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

20. «Уроки по Figma» от YouTube-канала «Дизайн Легко!»

Длительность: 11 уроков, продолжительность 20–50 минут.

Формат: видеоуроки.

Без сертификата

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

Чему научитесь:

Работать с Figma.
Правильно пользоваться эффектами в Фигме.
Настраивать текст.
Делать адаптивный дизайн.

Плюсы:

Уроки, которые будут полезны даже опытным дизайнерам.
Заниматься можно в любое удобное время.

Создание дизайна сайта в Figma на реальном примере. Материалы курса

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

Твитнуть

Класснуть

Запинить

Материалы курса, готовый результат: Скачать

Полезные материалы и ссылки:

Стрелка «Назад»: ←
Стрелка «Вперёд»: →

В архиве материалов курса можно найти прототипы всех страниц сайта, которые мы разработали в этом курсе. Экспорт прототипов лежит в папке «design/wireframes/». Пресет настроек для приложения Pencil, который вы можете импортировать в Pencil на вкладке «My Shapes», можно также найти в архиве курса — «other/WireFrame-Pencil-Collection.zip».

В архиве материалов есть все используемые в дизайне шрифты. Для прохождения курса необходимо установить в систему все шрифты из папки «design/fonts/_src/».

Кроме того, в архиве курса можно найти готовый дизайн «Design (Woodtech) — Ready.fig». Для того, чтобы импортировать файл дизайна в Figma, достаточно открыть главное окно Figma и перетащить в него данный файл. В списке проектов у вас появится новый проект Figma.

Бланк технического задания «other/Техническое задание – Бланк.docx» – это универсальная заготовка технического задания на разработку сайта.

Готовая карта сайта (Mind map):

Для закрепления информации:

Компоненты Figma (Components) — это объекты, которые используются в дизайне многократно. По-сути, компоненты Figma — это объекты для повторного использования, которые могут быть простыми (например, кнопка) или сложными (форма обратной связи, заголовок, footer и т.д.). Ключевой особенностью компонентов Figma является возможность повторного использования блоков, где при редактировании корневого (главного) компонента, меняется структура и наполнение во всех дочерних (копиях) компонентах во всех фреймах документа.

Auto Layout Figma — это инструмент для автоматизации создания дизайна, который позволяет определять отношение объектов друг к другу, а также, поведение и отображение элементов при изменении содержимого.

Стили Figma (Styles) — это многократно используемые коллекции свойств, которые можно применять к любым элементам дизайна. В Figma можно создавать стили для текста, цветов, сеток и эффектов, таких как тени и размытия. Ключевой особенностью стилей Figma является возможность менять свойства стиля в одном месте для всех элементов дизайна, во всех фреймах документа. Данный функционал схож с использованием переменных в программировании.

Inkscape (Инкскейп) — свободно распространяемый векторный графический редактор (Open source), который мы используем в курсе для векторизации растровых иконок.

Настройки экспорта оптимизированного SVG (Inkscape)

Прототип и готовый дизайн главной страницы:

Прототип и готовый дизайн страницы «Наши проекты»:

Прототип и готовый дизайн страницы проекта:

Прототип и готовый дизайн страницы услуг:

Прототип и готовый дизайн страницы «Блог компании»:

Прототип и готовый дизайн универсальной страницы:

Прототип и готовый дизайн страницы «О компании»:

Прототип и готовый дизайн страницы «Наши преимущества»:

Прототип и готовый дизайн страницы «Обратная связь»:

Прототип и готовый дизайн страницы «Наши партнеры»:

Премиум уроки от WebDesign Master

Другие уроки по теме «Веб-дизайн»

Уроки по дизайну в Figma (часть 1)

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

Проблема в том, что многие начинающие дизайнеры, открывающие для себя Фигму, не используют те фичи, которые делают этот редактор по-настоящему крутым, и в результате пользуются утилитой чуть удобнее Paint. Поэтому мы сразу поставим себе амбициозную задачу: сделать легкий дизайн для двухстраничного сайта с использованием компонентов и плагинов, которые могут нам пригодиться.

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

Итак, погнали. Скачиваем, устанавливаем, открываем Фигма, создаем новый проект:

Пустой проект Figma

Сразу переименуем проект, кликнув по «Untitled» в верхней части экрана:

Название проекта в Фигме

Далее мы сразу решаем, что у нас будут отдельные страницы проекта для его отдельных частей: для UI-кита, главной страницы и формы.

Зачем использовать разные страницы

Почему: во-первых, мы будем использовать компоненты. Это значит, что стиль однотипных элементов мы будем менять в одном месте, и логично сохранить все компоненты на одной странице. Во-вторых, нагромождение макетов на одной странице плохо читаются и, кроме того, могут приводить к тормозам.

Что такое UI-кит вкратце

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

Чтобы создать страницы, вверху слева нажмите на Pages и значок + (плюс).

Новая страница

Делаем три страницы и переименовываем их в UI, Home, Contacts. Название, очевидно, ни на что, кроме нашего удобства, не влияет.

Страницы с названиями

Далее переходим во вкладку «UI» и создаем новый фрейм (кнопка F или иконка на верхней панели).

Пустой фрейм

Нас особо не интересуют размеры этого фрейма, так как на нем будут располагаться отдельные элементы, не образующие какую-то страницу. Я задал размеры 800 по ширине и 1000 по высоте.

Размеры фрейма

Назовем этот фрейм Elements — в этом фрейма мы будем размещать наши элементы управления.

Название фрейма

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

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

Итак, мы находимся на странице UI, на фрейме Elements. Выбираем инструмент «Прямоугольник» (R) и создаем прямоугольник произвольных размеров на нашем фрейме:

Создание прямоугольного вектора

Переименовываем его в древе слоев в «Фон кнопки»:

Название вектора

Теперь мы выделим его и отредактируем его параметры: установим ширину 150, высоту 50 и зальем ее градиентом:

Высота и ширина

Высота — это параметр H, ширина — W. В палитре выбора цвета переключите сверху с Solid (сплошной цвет) на Linear (линейный градиент):

Градиент вектора

В палитре отредактируем цвета и установим прозрачность 100 процентов для каждого из них — за это отвечает ползунок рядом с пипеткой. На самом элементе сдвинем точки привязки, чтобы градиент был под углом.

Направление градиента

Чтобы наша кнопка была более материальной, повесим на нее тень: выделим кнопку и нажмем в параметрах справа + в области Effects:

Добавление тени

По умолчанию добавляется эффект тени, но его можно переключить, например, на размытие. С помощью кнопки «Плюс» можно добавить несколько эффектов.

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

Параметры тени

Фон готов, добавляем текст кнопки: выбираем инструмент «Текст» и выделяем область по площади всей кнопки: это нужно для того, чтобы нам было легко расположить текст по центру фона. Вводим текст:

Добавление текста

И выставляем параметры текста справа как на скриншоте: выравнивание по центру по высоте и по ширине.

Параметры текста

Далее в древе слоев выделяем наш фон и текстовый слой и группируем их (control + g).

Отдельные элементы

Группа

Переименовываем группу в «Обычная кнопка».

Название группы

На этом этапе мы создали элемент, и теперь нам надо сделать из него компонент. Выделяем группу и жмем сочетание Command + Option + K или Control + alt + K, либо выбираем пункт из выпадающего меню:

Создание компонента

Готово, вы создали компонент!

Чтобы понять, что мы наделали, переходим в другую страницу проекта, переключаем сверху слева окно навигатора на Assets и перетаскиваем нашу из Assets в любую часть рабочего пространства — так мы создали экземпляр нашего компонента.

Вкладка Home

Assets

Экземпляр на странице

Нам этом первый урок окончен.

Что такое графический дизайн — изучение дизайна

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

Он влияет на функционирование объектов и сред. Это то, что делают все, включая вас, даже если вы никогда не считали себя дизайнером. Вы все время принимаете дизайнерские решения, в школе, на работе и в личной жизни.

Каждый выбор, который вы делаете для решения проблем, — это дизайнерское решение. То, как вы готовитесь, расчесывая волосы, затем выпивая кофе и, наконец, чистя зубы, — это дизайнерское решение — намеренный выбор, чтобы оформить свое утро особым образом.

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

Вывески, добавленные к двери, чтобы указать, открывается ли она нажатием или вытягиванием, принципиально полезно, не так ли? Лучше всего было бы сделать направление двери интуитивно понятным; иметь ручку на одной стороне и плоскую поверхность, чтобы упираться в другую, с этикетками или без них. Но дизайн — это не просто визуальная индикация того, в какую сторону распахивается дверь.

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

Если вы, например, дизайнер дверей, вы решаете проблему: нам нужно сделать двери более безопасными. Решение, позволяющее открыть дверь изнутри, особенно во время чрезвычайной ситуации, действительно решает эту проблему; И выполнение этого с помощью интуитивно понятной красивой нажимной пластины на внутренней стороне двери делает это элегантным решением проблемы.

Слушать, сопереживать и действовать в соответствии с информацией

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

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

Многие продукты создаются без учета требований потребителей и их консультаций, что обычно плохо кончается. Де Трейнор, соучредитель и главный стратег Intercom, написал в блоге Inside Intercom: «Если бы вы были шеф-поваром, задаваясь вопросом, наслаждаются ли клиенты вашим новым рецептом супа, как бы вы узнали? Это не ракетостроение».

Как дизайнер, вы должны спросить: «Почему?» Может быть, не так сильно, как любознательный четырехлетний ребенок, но близко.

Для кого мы проектируем? С какими проблемами они сталкиваются? Как мы можем решить эти проблемы? Почему наше решение может не работать? Что мы можем с этим поделать? Почему решение было принято нашей командой или компанией?

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

Оставайтесь любопытными.

Хорошая история имеет четкое начало, середину и конец; намеченное путешествие. При чтении книги или просмотре фильма вы продвигаетесь по истории в определенном порядке и переживаете ее по мере ее развития.

По мере того, как ваш клиент просматривает ваше приложение, веб-сайт, инфографику, трехмерный мир и т. Д., Он знакомится с вашей историей. Вот что такое User Experience, или UX, дизайн; и является частью имеющихся у вас инструментов, чтобы помочь людям понять, как взаимодействовать с вашим творением.

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

У вашего клиента может возникнуть неприятный опыт и он уйдет, если он запутается (закрытие приложения), или негативный опыт, из-за которого он выбегает за дверь, если что-то его пугает (удаление вашего приложения со своего устройства).

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

Написание — это основная часть процесса проектирования, которую следует принимать во внимание. Орфографические ошибки — такая же ошибка дизайнера, как и копирайтера или другого создателя контента. Поскольку дизайн — это не только внешний вид вашего творения, но и то, насколько оно доступно для вашей аудитории, четкость слов на странице имеет такое же значение, как и выбор шрифта.Подробнее о создании доступа и инклюзивности читайте в уроке «Включение».

Еще одно соображение, о котором следует помнить, — это то, что постоянно появляются новые дизайнерские технологии и тенденции. Понимание и использование таких основ, как рассказывание историй, лучше подготовит вас к новым типам проектирования, таким как последние тенденции в чат-ботах и дополненной реальности.

Дело не только в том, чтобы делать вещи красивыми — это часто является следствием хорошего функционирования и предоставления отличного опыта вашим клиентам / аудитории.

Стив Джобс сказал: «Большинство людей ошибаются, полагая, что дизайн — это то, как он выглядит, люди думают, что это фанера — дизайнерам вручают эту коробку и говорят:« Сделайте так, чтобы она выглядела хорошо! » Это не то, что мы думаем о дизайне. Дело не только в том, как он выглядит и ощущается. Дизайн — это то, как он работает ».

Вернемся к нашему примеру с дверью типа «толкай / толкай». Четкий индикатор того, как использовать дверь, может быть красивым, но при этом функциональным, будь то декоративная ручка или типографика в стиле ар-деко.

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

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

Решение проблемы, рассказывание истории и создание чего-то, что хорошо работает, имеют множество положительных последствий: часто оказывается, что это просто и легко использовать. Здесь всегда есть возможность еще больше его визуально отполировать. Это дополнительные шаги, необходимые для победы над конкурентами и для развития вашего продукта в долгосрочной перспективе. Если на всех банковских счетах теоретически хранятся ваши деньги, то чем они отличаются? Некоторыми банковскими приложениями пользоваться просто и, смею сказать, весело.

Существует явление, известное как эффект эстетичности и удобства использования, при котором люди считают, что более эстетичный продукт легче использовать, чем менее эстетичный, даже если он не так прост в использовании. Это похоже на предубеждение в отношении привлекательности, на которое часто ссылаются при обсуждении президентских выборов в США по делу Джона Ф. Кеннеди против Ричарда Никсона.

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

Например, на заре разработки Figma мы часто говорили о том, какие инструменты вам понадобятся для создания современного дизайна для экранов. Мы поняли, что набор инструментов не обязательно должен быть большим, если инструменты тщательно отобраны и хорошо работают вместе. С помощью небольшого набора функций (например, инструмента Vector Network или Frame) дизайнеры могут создавать множество различных вещей для формирования сложных средств выражения.

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

Знаменитая карта метро Нью-Йорка и указатели — отличный пример этого в действии. До полного пересмотра конструкции в 1960-х годах система метро Нью-Йорка представляла собой беспорядок с сотнями знаков, несовместимых с дизайном даже на одной станции.

Только в 1965 году, когда графические дизайнеры Массимо Виньелли и Боб Ноорда взяли на себя работу по созданию визуальной идентичности метро с удобством использования в его основе, стало намного легче ориентироваться в системе — благодаря хорошо продуманным вывескам и иконография. Пара сосредоточилась на создании системы, которая решала бы проблему и в то же время была эстетически приятной.

Результат — та же система дизайна, которую вы, возможно, знаете сегодня. Дизайнеры создали 182-страничное руководство для Управления транспорта города Нью-Йорка, в котором описаны все способы, которыми дизайн должен и не должен использоваться — и он остается одним из самых знаковых произведений в мире.

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

Быть дизайнером — это значит тратить время на повышение уровня своего опыта. Вы не станете великим в первый день. Это нормально! Важно продолжать это делать, тебе станет лучше. Ира Гласс говорит о творческом разрыве между знанием того, что что-то хорошо выглядит, и неспособностью это создать.Это ценный шаг на вашем пути к тому, чтобы стать великим дизайнером. Понимание того, что работает, что вам нравится, и работа над этим. Совет Ира Гласс для начинающих креативщиков:

… мы входим в это, потому что у нас хороший вкус. Но вроде есть пробел. Что в первые пару лет, что вы делаете, то, что вы делаете, не так хорошо. Хорошо? Это не так уж и здорово. Он пытается быть хорошим, у него есть потенциал, но не совсем так. Но ваш вкус, то, что привело вас в игру, ваш вкус по-прежнему убийственный.И ваш вкус достаточно хорош, чтобы вы могли сказать, что то, что вы делаете, вас как бы разочаровывает. Если вы понимаете, о чем я?
Многие люди никогда не проходят эту фазу, многие люди в этот момент уходят. И то, что я просто хотел бы сказать вам от всего сердца, это то, что почти все, кого я знаю, кто занимается интересной творческой работой, прошли период лет, когда у них был действительно хороший вкус, они могли сказать, что они делали не так хорошо, как они хотели. Они знали, что этого не произошло.В нем не было того особенного, что мы хотели.
И я бы сказал вам, что все проходят через это. Если вы проходите через это, если вы проходите через это прямо сейчас, если вы только выходите из этой фазы; Вы должны знать, что это абсолютно нормально, и самое важное, что вы можете сделать, — это много работать.

Это означает, что у вас есть много лет и часов работы над дизайном, прежде чем вы станете великим дизайнером. Ежедневно ставьте перед собой небольшие дизайнерские задачи и пытайтесь создать что-то новое, каким бы маленьким оно ни было.Вы быстрее станете более опытным, если будете продолжать попытки.

Настойчивость и дисциплина сделают вас экспертом. Продолжайте развивать свои навыки и свое портфолио, решая проблемы людей с помощью дизайна.

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

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

Каждый является дизайнером, и вы можете принимать важные дизайнерские решения, даже не осознавая, что вы дизайнер. Когда вы понимаете влияние решений, которые традиционно не считались «дизайном», легко понять, почему. Как писал Дэниел Бурка: «Когда инженер сокращает работу и сокращает производительность, он должен понимать, как это вредит пользовательскому опыту.Точно так же, когда дизайнер подталкивает инженера к внесению изменения, которое влияет на производительность, этот инженер должен помочь дизайнеру принять наилучшее общее проектное решение, а не просто перевернуть страницу и сделать то, что попросил дизайнер. Именно такой тип уважительного сотрудничества делает отличный дизайн ».

Перейти к следующему разделу

Исследования дизайна — учиться с Figma

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

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

Хотя перед проектированием вам следует сосредоточиться на проведении исследования и понимании потенциальных клиентов и проблем, исследование — это не разовый процесс. Исследования должны продолжаться до, во время и после запуска продукта. Проведение тестов и изучение поведения вашей аудитории после запуска продукта — отличный способ учиться на своих ошибках.

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

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

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

Цели вашего исследования — ответить: кто является целевыми клиентами? Почему они используют или будут использовать ваш продукт? Каковы их мотивы? Чего они ждут от вашего продукта? Как они в настоящее время решают задачи, которые вы хотите решить? И любые вопросы, которые, по вашему мнению, имеют отношение к вам и разработке вашего продукта.Задавайте открытые вопросы собеседникам. Вы пытаетесь получить от них понимание, заставить их открыться вам и, возможно, поделиться идеями, которые вы не знали, чтобы их искать.

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

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

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

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

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

Это собеседование может проводиться лично, в вашем офисе или там, где находятся ваши клиенты — что всегда предпочтительно. Если вы создаете продукт для покупателей продуктового магазина, вам нужно пойти в продуктовый магазин и поговорить с людьми, которые делают там покупки, которые желают. Люк Вроблевски напоминает нам: «Перестаньте смотреть на то, что делают другие компании. Начните проводить больше времени с существующими / потенциальными клиентами.»

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

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

Не все исследования требуют прямого доступа к вашим клиентам, вы можете отправить им опрос, запланировать телефонные звонки и даже написать им письмо. Будьте изобретательны в том, как лучше всего связаться с вашими клиентами. Чем лучше вы их поймете, тем лучше вы поймете, как с ними связываться и учиться у них.

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

Отличный вторичный источник информации — поиск других успешных продуктов в вашей области или отрасли. Создайте доску настроения, чтобы вдохновиться продуктами, которые решают проблемы параллельно с проблемами, которые вы решаете. Спросите себя: «Что делает это дизайнерское решение успешным?»

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

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

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

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

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

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

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

Начните с вопросов, на которые хотите ответить.
Получайте отзывы от ваших текущих и потенциальных клиентов как можно раньше и чаще.
Опрашивая клиентов, объясните, почему вы проводите исследование и что надеетесь узнать.
Если возможно, разговаривайте со своими клиентами в их собственной среде, а не приводите их к себе на рабочее место.
Получите согласие всех участников вашего исследования.
Если возможно, предложите участникам собеседования компенсацию за потраченное время, даже подарочную карту или другое признание их времени и внимательности.
Старайтесь избегать собственных предубеждений.

Google Design’s Beyond Desktop Research

Leah Buly’s The User Experience Team of One

Quintin Carlson’s User Experience Research Field Guide

Перейти к следующему разделу

Designlab | Фигма 101, день 1

Добро пожаловать в Figma 101!

Figma — это инструмент для совместного проектирования интерфейсов, который покоряет мир дизайна. В отличие от Sketch, которое работает как отдельное приложение для MacOS, Figma полностью основана на браузере и поэтому работает не только на Mac, но и на ПК под управлением Windows или Linux, и даже на Chromebook.Он также предлагает веб-API, и это бесплатно!

Еще одним большим преимуществом Figma является то, что она позволяет совместно работать над одним и тем же файлом в реальном времени. При использовании обычных «автономных» приложений, таких как Sketch и Photoshop, если дизайнеры хотят поделиться своей работой, они обычно должны экспортировать ее в файл изображения, а затем отправить по электронной почте или в мгновенном сообщении.

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

Что мы расскажем в Figma 101

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

Прежде чем мы начнем

Прежде чем мы начнем с сегодняшнего урока, потратьте секунду на выполнение нашего быстрого одноминутного упражнения по постановке целей. Мы хотим убедиться, что вы извлекли максимальную пользу из этого курса … и что к его концу вы овладеете основами Figma и достигли любых личных целей в области дизайна! ⚽

Сегодняшние учебные цели

Знакомство с интерфейсом Figma
Поэкспериментируйте с некоторыми ключевыми функциями
Выучите важные сочетания клавиш
Выясните, как управлять интерфейсом (масштабирование и т. Д.)
Создание слоев «Рамки», «Прямоугольники» и «Текст»
Используйте команды Arrange и Align

Время выполнения: 30 минут

Сегодняшний учебник

1. Настройте учетную запись Figma

Начать работу в Figma так же просто, как зайти на сайт www.figma.com, нажать «Зарегистрироваться» и ввести свои данные. Как только вы это сделаете, Figma откроется с таким стартовым экраном. Нажмите «Новый файл», и мы начнем!

2.Взгляните на интерфейс Figma

Внешний вид интерфейса Figma довольно минимален, но он противоречит набору мощных функций. Вот объяснение основных областей интерфейса (отмеченных выше):

Меню:: В отличие от обычных настольных дизайнерских приложений, меню Figma можно найти, нажав кнопку гамбургера в верхнем левом углу экрана. Найдите минутку, чтобы просмотреть эти меню и посмотреть, что там есть! Вы также можете выполнить поиск по конкретной команде, которая вам нужна.Начните вводить «прямоугольник», и вы быстро найдете инструмент «Прямоугольник» с удобным напоминанием о его сочетаниях клавиш (кстати, это R).
инструментов:: Здесь вы можете быстро получить доступ к инструментам, которые вы, вероятно, будете использовать чаще всего: рамкам, фигурам, тексту и т. Д. (Мы рассмотрим все эти инструменты в ближайшие пару дней!)
Опции:: В этой области отображаются дополнительные параметры для любого выбранного вами инструмента. Когда ни один объект не выбран (как показано выше), Figma отображает имя файла.Когда объект выбран, здесь появляются контекстные параметры.
слоев:: Здесь перечислены все элементы файла, организованные по фреймам и группам.
Холст:: Здесь вы создаете и просматриваете всю свою работу.
Инспектор:: Инспектор показывает контекстную информацию и настройки для любого выбранного объекта. На изображении выше мы видим параметры самого холста. Обратите внимание, что в Figma есть отдельные вкладки в инспекторе (Дизайн, Прототип и Код) — мы рассмотрим их позже на этой неделе.

Теперь, когда вы разобрались, давайте приступим к созданию вещей! Обратите внимание, что в этих руководствах мы будем часто упоминать сочетания клавиш. Стоит выработать привычку использовать эти ярлыки с самого начала, потому что они значительно ускорят ваш рабочий процесс в дальнейшем.

3. Создание рамы

В Figma фрейм по сути является контейнером для других элементов. Если вы раньше использовали Sketch или Adobe Illustrator, он работает так же, как Artboard.Нажмите F, чтобы выбрать инструмент «Рамка». Кроме того, вы можете щелкнуть значок инструмента «Рамка» на панели «Параметры» в верхней части окна. Точно так же, если вы привыкли к Sketch, вы также можете нажать A (для «Artboard»).

Есть несколько способов создания фрейма. Мы можем либо щелкнуть и перетащить область холста, либо выбрать предустановленный размер кадра в инспекторе в правой части окна. Попробуйте оба способа прямо сейчас!

4. Попрактикуйтесь в увеличении и уменьшении масштаба

Вы, вероятно, захотите немного увеличивать и уменьшать масштаб в Figma, особенно когда мы начнем работать с несколькими фреймами.Доступ к стандартным командам масштабирования осуществляется с помощью ⌘ + и ⌘-. Попробуй это сейчас!

Эти команды будут просто сосредоточены в центре вашего текущего представления. Но есть и другие удобные команды масштабирования:

Shift ⇧2 приблизит текущий выбор
Shift ⇧1 увеличивает масштаб, чтобы показать весь холст

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

Наконец, вот * дополнительный * удобный совет по изменению масштаба для перемещения между кадрами без необходимости постоянно увеличивать и уменьшать масштаб:

N — переход к следующему кадру
Shift ⇧N увеличивает до предыдущего кадра

5.Практикуйтесь в использовании ручного инструмента для перемещения по холсту

Еще один полезный инструмент, особенно когда вы увеличиваете масштаб или работаете с большим файлом, — это инструмент «Рука». Попробуйте нажать пробел, и вы увидите всплывающий значок руки. Щелкните и перетащите, чтобы переместить весь холст. Если вы работаете с трекпадом Mac, вы можете сделать то же самое, перетащив трекпад двумя пальцами.

6. Создайте текстовый слой

Теперь давайте создадим текст. Нажмите T, чтобы выбрать инструмент «Текст», и щелкните в любом месте рамки iPhone 8, чтобы создать текстовый слой.Это будет частью дизайна кнопки, поэтому давайте набираем «Войти». Нажмите Escape, чтобы выйти из инструмента «Текст».

7. Создайте прямоугольник и расположите слои

Нажмите R, чтобы выбрать инструмент «Прямоугольник». Обведите прямоугольник в форме кнопки вокруг только что созданного текста.

В настоящее время текст скрыт под прямоугольником. Чтобы исправить это, нам нужно использовать команды Figma «Упорядочить». Перейдите на панель слоев в левой части окна. Выберите текстовый слой «Войти», затем щелкните правой кнопкой мыши (ПК / Mac) или щелкните, удерживая клавишу Ctrl (Mac), чтобы открыть список параметров.Нажмите «На передний план», и текст теперь будет размещен поверх прямоугольника.

Вы также можете получить доступ к инструментам упорядочивания с помощью сочетаний клавиш:

Mac:

⌘]: сдвинуть вперед
⌘Opt]: вынести на передний план
⌘ [: отправить назад
⌘Opt [: отправить обратно

ПК:

Ctrl]: перенести вперед
CtrlShift ⇧]: вывести на передний план
Ctrl [: отправить назад
CtrlShift ⇧ [: отправить назад

8.Выровняйте текст и прямоугольник

Это кнопка, поэтому мы хотим, чтобы текст и формы прямоугольника были центрированы относительно друг друга. В Figma есть набор команд «Выровнять», которые позволяют нам это делать. Убедитесь, что инструмент «Перемещение» выбран, нажав клавишу Escape или V, а затем перетащите «рамку» (прямоугольное выделение) вокруг текста и прямоугольника.

На этот раз мы можем получить доступ к командам выравнивания в инспекторе (область интерфейса справа от окна). Нажмите «Выровнять горизонтальные центры» и «Выровнять вертикальные центры», чтобы два объекта хорошо выровнялись.

9. Добавьте закругленные углы к прямоугольнику и измените цвет

Выберите только что созданный прямоугольник. В Инспекторе есть параметр «Радиус угла», который позволяет нам делать углы любой формы скругленными. Здесь введите количество пикселей, на которое нужно округлить каждый угол.

Чтобы максимально увеличить углы и создать полукруги на каждом конце прямоугольника, просто введите число, превышающее половину высоты объекта. (Мы установили для нас значение 32, чтобы мы были защищены на случай, если позже мы захотим сделать кнопку немного больше, но попробуйте другие числа и посмотрите, что произойдет!)

Настройки цвета также можно найти в Инспекторе.Мы часто хотим привлечь внимание людей с помощью кнопок, поэтому выделите прямоугольник и выберите яркий цвет! Мы выбрали ярко-желтый цвет, введя шестнадцатеричный код (# EEEE33), но вы также можете щелкнуть, чтобы открыть цветовую палитру, и выбрать цвет таким образом.

10. Меняем шрифт

Выбрав текстовый слой, вы можете получить доступ к настройкам в Инспекторе, чтобы изменить шрифт, а также размер, вес и цвет шрифта. Мы остановились на Roboto, но перешли на полужирный и заглавные буквы. Попробуйте изучить варианты!

Вперед!

На этом мы подошли к концу первого дня Figma 101! Мы разобрались с интерфейсом, опробовали несколько основных инструментов и создали кнопку, которую сможем использовать в нашем приложении.

Последнее, что нужно сделать на сегодня, это дать нашему файлу имя — для этого просто снимите выделение со всех объектов (Escape сделает свое дело) и щелкните там, где написано «Без названия» в верхней части окна. Затем введите что-нибудь вроде «Приложение Figma 101». Вот и все! Figma хранит все ваши файлы в облаке.

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

Сегодняшних бонусов:

+ Памятка по сочетаниям клавиш (Windows)
+ Памятка по сочетаниям клавиш (Mac)
+ Образец файла с выполненным на сегодня заданием

Ищете учебник по Figma? Вот 7 курсов Figma, которые вам понравятся.

Figma — это простой, но мощный инструмент, который вы можете использовать, чтобы вывести процессы проектирования на новый уровень.

Но сначала вы должны выучить это.

В этой статье я предоставлю вам 7 курсов Figma, которые помогут вам понять основы инструмента и перейти с ним на средний уровень:

Что такое Figma?

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

Если вы индивидуальный дизайнер или имеете небольшой бизнес с 2 редакторами , это совершенно бесплатно с ограниченной квотой проекта. Поскольку это приложение на основе браузера, оно работает на любом компьютере и в любой операционной системе. У него также есть мобильное приложение-компаньон для предварительного просмотра вашего дизайна на экране мобильного телефона.

Лучшие курсы Figma в 2021 году

1- Figma для UX Design Страница курса в LinkedIn
Продолжительность: 1 час 51 минута
Информация о сертификате: Да
Цена: 25 $, бесплатно с подпиской Linkedin Learning
Этот курс предоставляется Linkedin Learning и ведет Брайан Вуд.
Курс Figma for UX Design включает в себя один файл проекта и сертификат о прохождении курса.Эта программа сертификата разделена на 5 основных частей:
Настройка проекта Figma часть с регистрацией, установкой локальных шрифтов и вашего первого файла в Figma и импортом файлов из Sketch.
Добавление содержимого часть, включая работу со страницами, редактирование и создание фигур, рисование, маскирование, вставку изображений, форматирование текста, создание компонентов дизайна, применение ограничений и управление версиями.
Прототипирование часть с объяснением, что такое прототипирование и как создать прототип в Figma
Командная часть, объясняющая , как собрать команду и создать проект и как использовать командные библиотеки
Сотрудничество, совместное использование и экспорт частей для демонстрации предварительного просмотра на устройстве, совместного использования и комментирования файла, а также экспорта основных ресурсов файла.
Курс включает файл проекта, чтобы вы могли расширить свое обучение Figma с помощью практического опыта проектирования и создания прототипа продукта. Это дает вам понимание основных компонентов Figma и основных функций проектирования.
Посмотреть курс можно здесь.
2- Learn Figma — UI / UX Design Essential Training
Продолжительность: 3 часа 30 минут
Информация о сертификате: Да
Цена: 99,99 $ (в настоящее время для 12,99 $ со скидкой 87%)
Этот курс включен в список курируемых Udemy for Business collection.
Это самый рейтинговый курс Figma на Udemy, и рейтинги заметно высоки по сравнению с другими курсами. Его преподает Калеб Кингстон, и он направлен на то, чтобы дать аудитории возможность разработать полностью интерактивный прототип и повторно использовать его элементы для будущих проектов.
Этот курс идеально подходит для как начинающих, так и дизайнеров, которые хотят перейти с Adobe XD или Sketch . Курс начинается с знакомства с интерфейсом Figma и ключевыми функциями, позволяющими сделать ваш дизайн адаптивным, а затем углубляться в компоненты дизайна для создания библиотеки элементов.Чтобы воплотить все в жизнь, Калеб работает над приложением, чтобы показать вам, как проектировать и создавать прототипы в Figma.
Посмотреть курс на Udemy.
3- Учебное пособие по дизайну пользовательского интерфейса Figma: начните работу всего за 24 минуты! (2021)
Продолжительность: 24 минуты
Информация о сертификате: №
Цена: Бесплатно
Это очень быстрое актуальное руководство от канала Youtube AJ & Smart .
Канал принадлежит AJ & Smart, студии дизайна и инноваций, базирующейся в Берлине, Германия. Они публикуют советы и рекомендации, отраслевые хаки и информативный контент о дизайне продукта, дизайне UX и дизайнерских спринтах на своем канале YouTube.
В этом кратком руководстве по Figma они объясняют преимущества использования Figma , а не альтернативных инструментов дизайна UI / UX, таких как Adobe XD и Sketch. Они объясняют основные особенности Figma с другой точки зрения, сосредотачиваясь на , как создать свой продукт и адаптироваться к Figma за минимальное время, показывая веб-сайты, состоящие из бесплатных значков, бесплатных стоковых фотографий и шаблонов дизайна пользовательского интерфейса для Figma.В то же время они показывают, как вы можете начать свой первый дизайн с шаблона, ведущего вас к интерфейсу, создания рамок, форм, настройки цветов и радиуса углов с использованием значков, изображений, текста и кнопок.
Посмотреть видео на Youtube.
4- Впервые в Figma? Начните работу с обучающими программами «Figma для начинающих»
Продолжительность: 50 минут
Информация о сертификате: №
Цена: Бесплатно
Хотите изучить Figma из Figma?
Если ваш ответ утвердительный, то вот плейлист , созданный официальной учетной записью Figma с их собственными видео для , знакомящий с их продуктом .Они регулярно обновляют свой канал новыми учебными пособиями и советами, поэтому вам следует подписаться на канал Figma Youtube и сохранить этот плейлист, чтобы не пропустить обновления и новый контент!
В настоящее время в этом плейлисте есть 5 различных обучающих видео, которые представляют Figma и объясняют ее ключевые особенности.
Что такое Фигма?
.
5- Изучите Figma: Основы дизайна пользовательского интерфейса — UI / UX Design
Продолжительность: 10 часов
Информация о сертификате: Да
Цена: 94,99 $ (в настоящее время для 11, 99 $ со скидкой 87%)
Вот ускоренный курс Figma по Udemy с множеством статей для чтения, разнообразными загружаемыми ресурсами, наборами пользовательского интерфейса и электронной книгой стоимостью 199 $. Курс создан для запуска Figma с нуля дизайнером UI / UX Арашем Ахадзаде.
Курс начинается с основ UX и элементов дизайна. Он охватывает многие предметы, которые должен знать хорошо образованный дизайнер, такие как основы дизайна, элементы пользовательского интерфейса, типографика, иконография, макеты, цветовая контрастная композиция, интервалы и т. Д. Он также объясняет, что такое пользовательский интерфейс, каков пользовательский интерфейс и в чем различия между пользовательским интерфейсом и UX. Это также дает представление о том, как вы должны создавать свое портфолио и какую платформу вам следует использовать.
В то время как он обучает вас всей концепции UX-дизайна, он использует Figma для создания своих дизайнов. Это идеальный курс для всех, кто хочет стать UI / UX дизайнером, использующим Figma.
Кроме того, вы можете посетить дискуссионных форумов на Udemy, чтобы найти ответы на свои вопросы по дизайну и провести мозговой штурм с другими дизайнерами.
Посмотреть на Udemy.
6- Как спроектировать и прототипировать мобильный UI / UX Design Experience с помощью инструмента проектирования Figma — Изучить Figma
Продолжительность: 5 часов 48 минут
Информация о сертификате: Да
Цена: Подписка на 8 долларов в месяц на Skillshare, 14-дневная бесплатная пробная версия
Этот курс также является длинным и инклюзивным курсом , который передается совершенно бесплатно, если вы уже являетесь пользователем Skillshare. Его преподает Аарон Лоуренс, дизайнер UX и владелец дизайнерской компании UX Honey.
В начале курса Аарон делится файлом Figma и направляет вас на создание вашего первого прототипа мобильного приложения с Figma на основе проекта, в котором он участвовал прежде всего. Курс дает вам полный опыт работы с Figma от регистрации до завершения проекта, шаг за шагом описывая, как создать полный опыт покупок: профиль, заказы и экраны оформления заказа.
При этом он обучает вас обогащению вашего продукта с помощью библиотек компонентов, их создания, использования интеллектуальной анимации и эффектов перехода, плагинов Figma и наборов графического интерфейса пользователя.В нем также объясняется, как вы экспортируете компоненты пользовательского интерфейса и проверяете код, чтобы управлять вашим продуктом с помощью инженерных решений, и информирует вас об основных сочетаниях клавиш Figma для ускорения процесса проектирования.
Посмотреть на Skillshare.
7- Полный курс по дизайну приложений Figma UX / UI для начинающих
Продолжительность: 2 часа 30 минут
Информация о сертификате: Да
Цена: 19,96 $, (в настоящее время 4 , 99 $ со скидкой 75%, также бесплатно с планом подписки Eduonix Infiniti)
Последний курс в этом списке находится на платформе обучения, подготовки и обучения Eduonix.Его преподает Сайед Раза, владелец ClayDesk.
Курс разделен на шесть основных разделов:
В первом разделе Сайед познакомит вас с Figma и проведет вас по этому идеальному инструменту дизайна на основе браузера, показывая интерфейс, инструменты кадрирования и нарезки, создавая векторные фигуры. инструменты пера, компоненты и ограничения, а также систему координатной сетки.
Во втором разделе речь идет о создании реального проекта: и веб-сайта, и дизайна приложения с заставкой.
Позже вы перейдете к созданию прототипа, экспорту проекта, работе с логическими значениями, маскировкой и каркасом.
Когда вы закончите курс , вы освоите принципы проектирования, ресурсы и ярлыки, помимо изучения Figma, , поэтому он идеально подходит для любого дизайнера уровней, который хочет улучшить свои навыки и скорость.
Посмотреть курс на Eduonix.
Заключение
Многие дизайнеры переходят на Figma или даже начинают с нее свой опыт проектирования.
Вы, безусловно, можете воспользоваться одним из упомянутых курсов и изучить Figma так, как вы хотите. Чего же ты ждешь?
Также проверьте:
18 плагинов Figma, которые вы не должны пропустить
Часто задаваемые вопросы
Как я могу использовать Figma?
Figma — это простой просматриваемый продукт, поэтому вы можете сразу приступить к работе, если у вас есть правильный курс, который поможет вам. Курсы Figma в этом списке могут помочь вам эффективно изучить Figma.
Как создать сайт с помощью Figma?
Создание сайта с помощью Figma — совсем не сложная задача. Например, после прохождения собственной серии руководств Figma на Youtube, которая занимает около 50 минут, вы должны знать основы платформы.
10 лучших курсов Figma [2021 СЕНТЯБРЬ] [ОБНОВЛЕНО]
Для тех, кто заинтересован в изучении проектирования пользовательского интерфейса с помощью Figma, мы составили список из лучших курсов, классов, учебных пособий, программ обучения и сертификации Figma, доступных онлайн на 2021 год .В этот список входят как бесплатные, так и платные курсы, которые помогут вам изучить различные концепции проектирования. Кроме того, он идеально подходит для начинающих, среднего уровня, а также для экспертов. Если вам интересно, вы также можете ознакомиться с некоторыми из лучших курсов по дизайну пользовательского интерфейса UX
10 лучших онлайн-курсов, занятий и обучения Figma [2021 СЕНТЯБРЬ] [ОБНОВЛЕНО]
1. Онлайн-курс по Figma — Обучение по Figma для начинающих
В этом онлайн-курсе Figma для начинающих инструктор проведет вас через все тонкости Figma как платформы дизайна, так что к концу курса вы создадите свой собственный мини (интерактивный) прототип.Материал курса содержит отдельные упражнения, которым вы можете следовать. На уроках вы также получите знания о передовых методах работы и о том, как организовать дизайн-систему в Figma. С этим курсом вы будете на пути к освоению основ Figma. Сам курс является онлайн-курсом для самостоятельного изучения, так что вы можете просмотреть уроки в удобное для вас время. Существует бесплатный образец урока, который можно просмотреть перед покупкой курса. По окончании курса все студенты получают два бонусных шаблона дизайна.
Ключевые УТП —
— Узнайте, как создавать современные и эффективные дизайны пользовательского интерфейса в Figma
— Практические упражнения: создайте свой собственный миниатюрный интерактивный прототип
— Курс ведет дизайнер пользовательского интерфейса, который специализируется на Figma
.
— Освойте лучшие практики и основы дизайна Figma
— Узнайте, как ускорить рабочий процесс в Figma с помощью систем проектирования
— Вам доступен предварительный урок
— Получите сертификат об окончании LinkedIn по завершении
— 2 бонусных шаблона Figma за прохождение курса
Продолжительность: самостоятельно
Рейтинг: 4.5 из 5
Вы можете зарегистрироваться здесь
2. Лучшие курсы и руководства по Figma (Udemy)
Всегда лучше иметь доступ к списку из нескольких курсов, чем искать каждый курс по отдельности. И Udemy очень хорошо выполняет эту функцию, предлагая список многочисленных курсов Figma. Список включает более 10 курсов Figma, каждый ориентирован на разные концепции . Вы можете попробовать выбрать курс или учебное пособие, которое лучше всего соответствует вашим потребностям.Тем не менее, бестселлером среди списка является Learn Figma — UI / UX Design Essential Training and Design Rules: Principles, Practices for Great UI design . Более того, все курсы и учебные пособия интегрированы с бесплатной пробной версией, что означает, что вы можете получить бесплатный доступ к контенту каждого класса в течение как минимум 30 дней.
Ключевые УТП —
— Учитесь на курсах, разработанных и проверенных профессиональными графическими дизайнерами, окончившими лучшие университеты мира
— Совершенствуйте свои навыки от новичка до уровня эксперта с помощью продвинутых курсов
— Получите помощь и помощь от группы экспертов, которые помогут вам с материалами курса
— Используйте несколько тестов, практических упражнений и викторин почти для каждого курса, которые помогут улучшить ваши навыки и знания.
— Получите сертификат об окончании каждого курса или учебного пособия
Продолжительность: самостоятельно
Рейтинг: 4.6 из 5
Вы можете зарегистрироваться здесь
3. Изучите Figma — Основное обучение UI / UX-дизайну (Udemy)
Изучение Figma для проектирования UI / UX может далеко продвинуть вас как высококлассного дизайнера. Этот бестселлер по Figma на Udemy предназначен для новичков и опытных дизайнеров, которые хотят начать использовать Figma для разработки мобильных или настольных приложений. В нем используется подход «создавай по мере обучения» к обучению этому мощному инструменту проектирования. Преподаватель, Калеб Кингстон, расскажет учащимся о возможностях Figma и о том, как их использовать для проектирования интерфейсов и создания многоразовых элементов для будущих проектов. Он также демонстрирует, как сотрудничать в Интернете с другими членами команды для разработки проектов с использованием Figma. К концу этого курса у студентов будет прототип приложения, явный признак приобретения навыков работы с Figma.
Ключевые УТП —
— Узнайте, как разрабатывать функциональные веб-сайты, мобильные приложения и интерфейсы настольных приложений с помощью инструмента Figma
— Создайте свою собственную многоразовую библиотеку элементов дизайна для использования в ваших будущих проектах
— Научитесь разрабатывать адаптивные приложения с использованием функций Figma и сотрудничать с коллегами с помощью инструмента
— Получите сертификат в Figma и создайте прототип приложения Chef’s Recipe после прохождения этого онлайн-курса
Продолжительность: 3.5 часов
Рейтинг: 4,5 из 5
Вы можете зарегистрироваться здесь
Обзор: Этот курс великолепен! Мне нравится, как были объяснены все аспекты. Репетитор очень ясен и точен. Я бы порекомендовал его всем, кто интересуется созданием дизайна с Figma. — Симон Мищак
4. Полный курс Figma — Разработка UI / UX для мобильных и веб-приложений (Udemy)
Если вы новичок в разработке приложений или веб-сайтов, сейчас самое время добавить Figma в свой набор инструментов UI / UX.Подпишитесь на этот комплексный курс по Figma, который к концу обучения добавит в ваше портфолио макеты веб-сайтов и приложений. Изучив этот курс на практике, вы получите как технические, так и творческие навыки для создания привлекательных интерфейсов для своих проектов. Вы научитесь создавать повторно используемые шаблоны и элементы дизайна с помощью Figma, чтобы ускорить процесс разработки. Помимо функций Figma, курс делится полезными сведениями о цветах и типографике, которые лучше всего подходят для приложений и веб-сайтов.Взгляните на нашу подборку лучших курсов веб-дизайна .
Ключевые УТП —
— Узнайте об использовании и функциях всех функций Figma, чтобы создать беспрецедентный пользовательский интерфейс
— Создавайте прототипы и макеты приложений для демонстрации и делитесь ими со своими командами или клиентами для совместной работы в Figma
.
— Узнайте, как создавать элементы многократного использования для ускорения процесса проектирования и разработки
— Получите сертификат в области проектирования пользовательского интерфейса / пользовательского интерфейса с помощью Figma, чтобы добавить в свое резюме для получения более высокооплачиваемой работы или клиентов
— Сделайте успешную карьеру UI / UX-дизайнера или используйте этот навык в качестве вспомогательной работы
Продолжительность: 5.5 часов
Рейтинг: 4.6 из 5
Вы можете зарегистрироваться здесь
Обзор: весь курс был настолько плавным, легким для понимания и применения, что мне он очень понравился, и я перевел некоторые из моих других дизайнерских проектов с других приложений на Figma, потому что он был настолько простым в использовании. — Анаид Салур
5. Изучите Figma: основы дизайна пользовательского интерфейса — UI / UX Design (Udemy)
Курс по основам дизайна пользовательского интерфейса на Udemy создан для людей, которые являются абсолютными новичками в дизайне.Студенты сначала изучат концепции дизайна UI / UX, а затем перейдут к пониманию использования Figma. Курс включает в себя практические проекты — дизайн финансового приложения и дизайн целевой веб-страницы, чтобы студенты могли применять концепции в процессе обучения. Ключевым моментом этого курса являются советы и рекомендации по проектированию, которыми делится инструктор, которые могут быть полезны для обеспечения беспрепятственного взаимодействия с пользователем. До вашей новой карьеры в этой прибыльной индустрии дизайна!
Ключевые УТП —
— Изучите основы проектирования, чтобы стать дизайнером UX / UI, используя Figma в качестве основного инструмента
— Узнайте, как создавать микровзаимодействия с использованием элементов Figma, чтобы обеспечить потрясающий пользовательский интерфейс для приложений и веб-сайтов
— Создайте приложение и прототип целевой страницы в качестве проекта во время обучения Udemy
— Создайте свое портфолио в качестве дизайнера UX / UI, чтобы получить хорошо оплачиваемых клиентов
— Изучите цветовые схемы, шрифты, 3D-моделирование, создание AR, разработку логотипов, чтобы иметь всестороннее портфолио дизайнера UX / UI
Продолжительность: 10 часов
Рейтинг: 4.5 из 5
Вы можете зарегистрироваться здесь
Отзыв: после окончания курса Adobe XD курс был для меня такой большой ценностью, что я искал Figma, чтобы улучшить свои навыки намного больше, поэтому, пройдя этот курс, я получил новый навык, спасибо, Араш — Георгий Гали
6. Бесплатные классы и курсы Figma (Skillshare)
Skillshare — это хорошо известная и ценная платформа электронного обучения, ориентированная на предоставление обширных знаний отдельным лицам.Он предоставляет список из четырех различных классов Figma, который включает Figma для дизайнеров пользовательского интерфейса, Digital Product Design, Learn Figma — UI / UX Design Essential Training и Learn UI Design: Quick Create On-Boarding Web App. Все эти классы созданы, чтобы помочь изучить использование Figma для проектирования пользовательского интерфейса. Вы начнете с изучения основ Figma, а затем перейдете к более сложным темам, таким как создание веб-приложения с помощью Figma. Кроме того, если вы подпишетесь на премиальный план, вы сможете отправить свой проект класса.Ознакомьтесь с подборкой лучших бесплатных курсов по дизайну интерьера .
Ключевые УТП —
— Все курсы и учебные классы разработаны опытными графическими дизайнерами, имеющими многолетний опыт работы в этой отрасли.
— Обсуждайте такие темы, как проектирование пользовательского интерфейса с помощью мощных инструментов в Figma, как выбрать привлекательные проекты портфолио, создать свое портфолио и т. Д.
— Получите обширные навыки, такие как дизайн продукта, взаимодействие с пользователем, дизайн UI / UX, каркасное моделирование, мобильный дизайн, прототипирование и т. Д.
— Доступ к индивидуальным проектам с каждым классом или учебным занятием, на которое вы записываете
— Сотрудничайте с другими студентами вашего курса и преподавателем напрямую для решения ваших вопросов
Продолжительность: 9-10 часов
Рейтинг: 4.6 из 5
Вы можете зарегистрироваться здесь
7. Изучите Figma за 14 дней — Мастер дизайна пользовательского интерфейса и прототипирования (Udemy)
Новички, которые хотят овладеть индустрией дизайна своим творчеством, или те, кто хочет добавить этот набор навыков к своим существующим, могут записаться на этот онлайн-курс Figma на Udemy.Всего за 14 дней вы узнаете, как создать интерактивное приложение или веб-интерфейс с помощью этого мощного кроссплатформенного инструмента. Курс проведет вас с нуля, чтобы получить знания в области создания адаптивных интерфейсов. Затем вы постепенно изучите продвинутых концепций, таких как автоматическая компоновка, живое прототипирование на мобильных устройствах, и т. Д. Итак, начните свое изучение Figma, записавшись на этот тренинг. Ознакомьтесь с нашей подборкой лучших курсов по разработке приложений .
Ключевые УТП —
— Накопите свои знания в области проектирования, чтобы освоить проектирование пользовательского интерфейса с помощью Figma
— Научитесь создавать приложения и адаптивные веб-страницы с помощью этого инструмента
— Изучите сочетания клавиш для использования Figma, чтобы быстро выполнять свою работу
— Получите сертификат и включите проекты в свое портфолио, чтобы продемонстрировать свое мастерство в Figma для привлечения клиентов
Продолжительность: 8 часов
Рейтинг: 4.6 из 5
Вы можете зарегистрироваться здесь
Review: очень хороший курс со структурированным подходом к функциональности Figma. Спасибо! — Антон Терехов
8. Figma для дизайнеров пользовательского интерфейса (Udemy)
Как UI-дизайнер, знание того, как работать в Figma, может упростить вам задачи проектирования и разработки и помочь вам быстрее реализовывать проекты. Вы можете научиться использовать Figma, пройдя этот онлайн-курс Udemy, и приступить к разработке своего первого приложения или веб-сайта на основе Figma по мере продвижения.Обучающие материалы этого курса познакомят вас с интерфейсом Figma и основными функциями, которые помогут вам разрабатывать лучше и быстрее. Студенты смогут применить полученные знания с помощью упражнений для проверки своих навыков.
Ключевые УТП —
— Научитесь использовать инструмент Figma для создания UX / UI веб-интерфейсов и интерфейсов приложений
— Получите сертификат Udemy в использовании Figma, чтобы продемонстрировать свой авторитет как разработчика приложений / веб-приложений
— Комфортная работа со всеми функциями, доступными в этом средстве проектирования
Продолжительность: 3.5 часов
Рейтинг: 4.8 из 5
Вы можете зарегистрироваться здесь
Обзор: Отличный курс, и это было действительно полезно. Я хотел бы узнать больше о прототипировании — Алехандро Лейнсе
9. БЕСПЛАТНЫЙ курс — Бесплатные курсы и руководства по Figma (Udemy)
Udemy предоставляет бесплатные курсы и обучение работе с инструментами проектирования Figma. Те, кто хочет изучить этот инструмент, но не уверены, правильное ли это место для начала своего путешествия по UX / UI, могут извлечь выгоду из этих курсов. Студенты могут бесплатно изучить фундаментальные концепции, чтобы убедиться, что они чувствуют себя комфортно с Figma. Вы можете ознакомиться с классами и соответствующими предложениями, посетив веб-сайт Udemy. К обучающим видео можно получить доступ с любого устройства, и вы можете учиться в удобном для вас темпе из любого места. Это может быть лучшим способом освоить новый навык или отточить имеющийся с помощью бесплатного онлайн-обучения. Не забудьте проверить наш список из лучших курсов Figma .
Ключевые УТП —
— Подпишитесь на бесплатный курс Figma по вашему выбору из доступных вариантов на Udemy
— Получите технические ноу-хау по использованию инструмента Figma для проектирования UX / UI
— Узнайте, как разработать мобильное или веб-приложение, используя конструктивные особенности Figma
.
— Развивайте свои навыки, не тратя много времени или денег, обучаясь на этих бесплатных курсах в удобном для вас темпе
Продолжительность: переменная
Рейтинг: 4.6 из 5
Вы можете зарегистрироваться здесь
10. Курсы, обучение и учебные пособия по Figma (Figma)
Вам не нужно искать другие ресурсы, если вы можете получить всю информацию и данные с самой платформы Figma. Figma.com собрал все ресурсы, где представлены самые эффективные курсы Figma. Хотите ли вы отточить свои навыки в Figma или хотите узнать, как использовать Figma с самого начала , вы найдете все на этом ресурсе.Он включает в себя несколько курсов и классов, из которых содержит курсы в Figma и раздел ресурсов дизайна, создание привлекательного портфолио UX, начало работы с Figma от начала до конца и многие другие . После выполнения этих разделов вы станете профессионалом в концепциях Figma и сможете обучать других. Взгляните на наш взгляд на Лучшие курсы архитектуры .
Ключевые УТП —
— Полезная платформа, которая описывает роль Figma в графическом дизайне и то, как ее можно использовать разными способами
— Предоставляйте интерактивные видеоролики с инструкторами, чтобы помочь людям более четко изучить концепции Figma
— Обучай все аспекты процесса проектирования и способы улучшения отношений с дизайнерами в своей жизни
— Изучите основы дизайна и концепции, лежащие в основе крупнейших цифровых продуктов, доступных на рынке
— Общайтесь со своими инструкторами напрямую, чтобы развеять любые сомнения, связанные с содержанием курса
Продолжительность: самостоятельно
Рейтинг: 4.8 из 5
Вы можете зарегистрироваться здесь
11. БЕСПЛАТНЫЙ курс — Курсы и обучение Figma (LinkedIn Learning)
LinkedIn Learning — отличная платформа для знакомства с концепциями и использованием Figma, поскольку она предоставляет список из нескольких курсов и обучающих видеороликов, которые могут помочь вам расширить свои знания в области графического дизайна . Среди этих курсов с самым высоким рейтингом: Figma for UX Design, Import Figma Artboards, Setup your first file in Figma, Working with Team Libraries и многие другие.Короче говоря, в этом списке вы можете найти все, что связано с Figma. Кроме того, LinkedIn Learning предоставляет сертификат об окончании курса, если вы закончите курс с заданными проектами . Кроме того, запись на большинство курсов абсолютно бесплатна, поэтому вам не нужно беспокоиться о ежемесячных счетах во время обучения.
Ключевые УТП —
— Учитесь у некоторых из лучших инструкторов отрасли, которые предлагают свои знания
— Охватывает почти все темы, связанные с Figma, такие как принципы Figma, разработка веб-приложений и т. Д.
— Учитесь в своем собственном темпе из своей зоны комфорта без каких-либо дедлайнов и графиков
— Станьте частью большого студенческого сообщества, чтобы отправлять запросы и вовремя решать их
Продолжительность: самостоятельно
Рейтинг: 4,5 из 5
Вы можете зарегистрироваться здесь
Итак, это были одни из лучших курсов Figma, доступных в Интернете. Надеюсь, вы нашли что-то, что соответствует вашим потребностям.Желаю вам удачного обучения 🙂
6 лучших курсов по дизайну пользовательского интерфейса и пользовательского интерфейса Figma для начинающих в 2021 году | автор: javinpaul | Javarevisited
Мои любимые онлайн-курсы Figma для веб-дизайнеров и веб-разработчиков в 2021 году. Это действительно отличные онлайн-курсы для изучения Figma для UI / UX от Coursera, Udemy и Pluralsight
image_Credit — Figma
Здравствуйте, ребята, если вы хотите учиться Figma в 2021 году, один из самых популярных инструментов дизайна UI и UX, и в поисках лучших онлайн-курсов вы попали в нужное место.Ранее я поделился лучшими курсами веб-дизайна и лучшими курсами веб-разработки , и в этой статье я собираюсь поделиться лучшими курсами по изучению Figma для UI и UX дизайна в 2021 году.
веб-сайт не только полезен, но и необходим в современном мире, поэтому навыки проектирования пользовательского интерфейса и пользовательского интерфейса очень востребованы. Как в больших, так и в маленьких компаниях есть много вакансий для опытных дизайнеров, и такие инструменты, как Figma, наверняка улучшат ваши навыки проектирования пользовательского интерфейса.
Создание красивого и адаптивного веб-дизайна повлияет на вашу аудиторию в том, как они видят ваш бренд по сравнению с другими конкурентами, а также заставит их использовать ваш сервис вместо поиска другого и ухода из вашего бизнеса, а также для создания На красивом веб-сайте есть множество инструментов для достижения этой цели, и один из них называется Figma.
Figma — одно из самых мощных приложений, работающих в Интернете, поэтому вы можете создавать свой веб-сайт с помощью браузера без необходимости загружать и устанавливать какое-либо дополнительное программное обеспечение на свои компьютеры, а также поддерживает совместную работу в команде и динамичный дизайн.
Для всех, кому интересно изучить Figma для UI и UX , я искал лучшие программы, которые помогут вам использовать этот инструмент как новичку, пока не стать продвинутым пользователем, так что следите за обновлениями и продолжайте читать статью на 5 лучших онлайн-курсов по изучению Figma для веб-дизайна.
Не теряя лишнего времени, вот список лучших онлайн-курсов по изучению Figma для UI и UX дизайна. Эти онлайн-курсы созданы экспертами и пользуются доверием тысяч учащихся по всему миру.Их также выбирают на известных веб-сайтах онлайн-обучения, таких как Udemy, Pluralsight и ZTM Academy.
Еще один отличный курс для изучения инструмента Figma для разработки пользовательского интерфейса без каких-либо предварительных знаний или навыков для начала прохождения этого курса. Все, что требуется, — это компьютер с подключением к Интернету и создание красивого веб-сайта с помощью Figma.
Начиная с основ дизайна, таких как типографика, цветовой контраст, шрифты, интервалы и многое другое. Затем вы начнете изучать инструмент и то, как его использовать для создания текста, добавления изображений, элементов пользовательского интерфейса и т. Д.
После этого вы создадите свою самую первую систему дизайна, такую как финансовое приложение и простой логотип, а также множество других дизайнов и тем, которые вы увидите в этом великолепном курсе.
Вот ссылка, чтобы присоединиться к этому курсу — Learn Figma: Основы дизайна пользовательского интерфейса — UI / UX Design
Учебный курс, руководство и сертификация Figma
🏆 Получу ли я сертификат об окончании курса? 🎓
Да, мы предлагаем сертификат об окончании, который вы можете добавить в свой профиль LinkedIn! После прохождения этого курса вы получите инструкции по добавлению сертификата об окончании в свой профиль LinkedIn, чтобы дать вам конкурентное преимущество.💪
Сколько времени потребуется, чтобы пройти курс?
Но на этом обучение не заканчивается — оно продолжается даже после курса! Это потому, что вы также получите бесплатный доступ к сообществу технических дизайнеров, где вы сможете общаться с дизайнерами и спрашивать отзывы у других в отрасли!