Figma: видео уроки и вебинары для начинающих (бесплатно)

Figma: видео уроки и вебинары для начинающих (бесплатно) — Skillbox

Все направления

Программирование

Дизайн

Маркетинг

Управление

Бизнес-школа

Игры

Кино и Музыка

Психология

Общее развитие

Другое

Тематика

• Figma
• Геймдизайн
• Рисование и иллюстрация
• 3D-моделирование
• 3D

Спикеры

• Дарья Корнева
• Сергей Знаменский
• Венера Смирнова
• Алексей Чупин
• Виктор Рындин

Геймдизайн

Рисование и иллюстрация

3D-моделирование

3D

Кино

Тестирование

Игровые движки

Разработка игр

Unreal Engine 4

Unity

2D и 3D-графика

Вёрстка

PHP

SQL

Базы данных

Machine Learning

Python

Визуализация данных

Data Science

Математика

Работа с таблицами

Backend-разработка

Figma

Аналитика

Frontend-разработка

Мобильные приложения

Git

Администрирование

Веб-приложения

Создание сайтов

Фреймворки

Java

Алгоритмы и структуры данных

Командная строка (Bash)

iOS

JavaScript

Android

Развитие продукта

Планирование

Финансы

Soft Skills

Сценарий

CustDev

Юнит-экономика

Управление проектами

Digital-агентства

Лидогенерация

HR

Продажи

Мотивация

Оформление презентаций

Предпринимательство

Менеджмент

Бизнес

Коммьюнити

Разработка концепции

Стратегия

CRM

Конкурентный анализ

Исследование аудитории

Бренд

UX/UI

Фриланс

Управление командами

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

Продюсирование

Performance-маркетинг

ВКонтакте

Работа с документами

SMM

SEO

PR

Трафик

Таргетированная реклама

Контент-маркетинг

Контекстная реклама

Дизайн среды

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

Adobe Illustrator

Дизайн-концепция

Композиция и цвет

Photoshop

Дизайн интерьера

Декорирование

Ландшафтный дизайн

Скетчинг

Графический дизайн

Веб-дизайн

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

Обработка фотографий

Ювелирный дизайн

Монетизация

Творчество

Фотография

Киберспорт

Fashion-дизайн

Спорт

Саунд-дизайн

Сторителлинг

EdTech

Теория музыки

Сведение и мастеринг

Ableton Live

Adobe Premier

Монтаж

Avid

Davinci

Основы композиции

Видео производство

Работа с камерой

Продюсирование видео

Работа с блогерами

Маркетинг игр

Дизайн-документ

Motion-дизайн

Docker

DevOps

Linux

Клипы

After Effects

Kotlin

Анализ аудитории

Продюсирование курсов

Golang

Искусственный интеллект

Коучинг

Swift

Кросплатформенная разработка

Kubernetes

Дизайн мобильных приложений

Создание сеттинга

Flutter

Подкасты

Дизайн-системы

Информационная безопасность

Abletone

Selenium WebDriver

3D-анимация

C#

C++

1С

6 вебинаров

• 02:09:00

  Подводим итоги интенсива «Веб-дизайн за 3 дня»
  

  11. 08.2021

  1759

• 02:15:20

  Дорабатываем проекты по веб-дизайну в Figma
  

  10.08.2021

  3401

• 02:13:56

  Теория веб-дизайна. Начинаем работать над проектом
  

  09.08.2021

  5358

• 01:44:06

  Продуктовый дизайн: подводим итоги
  

  28.04.2021

  656

• 01:38:36

  Проектируем экран мобильного приложения
  

  27.04.2021

  1190

• 01:55:25

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

  26.04.2021

  3145

• Бесплатный интенсив

  2 ‒ 4 мая

  Востребованные профессии в цифровом дизайне: 10 лёгких точек входа

  Подробнее

• Бесплатный интенсив

  2 ‒ 4 мая

  Текст на миллион.

  Введение в профессию копирайтера за 3 дня

  Подробнее

• Бесплатный интенсив

  2 ‒ 4 мая

  Экспресс-погружение в Excel и «Google Таблицы» за 3 дня

  Подробнее

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

Автор Алексей Шаполов На чтение 17 мин Просмотров 35.4к.
Обновлено 07.04.2023

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

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

Пройти курс

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

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

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

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

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

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

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

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

