Designing and Prototyping Interfaces with Figma: Learn essential UX/UI design principles by creating interactive prototypes for mobile, tablet, and desktop (Paperback)

Staiano, Fabio

買這商品的人也買了...

商品描述

Discover user experience and user interface design best practices while mastering a wide array of tools across Figma and FigJam with this full-color guide

Key Features

- Learn the basics of user experience research, result organization, and analysis in FigJam
- Create mockups, interactive animations, and high-fidelity prototypes using this platform-independent web application tool
- Collaborate with a team in real-time and create, share, and test your designs

Book Description

A driving force of the design tools market, Figma makes it easy to work with classic design features while enabling unique innovations and opening up real-time collaboration possibilities. It comes as no surprise that many designers decide to switch from other tools to Figma.

In this book, you'll be challenged to design a user interface for a responsive mobile application having researched and understood user needs. You'll become well-versed with the process in a step-by-step manner by exploring the theory first and gradually moving on to practice. You'll begin your learning journey by covering the basics of user experience research with FigJam and the process of creating a complete design using Figma tools such as Components, Variants, Auto Layout, and much more. You'll also learn how to prototype your design and explore the potential of community resources such as templates and plugins.

By the end of this Figma book, you'll have a solid understanding of the user interface workflow, managing essential Figma tools, and organizing your workflow.

What you will learn

- Explore FigJam and how to use it to collect data in the research phase
- Wireframe the future interface with shape tools and vectors
- Define grids, typography, colors, and effect styles that can be reused in your work
- Get to grips with Auto Layout and the constraints to create complex layouts
- Create flexible components using styles and variants
- Make your user interface interactive with prototyping and smart animate
- Share your work with others by exporting assets and preparing development resources
- Discover templates and plugins from the community

Who this book is for

This book is for aspiring UX/UI designers who want to get started with Figma as well as established designers who want to migrate to Figma from other design tools. This guide will take you through the entire process of creating a full-fledged prototype for a responsive interface using all the tools and features that Figma has to offer. As a result, this Figma design book is suitable for both UX and UI designers, product and graphic designers, and anyone who wants to explore the complete design process from scratch.

商品描述(中文翻譯)

這本全彩指南將幫助您掌握 Figma 和 FigJam 的使用技巧,同時探索使用者體驗和使用者介面設計的最佳實踐。

主要特點:
- 在 FigJam 中學習使用者體驗研究的基礎知識、結果組織和分析。
- 使用這個平台獨立的網頁應用工具創建模型、互動動畫和高保真原型。
- 與團隊實時協作,創建、分享和測試您的設計。

書籍描述:
作為設計工具市場的推動力,Figma 讓您可以輕鬆使用經典設計功能,同時實現獨特的創新並開放實時協作的可能性。因此,許多設計師決定從其他工具轉換到 Figma 是毫不奇怪的。

在這本書中,您將被挑戰設計一個響應式移動應用程式的使用者介面,並經過研究和了解使用者需求。您將逐步探索理論,並逐漸轉向實踐,以逐步掌握設計過程。您將從使用 FigJam 進行使用者體驗研究的基礎知識開始,並使用 Figma 工具(如元件、變體、自動佈局等)創建完整的設計。您還將學習如何製作原型,並探索社群資源(如模板和插件)的潛力。

通過閱讀本書,您將對使用者介面工作流程、管理 Figma 工具的基本知識和組織工作流程有扎實的理解。

您將學到:
- 探索 FigJam 以及如何在研究階段使用它收集數據。
- 使用形狀工具和向量進行未來介面的線框圖。
- 定義可以在工作中重複使用的網格、字體、顏色和效果樣式。
- 熟悉自動佈局和約束條件,以創建複雜的佈局。
- 使用樣式和變體創建靈活的元件。
- 通過製作原型和智能動畫使您的使用者介面具有互動性。
- 通過導出資源和準備開發資源與他人分享您的工作。
- 探索社群中的模板和插件。

本書適合:
本書適合有志於開始使用 Figma 的 UX/UI 設計師,以及希望從其他設計工具遷移到 Figma 的設計師。本指南將帶您完成使用 Figma 提供的所有工具和功能創建一個完整的響應式介面原型的整個過程。因此,這本 Figma 設計書適合 UX 和 UI 設計師、產品和平面設計師,以及任何想從頭開始探索完整設計過程的人。

目錄大綱

1. Exploring Figma and Transitioning from Other Tools
2. Structuring Moodboards, Personas, and User Flows within FigJam
3. Getting to Know Your Design Environment
4. Wireframing a Mobile-First Experience Using Vector Shapes
5. Designing Consistently Using Grids, Colors, and Typography
6. Creating a Responsive Mobile Interface Using Auto Layout
7. Building Components and Variants in a Collaborative Workspace
8. User Interface Design on Tablet, Desktop, and the Web
9. Prototyping with Transitions, Smart Animate, and Interactive Components
10. Testing and Sharing your Prototype on Browsers and Real Devices
11. Exporting Assets and Managing the Handover Process
12. Discovering Plugins and Resources in the Figma Community

目錄大綱(中文翻譯)

1. 探索 Figma 並從其他工具過渡
2. 在 FigJam 中結構化 Moodboards、Personas 和 User Flows
3. 熟悉您的設計環境
4. 使用向量形狀進行 Mobile-First 體驗的 Wireframing
5. 使用網格、顏色和排版一致地設計
6. 使用自動佈局創建響應式移動界面
7. 在協作空間中建立組件和變體
8. 在平板電腦、桌面和網頁上進行用戶界面設計
9. 使用轉場、智能動畫和互動組件進行原型設計
10. 在瀏覽器和實際設備上測試和分享您的原型
11. 導出資源並管理交接過程
12. 在 Figma 社群中發現插件和資源