Scribd
Upload
9 views5 pages

Establishing Interface Connectivity in Figma

This document outlines a lab focused on identifying and establishing interface connectivity between different program modules using Figma. It explains the concept of interface connectivity, its importance for user flow and modular design, and provides practical steps for creating navigation between screens and reusable UI components. The lab includes examples and instructions for creating frames, buttons, and testing prototypes.

Uploaded by

Raghav
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views5 pages

Establishing Interface Connectivity in Figma

This document outlines a lab focused on identifying and establishing interface connectivity between different program modules using Figma. It explains the concept of interface connectivity, its importance for user flow and modular design, and provides practical steps for creating navigation between screens and reusable UI components. The lab includes examples and instructions for creating frames, buttons, and testing prototypes.

Uploaded by

Raghav
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Lab no.

2: Identifying interface connectivity and


establishing interface connectivity between two
different program modules.
Objective:
By the end of this lesson, you will understand how to identify and establish
interface connectivity between different program modules using Figma.

What is Interface Connectivity?


• Interface connectivity refers to how different UI elements, screens, or
components communicate with each other in a digital product.
• It helps in defining user interactions, such as navigation between pages,
opening modals, or linking buttons to actions.
Why is it Important?
• Ensures smooth user flow in an application.
• Helps modularize design, making it scalable and reusable.
• Allows for efficient prototyping and better collaboration with developers.
Real-World Example:
Think of a banking app: The Login Page connects to the Dashboard, and the
Transfer Money button connects to the Payment Page. These connections are
examples of interface connectivity between different modules.

Steps to Follow for the Practical:


Example 1: Navigation Between Screens (Basic Interface Connectivity)
1. Create Two or more Frames:
• Use the Frame tool (F) to create two screens:
- Frame 1: Home Page
- Frame 2: Schedule Page
- Frame 3: Dog walkers list Page
- Frame 4: Dog walker’s profile Page
- Frame 5: Confirmation Page
- Frame 6: Booking Confirmed Page

2. Add Buttons in each page


3. Connect Frames in Prototype Mode:
• Switch to Prototype Mode (Shift + P).
• Click the Button → Drag the blue connector to another Frame.
• Choose an interaction type

4. Test the Prototype:


• Click the Play Button (top-right corner) to test the flow.

Example 2: Component Communication (Reusable UI Modules)


Steps to Follow:

1. Create a Button Component


• Design a simple button (text + rectangle).
• Convert it into a Component (Ctrl + Alt + K).
2. Use the Component in Different Frames
• Drag multiple instances of the button into different frames.
• Edit the main component and observe how changes reflect everywhere.
Outcome:

You might also like