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 из других сред разработки, а также будет полезна разработчикам кода, желающим познакомиться с передовыми технологиями проектирования интерфейсов.