Introduction to Figma and UI/UX Design

# CHAPTER 1

Introduction to Figma and UI/UX Design #

1. Introduction #

Every app on your phone, every website you browse, and every software tool you use was intentionally designed by someone before a single line of code was ever written. In the modern tech industry, that design process happens in Figma. Figma has completely revolutionized the design world. It took the isolated, clunky design process of the 2010s and moved it entirely into the web browser, allowing teams to collaborate in real-time like a Google Doc for graphics. In this chapter, we will establish the foundational differences between User Interface (UI) and User Experience (UX) design, explore why Figma is the undisputed industry standard, and map out the career paths waiting for you in the design world.

2. Learning Objectives #

By the end of this chapter, you will be able to:

• Define the core differences between UI Design and UX Design.

• Explain what Figma is and why it dominates the modern design industry.

• Understand the real-world workflow of a digital product team.

• Identify various career paths within the UI/UX ecosystem.

• Set up your first Figma account and create a blank design file.

3. What is UI Design? #

User Interface (UI) Design is the visual, graphical layout of an application. It is what the user *sees*. If you are designing a mobile app, the UI Designer decides:

• What color the "Checkout" button should be.

• Which font to use for the article titles.

• How thick the borders on a photo gallery should be.

• Whether to use a light mode or a dark mode.

*Analogy:* If an app is a house, the UI Designer is the interior decorator choosing the paint colors, the furniture style, and the lighting fixtures.

4. What is UX Design? #

User Experience (UX) Design is the invisible logic and feel of an application. It is how the user *interacts* with the product. A UX Designer asks:

• Is it easy for a user to find the "Checkout" button?

• Does the checkout process require 10 confusing steps, or just 2 simple steps?

• If the user types an invalid password, does the app give a helpful error message or just crash?

*Analogy:* If an app is a house, the UX Designer is the architect deciding where the doors should go, ensuring the kitchen is next to the dining room, and making sure the stairs aren't dangerously steep.

5. What is Figma? #

Before 2016, designers used tools like Adobe Photoshop or Sketch. These tools were heavy, required expensive Mac computers, and made collaboration a nightmare (saving files as designfinalv4FINALreally.psd and emailing them to developers).

Figma solved this. Figma is a vector graphics editor and prototyping tool that runs entirely in your web browser.

• Cloud-Based: Your files are always saved automatically to the cloud.

• Multiplayer: You and your team can edit the exact same design file at the exact same time, seeing each other's mouse cursors fly across the screen.

• Cross-Platform: It works flawlessly on Windows, Mac, Linux, and Chromebooks.

6. Real-World Design Workflows #

How does a website actually get built in the real world?

1. 1. UX Research: The team talks to users to figure out what they actually want.

1. 2. Wireframing (Figma): Drawing low-detail, black-and-white boxes to map out where buttons and text will go.

1. 3. High-Fidelity UI Design (Figma): Adding brand colors, typography, real images, and perfect spacing.

1. 4. Prototyping (Figma): Linking the screens together so you can click the buttons and simulate the app before coding it.

1. 5. Developer Handoff: Software Engineers look at the Figma file, extract the CSS/spacing data, and write the actual HTML/React/Swift code to build the real app.

7. Diagrams/Visual Suggestions #

*Visual Concept: The UX vs UI Iceberg* Draw an iceberg floating in the ocean.

• Above the water (UI): Colors, Typography, Layouts, Buttons, Illustrations. (The visible aesthetic).

• Below the water (UX): User Research, Information Architecture, Wireframes, Usability Testing, User Personas. (The massive, invisible foundation).

This classic visual perfectly explains that good UI is impossible without a massive foundation of good UX.

8. Best Practices #

• UX Always Precedes UI: A common mistake beginners make is opening Figma and immediately picking pretty colors and fonts. This is like painting the walls of a house before you pour the concrete foundation. You must figure out the logical flow of the app (UX wireframing) *before* you make it look pretty (UI).

9. Common Mistakes #

• Confusing Figma with Photoshop: Photoshop is a *Raster* editor, designed to manipulate pixels in photographs. Figma is a *Vector* editor, designed using mathematical shapes. If you draw a button in Figma and zoom in 10,000%, it will remain perfectly sharp and crisp. Do not use Figma to edit vacation photos, and do not use Photoshop to design mobile apps!

10. Mini Project: Create Your First Figma File #

Let's get into the software!

1. 1. Go to Figma.com and create a free account.

1. 2. In the top right corner of the dashboard, click the + Design file button.

1. 3. Welcome to the infinite canvas! You will see a vast gray area.

1. 4. Double-click the word "Untitled" at the very top of the screen and rename your file to My First UI Project.

1. 5. You have just taken your first step into professional product design.

11. Practice Exercises #

1. 1. In your own words, explain the difference between UI design and UX design using the "House" analogy.

1. 2. List three reasons why Figma replaced older software like Photoshop and Sketch as the industry standard for UI design.

12. MCQs with Answers #

13. Interview Questions #

• Q: Explain the difference between UI and UX. Can a product have a beautiful UI but a terrible UX? Provide a real-world example.

• Q: A client wants to build a new mobile app and asks you to immediately start designing the colorful, final screens. Explain your workflow to the client and why you must start with low-fidelity wireframes first.

• Q: What is the difference between a Vector graphics editor (like Figma) and a Raster graphics editor (like Photoshop)? Why are vector graphics mandatory for UI design?

14. FAQs #

Q: Do I need to know how to code (HTML/CSS/Javascript) to use Figma? A: Absolutely not! Figma is a visual design tool. You do not write a single line of code in Figma. However, having a basic understanding of how websites are built (HTML/CSS) makes you a *much* better designer, because you won't design layouts that are mathematically impossible for the developers to build!

15. Summary #

In Chapter 1, we stepped into the world of digital product design. We clearly defined the boundary between User Interface (the visual aesthetics) and User Experience (the invisible logic and flow). We identified Figma as the undisputed champion of the modern design industry, praising its cloud-based, real-time collaborative architecture that shattered the isolated workflows of the past. Finally, we mapped the professional lifecycle of an application—from initial UX research, through wireframing and high-fidelity UI, all the way to developer handoff.

16. Next Chapter Recommendation #

You have created your first blank file, but the interface can look intimidating. Proceed to Chapter 2: Understanding the Figma Interface to decode the tools at your disposal.