Полезные плагины для Figma. Часть вторая. — Brandloga.ru — творческая берлога Егора Сорокина

Вторая часть моего обзора на самые необходимые в арсенале дизайнера плагины для Фигмы.

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

Несмотря на название, этот плагин не делает бленды — переходы форм объектов, как в Иллюстраторе. Он просто размещает копии объект вдоль определённого пути. Тоже бывает полезно.

Аналогично предыдущему плагину, размещает объекты вдоль выбранного пути. Хорошая вещь.

Генерирует красивые волнушки. Сейчас они не такие модные, как в 2019, но порой нужны.

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

Работа плагина Easometric

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

Тут всё просто. Генератор шума. Хорошо заходит для создания текстурных фонов в веб-дизайне.

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

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

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

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

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

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

Изгибает объект. Чаще всего применяю для каких-то надписей.

Честно, никогда не применял, потому что пользоваться Freehand в Фигме практически не приходится, подобные вещи заранее готовлю в Иллюстраторе. Но иметь в арсенале всегда полезно.

«Из коробки» в Фигме слабые возможности коррекции изображений. Плагин включает в себя целый ряд знакомых с Фотошопа фильтров типа Hue/Saturation, Unsharping Mask, Tilt Shift и прочие.

Создаёт разнообразные пятна-кляксы. Я применяю для быстрого создания абстрактных фонов.

Создаёт паттерны из элементов или выбранных объектов.

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

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

Как в Figma сделать о «шумный» градиент / Skillbox Media

Дизайн

#Руководства

• 9 сен 2022

• 0

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

Vkontakte

Twitter

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

Twitter

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 Секции Figma

3

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.