Содержание
Полезные плагины для Figma. Часть вторая. — Brandloga.ru — творческая берлога Егора Сорокина
Вторая часть моего обзора на самые необходимые в арсенале дизайнера плагины для Фигмы.
В первой части я рассказывал про те плагины, которые использую ежедневно. Сейчас рассмотрим расширения немного другого плана. Эти плагины требуются не так часто, но выручают и расширяют возможности фигмы как векторного редактора. Применяю по необходимости, когда хочется обойтись без перехода в Фотошоп или Иллюстратор.
Несмотря на название, этот плагин не делает бленды — переходы форм объектов, как в Иллюстраторе. Он просто размещает копии объект вдоль определённого пути. Тоже бывает полезно.
Аналогично предыдущему плагину, размещает объекты вдоль выбранного пути. Хорошая вещь.
Генерирует красивые волнушки. Сейчас они не такие модные, как в 2019, но порой нужны.
Быстренько трансформирует макеты в изометрию. Этот плагин — лучший по функционалу среди своих конкурентов.
Работа плагина Easometric
Опять же периодически — но очень полезный плагин, позволяющий сделать наклон объектов. До этого плагина мне приходилось лезть в Иллюстратор.
Тут всё просто. Генератор шума. Хорошо заходит для создания текстурных фонов в веб-дизайне.
Сделать хороший градиент не так просто. Новички обычно кидают два цвета, а машина уже продумывает переход за них. Обычно в середине получается невразумительный грязновато-тусклый оттенок. Чтобы сделать красивый градиент, нужно обязательно ставить как минимум два переходных цвета. Для практики рекомендую посмотреть вот этот курс, там доходчиво рассказывают, как создавать красивые градиенты.
Так вот, возвращаясь к плагину — он создаёт целую тучу промежуточных точек, чтобы сгладить переходы градиентов. Сравните:
Градиент становится плавным и приятным глазу
На сложных градиентах он, конечно, лажает, но попробовать применить можно, иногда выдаёт приличный результат.
Продолжая тему градиентов. Этот плагин предлагает базу градиентов из сервиса UiGradients. Это если вдруг не хватает фантазии, чтобы быстро создать свою пару цветов.
Полезный плагин-костыль, который позволяет обойти ограничение размера вставляемого изображения в 4096 пикселей в макет Фигмы. С помощью него можно вставить большие картинки. Нужная вещь.
Изгибает объект. Чаще всего применяю для каких-то надписей.
Честно, никогда не применял, потому что пользоваться Freehand в Фигме практически не приходится, подобные вещи заранее готовлю в Иллюстраторе. Но иметь в арсенале всегда полезно.
«Из коробки» в Фигме слабые возможности коррекции изображений. Плагин включает в себя целый ряд знакомых с Фотошопа фильтров типа Hue/Saturation, Unsharping Mask, Tilt Shift и прочие.
Создаёт разнообразные пятна-кляксы. Я применяю для быстрого создания абстрактных фонов.
Создаёт паттерны из элементов или выбранных объектов.
Считает количество символов в тексте. Бывает полезно, когда вместе с разработчиками решаете вопрос о том, насколько большой текстовый блок сделать.
Аналог выбора шрифтов в любом Адобопродукте — видны сразу превью шрифтов, а не только названия. Работает чуток медленно, но пользоваться можно.
Как в Figma сделать о «шумный» градиент / Skillbox Media
Дизайн
#Руководства
0
Коротко и ясно рассказываем, как быстро добиться интересного эффекта для вашего проекта.
Vkontakte
Telegram
Скопировать ссылку
Иллюстрация: Merry Mary для Skillbox Media
Вячеслав Лазарев
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
Обычно плагины в Figma позволяют расширить её функции. Но иногда они просто помогают ускорить работу и быстро добавить интересные эффекты в ваш проект. В этой инструкции рассказываем, как с помощью плагина Noise сделать «шумный», или «зернистый», градиент.
- Сделайте два квадрата с цветами на каждую фигуру, которые образуют ваши градиенты. В нашем примере будет две фигуры и четыре цвета — #8EC5FC и #E0C3FC, #F5576C и #F093FB.
- Создайте нужные фигуры — в нашем случае это две буквы P. Выделите одну из них, на боковой панели настроек зайдите в свойства её цвета и вместо Solid выберите Linear.
- Выделите образец цвета на градиенте и с помощью пипетки скопируйте цвета из квадрата.
- На прямоугольнике настройте градиент так, чтобы на нём не было резких переходов из одного цвета в другой.
- Повторите то же самое и для второй фигуры.
- Скачайте плагин Noise по ссылке.
- Нажмите правой кнопкой мыши по макету, в выпадающем меню перейдите в пункт Plugins и выберите Noise. В появившемся меню настройте текстуру шума.
- Растяните текстуру на всю ширину и высоту любой фигуры.
- На боковой панели настроек в блоке Layer вместо Normal выберите Overlay.
Если ваша фигура не квадрат и не круг, текстура будет вылезать за её пределы. Чтобы это исправить, нужно сделать слой-маску:
- Слева на панели слоёв выделите фигуру с текстурой и сгруппируйте их с помощью сочетания Ctrl (⌘) + G.
- Внутри новой группы выделите свою фигуру, сделайте её копию и поставьте в самый низ.
- Нажмите на копию фигуры правой кнопкой мыши и нажмите Use as mask — или нажмите Ctrl (⌘) + Alt (⌥) + G.
Все эти действия нужно повторить для обеих фигур.
Результат:
Изображение: Braley Design / Skillbox Media
Самоучитель по Figma
Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.
Больше о Figma
Vkontakte
Telegram
Скопировать ссылку
Научитесь: Figma с нуля до PRO
Узнать больше
В Сан-Антонио прошла выставка дизайнерских скворечников
24 апр 2023
Дизайнерка придумала, как рассказать 950-летнюю историю британской монархии с помощью одного шрифта
24 апр 2023
Шигеру Бан сделал выставку светильников Фрэнка Ллойда Райта в туннеле из бумажных труб
21 апр 2023
Понравилась статья?
Да
Градиенты сетки — Руководство Figma
Добавить в избранное
Создавайте красивые волнообразные градиенты с помощью фигур или плагина градиента сетки в Figma
Руководство Figma
1
Инструмент проектирования Figma
02
0:54 03
Редактор в Figma
1:17
3
Основные инструменты
2:14
4
Свойства положения, размера, поворота и углового радиуса
30 79009 0 0:000002 5
Цветовые стили
1:13
7
Темный режим с выбранными цветами
1:17
8
Градиенты 90 03
1 9000 02 9
Создание фона
2:37
10
Режимы наложения
2:02
11
Свойства выравнивания, распределения и очистки
1:24
12 9003
Объединение и угловое соединение 2:53
13
Эффекты тени и размытия
1:48
14
Использование изображений
2:00
15
Заливка, обводка и расширенная обводка
9003 901
0:20 0003
Свойства и стили текста
1:37
17
Шрифты Google и пользовательские шрифты
1:13
18
Специальные возможности
19
Адаптивный дизайн 90 7 0 90 0 023 90 002 20
Ограничения
1:11
21
Сетка макета
2:00
22
Автоматический макет в Figma
8:17
23
3 Векторный режим 0:00003 Векторный режим
24
Векторная сеть
1:19
25
Мокапы в перспективе
2:00
26
3D-мокапы
1:20
27 90 Использование дизайна in3
27 90
27 9000 9000 9000 2 2:03
28
Логические значения
2:24
29
Дизайн иконок
1:48
30
Компоненты
1:50
31
Коллективная библиотека
2 0:03003
32
Создание конфетти
1:59
33
Дублирование формы петлителя
1:41
34
Apple Watch Ring
2:23
35
Экспорт ресурсов в Figma
09 020003 93002 36
Экспорт кода CSS
1:04
37
Проектирование с использованием данных
1:57
38
Прототипирование
2:25
3
0 История 002 1:25
40
Мультиплеер, комментирование и Превью
1:36
41
Варианты
5:39
42
Интерактивные компоненты
43 its
UIK 7
44
Плагины
5:47
45
Фон Blob
4:45
46
Фон Wave
6:46
47
90 2: 7 9 1 0 3 Shapes 90 0003
48
Параллаксное прототипирование в Figma
7:52
49
3D UI Perspective Design
7:16
50
Стеклянная иконка
9:16
51
Анимация с хрустальным шаром
2 12:54
52
Дизайн и код линейной анимации с буквами
29:38
53
Футуристическая линейная анимация
19:30
54
Импорт из Adobe Illustrator в Figma 90 0:03029
3 9 0002 55
Создать Иллюстрация в Figma
4:07
56
Удалить плагин BG
2:27
57
Круговые линии Advanced Stroke
90 3:27
3 0002 Опубликовать дизайн в сообществе
4:49
59
Превратить изображение в вектор
3:11
60
Прототип с прокручиваемым содержимым
3:40
610002 Контент и изменение размера
62
Расширенный автоматический макет
4:13
63
Круговой текст на пути
5:57
64
Зеркальный прототип
2:39
0 35902 Прототип панели навигации и вкладок
4:37
66
Видео в Figma Prototype
67
Градиенты сетки
3:03
68
Figma Sections
3
6 Секции Figma3
6 Фотографии
2:07
70
Угловой градиент
4:17
71
Радиальный градиент
5:11
72
Прототип анимации после задержки
73
2 UI 3 Каркас
3
74
Lottie Animations
3:55
75
Дизайн экрана регистрации
6:42
76
Генератор контента
7 3
2:53
Design Int Missing Style
2:36
78
Инструмент «Срез»
79
Адаптивный макет с контрольными точками
80
Дизайн диаграмм
81
Модальные модели
2 Bat
200902 ch Переименовать
83
Вводный экран дизайна
84
Прототип анимированной кнопки
85
Интеллектуальный выбор
86
Свойства компонента
0 900 Красные линии
3 90 2 88
Интерактивный календарь
89
Измерение расстояния
90
Вариативные шрифты
91
Плагины AI
92
Текстовая анимация
93
Изменение размера слоев
94
Просмотр контуров слоя
95
Соединения прототипа
96
Экспорт файлов SVG и кода
97
3D-иллюстрации 2
9
держатель
99
Переключатель темного режима
Сетка Градиенты отличный способ добавить глубину и интерес к вашему дизайну. Если вы заинтересованы в создании потрясающе красивого дизайна с использованием сетчатых градиентов, этот урок определенно вам нужен!
Покупка включает доступ к более чем 50 курсам, более чем 320 обучающим материалам премиум-класса, более 300 часам видео, исходным файлам и сертификатам.
Учитесь с видео и исходными файлами. Доступно только подписчикам Pro.
Покупка включает доступ к более чем 50 курсам, более чем 320 обучающим материалам премиум-класса, более 300 часам видео, исходным файлам и сертификатам.
Шаблоны и исходный код
Загрузить исходные файлы
Загрузить видео и ресурсы, чтобы просматривать и учиться в автономном режиме без перерыва.
Шаблон дизайна
Исходный код для всех разделов
Видеофайлы, ePub и субтитры
Просмотреть все загрузки
1
Инструмент дизайна Figma
Начало работы с Figma в качестве инструмента дизайна
3
2
Редактор в Figma
Знакомство с интерфейсом Figma
1:17
3
Основные инструменты
Знакомство с панелью инструментов в Figma
2:14
4
Свойства положения, размера, поворота и углового радиуса
Работа со свойствами положения, размера, поворота и углового радиуса
1:27
5
Цветовые стили
Работа с цветовыми стилями Figma 90
1:13
6
Маски
Использование масок для обрезки содержимого и компоновки дизайна в Figma
1:47
7
Темный режим с выбором цветов для темного дизайна
и адаптация дизайна для дизайна с цветами выделения
1:17
8
Градиенты
Мы рассмотрим все различные способы использования градиентов в вашей работе, а также методы их создания
1:36
9
03 Создание фона Дизайн фона в Figma
2:37
10
Режимы наложения
Изучите интересные техники с режимами наложения
2:02
11
Выравнивание, распределение,
Изучение выравнивания и уборки в Figma
1:24
12
Объединение и угловой радиус
Работа над объединением и угловым радиусом
2:53
03 0 90 0003
Изучение способов добавить тени и размытие в ваш дизайн0003
Получите больше о вариантах заполнения и различных вариантов удара на рис.
3:21
16
Свойства текста и стили
Исследуйте и узнайте о свойствах типа Figma
1:37
17
Google Fonties. и пользовательские шрифты
Изучите различия между шрифтами Google и пользовательскими шрифтами для вашего веб-сайта
1:13
18
Доступность
Изучите возможности дизайна
19
Адаптивный дизайн
Разработка адаптивных макетов в Figma с использованием ограничений и автоматического макета
3:07
20
Ограничения
Работа с ограничениями в Figma
9002
1:11 90 3
Layout Grid
Обучение дизайну используя сетки, столбцы, строки и поля.
2:00
22
Auto Layout in Figma
Работа с Auto Layout для адаптивного дизайна
8:17
23
Векторный режим
Изучение векторного режима для редактирования и настройки векторных фигур
0:55
24
Векторная сеть
Обучение использованию векторных сетей и значков проектирования
1:19
9 02 Перспективные макеты
Используйте реалистичные макеты для презентации своих проектов
2:00
26
3D-макеты
Добавление 3D-макетов в дизайн
1:20
29
29
0003
Включение иллюстраций в ваш дизайн
2:03
28
Логические значения
Использование логических выражений для создания значков
2:24
02 03
Иконка 90 Узнайте, как создавать иконки с помощью инструментов, предоставляемых Figma.
1:48
30
Компоненты
Сделайте свой дизайн более пригодным для повторного использования с помощью компонентов.
1:50
31
Team Library
Публикация стилей дизайна и компонентов
2:14
32
Создание конфетти
Работа с плагином Confetti
1:59
33
Плагин Looper Shape Duplication
3
Работа с Looper Shape Duplication
3
2 1:41
34
Apple Watch Ring
Создание кольца Apple Watch в Figma
2:23
35
Экспорт ресурсов в Figma
Узнайте об экспорте ресурсов в Figma для реализации
1:39
36
Экспорт CSS-кода
Работа с CSS-кодом в Figma
1:04
37
Проектирование с использованием данных
Плагины, помогающие создавать дизайн с использованием реального контента
2 30 30 80
0:04
Прототип
Быстро создайте весь поток для дизайна вашего приложения в Figma
2:25
39
История версий
Работа с историей версий в Figma
1:25
40
03
Узнайте о совместной работе и совместном использовании с Figma
1:36
41
Варианты
Объединение похожих компонентов в варианты
5:39
900
9000s 2 Создание многоразовых взаимодействий с использованием интерактивных компонентов
43
UIKits
Проектирование с использованием UIKits в Figma
4:47
44
Плагины
Исследование и проектирование с использованием плагинов в Figma
5:47
45
Фон капли
Создайте простой фон капли в Figma
4:45
46
Фон волны
Создайте фон волны с помощью плагина Bendma и Figma 003
6:46
47
3D-фигуры
Создавайте трехмерные фигуры с помощью векторных инструментов в Figma
12:27
48
Parallax Scrolling Prototyping в Figma 900 техника анимации, где фоновый и передний слои движутся с разной скоростью
7:52
49
3D UI Perspective Design
Преобразование пользовательского интерфейса с помощью трехмерной перспективы
7:16
50
Узнайте, как создать креативный дизайн с помощью Glass Icon
размытие фона
9:16
51
Хрустальный шар с анимацией эффекта воды
Анимация волн в хрустальном шаре с помощью инструмента прототипирования
12:54
52
Дизайн и анимация с помощью букв0003
Узнайте, как анимировать линии с помощью CSS в CodeSandbox
29:38
53
Футуристическая анимация линий
Узнайте, как создать футуристический фон с помощью линий с помощью инструмента «Перо» в Figma
4 00002 19:30 90 90 3
Импорт из Adobe Illustrator в Figma
Рекомендации по импорту файла Illustrator в Figma
3:16
55
Создание иллюстрации в Figma
Использование векторного инструмента в Figma для создания иллюстрации с нуля
4:07
56
Удалить плагин BG
Удалить фон изображения с помощью плагина RemoveBG в Figma Фигма
3:27
58
Публикация дизайна в сообществе
Публикация файлов дизайна в сообществе Figma
4:49
59
Преобразование изображения Figma в вектор
3
3:11
60
Прототип с прокручиваемым содержимым
Добавьте вертикальную и горизонтальную прокрутку на ваш прототип Figma
3:42
61
Узнайте, как выбрать правильное
Изменение размера параметры изменения размера, включая объемный контент, фиксированная ширина или высота, контейнер заполнения и усечение текста
62
Advanced Auto Layout
Узнайте, как использовать режим интервалов, наложение холста, выравнивание по базовой линии текста, значения обводки в расширенном макете
4:13
63
Круглый текст на пути
Сделайте круглый текст на пути, используя плагин дуги на рис.
5:57
64
зеркальный прототип
Прототип вашего мобильного устройства Использование Мобильное приложение Figma
2:39
65
Прототипирование липкой панели навигации и панели вкладок
Как зафиксировать положение с помощью липкой панели навигации и панели вкладок
4:37
66
900 Видео Figma0003
Применение видео в качестве заливки с помощью любой векторной сети к вашему прототипу Разделы
Используйте разделы в Figma для лучшей организации проектов и облегчения совместной работы
69
Unsplash Стоковые Фото
Вставляйте красивые изображения из Unsplash прямо в свои проекты
2:07
70
Угловой градиент
Пошаговое руководство по созданию и настройке углового градиента в Figma в Фигме для профессиональный дизайн
5:11
72
Анимация после задержки Прототипирование
Самый простой способ анимировать что-либо в Интернете, используя простое взаимодействие после задержки в Figma
73
Каркас пользовательского интерфейса
Используйте различные инструменты и плагины для создания каркаса, который поможет вам легко спланировать и спроектировать пользовательский интерфейс. Figma для улучшения совместной работы и улучшения ваших проектов
3:55
75
Дизайн экрана регистрации
Простой дизайн экрана регистрации в Figma для вашего приложения или веб-сайта
6:42
76
Генератор контента
Полезные плагины, которые могут помочь дизайнерам разрабатывать с использованием реального контента и сэкономить время
2:36
78
Инструмент срезов
Экспортируйте дизайны с помощью инструмента срезов в Figma
79
Адаптивный макет с точками останова
Создание 9 гибких и отзывчивых веб-дизайнов с точками останова0003
80
Дизайн диаграмм
Изучение бесконечных возможностей дизайна диаграмм для визуализации данных
81
Дизайн модальных окон
Как создавать модальные окна, улучшающие пользовательские интерфейсы
2 3
Быстро и легко переименовать несколько файлов в Figma с помощью подключаемого модуля Batch Rename
83
Экран адаптации дизайна
Создание привлекательного опыта для удержания пользователей с помощью дизайна адаптации
84
Прототип анимированной кнопки
Как создать динамическую интерактивную кнопку
85
Интеллектуальный выбор
Более эффективное расположение слоев с помощью интеллектуального выбора
0 0 390 Свойства 9090 Уменьшить количество вариантов в вашем дизайне систему, используя свойства компонентов и редактируя их непосредственно на панели свойств
87
RedLines
Измеряйте расстояния и комментируйте свои проекты Figma перед передачей с помощью плагина Redlines Figma
88
Интерактивный календарь
Узнайте, как использовать интерактивные компоненты в Figma для создания интерактивного календаря с состояниями наведения и нажатия
89
Измерение расстояния
Разместите элементы дизайна в нужном месте с измерением расстояния в Figma
90
Variable Fonts
Узнайте, как заменить статические шрифты версией Variable Font
91
Плагины AI
Лучшие плагины AI для Figma, помогающие дизайнерам создавать лучшую графику
92
Текстовая анимация
Создайте впечатляющую анимацию движущегося текста с помощью интерактивного компонента и после задержки
93
Изменение размера слоев
Изменение размера слоев с помощью инструмента масштабирования
90 Слой 90 90
3 9 Вид 002 Понимание и организация вашего дизайн с контурами слоя просмотра
95
Подключения прототипов
Настройте свои прототипы так, чтобы любой, у кого есть доступ к просмотру, мог видеть взаимодействия
96
Экспорт SVG-файлов и кода
Экспорт изображения в виде SVG-файла позволяет легко встроить его в код HTML и CSS 98
Заполнитель пользовательского интерфейса
Вставка временного элемента для визуализации дизайна
99
Переключатель темного режима
Превратите свой дизайн в темный режим одним щелчком мыши
Познакомьтесь с инструктором
Мы все стараемся придерживаться нашего подхода к поэтапному обучению, предоставляя исходные файлы и отдавая приоритет дизайну наших курсов.
Sourasith Phomhome
Дизайнер пользовательского интерфейса
Дизайнер в Design+Code
10 курсов — 28 часов
2 часа
Дизайн iOS с помощью Midjourney и Figma
Изучите основы дизайна пользовательского интерфейса приложения и овладейте искусством создания красивых и интуитивно понятных пользовательских интерфейсов для мобильных приложений
1 час
Дизайн пользовательского интерфейса для iOS, Android и Интернета в Sketch
Создайте дизайн пользовательского интерфейса с нуля с помощью Smart Layout, Components, Prototyping в приложении Sketch
1 час
Дизайн пользовательского интерфейса приложения камеры в Figma
Создайте темный, яркий и изогнутый дизайн приложения с нуля в Figma. Создавайте стеклянные значки, мазки линз и реалистичные кнопки.
1 час
Дизайн пользовательского интерфейса для iOS 16 в Sketch
Полное руководство по дизайну для iOS 16 с видео, примерами и файлами дизайна интерактивные потоки из пользовательских дизайнов
1 час
Быстрый дизайн пользовательского интерфейса в Figma
Узнайте, как создать веб-интерфейс для портфолио с нуля в Figma
1 час
Дизайн пользовательского интерфейса Android-приложений в Figma
Разработка пользовательского интерфейса приложения для Android с нуля с использованием различных приемов и методов в Figma
2 часа
Быстрый дизайн пользовательского интерфейса в Figma
Разработка пользовательского интерфейса приложения с нуля с использованием различных приемов и методов в Figma
12 часов
Руководство по Figma 3
Полное руководство с лучшими советами и рекомендациями по Figma
4 часа
Градиенты — Руководство Figma — Design+Code
Добавить в избранное
Мы рассмотрим все способы использования градиентов в вашей работе, а также приемы при их создании
Справочник Figma
1
Инструмент дизайна Figma
0:54
2
Редактор в Figma
1:17
Основные инструменты
0 9 0002 3 3 3
2:14
4
Позиция Свойства размера, поворота и углового радиуса
1:27
5
Цветовые стили
1:13
7
3
Градиенты
1:36
9
Создание фона
2:37
10
Режимы наложения
2:02
11
3
1:24
12
Объединение и угловой радиус
2:53
13
Эффекты теней и размытия
1:48
14
Использование изображений
2:030 2:030 03
Заливка, обводка и расширенная обводка 9Доступ
19
Адаптивный дизайн
3 :07
20
Ограничения
1:11
21
Сетка макета
2:00
22
22
3
Авто 8:17
23
Векторный режим
0:55
24
Векторная сеть
1:19
25
Мокапы в перспективе
2:00
32 Мокапы 26
ups
1:20
27
Использование иллюстраций в дизайне
2:03
28
Логические значения
2:24
29
Дизайн иконок
1:48
30 Компонент 03
1:50
31
Коллективная библиотека
2:14
32
Создание конфетти
1:59
33
Дублирование формы петлителя
1:41
30 Apple Watch 34
2:23
35
Экспорт активов в Figma
1:39
36
Экспорт кода CSS
1:04
37
Проектирование с использованием данных
1:57 20 Proto
380902 ввод
2:25
39
История версий
1:25
40
Мультиплеер, комментарии и превью
1:36
41
Варианты
5:39 309
40090 активные Компоненты
43
UIKits
4:47
44
Плагины
5:47
45
Фон Blob
4:45
46
3 Фон Wave
0 3
47
3D фигуры
12:27
48
Параллаксное прототипирование в Figma
7:52
49
3D UI Perspective Design
7:16
50
Стекло 3
3 Значок 02 9:16
51
Хрустальный шар с эффектом воды Анимация
12:54
52
Дизайн и код линейной анимации с буквами
29:38
53
Футуристическая линейная анимация
9020 50 0 19:30 90 3
Импорт из Adobe Illustrator в Figma
3:16
55
Создать иллюстрацию в Figma
4:07
56
Удалить плагин BG
2:27
5
Линии Advanced Stroke
3:27
58
Опубликовать проект в сообществе
4:49
59
Превратить изображение в вектор
3:11
60
Прототип с прокручиваемым содержимым 90 90 0 03 2 : 00020
2 61
Обнять контент и изменить его размер
62
Advanced Auto Layout
4:13
63
Круговой текст на пути
5:57
64
0 Proto 9
65
Прототипы Sticky Nav и Tab Bar
4:37
66
Видео в Figma Prototype
67
Градиенты сетки
3:03
60 Figma
Sections 69
Unsplash Стоковые фото
2:07
70
Угловой градиент
4:17
71
Радиальный градиент
5:11
ввод
73
Каркас пользовательского интерфейса
2:53
74
Lottie Animations
3:55
75
Дизайн экрана регистрации
6:42
76
2 Генератор контента
3
3
77
Дизайн Без ворса Стиль
2:36
78
Инструмент «Срез»
79
Адаптивный макет с точками останова
80
Дизайн диаграмм 2 Модальности
3
2
82
Пакетное переименование
83
Адаптивный экран дизайна
84
Прототип анимированной кнопки
85
Smart Selection
86
Свойства компонента
87
RedLines3 8092 8002 RedLines3 900
Интерактивный календарь
89
Измерение расстояния
90
Переменные шрифты
91
AI-плагины
90 Анимация 90 Текст
3
3 002 93
Изменение размера слоев
94
Просмотр контуров слоя
95
Соединения прототипа
96
Экспорт SVG-файлов и кода
97
3D-иллюстрации
98
Заполнитель пользовательского интерфейса
99
Переключатель темного режима
Градиенты позволяют вашему дизайну производить лучшее впечатление по сравнению со сплошными цветами. Они в основном используются для кнопок и фона, но вы также можете использовать их для текстовых слоев. Существует несколько типов градиентов. В этом уроке мы добавим линейный градиент в Figma.
Приобретение включает доступ к более чем 50 курсам, более чем 320 обучающим материалам премиум-класса, более 300 часам видео, исходным файлам и сертификатам.
Учитесь с видео и исходными файлами. Доступно только подписчикам Pro.
Покупка включает доступ к более чем 50 курсам, более чем 320 обучающим материалам премиум-класса, более 300 часам видео, исходным файлам и сертификатам.
Шаблоны и исходный код
Загрузить исходные файлы
Загрузить видео и ресурсы, чтобы просматривать и учиться в автономном режиме без перерыва.
Шаблон дизайна
Исходный код для всех разделов
Видеофайлы, ePub и субтитры
Просмотреть все загрузки
1
Инструмент дизайна Figma
Начало работы с Figma в качестве инструмента дизайна
0:54
2
Редактор в Figma
Знакомство с интерфейсом Figma
1:17
3
Знакомство с основными инструментами
2 панель в Figma
2:14
4
Свойства положения, размера, поворота и углового радиуса
Работа со свойствами положения, размера, поворота и углового радиуса
1:27
5
Цветовые стили
Работа с цветовыми стилями в Figma
1:13
6
Маски
Использование масок для обрезки контента и компоновки дизайна в Figma
3 7
1:47
3 002 Темный режим с выбором Цвета
Научитесь проектировать и адаптировать дизайны для темного режима с помощью Selection Colors
1:17
8
Градиенты
Мы рассмотрим все различные способы использования градиентов в вашей работе, а также методы, когда их создание
1:36
9
Создание фона
Дизайн фона в Figma
2:37
10
Режимы наложения
3
3
Интересные техники 2:02
11
Выравнивание Свойства распределения, распределения и очистки
Изучение выравнивания и очистки в Figma
1:24
12
Объединение и угловой радиус
Работа с объединением и угловым радиусом
2:53
13
Эффекты теней и размытия
Изучение способов включения теней и размытия в ваш дизайн
1:48
14
Использование Figma в изображениях
3
3 0003
2:00
15
Заливка, обводка и расширенная обводка
Узнайте больше о заливке и различных параметрах обводки в Figma
3:21
16
Свойства и стили текста
и узнайте о
900 Типовые свойства Figma
1:37
17
Шрифты Google и пользовательские шрифты
Узнайте о различиях между шрифтами Google и пользовательскими шрифтами для вашего веб-сайта
19
Адаптивный дизайн
Разработка адаптивных макетов в Figma с использованием ограничений и автоматического макета
3:07
20
Ограничения
Работа с ограничениями в Figma
1:11
21
Сетка макета
Научитесь проектировать с использованием сеток, столбцов, строк и полей.
2:00
22
Auto Layout in Figma
Работа с Auto Layout для адаптивного дизайна 03
0: 55
24
Векторная сеть
Научитесь использовать векторные сети и создавать иконки
1:19
25
Перспективные макеты
Используйте реалистичные макеты для презентации своих проектов
2:00
26
3D макеты
3 дизайн
1:20
27
Использование иллюстраций в дизайне
Включение иллюстраций в ваш дизайн
2:03
28
Логические значения
Использование логических выражений для создания значков
2:24
29 Дизайн значков
3
Узнайте, как создавать значки с помощью инструментов, предоставляемых Figma
1:48
30
Компоненты
Сделайте свой дизайн более пригодным для повторного использования с помощью компонентов.
1:50
31
Коллективная библиотека
Публикация стилей и компонентов дизайна
2:14
32
Создание конфетти 9003 9003 Работа с плагином 1:59
33
Форма петлителя Дублирование
Работа с плагином Looper Figma
1:41
34
Apple Watch Ring
Создание Apple Watch Ring в Figma
2:23
35
Экспорт ассетов в Figma
900 Узнайте об экспорте 30 ассетов в Figma
900
1:39
36
Экспорт CSS-кода
Работа с CSS-кодом в Figma
1:04
37
Проектирование с использованием данных
Плагины, помогающие создавать дизайн с использованием реального контента
3 9:00003
38
Прототипирование
Быстрое создание полного цикла разработки вашего приложения в Figma
2:25
39
История версий
Работа с историей версий в Figma
3 1:03003
3 1:25
39
40
Мультиплеер , Комментирование и Предварительный просмотр
Узнайте о совместной работе и совместном использовании с Figma
1:36
41
Варианты
Объединение похожих компонентов в варианты
5:39
42
Интерактивные компоненты
Создание повторно используемых взаимодействий с использованием интерактивных компонентов
43
UIKits
Проектирование с использованием UIKits в Figma
90 4:47
3
3 0002 Плагины
Изучение и проектирование с использованием плагинов в Figma
5:47
45
Фон-клякса
Создать простой фон-клякса в Figma
4:45
46
Фон с волной
Создайте волновой дизайн в Figma с помощью инструмента «Изгиб» и плагина «Волна»
6:46
47
3D-фигуры
Создайте трехмерные фигуры с помощью векторных инструментов в Figma
12:27 900 0 8 00003 9 02 Параллаксное прототипирование в Figma
Узнайте, как создать технику анимации с прокруткой параллакса, при которой фоновый и передний слои движутся с разной скоростью
7:52
49
Перспективный дизайн 3D-интерфейса
Преобразование пользовательского интерфейса с помощью трехмерной перспективы
7:16
50
Стеклянная иконка
Узнайте, как создать креативную иконку с помощью размытия фона
9:16
31 9 Хрустальный шар с анимацией с эффектом воды
Анимация волн в хрустальном шаре с помощью инструмента прототипирования
12:54
52
Разработка и программирование линейной анимации с буквами
Узнайте, как анимировать линии с помощью CSS в CodeSandbox
29:38
53
Футуристическая линейная анимация
Узнайте, как создать футуристический фон с линиями с помощью инструмента «Перо» в Figma
19:30
54
0002 Лучшие практики для импорта файла Illustrator в Figma
3:16
55
Создание иллюстрации в Figma
Использование векторного инструмента в Figma для создания иллюстрации с нуля
4:07
56
Удалить плагин BG
Удалить фон изображения с помощью плагина RemoveBG в Figma
2:27
57
Круговые линии Advanced Stroke
2ma 3 3 90 0 линий часов 27
58
Публикация дизайна в сообществе
Публикация файлов дизайна в сообществе Figma
4:49
59
Преобразование изображения в вектор
Преобразование изображения в вектор в Figma
3:11
60
Прототип с прокручиваемым содержимым
Добавьте вертикальную и горизонтальную прокрутку на ваш прототип Figma
3:42
61
Узнайте, как выбрать правильное
Изменение размера параметры изменения размера, включая объемный контент, фиксированная ширина или высота, контейнер заполнения и усечение текста
62
Advanced Auto Layout
Узнайте, как использовать режим интервалов, наложение холста, выравнивание по базовой линии текста, значения обводки в расширенном макете
4:13
63
Круглый текст на пути
Сделайте круглый текст на пути, используя плагин дуги на рис.
5:57
64
зеркальный прототип
Прототип вашего мобильного устройства Использование Мобильное приложение Figma
2:39
65
Прототипирование липкой панели навигации и панели вкладок
Как зафиксировать положение с помощью липкой панели навигации и панели вкладок
4:37
66
900 Видео Figma0003
Применение видео в качестве заливки с помощью любой векторной сети к вашему прототипу Разделы
Используйте разделы в Figma для лучшей организации проектов и облегчения совместной работы
69
Unsplash Стоковые Фото
Вставляйте красивые изображения из Unsplash прямо в свои проекты
2:07
70
Угловой градиент
Пошаговое руководство по созданию и настройке углового градиента в Figma в Фигме для профессиональный дизайн
5:11
72
Анимация после задержки Прототипирование
Самый простой способ анимировать что-либо в Интернете, используя простое взаимодействие после задержки в Figma
73
Каркас пользовательского интерфейса
Используйте различные инструменты и плагины для создания каркаса, который поможет вам легко спланировать и спроектировать пользовательский интерфейс. Figma для улучшения совместной работы и улучшения ваших проектов
3:55
75
Дизайн экрана регистрации
Простой дизайн экрана регистрации в Figma для вашего приложения или веб-сайта
6:42
76
Генератор контента
Полезные плагины, которые могут помочь дизайнерам разрабатывать с использованием реального контента и сэкономить время
2:36
78
Инструмент срезов
Экспортируйте дизайны с помощью инструмента срезов в Figma
79
Адаптивный макет с точками останова
Создание 9 гибких и отзывчивых веб-дизайнов с точками останова0003
80
Дизайн диаграмм
Изучение бесконечных возможностей дизайна диаграмм для визуализации данных
81
Дизайн модальных окон
Как создавать модальные окна, улучшающие пользовательские интерфейсы
2 3
Быстро и легко переименовать несколько файлов в Figma с помощью подключаемого модуля Batch Rename
83
Экран адаптации дизайна
Создание привлекательного опыта для удержания пользователей с помощью дизайна адаптации
84
Прототип анимированной кнопки
Как создать динамическую интерактивную кнопку
85
Интеллектуальный выбор
Более эффективное расположение слоев с помощью интеллектуального выбора
0 0 390 Свойства 9090 Уменьшить количество вариантов в вашем дизайне систему, используя свойства компонентов и редактируя их непосредственно на панели свойств
87
RedLines
Измеряйте расстояния и комментируйте свои проекты Figma перед передачей с помощью плагина Redlines Figma
88
Интерактивный календарь
Узнайте, как использовать интерактивные компоненты в Figma для создания интерактивного календаря с состояниями наведения и нажатия
89
Измерение расстояния
Разместите элементы дизайна в нужном месте с измерением расстояния в Figma
90
Variable Fonts
Узнайте, как заменить статические шрифты версией Variable Font
91
Плагины AI
Лучшие плагины AI для Figma, помогающие дизайнерам создавать лучшую графику
92
Текстовая анимация
Создайте впечатляющую анимацию движущегося текста с помощью интерактивного компонента и после задержки
93
Изменение размера слоев
Изменение размера слоев с помощью инструмента масштабирования
90 Слой 90 90
3 9 Вид 002 Понимание и организация вашего дизайн с контурами слоя просмотра
95
Подключения прототипов
Настройте свои прототипы так, чтобы любой, у кого есть доступ к просмотру, мог видеть взаимодействия
96
Экспорт SVG-файлов и кода
Экспорт изображения в виде SVG-файла позволяет легко встроить его в код HTML и CSS 98
Заполнитель пользовательского интерфейса
Вставка временного элемента для визуализации дизайна
99
Переключатель темного режима
Превратите свой дизайн в темный режим одним щелчком мыши
Познакомьтесь с инструкторами
Мы все стараемся придерживаться нашего метода пошагового обучения, предоставляя исходные файлы и уделяя приоритетное внимание дизайну наших курсов.
Дхайрия Двиведи
Frontend Developer
Я люблю читать и писать.
2 курса — 6 часов
Справочник по дизайну пользовательского интерфейса
Полное руководство с лучшими советами и рекомендациями по дизайну пользовательского интерфейса. Бесплатные учебные пособия для изучения дизайна пользовательского интерфейса.
2 часа
Руководство Figma
Полное руководство с лучшими советами и рекомендациями по Figma
4 часа
Akson Phomhome
Дизайнер пользовательского интерфейса
Дизайнер в Design+Code.
7 курсов — 26 часов
Дизайн и прототипирование приложений с помощью Midjourney
Полный курс по преобразованию концепций Midjourney в интерактивные прототипы с использованием основных методов проектирования и инструментов искусственного интеллекта
2 часа
Дизайн веб-приложений с использованием Midjourney и Figma
3 Get Вдохновитесь пользовательским интерфейсом из Midjourney и изучите дизайн пользовательского интерфейса, цвета, типографику как новичок в Figma 9.