UX Design with Figma: User-Centered Interface Design and Prototyping with Figma / UX-дизайн с помощью Figma: Ориентированный на пользователя дизайн интерфейса и создание прототипов с помощью Figma
Год издания: 2024
Автор: Green Tom, Brandon Kevin / Грин Том, Брэндон Кевин
Издательство: Apress Media LLC
ISBN: 979-8-8688-0324-6
Серия: Design Thinking
Язык: Английский
Формат: PDF/EPUB
Качество: Издательский макет или текст (eBook)
Интерактивное оглавление: Да
Количество страниц: 585
Описание: Maximize Figma’s arsenal of tools and plugins within a team-based collaborative environment and accelerate your company’s decision making. This book will show you where Figma fits into the user experience (UX) design process from documentation to developer handoff.
Since its release as a browser-based design tool in 2016, Figma has fast become the de facto UX Design tool for the industry mainly due to its accessibility and ease of use. As you move through the book you will learn where Figma fits in the UX process. For example, using FigJam (an online whiteboard) for brainstorming, and creating interactive prototypes for mobile devices, tablets, and web sites. You’ll also see how Figma is used to create and integrate with design systems, and how variables, when applied to design system components, can accelerate the design and development workflow.
With the help of step-by-step examples, and using Figma’s tools and templates, you’ll create artifacts such as Flow and Journey diagrams, Personas, and wireframes. From there you will explore other design and interactivity features, and how to prepare a Figma file for handoff to a development team. This book is your roadmap to utilizing Figma, the industry’s fastest growing collaborative design tool for building meaningful products.
What You Will Learn:
Create interactive prototypes
Test and submit designs for team review
Understand the collaborative workflow involved in an UX project
Prepare common UX documentation
Who This Book Is For:
Designers, developers, and UX specialists with little-to-no Figma experience who are looking to integrate it within their workflows, and intermediate Figma users who are just starting to become involved in the collaborative UX workflow.
Максимально используйте арсенал инструментов и плагинов Figma для совместной работы в команде и ускорьте принятие решений в вашей компании. Эта книга покажет вам, как Figma вписывается в процесс проектирования пользовательского интерфейса (UX) - от разработки документации до передачи разработчику.
С момента своего выпуска в 2016 году в качестве браузерного средства проектирования Figma быстро стала основным инструментом UX-проектирования в отрасли, главным образом благодаря своей доступности и простоте использования. По мере чтения книги вы узнаете, какое место Figma занимает в процессе UX. Например, использование FigJam (онлайн-доски) для проведения мозговых штурмов и создания интерактивных прототипов для мобильных устройств, планшетов и веб-сайтов. Вы также увидите, как Figma используется для создания и интеграции с системами проектирования и как переменные, применяемые к компонентам системы проектирования, могут ускорить процесс проектирования и разработки.
С помощью пошаговых примеров, а также с помощью инструментов и шаблонов Figma вы создадите такие артефакты, как диаграммы потоков и перемещений, персонажи и каркасы. Далее вы познакомитесь с другими функциями дизайна и интерактивности, а также с тем, как подготовить файл Figma для передачи команде разработчиков. Эта книга - ваш план использования Figma, самого быстрорастущего в отрасли инструмента совместного проектирования для создания значимых продуктов.
Чему вы научитесь:
Создавайте интерактивные прототипы
Тестируйте и отправляйте проекты на рассмотрение команды
Разбирайтесь в рабочем процессе совместной работы, задействованном в UX-проекте
Подготовьте общую документацию по UX
Для кого предназначена эта книга:
Дизайнеры, разработчики и специалисты по UX с небольшим опытом работы с Figma, которые хотят интегрировать ее в свои рабочие процессы, а также пользователи среднего уровня, которые только начинают участвовать в совместном UX-процессе.
Примеры страниц (скриншоты)
Оглавление
About the Authors .........................................................................................xvii
About the Technical Reviewer ..........................................................................xix
Acknowledgments ..........................................................................................xxi
Introduction ..................................................................................................xxiii
Chapter 1: Learning the Figma Interface ...........................................................1
Figma and the UX Process ...............................................................................3
The Figma Dashboard .....................................................................................4
Creating a Team in Figma ................................................................................8
Access the Figma Community ..........................................................................12
Getting Help .................................................................................................14
The Figma Workspace ...................................................................................16
Adding Frames ..............................................................................................19
Changing Frame Properties ...........................................................................23
Using the Properties Panel ............................................................................24
Using the Color Picker ...................................................................................26
Gradients .......................................................................................................29
Strokes ..........................................................................................................31
Using the Polygon Tool ...................................................................................32
Using the Layers Panel ..................................................................................35
Testing Your Work ..........................................................................................39
Community Resources and Templates ...............................................................40
Sharing ..........................................................................................................46
Dev Mode .......................................................................................................50
Conclusion .......................................................................................................51
Chapter 2: Adding Content to Figma Screens .........................................................53
Vectors and Bitmaps ...........................................................................................54
Bitmaps and Figma .............................................................................................56
Scaling Factors ...................................................................................................61
SVG Images and Figma .......................................................................................64
Figma and Video .................................................................................................66
Preparing Video for Figma ...................................................................................68
Typography and Figma ........................................................................................73
Text Properties ...............................................................................................78
Font Pairing ...................................................................................................79
Adding and Formatting Text in Figma .................................................................81
Your Turn ......................................................................................................84
Adding a Grid .................................................................................................86
Adding the Header .........................................................................................87
Create the Hero Image ...................................................................................89
Creating the Explore Section of the Site ........................................................92
Adding Cards to the Design ...........................................................................94
Adding a Text File in Figma ............................................................................97
Creating the Social Media Section ................................................................97
Adding the Images .........................................................................................99
Finishing the Web Page ...............................................................................102
You Have Learned .............................................................................................104
Chapter 3: Figma and the UX Process .................................................................107
What Exactly Is a Prototype ..............................................................................108
Determining the Platform ..................................................................................113
Building a Team in Figma ..................................................................................115
Creating a Team Project ...................................................................................118
Sharing and Collaboration .................................................................................121
Figma and User Testing .....................................................................................126
Usability Testing vs.. User Testing ...................................................................127
Usability Testing Requires Context .................................................................129
Iteration and the “Messy” UX Design Process ..................................................132
Accessibility and Inclusion in Figma .................................................................136
Adding Plug-ins in Figma ..................................................................................138
Using the Accessibility Plug-ins ........................................................................143
Using the Adee Color Contrast Tool ..................................................................148
Explore Inclusion with Cards for Humanity .........................................................151
You Have Learned .............................................................................................153
Chapter 4: Creating UX Design Documentation .................................................155
Using the Figma Presentation Mode .................................................................157
Brainstorming with FigJam ...............................................................................159
How to Use FigJam AI ..................................................................................163
Using the FigJam Drawing Tools ....................................................................165
Using the Connector Tool .............................................................................166
Adding Text to FigJam Objects ....................................................................168
Adding Comments to a FigJam File ..............................................................169
How to Add a FigJam File to Figma .............................................................171
Creating Personas .....................................................................................172
Create a Persona Using a Template .............................................................174
Editing a Persona Template .........................................................................176
Creating a User Journey Map ......................................................................180
Adding Touchpoints .....................................................................................185
Creating a User Flow Diagram ..........................................................................188
Feedback and Iteration .....................................................................................195
Your Turn: Create a User Flow Diagram in FigJam ............................................197
Build the Chart in Figma ..............................................................................201
Add the Chart to Figma ................................................................................201
You Have Learned .............................................................................................203
Chapter 5: Building Low-Fidelity Prototypes .......................................................205
What Is a Low-Fidelity Wireframe? ...................................................................206
The Case for and Against Wireframing ..............................................................208
Creating Wireframes ....................................................................................209
Wireframing and the UX Design Process ..........................................................212
What Is a Content Wireframe? .....................................................................213
From Content Wireframe to Lo-Fi Wireframe ....................................................219
Creating a Low-Fidelity Wireframe in Figma ...............................................221
Creating a Team Library ...............................................................................224
A Quick Word About Shared Libraries ..........................................................228
Build the Wireframe Using a Shared Library ...............................................229
Create Wireframes Using a Wireframing Kit ......................................................232
Use the Wireframer Library .........................................................................234
The Interactive Wireframe .................................................................................241
Add Interactivity to a Wireframe ..................................................................243
Testing an Interactive Wireframe .................................................................248
Your Turn: Wireframe a Login Sequence Using FigJam .....................................250
You Have Learned .............................................................................................256
Chapter 6: Building Medium-Fidelity Prototypes ......................................................257
Lean UX .............................................................................................................258
Agile ..................................................................................................................259
Straight to Code ................................................................................................259
What Is a Medium-Fidelity Prototype ................................................................259
Choosing a Platform ....................................................................................262
Graphics and Figma .....................................................................................266
Installing and Using Imaging Plug-ins in Figma ................................................273
Color Correcting Images in Figma ...............................................................276
Manipulating Image Content in Figma .........................................................277
Masking in Figma ........................................................................................283
Fonts and Figma ...............................................................................................285
Color and Figma ................................................................................................286
Create a Scrim Using a Gradient .......................................................................290
Adding Effects to Graphics ................................................................................297
Apply a Drop Shadow ..................................................................................297
Apply an Inner Shadow to Create a 3D Effect ..............................................299
Applying Blur Effects ...................................................................................301
Applying a Blend Mode to a Layer ...............................................................302
Create a Mesh Gradient in Figma ................................................................304
Using Auto Layout in Figma ..............................................................................306
Your Turn: Create a Medium-Fidelity Mobile App Location Card .......................314
Create the Top Search Bar ...........................................................................317
Creating the Location Card ..........................................................................318
You Have Learned .............................................................................................325
Chapter 7: Interactivity Fundamentals .............................................................327
The Basics of Adding Interactivity in Figma ......................................................331
Create a Drag Interaction ............................................................................335
Create a Hover Interaction ...........................................................................336
Create a While Pressing Interaction .............................................................337
Create a Component in Figma ..................................................................... 338
Add States by Creating Variants ..................................................................341
Adding Interactivity to a Component ...........................................................344
Create Interactivity Using a Component ......................................................346
Your Turn: Create Interactivity Using Components and Variants .......................350
Create a Component for the Home Button and Create a Text Property ..............351
Create the Variant States for the Main Navigation Button ................................353
Design Each of the Three States for the Main Navigation Home Button .............354
Apply Interactions to Each of the Three Button States ....................................355
Add the Main Navigation Button to the Header of the
Swiss - Home Page .....................................................................................357
Creating the Main Navigation Buttons .........................................................358
Adding the Header Navigation to the Adventures Page .......................................360
You Have Learned .............................................................................................362
Chapter 8: Microinteractions in Figma .................................................................363
Interactivity and Motion ....................................................................................365
Playing with Time and Motion in Figma ............................................................371
Microinteractions Overview .........................................................................372
The Principles of UX in Motion ..........................................................................373
Easing and Smart Animate ..........................................................................374
The Eases Available in Figma ......................................................................376
Editing an Ease ............................................................................................378
Applying the Transformation Principle in Figma ...............................................381
Create a Dissolve Transformation ................................................................382
Create a Move Transition .............................................................................384
Create a Complex Interaction Using Smart Animate ....................................386
Create a Scrolling Behavior ...............................................................................389
Create Scrolling Content ..............................................................................390
Create a Scrolling Loop Animation ..............................................................392
Create a Scroll Control .................................................................................395
Applying the Obscuration Principle .............................................................397
Using a Blur to Obscure the Image ..............................................................400
Your Turn .................................................................................................402
Create an Overlay Side Menu Interaction ....................................................403
Style the Overlay Side Menu Interaction .....................................................404
Create a Card Template Area Using Auto Layout .........................................407
Create the Card Component Variants ...........................................................408
Apply an Accordion Microinteraction to the Card Component .....................410
Add Content to the Card Instance ................................................................411
Add a Second Card ......................................................................................413
You Have Learned .............................................................................................415
Chapter 9: Design System Fundamentals .............................................................417
The Single Source of Truth ................................................................................418
Where Do You Start? .........................................................................................421
Take Stock of What You Have ............................................................................422
The Pattern Inventory ..................................................................................428
The Color Inventory .....................................................................................430
The Typography Inventory ............................................................................432
The Asset Inventory .....................................................................................434
Figma Design Tokens ...................................................................................436
Creating a Component Token .......................................................................440
Figma Design Tokens and Variables ............................................................442
Organize the Variables .................................................................................446
Applying Variables .......................................................................................449
You Have Learned .............................................................................................451
Chapter 10: Building Stuff .................................................................................453
Building an Image Carousel ..............................................................................455
Create a Complex Carousel ...............................................................................460
Create a Spinning Carousel .........................................................................465
Create Video Controls ........................................................................................470
Create Interactive Video Controls ................................................................476
Create a Progress Bar ..................................................................................481
Create a Shopping Cart with Local Variables, Conditions,
and Expressions ..........................................................................................485
Bonus Round: Create a Boolean Variable ..........................................................500
Animations Using LottieFiles .............................................................................503
Using Aninix to Create a Lottie Animation Using Figma ...............................507
Converting an Aninix Animation to a Lottie File ...........................................512
Add Diversity with the Humaaans for Figma Plug-in ........................................514
You Have Learned .............................................................................................518
Chapter 11: Developer Handoff .........................................................................519
Handoff Starts with User Testing ......................................................................520
Device Preview Using the Figma Mobile App ....................................................522
Using the Figma Presentation Mode for Sign-Off .............................................528
What Is a Handoff? ............................................................................................532
Preparing Assets for Handoff ............................................................................535
The X Factor of Raster Images ..........................................................................542
Code Introspection ............................................................................................544
The Design/Build Iteration Cycle .......................................................................551
You Have Learned .............................................................................................553
Conclusion ........................................................................................................553
Index ...............................................................................................................555