Недостатки:

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

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

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

Начать обучение

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

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

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

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

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

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

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

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

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

Узнать подробнее

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

Пройти курс

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

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

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

Программа:

1. Введение в Figma.
2. Рекламный баннер.
3. Работа с интерфейсом.
4. Лендинг.
5. Адаптивный дизайн.
6. Мобильное приложение.
7. Компоненты и стили.
8. Кликабельный прототип приложения.

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

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

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

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

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

Пройти курс

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

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

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

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

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

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

Плюсы:

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

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

Пройти курс

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

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

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

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

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

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

Плюсы:

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

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

Пройти курс

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

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

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

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

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

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

Плюсы:

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

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

Пройти курс

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

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

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

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

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

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

Плюсы:

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

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

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

Пройти курс

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

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

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

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

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

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

Плюсы:

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

Минусы:

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

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

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

Пройти курс

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

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

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

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

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

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

Плюсы:

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

Минусы:

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

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

Пройти курс

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

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

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

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

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

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

Плюсы:

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

Минусы:

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

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

Пройти курс

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

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

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

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

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

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

Плюсы:

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

Минусы:

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

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

Пройти курс

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

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

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

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

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

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

Плюсы:

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

Минусы:

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

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

Пройти курс

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

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

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

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

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

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

Плюсы:

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

Минусы:

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

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

Пройти курс

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

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

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

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

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

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

Плюсы:

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

Минусы:

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

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

Пройти курс

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

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

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

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

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

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

Плюсы:

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

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

Пройти курс

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

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

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

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

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

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

Плюсы:

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

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

Пройти курс

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

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

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

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

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

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

Плюсы:

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

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

Пройти курс

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

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

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

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

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

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

Плюсы:

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

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

Пройти курс

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

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

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

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

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

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

Плюсы:

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

Минусы:

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

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

Пройти курс

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

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

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

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

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

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

Плюсы:

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

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

Пройти курс

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

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

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

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

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

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

Плюсы:

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

Упражнение по дизайну: Краткий обзор дизайна и мудборд

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

Если вы следите за уроками, что такое дизайн? и Этика дизайна — отличные уроки, которые стоит изучить перед созданием описания дизайна и доски настроения.

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

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

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

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

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

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

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

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

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

Часто бриф исходит от клиента или заинтересованного лица в вашей компании.

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

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

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

Закончили упражнение и хотите получить отзыв? В Интернете существует множество сообществ, где можно критиковать дизайнерские работы, например, Behance, Dribbble и Figma Africa. Существует также сообщество пользователей Figma, speckt.chat/figma, которое включает в себя канал, посвященный предоставлению и получению отзывов о дизайнерских работах, speck.chat/figma/critique.

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

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

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

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

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

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

«Мне не нравится оранжевый» — это не качественная обратная связь.

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

Сообщите дизайнеру, если что-то не понятно, и представьте ему проблему, а не свое решение. Например, скажите: «Мне трудно читать этот текст». Вместо «Пожалуйста, сделайте текст крупнее».

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

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

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

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

Figma 101: Введение в Figma

Просмотреть все уроки

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

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

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

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

Что мы рассмотрим в Figma 101

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

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

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

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

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

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

Сегодняшнее руководство

1. Настройте свою учетную запись Figma ввод ваших данных. Как только вы это сделаете, Figma откроется с таким стартовым экраном. Нажмите «Новый файл», и мы начнем!

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

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

Меню:

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

Инструменты:

Здесь вы можете быстро получить доступ к наиболее часто используемым инструментам: рамкам, фигурам, тексту и т. д. (Мы рассмотрим все эти инструменты в ближайшие пару дней!)

Опции:

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

слоев:

Где перечислены все элементы в файле, организованные во фреймы и группы.

Холст:

Здесь вы создаете и просматриваете всю свою работу.

Инспектор:

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

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

3. Создайте фрейм

В Figma фрейм — это, по сути, контейнер для других элементов. Если вы раньше использовали Sketch или Adobe Illustrator, они работают так же, как артборд. Нажмите 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:

• ⌘]: переместить вперед
• ⌘Опц.]: вывести на передний план
• ⌘[: отправить назад
• ⌘Опц[: отправить на задний план

ПК:

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

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

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

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

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

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

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

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