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

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

Fabio Staiano
Designing and 
Prototyping Interfaces 
with Figma
Elevate your design craft  
with UX/UI principles and create 
interactive prototypes
Second Edition
BIRMINGHAM—MUMBAI

Фабио Стаяно
Figma: проектирование 
и прототипирование 
интерфейсов 
в соответствии 
с принципами UX/UI
Москва, 2024

УДК	 004.4, 004.8
ББК 32.973, 32.813
С75
Стаяно Ф.
С75 	 Figma: проектирование и прототипирование интерфейсов в соответствии 
с принципами UX/UI / пер. с англ. В. С. Яценкова. – М.: ДМК Пресс, 2024. – 
370 с.: ил. 
ISBN 978-5-93700-302-7
Figma – онлайн-сервис для разработки интерфейсов и прототипирования с возможностью организации совместной работы в режиме реального времени. Книга 
охватывает обширный спектр функций Figma, включая переменные, условное 
прототипирование и инструменты искусственного интеллекта. Вы узнаете, как 
превратить статические проекты интерфейса в динамические интерактивные 
прототипы, а затем эффектно презентовать их. На примере пошаговой разработки интерфейса приложения для просмотра потокового видео подробно описаны 
технические аспекты проектирования и раскрыты все ключевые понятия. Автор 
уделяет особое внимание вопросам коммуникации в команде и методам оптимизации производственного процесса, сбору информации о пользовательском 
опыте и реализации адаптивного интерфейса.
Книга адресована как начинающим UX/UI-дизайнерам, так и опытным специалистам, которые хотят перейти на Figma из других сред разработки.
УДК  004.4, 004.8
ББК  32.973, 32.813
First published in the English language under the title ‘Designing and Prototyping Interfaces 
with Figma - Second Edition –(9781835464601).
Все права защищены. Любая часть этой книги не может быть воспроизведена в какой бы то ни было форме и какими бы то ни было средствами без письменного разрешения 
владельцев авторских прав.
ISBN 978-1-83546-460-1 (англ.) 	
©  2023 Packt Publishing
ISBN 978-5-93700-302-7 (рус.) 	
©  Перевод, оформление, издание,  
ДМК Пресс, 2023

Содержание
От издательства.......................................................................................................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

6    Содержание
Построение пользовательского потока в 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

Содержание    7
Направляющие и разметочные сетки......................................................................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

8    Содержание
Знакомство с точками перехода..............................................................................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

Содержание    9
От дизайна к коду....................................................................................................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

От издательства
Отзывы и пожелания
Мы всегда рады отзывам наших читателей. Расскажите нам, что вы ду-маете 
об этой книге – что понравилось или, может быть, не понравилось. Отзывы 
важны для нас, чтобы выпускать книги, которые будут для вас максимально 
полезны.
Вы можете написать отзыв на нашем сайте www.dmkpress.com, зайдя на 
страницу книги и оставив комментарий в разделе «Отзывы и рецензии». 
Также можно послать письмо главному редактору по адресу dmkpress@gmail.
com; при этом укажите название книги в теме письма. 
Если вы являетесь экспертом в какой-либо области и заинтересованы в написании новой книги, заполните форму на нашем сайте по адресу http://
dmkpress.com/authors/publish_book/ или напишите в издательство по адресу 
dmkpress@gmail.com.
Список опечаток
Хотя мы приняли все возможные меры для того, чтобы обеспечить высокое качество наших текстов, ошибки все равно случаются. Если вы найдете 
ошибку в одной из наших книг, мы будем очень благодарны, если вы сообщите о ней главному редактору по адресу dmkpress@gmail.com. Сделав это, 
вы избавите других читателей от недопонимания и поможете нам улучшить 
последующие издания этой книги. 
Нарушение авторских прав
Пиратство в интернете по-прежнему остается насущной проблемой. Издательство «ДМК Пресс» очень серьезно относится к вопросам защиты авторских прав 
и лицензирования. Если вы столкнетесь в интернете с незаконной публикацией 
какой-либо из наших книг, пожалуйста, пришлите нам ссылку на интернет-ресурс, чтобы мы могли применить санкции.
Ссылку на подозрительные материалы можно прислать по адресу электронной почты dmkpress@gmail.com.
Мы высоко ценим любую помощь по защите наших авторов, благодаря 
которой мы можем предоставлять вам качественные материалы.