Figma: проектирование и прототипирование интерфейсов в соответствии с принципами UX/UI

Содержание книги "Figma: проектирование и прототипирование интерфейсов в соответствии с принципами UX/UI "

От издательства
Творческий коллектив
Предисловие
Часть I. ВВЕДЕНИЕ В Figma И FigJam
Глава 1. Знакомство с Figma и переход с других инструментов
Что такое Figma
Почему именно Figma
Создание учетной записи
Выбор правильного тарифного плана
Различие между настольным и веб-приложением
Настройка установщика шрифтов
Переход на Figma со Sketch и Adobe XD
Переход со Sketch
Насколько сложно перейти от Sketch к Figma
Переход с Adobe XD
Полезный совет
Знакомство с начальным экраном
Recents
Drafts
Community
Команды и проекты
Файлы Figma и FigJam
Учетная запись и уведомления
Краткое содержание главы
Глава 2. Структурирование мудбордов, образов и путей пользователей в FigJam
Изучение идей и совместная работа в FigJam
Знакомство с FigJam
Мозговой штурм с коллегами
Переходим к следующему этапу
Создание мудбордов и персон в FigJam
Этап исследования
Почему важен анализ конкурентов
Создаем мудборд
Создание образов пользователей
Построение пользовательского потока в FigJam
Как выбрать лучший путь
Поставьте себя на место пользователя
Краткое содержание главы
Глава 3. Знакомство со средой разработки
Начинаем новый дизайн-проект
Файлы дизайна
Фреймы и группы
Обзор интерфейса
Знакомство с панелью инструментов
Основные инструменты
Настройки и многое другое
Быстрые клавиши
Знакомство с левой панелью
Слои и страницы
Assets
Знакомство с правой панелью
Design
Prototype
Справочный центр
Краткое содержание главы
Глава 4. Создание каркаса интерфейса с помощью векторных фигур
Трансформация идеи в каркас дизайна
Что такое каркас
Почему в приоритете мобильные устройства
Работа с фигурами в Figma
Простые фигуры
Объединение фигур
Продвинутые векторные операции с помощью инструмента Pen
Что такое векторная графика
Знакомство с инструментом Pen
Векторные сети
Разработка структуры приложения
От потока к каркасу
Формирование интерфейса
Что дальше
Краткое содержание главы
Часть II. ЗНАКОМСТВО С КОМПОНЕНТАМИ, СТИЛЯМИ И ВАРИАНТАМИ
Глава 5. Применение сеток, цветов и типографики в грамотном дизайне
Учимся работать с сетками
Сетки повсюду!
Направляющие и разметочные сетки
Работа с типографикой, цветами и эффектами
Почему важна типографика
Выбор палитры
Создание эффектов
Знакомство со стилями
Подготовка вашего файла
Создание стилей сетки и управление ими
Создание стилей текста и управление ими
Создание стилей цвета и эффектов и управление ими
Краткое содержание главы
Глава 6. Создание адаптивного мобильного интерфейса с помощью автокомпоновки
Знакомство с автокомпоновкой
Что такое автокомпоновка
Добавление, удаление и перестановка элементов
Вложенная автокомпоновка
Изменение размера и ограничения
Изменение размера элементов
Характерные особенности ограничителей
Применение автокомпоновки к интерфейсу
Формирование кнопки
Завершение представления
Краткое содержание главы
Глава 7. Создание компонентов и вариантов в совместном рабочем пространстве
Создание и организация компонентов
Что такое компоненты
Построение представления с использованием компонентов
Расширение компонентов с помощью вариантов
Зачем нужны варианты
Настройка просмотра описания контента
Создание вариантов
Многопользовательский режим, библиотеки и контроль версий
Работа с многопользовательскими функциями
Управление библиотеками
Сохранение вашей работы с поддержкой истории версий
Краткое содержание главы
Глава 8. Варианты пользовательского интерфейса для планшета, компьютера и веб-сайта
Знакомство с адаптивным дизайном
Переход от дизайна к коду с помощью эластичных макетов
Приоритет мобильных устройств
Настройка интерфейса для планшетов
Знакомство с точками перехода
Настройка интерфейса для интернета и настольного компьютера
Масштабирование для браузеров и настольных компьютеров
Завершающие штрихи
Краткое содержание главы
Часть III. ПРОТОТИПИРОВАНИЕ И ОБМЕН ИНФОРМАЦИЕЙ
Глава 9. Прототипирование с использованием переходов, Smart Animate и интерактивных компонентов
Применение переходов и триггеров
Перемещение между фреймами с помощью переходов
Знакомство с триггерами
Знакомство с умной анимацией
Что такое умная анимация
Продвинутое использование умной анимации
Структурирование интерактивных компонентов
Что такое интерактивные компоненты
Создание интерактивных компонентов
Создание интерактивных переполнений и наложений
Делаем представление прокручиваемым с помощью переполнения
Создание наложений интерфейса
Краткое содержание главы
Глава 10. Тестирование и совместное использование прототипа в браузерах и на реальных устройствах
Просмотр интерактивного прототипа
Запуск прототипов на компьютере / в интернете
Использование встроенного предварительного просмотра
Запуск прототипа на смартфоне/планшете
Предоставление прототипа сторонним пользователям
Связывание прототипа и управление разрешениями
Встраивание прототипа
Работа с отзывами и обзорами
Обозреватели и комментарии
Структурирование потоков
Продвинутое пользовательское тестирование
Краткое содержание главы
Глава 11. Экспорт ресурсов и управление процессом передачи проекта
Экспорт из Figma
Какие форматы поддерживаются
Экспорт одного и нескольких ресурсов
Знакомство с режимом разработчика
Переключение в режим разработки
Обзор файла
От дизайна к коду
Расширение режима разработки
Передача проекта в разработку
Что дальше
Документирование, повторение и улучшение
Краткое содержание главы
Глава 12. Поиск ресурсов, плагинов и виджетов в сообществе Figma
Знакомство с сообществом Figma
Доступ и публикация в сообществе Figma
Начинаем с FigJam и шаблонов
Поиск полезных ресурсов
Наборы пользовательского интерфейса и системы дизайна
Другие ресурсы для дизайнеров
Расширение функциональности Figma с помощью плагинов
Запуск и управление плагинами
Рекомендуемые плагины
Iconify
LottieFiles
Ускорение рабочего процесса с помощью искусственного интеллекта
FigGPT
Figma Autoname
Wireframe Designer
Magician
Использование виджетов в Figma и FigJam
Разница между виджетами и плагинами
Рекомендуемые виджеты
Checklist (Figma/FigJam)
Jira/Asana (Figma/FigJam)
Giphy Stickers (Figma/FigJam)
Jambot (FigJam)
Краткое содержание главы
Глава 13. Продвинутые методы работы с переменными и условным прототипированием
Знакомство с переменными
Когда нужны переменные
Переменные, коллекции и режимы
Реализация адаптивности и многоязычности с помощью переменных
Продвинутое условное прототипирование
Логика условного прототипирования
Продвинутое прототипирование с переменными и условиями
Краткое содержание главы
Предметный указатель