7.Toggle Switches Toggle switches allow users to turn features on or off with a simple toggle. They are common in settings, preferences, and filtering options. 8.Progress Bars Progress bars display the completion status of a task, providing visual feedback to users. They are commonly used in forms, file uploads, and loading screens. 9.Swipe Gestures Swipe gestures involve horizontal or vertical finger movements on touch screens. They are used for navigation, image galleries, and content browsing. 10.Tooltips Tooltips provide supplementary information when users hover or tap on an element. They are useful for explaining functions, features, or abbreviations in a concise manner. Open Figma Launch the Figma application on your computer. Step2: Create a New Project In Figma, click on "New" and choose "New Project" to start a new design project. Step3: Define Project Scope Begin by defining the scope and objectives of your design project. Understand the purpose, target audience, and goals. Step4: Gather Design Assets Collect any existing design assets such as logos, color schemes, typography guidelines, and brand-specific elements. Step 5: Set Up Style Guide Components In Figma, create components for various UI elements, including buttons, typography, icons, and form elements. Step 6: Establish a Color Palette Create a color palette in Figma with primary and secondary colors. Ensure each color is represented with its hexadecimal code. Step7: Typography Guidelines: Set up text styles for headings, body text, and other text elements based on the chosen typeface and sizes. Step8 : Icon Library: Create an icon library in Figma using components, allowing for easy scaling and customization. Step9: Grid Systems: Establish grid systems and layout guides for different screen sizes to ensure consistent spacing and alignment. Step10: Document UI Elements and Patterns: Create a document in Figma that outlines UI elements and design patterns, such as navigation menus, forms, and buttons. Create variants for different states (normal, hover, active). Step11: Interactive Prototyping: Utilize Figma's interactive features to prototype and test the interface with real interactions. Link frames to create a seamless user flow. Collaboration and Feedback: Share your Figma project with team members, allowing them to comment and provide feedback directly within the tool. Step13: Accessibility Check: Use Figma's accessibility checker to identify and fix accessibility issues in your design. Step 14: Finalize and Export: Apply any final design changes as needed and then use the "Export" feature in Figma to export assets in suitable formats for development. Step15: Developer Handoff: Utilize Figma's developer handoff feature to generate CSS, HTML, or other code snippets for implementation. Collaborate with developers to ensure accurate implementation. Open Figma: Launch the Figma application on your computer. Step 2: Create a New Figma File: In Figma, click on "

1. 1. Parallax Scrolling

2. • Parallax scrolling creates a 3D effect by moving background elements at different speeds as users scroll. It's often used for storytelling or
adding depth to web pages.
• 7.Toggle Switches
• Toggle switches allow users to turn features on or off with a simple toggle. They are common in settings, preferences, and filtering
options.
• 8.Progress Bars
• Progress bars display the completion status of a task, providing visual feedback to users. They are commonly used in forms, file uploads,
and loading screens.

3. • Step 11: Collaboration and Feedback: Share your wireflow diagram with team members and stakeholders. Allow
them to provide feedback and comments directly within Figma.
• Step 12: Refine and Update: Based on feedback, refine and update the wireflow diagram as needed. Ensure that it
accurately reflects the application's user flow.
• Step 13: Export or Share: Once the wireflow diagram is finalized, you can export it in various formats or share it
with relevant team members for implementation.

5. Exploring various open source collaborative interface Platform
• AIM:
• To explore various open source collaborative interface Platform
• Theory:
• Exploring various open-source collaborative interface platforms is essential for designing user-friendly and efficient digital interfaces. This
document offers an overview of different open-source platforms to facilitate UI/UX design collaboration.
• List of Explored Open Source Collaborative Interface Platforms:
• 1.Figma Community
• 2.GitHub
• 3.GitLab
• 4.InVision Freehand
• 5.Adobe XD (Starter Plan)
• 6.Miro (Free Plan)
• 7.Sketch for Teams (Beta)
• 8.Gravit Designer
• 9.Vectr 10.Penpot