DESB81 Figma: From design to prototype

Faculty of Arts
Autumn 2024
Extent and Intensity
0/2/0. 5 credit(s). Type of Completion: z (credit).
Synchronous online teaching
Teacher(s)
Petr Kosnar (lecturer), PhDr. Ladislava Zbiejczuk Suchá, Ph.D. (deputy)
Bc. Martin Puškáč, MBA (lecturer)
Mgr. Simona Kramosilová (seminar tutor)
PhDr. Ladislava Zbiejczuk Suchá, Ph.D. (seminar tutor)
Guaranteed by
Petr Kosnar
Department of Information and Library Studies – Faculty of Arts
Contact Person: Mgr. Alice Lukavská
Supplier department: Department of Information and Library Studies – Faculty of Arts
Timetable
each odd Wednesday 16:00–17:40 Virtuální místnost
Prerequisites
The course is open to a wide audience including creatives and designers interested in designing digital interfaces using the tool that has become practically standard today. No previous experience with Figma or any other design tool is required. Basic knowledge of concepts such as user journey and information architecture is assumed.
Course Enrolment Limitations
The course is only offered to the students of the study fields the course is directly associated with.

The capacity limit for the course is 18 student(s).
Current registration and enrolment status: enrolled: 19/18, only registered: 5/18
fields of study / plans the course is directly associated with
Course objectives
The aim of this course is to familiarize participants with the Figma tool - from the basics to the creation of a simple but functional prototype ready for user testing.
Learning outcomes
During the module, participants will work on the design of a mobile application or website according to the advance given task, with the aim of creating a functional prototype containing at least one user path.
- Comprehensive introduction to  Figma and FigJam: You will learn the basics as well as advanced features that will allow you effectively design digital interfaces.
- Design principles: You will learn how to work with colors, styles and effects to make your design stand out.
- Practical skill: You will create your own designs and prototypes ready for user testing.
- Advanced tools: You will learn to work with  components, symbols and how to effectively organize yours projects.
- Interactions and animations: You will master basic and advanced techniques that bring your designs to life.
- Feedback: You will receive valuable knowledge from the lecturer and other participants, which will help you in the next improving your skills.
Syllabus
  • 1. Introduction and presentation of the lecturer - We will start easily and pleasantly - with a short introduction to the course and its lecturer. You will find out what the objectives of the course are and what awaits you. We'll set up your accounts in Figma so you're ready to go. Also the lecturer will introduce you to the way of conducting the course and give tips on how to get the most out of it. - Basic presentation of the entire course, schedule and goals for completing the course - Presentation of the lecturer, Martin Puškáč, and the way of conducting the course and communication during and outside the course hours - Creating accounts in the Figma tool
  • 2. Figma and FigJam - what is it actually (1 hour) - Immerse yourself in the world of Figma and FigJam - you will get to know the basic tools, their differences and practical use. We will show you how to navigate the basic interface (UI 2 / UI 3) and what functions can make your work easier. We will also imagine FigJam as a tool for brainstorming and teamwork. - Presentation of basic tools and their differences and uses - A sample of the basic interface - Using the FigJam tool in practice
  • 3. Design principles and their application (4 hours) - A deeper look at design principles awaits us. We'll go over the tools, dashboards, and procedures to help you when working with objects, layers and grids. You will learn to effectively use colors, styles and effects to your design stood out and impressed. - Browse tools and panels - Work with objects, layers and grid for content layout - Colors, styles, effects
  • 4. Creating a basic design (4 hours) - Now let's get down to business! Together we will create a proposal according to the assignment or our own project. you will learn how to use interactions and animations, and how to work with external resources and community extensions. This one the block is about real creation and experimentation. - Practical design creation according to the assignment or own project - Using interactions and animations, working with external resources and community extensions
  • 5. More advanced functions (1 hour) - We will focus on how to organize projects and files, work with components and symbols. you will learn how to effectively export and present your designs. This short but important module will help you handle even the most advanced tasks in Figma. - Organization of projects and files - Work with components and symbols - Export and presentation of designs
  • 6. Prototyping and testing (3 hours) - We will create a fully functional prototype with at least one user path. We will focus on how share your designs and prototypes to get valuable feedback. This module prepares you for real testing and presentation of designs. - Creating a prototype with at least one user path. - Sharing designs and prototypes for feedback
  • 7. Presentation and feedback (2 hours) - The final block is dedicated to the presentation of your projects. You will be given space to show what you have created, and you will get valuable feedback from the lecturer and other participants. Let's look together at what was great, and where there is still room for improvement. - Presentation of participants' projects and feedback from the lecturer and other participants - Discussion of improvements and next steps
Teaching methods
Interactive lectures with practical examples.
Workshop work and individual projects.
Group discussion and feedback.
Assessment methods
For successful completion, it is necessary to submit a functional prototype according to the proposed user path, mastering practical exercises between lessons. You need to create:
• individual screens for the specified user flow
• at least four font styles
• at least four components
• at least four elements using auto-layout
• clickable prototype
Use plugins to embed images (Unsplash) and icons (Material Symbols, Icofinder or others)
Language of instruction
Czech
Further Comments
Study Materials
The course is taught annually.
  • Enrolment Statistics (recent)
  • Permalink: https://is.muni.cz/course/phil/autumn2024/DESB81