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Знакомство с начальным экраном....26Recents....26Drafts....27Community....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Слои и страницы....70Assets....71Знакомство с правой панелью....72Design....72Prototype....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Рекомендуемые плагины....315Iconify....315LottieFiles....318Ускорение рабочего процесса с помощью искусственного интеллекта....319FigGPT....320Figma Autoname....321Wireframe Designer....321Magician....322Использование виджетов в Figma и FigJam....324Разница между виджетами и плагинами....325Рекомендуемые виджеты....326Checklist (Figma/FigJam)....326Jira/Asana (Figma/FigJam)....327Giphy Stickers (Figma/FigJam)....327Jambot (FigJam)....328Краткое содержание главы....329Глава 13. Продвинутые методы работы с переменными и условным прототипированием....331Знакомство с переменными....332Когда нужны переменные....332Переменные, коллекции и режимы....334Реализация адаптивности и многоязычности с помощью переменных....345Продвинутое условное прототипирование....356Логика условного прототипирования....356Продвинутое прототипирование с переменными и условиями....358Краткое содержание главы....367Предметный указатель....369