Урок 3

1.

Урок 3. FIGMA. ИНТЕРФЕЙС.
РАБОТА С ТЕКСТОМ

2.

Как пройдет
наше занятие
1 Узнаем, что такое Figma
Разберем, для чего используется Figma
2
примеры сайтов созданных с
3 Посмотрим
помощью сайтов
4 Познакомимся с интерфейсом сервиса
5 Узнаем, как работать со шрифтами в Figma
2

3.

ЧТО ТАКОЕ FIGMA
3

4.

ЧТО ТАКОЕ FIGMA?
Fifma – это облачное
приложение для
дизайна интерфейсов и
прототипирования. Оно
позволяет нескольким
пользователям работать
совместно в реальном
времени, что делает его
популярным
инструментом среди
дизайнеров.
4

5.

Для чего
используется
Figma?
1. Разработки дизайн-систем. позволяет создавать и
поддерживать единый стиль.
2. Визуализация иконок и векторной графики. Создание
инфографии для маркетплейсов тоже происходит с помощью
Figma.
3. Совместная работа и обсуждения дизайна в командах. В Figma
существуют комментарии и функции обмена отзывами в режиме
реального времени.
5

6.

Примеры макетов
сайтов, сделанных
в Figma
6

7.

Примеры макетов
сайтов, сделанных
в Figma
7

8.

КАКИЕ ПРОЕКТЫ МОЖНО
СОЗДАВАТЬ В FIGMA?
В Фигме можно отрисовать элементы
интерфейса, создать интерактивный
прототип сайта и приложения,
иллюстрации, векторную графику.
Многие дизайнеры делают в ней макеты
сайтов для Тильды.
Если вы хотите более гибко работать с
интерфейсной графикой, можно
отрисовать макет в Фигме и перенести в
Тильду.
7

9.

ПРОТОТИП ЭТО?
Прототип — это модель
сайта или приложения. С
ней заказчику проще
оценить, как люди будут
пользоваться продуктом.
Чтобы создать прототип
сайта, дизайнер
отрисовывает экраны и
создаёт связи между
ними.
9

10.

КАКИЕ ПРОЕКТЫ МОЖНО
СОЗДАВАТЬ В FIGMA?
В Фигме можно сразу показать заказчику, как дизайн будет
выглядеть на экране смартфона, планшета и других
устройств.
10

11.

ИНТЕРФЕЙС FIGMA
1
1

12.

ИНТЕРФЕЙС FIGMA
Интерфейс Figma включает в себя:
1. Панель инструментов: для создания и редактирования
объектов.
2. Область работы: основное пространство для размещения и
настройки макетов.
3. Панель слоёв: управление слоями и компонентами проекта.
4. Инспектор свойств: настройка параметров выбранных
элементов.
5. Панель комментариев: для обмена отзывами и идеями.
Эта организация интерфейса способствует эффективной работе и
быстрому доступу к необходимым функциям.
12

13.

ПАНЕЛЬ ИНСТРУМЕНТОВ
1.
2.
3.
4.
5.
6.
Выбор и перемещение.
Фигуры.
Текст.
Перо
Рамка
Инструменты
масштабирования
7. Эти инструменты
позволяют дизайнерам
создавать и
редактировать макеты
и графику.
13

14.

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

15. Панель слоев

Панель слоёв в Figma отображает
структуру всех элементов в проекте.
Она позволяет:
1. Управлять видимостью и
порядком слоёв.
2. Группировать и организовывать
элементы.
3. Быстро находить нужный слой для
редактирования.
Это помогает эффективно управлять
сложными проектами и навигировать
по дизайну.
15

16.

Инспектор
свойств
Инспектор свойств в Figma предоставляет
настройки для выбранных элементов.
Позволяет изменять:
1. Размер и положение: параметры
ширины, высоты и координат.
2. Стили: цвет, обводка, тени и
прозрачность.
3. Текст: шрифт, размер, выравнивание и
межбуквенный интервал.
4. Компоненты и варианты: управление
состояниями и модификациями.
16

17.

