Дизайн в Figma

1.

Презентация
Дизайн в Figma
Основные элементы и как с ними работать

2.

План
1. Что такое Figma и как выглядит программа
2. Основные элементы: фреймы, фигуры, текст, цвета
3. Auto Layout, компоненты, варианты, сетки
4. Прототипы, плагины и работа в команде
5. Вывод
2

3.

Что такое Figma
• Онлайн-редактор для дизайна интерфейсов
• Работает в браузере, ничего не нужно устанавливать
• Появилась в 2016 году, сейчас один из главных инструментов
UI/UX-дизайнеров
• Используют для сайтов, приложений, логотипов и презентаций
3

4.

Интерфейс программы
• Слева: слои и страницы проекта
• По центру: холст, где всё рисуется
• Справа: свойства выбранного объекта
• Сверху: панель инструментов
4

5.

Фреймы
• Frame — это экран или артборд, в нём лежит весь дизайн
• Горячая клавиша F
• Есть готовые размеры: iPhone, Android, Desktop
• Фреймы можно вкладывать друг в друга
5

6.

Фигуры и инструменты
• Прямоугольник, эллипс, линия, стрелка, многоугольник
• Pen и Pencil для своих форм
• Объединение и вычитание фигур (Boolean)
• Скругление углов, обводка, тени
6

7.

Текст и шрифты
• Инструмент Text, клавиша T
• Размер, начертание, межстрочный интервал
• Подключены шрифты Google Fonts
• Лучше брать 1–2 шрифта на проект
7

8.

Цвета и стили
• Заливка (Fill) и обводка (Stroke)
• Градиенты и картинки в заливке
• Color Styles сохраняют цвета палитры
• Поменял стиль один раз, поменялось везде
8

9.

Auto Layout
• Элементы сами выстраиваются в ряд или колонку
• Настраиваются отступы и расстояния
• Кнопка подстраивается под длину текста
• Горячая клавиша Shift + A
9

10.

Компоненты
• Component — элемент, который используют много раз
• Главный компонент (Main) и его копии (Instance)
• Изменил главный, обновились все копии
• Так делают кнопки, иконки, карточки
10

11.

Варианты (Variants)
• Разные состояния одного компонента в одном наборе
• Например кнопка: обычная, при наведении, нажатая
• Переключение через свойства справа
• Экономит место и порядок в файле
11

12.

Сетки и Constraints
• Layout Grid помогает ровно расставить блоки
• Колонки, строки и обычная сетка
• Constraints задают, как объект ведёт себя при изменении
фрейма
• Дизайн адаптируется под разные экраны
12

13.

Прототипирование
• Вкладка Prototype, связываем экраны стрелками
• Задаём действие: клик, наведение, перетаскивание
• Анимации между экранами (Smart Animate)
• Режим презентации показывает рабочий прототип
13

14.

Плагины и Community
• Плагины добавляют функции: иконки, фото, генерация текста
• Community — библиотека готовых шаблонов и UI-китов
• Можно бесплатно скачать и поправить под себя
• Популярные: Unsplash, Iconify, Stark
14

15.

Совместная работа
• Несколько людей редактируют один файл одновременно
• Комментарии прямо на макете
• История версий
• Ссылка для просмотра отправляется заказчику
15

16.

Вывод
• Figma удобна для дизайна, прототипов и командной работы
• Компоненты и Auto Layout ускоряют работу
• Для начала достаточно браузера и аккаунта
Спасибо за внимание!