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

От издательства....10
Творческий коллектив....11
Предисловие....12
Часть I. ВВЕДЕНИЕ В Figma И FigJam....15
Глава 1. Знакомство с Figma и переход с других инструментов....16
Что такое Figma?....17
Почему именно Figma?....18
Создание учетной записи....18
Выбор правильного тарифного плана....19
Различие между настольным и веб-приложением....21
Настройка установщика шрифтов....22
Переход на Figma со Sketch и Adobe XD....22
Переход со Sketch....22
Насколько сложно перейти от Sketch к Figma?....23
Переход с Adobe XD....24
Полезный совет....25
Знакомство с начальным экраном....26
Recents....26
Drafts....27
Community....27
Команды и проекты....27
Файлы Figma и FigJam....30
Учетная запись и уведомления....31
Краткое содержание главы....32
Глава 2. Структурирование мудбордов, образов и путей пользователей в FigJam....33
Изучение идей и совместная работа в FigJam....34
Знакомство с FigJam....34
Мозговой штурм с коллегами....39
Переходим к следующему этапу....42
Создание мудбордов и персон в FigJam....43
Этап исследования....43
Почему важен анализ конкурентов....45
Создаем мудборд....45
Создание образов пользователей....46
Построение пользовательского потока в FigJam....48
Как выбрать лучший путь....49
Поставьте себя на место пользователя....52
Краткое содержание главы....53
Глава 3. Знакомство со средой разработки....54
Начинаем новый дизайн-проект....55
Файлы дизайна....55
Фреймы и группы....56
Обзор интерфейса....58
Знакомство с панелью инструментов....60
Основные инструменты....60
Настройки и многое другое....66
Быстрые клавиши....68
Знакомство с левой панелью....69
Слои и страницы....70
Assets....71
Знакомство с правой панелью....72
Design....72
Prototype....73
Справочный центр....75
Краткое содержание главы....76
Глава 4. Создание каркаса интерфейса с помощью векторных фигур....77
Трансформация идеи в каркас дизайна....78
Что такое каркас?....78
Почему в приоритете мобильные устройства?....79
Работа с фигурами в Figma....80
Простые фигуры....80
Объединение фигур....83
Продвинутые векторные операции с помощью инструмента Pen....86
Что такое векторная графика?....86
Знакомство с инструментом Pen....88
Векторные сети....91
Разработка структуры приложения....92
От потока к каркасу....93
Формирование интерфейса....95
Что дальше?....99
Краткое содержание главы....100
Часть II. ЗНАКОМСТВО С КОМПОНЕНТАМИ, СТИЛЯМИ И ВАРИАНТАМИ....101
Глава 5. Применение сеток, цветов и типографики в грамотном дизайне....102
Учимся работать с сетками....102
Сетки повсюду!....103
Направляющие и разметочные сетки....104
Работа с типографикой, цветами и эффектами....108
Почему важна типографика....108
Выбор палитры....113
Создание эффектов....118
Знакомство со стилями....119
Подготовка вашего файла....120
Создание стилей сетки и управление ими....120
Создание стилей текста и управление ими....124
Создание стилей цвета и эффектов и управление ими....128
Краткое содержание главы....131
Глава 6. Создание адаптивного мобильного интерфейса с помощью автокомпоновки....132
Знакомство с автокомпоновкой....133
Что такое автокомпоновка?....133
Добавление, удаление и перестановка элементов....138
Вложенная автокомпоновка....139
Изменение размера и ограничения....140
Изменение размера элементов....140
Характерные особенности ограничителей....142
Применение автокомпоновки к интерфейсу....144
Формирование кнопки....144
Завершение представления....152
Краткое содержание главы....157
Глава 7. Создание компонентов и вариантов в совместном рабочем пространстве....159
Создание и организация компонентов....159
Что такое компоненты?....160
Построение представления с использованием компонентов....163
Расширение компонентов с помощью вариантов....178
Зачем нужны варианты?....178
Настройка просмотра описания контента....179
Создание вариантов....182
Многопользовательский режим, библиотеки и контроль версий....189
Работа с многопользовательскими функциями....189
Управление библиотеками....191
Сохранение вашей работы с поддержкой истории версий....194
Краткое содержание главы....197
Глава 8. Варианты пользовательского интерфейса для планшета,
компьютера и веб-сайта....198
Знакомство с адаптивным дизайном....199
Переход от дизайна к коду с помощью эластичных макетов....199
Приоритет мобильных устройств....201
Настройка интерфейса для планшетов....208
Знакомство с точками перехода....209
Настройка интерфейса для интернета и настольного компьютера....216
Масштабирование для браузеров и настольных компьютеров....217
Завершающие штрихи....225
Краткое содержание главы....227
Часть III. ПРОТОТИПИРОВАНИЕ И ОБМЕН ИНФОРМАЦИЕЙ....229
Глава 9. Прототипирование с использованием переходов,
Smart Animate и интерактивных компонентов....230
Применение переходов и триггеров....231
Перемещение между фреймами с помощью переходов....232
Знакомство с триггерами....238
Знакомство с умной анимацией....241
Что такое умная анимация?....241
Продвинутое использование умной анимации....243
Структурирование интерактивных компонентов....246
Что такое интерактивные компоненты?....246
Создание интерактивных компонентов....247
Создание интерактивных переполнений и наложений....254
Делаем представление прокручиваемым с помощью переполнения....254
Создание наложений интерфейса....257
Краткое содержание главы....260
Глава 10. Тестирование и совместное использование прототипа
в браузерах и на реальных устройствах....261
Просмотр интерактивного прототипа....262
Запуск прототипов на компьютере / в интернете....262
Использование встроенного предварительного просмотра....267
Запуск прототипа на смартфоне/планшете....268
Предоставление прототипа сторонним пользователям....270
Связывание прототипа и управление разрешениями....271
Встраивание прототипа....272
Работа с отзывами и обзорами....275
Обозреватели и комментарии....275
Структурирование потоков....278
Продвинутое пользовательское тестирование....280
Краткое содержание главы....282
Глава 11. Экспорт ресурсов и управление процессом передачи проекта....283
Экспорт из Figma....284
Какие форматы поддерживаются?....284
Экспорт одного и нескольких ресурсов....285
Знакомство с режимом разработчика....289
Переключение в режим разработки....290
Обзор файла....291
От дизайна к коду....293
Расширение режима разработки....295
Передача проекта в разработку....296
Что дальше?....297
Документирование, повторение и улучшение....298
Краткое содержание главы....300
Глава 12. Поиск ресурсов, плагинов и виджетов в сообществе Figma....302
Знакомство с сообществом Figma....303
Доступ и публикация в сообществе Figma....303
Начинаем с FigJam и шаблонов....305
Поиск полезных ресурсов....306
Наборы пользовательского интерфейса и системы дизайна....307
Другие ресурсы для дизайнеров....309
Расширение функциональности Figma с помощью плагинов....311
Запуск и управление плагинами....312
Рекомендуемые плагины....315
Iconify....315
LottieFiles....318
Ускорение рабочего процесса с помощью искусственного интеллекта....319
FigGPT....320
Figma Autoname....321
Wireframe Designer....321
Magician....322
Использование виджетов в Figma и FigJam....324
Разница между виджетами и плагинами....325
Рекомендуемые виджеты....326
Checklist (Figma/FigJam)....326
Jira/Asana (Figma/FigJam)....327
Giphy Stickers (Figma/FigJam)....327
Jambot (FigJam)....328
Краткое содержание главы....329
Глава 13. Продвинутые методы работы с переменными и условным прототипированием....331
Знакомство с переменными....332
Когда нужны переменные....332
Переменные, коллекции и режимы....334
Реализация адаптивности и многоязычности с помощью переменных....345
Продвинутое условное прототипирование....356
Логика условного прототипирования....356
Продвинутое прототипирование с переменными и условиями....358
Краткое содержание главы....367
Предметный указатель....369

Figma — онлайн-сервис для разработки интерфейсов и прототипирования с возможностью организации совместной работы в режиме реального времени. Книга охватывает обширный спектр функций Figma – включая переменные, условное прототипирование и инструменты искусственного интеллекта.

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

В числе рассматриваемых тем:

• предпроектный анализ портрета пользователя и создание черновика дизайна;
• разработка проекта интерфейса, отвечающего потребностям пользователей и обеспечивающего безупречный опыт;
• интеграция возможностей искусственного интеллекта в производственный процесс;
• создание иммерсивных прототипов с помощью условного прототипирования и переменных;
• эффективное общение с технической и нетехнической аудиторией;
• разработка креативных решений для сложных дизайнерских задач;
• сбор и применение отзывов пользователей с помощью интерактивного прототипа.

Книга адресована как начинающим UX/UI-дизайнерам, так и опытным специалистам, которые хотят перейти на Figma из других сред разработки, а также будет полезна разработчикам кода, желающим познакомиться с передовыми технологиями проектирования интерфейсов.