Figma Essentials: UI/UX Design

Course Overview

• Figma Essentials course teaches how to use Figma for UI/UX design.
• The course is designed for beginners in UX design, even those unsure of what it entails.
• You will learn to create interfaces, prototypes, and understand real-world UX design expectations.

Course Curriculum

• Brief creation and UX persona utilization are covered.
• Simple wireframe creation is thought
• Implementing colors and images in Hi-Fidelity mock-ups is an important topic.
• Choosing fonts for web and mobile apps (dos and don'ts) is crucial.
• UI components like icons and buttons will be created.
• Complex concepts such as components, constraints, and multi-dimensional variance is demystified.
• Free UI kits and plug-ins for Figma speed up workflow.
• Building a simple style guide for colleague/client hand-off will be taught.
• Creating simple and advanced micro-interactions, page transitions, and animations is important.
• Interactive prototypes will be built for user testing
• Collaboration with team members will be taught.
• Exporting the correct files for developer hand-off will be instructed.

Course Features

• Assignments throughout the course allow students to practice and develop skills.
• The course aims to help students upgrade from Figma zero to Figma hero.

Getting Started with the Course

• Exercise files are available for download via a link on the course page.
• A shortcut sheet with useful Figma shortcuts is included in the exercise files.
• Figma can be used in a browser version or via a desktop app.
• Both versions of Figma are essentially the same.
• If the instructor speaks too fast, the video playback speed can be slowed down.

Figma Versions

• The course primarily uses the free version of Figma.
• The free version is sufficient for most of the course.
• The benefits of upgrading to the paid version will be shown later in the course.

Figma Updates

• Figma is constantly updating, which can cause slight changes to the interface.
• Significant updates will be re-recorded, while minor changes may only involve a name change.
• Students should check the comments section for clarifications or updates from the instructor or other students.

Figma's Purpose

• Figma is excellent for rapid prototyping of websites and apps.
• Creation of wireframes, quick look-and-feel mockups, and hi-fidelity website mockups are all useful skills to learn.
• Prototypes created in Figma can be tested with clients and users.
• Changes can be made quickly based on user feedback.
• Figma does not code the website or app for you but provides assets for developer use (CSS, SVGs, graphics).

Post-Prototype Workflow

• After client sign-off on the Figma prototype, developers use the mockups to build the actual website or app.
• Developers may use coding languages like HTML and CSS or platforms like WordPress, Webflow, or Wix to build the site.
• Figma is also used for general digital graphic design, such as social media campaigns and ads.
• Figma can be used as an alternative to tools like Illustrator and Photoshop for digital design tasks.

UI vs. UX

• UI (User Interface) refers to how something looks.
• UX (User Experience) refers to how something works and how someone uses it,.
• UI design involves the layout and visual elements, traditionally based on intuition.
• UX design involves testing the UI with users to see if it works as intended.
• Testing includes checking if the UI is intuitive, accessible, and meets user expectations.

Course Focus

• The course focuses primarily on UI design within Figma.
• The course will also provide insights into UX design principles and testing methodologies.

UX in Practice

• An example of poor UX is a bank's website and app update with a visually appealing UI but usability issues.
• UX issues include the inability to use the Enter key to submit passwords.
• Difficulty editing or updating information, and lack of clear indicators for interactive elements can also cause user issues.
• UX designers are gathering feedback and language in order to avoid future frustrations on current and future projects.

Course Project

• Wireframes will be created first.
• Hi-Fidelity versions of those wireframes will then be created.
• Styles and components will then be built.

Project Brief

• Scott Headphones wants a few pages designed for a specific task flow.
• The task flow includes a Home page, product features, a Checkout page, and a Confirmation page.

Persona

• A persona is a representation of the ideal customer.
• The course’s persona is a woman named Sarah in her 20s, who is married with kids, self-employed, and environmentally-conscious.
• A persona helps distance one’s self from personal preferences and consider how a target user would interact with the design.
• Personas guide decisions about color, fonts, language, imagery, and organization of information.
• UX researchers often create more detailed personas with extensive documentation.

Task Flow

• A task flow outlines a specific feature or process to be designed, such as the steps to cancel a product.
• A task flow in the course would include a Home page, product feature display, a Checkout page, and a Confirmation page.

Task Flows vs. Flows

• A task flow is a simple, linear path a user takes to complete a specific task.
• User flows can have multiple paths and decision points to account for various user behaviors.

Task Flows vs. User Flows

• Task Flows are linear and sequential.
• User Flows are more complex and non-linear, offering multiple pathways.
• Example: Reaching "super banana pancake" can be done through a search bar or browsing categories.
• User Flows include decision nodes (different shapes for different actions), pages, and user interactions.
• User Flows help identify dead ends or loops where users get stuck.
• Task Flows can be part of a larger User Flow.
• Designing for a User Flow involves more complexity and a bigger scope than a Task Flow.

Mobile Website vs. App Design

• The course focuses on designing a mobile website, not an app.
• Mobile websites require designing for various screen sizes (mobile, tablet, desktop).
• Apps are designed for a single mobile screen size.

Importance of Company Values and Mission

• A detailed brief should include information about the company's values, mission, and target audience.
• Understanding these aspects helps designers create more relevant and effective designs.
• Designers should strive to learn about a company's values and mission, even if they aren't initially provided.
• Use company values and missions to reference design decisions and have better conversations with stakeholders.

Class Project: Creating Your Own Brief

• Students are encouraged to create their own design brief using a random project generator website (randomprojectgenerator.com).
• Enter a name (e.g., last name, pet's name) and location to generate a unique company and product.
• Stick with the first generated project, even if it seems challenging.
• The company and product will be unique, but the Task Flow structure (Home page, Product features, Checkout, Confirmation) will be the same for everyone.
• Students will use their unique company details to choose images, colors, and design elements that suit their project.
• Task: Take a screenshot or copy the generated brief and store it for later use.
• Import the provided Task Flow Figma file ("taskflow.fig") into Figma.
• Figma prefers files to be in the cloud.

Wireframes vs. Hi-Fidelity Mock-ups

• Wireframes are low-fidelity, quick, and budget-friendly mock-ups.
• Hi-Fidelity mock-ups (Hi-Fi) are visually appealing and detailed.
• Skipping the wireframe stage can be detrimental, especially for new UX designers.
• Wireframes help test the Task Flow and underlying mechanics without distractions from visual design elements.
• Keep wireframes simple with limited colors (gray or one additional color) and a basic font.
• Hi-Fi mock-ups involve more time and effort in refining visual details.
• Wireframes are the starting point in the course before moving on to building more visually refined designs.

Figma Basics: Creating Design Files and Frames

• To create a new design file, navigate to your name in Figma (usually found in the top left dropdown).
• Create a new design file from drafts.
• Use the Frame tool to create pages or artboards.
• Delete random-sized frames and select specific device sizes.
• Choose a generic phone size that works for both Android and Apple devices (e.g., iPhone 8, 375 pixels wide).
• Rename your frames to reflect the Task Flow (e.g., Home page/Marketing page, Product Details, Checkout, Confirmation).
• Use "space bar" to move frames around.
• Copy and paste frames using "Command C/V" (Mac) or "Ctrl C/V" (PC).
• Frames can be created for desktop or tablet, but the course focuses on phone design.
• Zoom in and out using "Command/Ctrl" + "+" or "-".
• To zoom with a scroll wheel hold commmand.
• At the end of the exercise, have four named frames for the Task Flow pages.
• Name your Figma file using your company name and "Ecom V1" (e.g., Scott Ecom V1).
• Avoid using vague file names like "Final" or "Final Revisited."### Figma Basic Setup and Navigation
• To access personal files, ensure you're under your designated name, not the Community tab.
• Ecom 1 is used as an example file name.
• Files can be renamed by right-clicking and selecting "Rename".
• "Home" is your base of operations in Figma.
• The entire workspace is referred to as a design file.
• Frames are similar to pages or artboards in other design software.

Introduction to Type in Figma

• The Type tool is represented by the letter "T".
• Hovering over tools displays their name and associated keyboard shortcut.
• Two types of text boxes exist: Auto Width and Fixed Size.
• Auto Width text boxes expand to accommodate the text entered.
• Fixed Size text boxes have a defined width, causing text to break at the edges.
• A generic marketing message can be used as a placeholder to avoid early feedback on specific content.
• Text box types can be switched between Auto Width and Fixed Size after creation.
• Undoing actions in Figma may exhibit inconsistent behavior.

Type Tool: Font Manipulation

• Font size can be adjusted via the dropdown menu in the properties panel.
• Highlighting the text is required before changing the font size.
• Text alignment options include left, center, and right.
• Line height can be adjusted by clicking and dragging the line height icon.
• Alternatively, clicking within the value box and using arrow keys can incrementally change values.
• Holding Shift while using arrow keys increases values in increments of 10.

Font Selection in Figma

• Font sizes should ideally be chosen at 100% zoom for accuracy.
• Previewing font sizes on a mobile device is recommended for mobile website design.
• Opt for fonts with minimal character for wireframing to avoid biasing user feedback.
• Roboto and Open Sans serve as examples of neutral fonts suitable for wireframes.
• Roboto is commonly used, free, and offers various font weights.

Mockup Elements and Duplication

• A simplified logo is recommended, even when a company brand already exists.
• Existing logos should be in black and white and kept simple.
• Copy and pasting elements in Figma results in duplication directly on top of the original.
• Duplicating elements while holding 'Option' (Mac) or 'Alt' (PC) creates a copy as you drag.
• Figma provides alignment assistance when positioning elements.

Advanced Text Properties

• Additional text options can be found in the right menu, within the Properties Inspector.
• Stylistic sets, decorations (underline, strikethrough), and bullet points are available.
• The Right panel houses most of text modifications options.

Rectangles and Shapes

• Basic shapes are Rectangle, Lines, Circle/Ellipses
• Rectangle tool shortcut = "R"
• Drawing a rectangle can make existing text disappear due to layering.
• The Layers panel allows arranging the order of elements.
• Elements can be sent to the back using the right-click menu or by dragging them in the Layers panel.
• Aligning elements can be done by dragging.

Creating Buttons and Rounded Corners

• Zoom in to see corner dots for rounded corners, zoom out if you cannot see the dots.
• Zoom level affects the visibility of rounded corner handles.
• Rounded corners can be adjusted by dragging the corner handles or by entering values in the properties panel.
• To edit a select corner radius, hold down the 'Option' (Mac) or 'Alt' (PC) key and click the corner.
• Circle tool creates ellipses by default; holding Shift creates perfect circles.

Additional Circle Properties

• The circle tool has a feature for creating pie charts, but is not commonly used in other mockups.### Color in Wireframes
• Wireframes should ideally be left gray to avoid unnecessary color-related discussions.
• To work with color, select an element and click "Fill" in the design panel.
• Use the Hue slider to select a color zone and adjust saturation and brightness.
• Drag the color picker past the extremes to achieve full white or black.
• Light blue is a common color for wireframes but you can use any color.
• Adjust the transparency of an element using the transparency setting.
• Transparency can be set with a percentage, either by typing it in or using the up/down arrows.
• Color nerds can use Hexadecimal, RGB, or CSS color codes.
• The Eyedropper tool allows you to select and replicate colors from any part of the design.
• The shortcut for the Eyedropper tool is the "I" key.
• Use black, grays, and whites with minimal color to maintain a generic look and avoid unnecessary feedback.
• Document Colors show all colors used in the document.
• Team Library colors and Color Styles help manage and maintain consistency.

Strokes

• Add a Stroke to an object by clicking the "+" button in the Stroke section of the design panel.
• Set default properties by selecting an object with the desired properties and navigating to 'Edit' > 'Set Default Properties'.
• Newly created objects will inherit these properties.
• Copy properties from one object to another by selecting the source object, choosing 'Edit' > 'Copy Properties,' selecting the target object(s), and choosing 'Edit' > 'Paste Properties'.
• Create a Burger menu using the Line tool.
• Hold the Shift key while drawing a line to make it straight.
• Duplicate elements using the 'Option' key (Mac) or 'Alt' key (PC) while dragging.
• Use Command D (Mac) or Ctrl D (PC) to duplicate the last action.

Line Strokes

• Round caps provide rounded ends to strokes.
• Butt caps finish the stroke exactly at the end point.
• Square caps add a square extension at the end of the stroke.
• "Mixed" in the Stroke settings indicates that the selected elements have different stroke settings.

Images

• A common visual cue for a placeholder image is a large cross drawn through the middle of the element.
• Import images via the Rectangle tool or by navigating to 'File' > 'Place Image'.
• Hold down the Shift key while scaling an image to maintain its proportions.

Object Editing Mode

• Object Editing mode allows you to manipulate the individual points and edges of a shape.
• Enter Object Editing mode by selecting an object and clicking 'Edit Object' in the toolbar.
• Exit Object Editing mode by clicking 'Done' or double-clicking on the background.