Workshop on UI/UX Design using Figma

The Department of Electronics and Computer Science, in association with D-BEATS, organized a 3-day Hands-on Workshop on UI/UX Design using Figma on July 13, July 27, and August 10, 2024. The workshop aimed to introduce participants to fundamental principles of user interface (UI) and user experience (UX) design, including usability, accessibility, and user-centred design. It provided an overview of Figma, its features, and its benefits as a collaborative design tool, along with practical, hands-on sessions for creating wireframes, prototypes, and design elements using Figma.

The resource person for the workshop was Mr. Parshuram Lamani, Lead UX Designer at Mediyum UX Design Agency, Panjim, Goa.

Day 1:

The workshop kicked off with an in-depth presentation on key design concepts. This session began by defining what design truly means, followed by an exploration of the differences between UI (User Interface) and UX (User Experience) design. Participants learned about the specific roles and responsibilities of UI and UX designers, clarifying their distinct contributions to the design process. Real-world examples were shared to illustrate how these concepts are applied in practice. The session concluded with a discussion of basic principles for creating effective and user-friendly interfaces.

In the post-lunch session, participants were introduced to the powerful design tool Figma, focusing on its interface, project management, and file handling. They also explored “Design Components,” including creating components and variants, using Auto Layout, and building and managing design systems. The session included hands-on practice and a Q&A segment for addressing any questions or clarifications.

Day 2:

The day began with defining a clear problem statement, essential for guiding the design process. Participants created user personas and mapped out the user journey to visualize interaction steps, identify key touchpoints, and address potential challenges. Secondary research was conducted to gather insights from industry reports and competitors, aiding in the validation of design assumptions.

In the post-lunch session, participants created low-fidelity wireframes for quick visualization and iteration. They then discussed transitioning to high-fidelity wireframes, which incorporate detailed design elements like colors and typography. This progression highlighted the importance of visual design in effective user interfaces.

Day 3:

The third day started with an exploration of color schemes, focusing on color theory and how different hues evoke emotions and influence user behavior—such as blue conveying trust and red creating urgency. The session then covered touch screen design, including considerations like button size, spacing, and responsiveness, with an emphasis on maintaining a consistent user experience across various devices.

In the “Prototyping in Figma” segment, participants created interactive prototypes to bring designs to life. They explored techniques for adding animations and transitions, enhancing the user experience by making interfaces more dynamic and engaging. The session also covered the use of overlays and interactive states, enabling designers to simulate real-world interactions within their prototypes and provide a comprehensive view of the final product.

The workshop, attended by 35 participants, was a resounding success, leaving them with valuable skills and a deeper understanding of design principles, thanks to the insightful direction of coordinators Prof. Deron Rodrigues and Prof. Mathilda Colaco.