CS000-Human Computer Interaction ( Practical)
CS00-Human Computer Interaction
Practical
Lecture # 01
[Link]@[Link]
Muhammad Shakeel (Lab Engineer), The University of Faisalabad
CS000-Human Computer Interaction ( Practical)
Today’s Lecture
• What is Figma?
• Benefits of Figma
• Figma Interface
• Key Features
• Prototyping
Muhammad Shakeel (Lab Engineer), The University of Faisalabad 3
CS000-Human Computer Interaction ( Practical)
What is Figma
Visual Idea: A sleek, modern design workspace with multiple
cursors from different users collaborating on a single design file.
Maybe some speech bubbles indicating communication.
Muhammad Shakeel (Lab Engineer), The University of Faisalabad
CS000-Human Computer Interaction ( Practical)
What is Figma
Key Points:
• Web-based UI/UX Design Tool: No downloads, accessible anywhere.
• Real-time Collaboration: Multiple users can work on the same file
simultaneously.
• Vector Editor: For creating scalable graphics and interfaces.
• Prototyping: Bring designs to life with interactive flows.
• Developer Handoff: Easy for developers to inspect designs and extract
assets.
Visual Idea: A simple, iconic representation of Figma's cloud-based nature and
collaboration. Maybe an abstract cloud icon with different hands or cursors
interacting with it.
Muhammad Shakeel (Lab Engineer), The University of Faisalabad 4
CS000-Human Computer Interaction ( Practical)
The Benefits
• Key Points:
• Accessibility: Works on any OS, in any browser.
• Efficiency: Streamlined workflows, fewer design revisions.
• Teamwork: Enhanced communication and shared understanding.
• Version History: Never lose your work, easily revert to previous states.
• Cost-Effective: Free tier for individuals, scalable for teams.
Visual Idea: A graphic that illustrates the benefits with simple icons: a globe for
accessibility, a clock for efficiency, a group of people for teamwork, a rewind
arrow for version history, and a dollar sign for cost-effective.
Muhammad Shakeel (Lab Engineer), The University of Faisalabad 5
CS000-Human Computer Interaction ( Practical)
The Figma Interface: A Quick Tour
Key Areas to Highlight:
• Toolbar: Tools like Move, Frame, Shapes, Text, Pen, etc.
• Layers Panel: Organizing your design elements.
• Assets Panel: Components and styles library.
• Pages Panel: Managing different screens/flows.
• Properties Panel (Inspector): Adjusting element properties
(color, size, effects, etc.).
• Canvas: Your main design area.
Visual Idea: A screenshot of the Figma interface with key
areas clearly labeled with callouts or arrows.
This should be a direct example.
Muhammad Shakeel (Lab Engineer), The University of Faisalabad 6
CS000-Human Computer Interaction ( Practical)
Key Features: Frames & Shapes
Explanation:
• Frames: Like artboards, they define your screen or component boundaries.
Essential for responsive design.
• Shapes: Basic building blocks (rectangles, circles, polygons) to create your UI
elements.
• Example/Activity Idea: Show how to create a simple button using a
rectangle and text within a frame.
Visual Idea:
A clean graphic demonstrating a Frame
containing a simple rectangle shape and text.
Show how they relate.
Muhammad Shakeel (Lab Engineer), The University of Faisalabad 7
CS000-Human Computer Interaction ( Practical)
Key Features: Text & Colors
Explanation:
• Text Tool: Adding headings, paragraphs, labels. Figma offers rich text editing.
• Colors: Applying solid colors, gradients, and even images as fills. Using color
styles for consistency.
• Example/Activity Idea: Demonstrate changing font family, size, weight, and
creating a color style.
Visual Idea:
A clear demonstration of the text tool with
different font styles/sizes, and a color palette
showing solid colors and a simple gradient
applied to a shape.
Muhammad Shakeel (Lab Engineer), The University of Faisalabad 3
CS000-Human Computer Interaction ( Practical)
Key Features: Components & Styles
Explanation:
• Components: Reusable UI elements (buttons, navigation bars, cards).
Change the master, and all instances update!
• Styles: Reusable properties for text, colors, effects. Ensures consistency
across your design system.
• Example/Activity Idea: Show how to create a component from a button,
create an instance, and then modify the master component.
Visual Idea: A diagram showing a master component
(e.g., a button) and several instances derived from it,
emphasizing how changes to the master propagate to
instances. Also show examples of color and text styles.
Muhammad Shakeel (Lab Engineer), The University of Faisalabad 3
CS000-Human Computer Interaction ( Practical)
Key Feature…Prototyping
Explanation:
• Connecting Frames: Link screens together to simulate user flows.
• Interactions: Add click, hover, drag, and other interactions.
• Transitions: Animate between screens (dissolve, smart animate,
slide in/out).
• Presentation View: Test your prototype in a browser,
share with stakeholders.
Example/Activity Idea: Connect two simple frames with
a "click" interaction and a "slide in" animation.
Visual Idea:
A flowchart-like diagram showing multiple
frames connected by arrows, representing
user interactions and transitions.
A mobile phone mockup showing a screen flow.
Muhammad Shakeel (Lab Engineer), The University of Faisalabad 3