Инструменты
масштабирования
Инструменты масштабирования в Figma позволяют
изменять видимость и размер области работы.
Сюда входят:
1. Масштабирование (Zoom): увеличение или
уменьшение отображения для детальной
работы или обзора.
2. Панорамирование (Pan): перемещение по
области без изменения масштаба.
Эти инструменты помогают комфортно работать с
различными частями дизайна.
17

18.

РАБОТА С ТЕКСТОМ
1
8

19.

Работа с текстом в
Figma
Работа с текстом в Figma
подразумевает:
1. Добавление текста
2. Форматирование
3. Текстовые стили
4. Автоматическое
размещение
5. Интерактивные компоненты
19

20.

Работа со шрифтами
В Figma работа со
шрифтами включает:
выбор текста, настройка
размера, стиля,
интервала,
выравнивание, цвет
текста, эффекты.
Но в Figma также
существуют
вариативные шрифты.
20

21. Вариативные шрифты

Вариативные шрифты в
Figma — это шрифты,
которые включают
несколько стилей и
начертаний в одном
файле. Они позволяют
динамически изменять
такие параметры, как вес и
ширина, используя
ползунки для точной
настройки.
21

22. Как отредактировать шрифт?

1. С помощью панели
инструментов добавьте любой
текст.
2. Выделите этот текст и в
инспекторе свойств в разделе
выбора шрифта откройте
настройки
22

23.

Работа с текстом в
Figma
3. Выберите вкладку
Variable.
4. Поработайте с
ползунками на этой
вкладке.
Это самый легкий
способ работы с
вариативными
шрифтами.
23

24.

Цвет шрифта
Настройка цвета происходит в
инспекторе свойств. Можно
выбрать цвет из палитры.
Либо применить градиент
24

25.

Режимы
наложения
шрифтов
В Figma для наложения шрифтов используются различные режимы наложения
(blending modes). Эти режимы аналогичны используемым в графических
редакторах, таких как Photoshop. Вот основные из них:
1. Normal – стандартный режим, без измененных свойств наложения.
2. Multiply – затемняет изображение, умножая значения цвета нижних слоев.
3. Screen – делает изображение светлее, инвертируя цвета, умножая их и снова
инвертируя.
4. Overlay – сочетает Multiply и Screen, для контраста.
5. Darken – выбирает более темные цвета из накладываемых слоев.
6. Lighten – выбирает более светлые цвета.
7. Color Dodge – делает изображение светлее, повышая яркость.
8. Color Burn – затемняет изображение, увеличивая контраст.
9. Difference – вычитает цвета, создавая эффект инвертирования.
10. Exclusion – аналогичен Difference, но с уменьшенным контрастом.
11. Экспериментируйте с этими режимами, чтобы добиться нужного вам эффекта.
25

26.

Контур
1. Выберите текстовый слой.
2. Нажмите правой кнопкой
мыши на выделенный текст.
3. В контекстном меню
выберите "Outline Stroke"
или "Convert to Outlines".
Это превратит текст в векторные
контуры, которые вы сможете
редактировать как обычные
фигуры и менять контур.
26

27.

Тени
Чтобы добавить тени в Figma, следуйте этим
шагам:
1.
2.
Выберите объект или текстовый слой.
В правой панели свойств найдите раздел
"Effects".
3. Нажмите на иконку "+" и выберите "Drop
Shadow".
4. Настройте параметры тени: размытие,
смещение по оси X и Y, а также цвет и
прозрачность.
Таким образом, вы можете придать вашему
элементу желаемый эффект тени.
27

28.

ПЕРЕРЫВ
28

29.

ПРАКТИЧЕСКАЯ
РАБОТА
29

30.

Стилизация текста
Самостоятельная работа
Задание: Создать объемный текст в Figma
30

31.

Стилизация текста
Самостоятельная работа
Задание: Создать Glitch эффект в Figma
31

32.

Вот и все! Ваш вариативный
текст готов. Молодцы!
32

33.

ИТОГИ ЗАНЯТИЯ
33

34.

КАК ПРОШЛО ЗАНЯТИЕ?
Сегодня выполним с вами
упражнение «Лесенка
успеха». Выбери ступень,
которая тебе соответствует.
У меня все получилось
У меня были проблемы
У меня ничего не получилось
34

35.

ДО ВСТРЕЧИ!
35