Created byCourtney Clarke

17 views0 downloads

Interactive Figma Activity

Grade 8Technology1 days

Want to create your own PBL Recipe?Use our AI-powered tools to design engaging project-based learning experiences for your students.

📝

Inquiry Framework

Standards & Learning Goals

Learning Goals

By the end of this project, students will be able to:

Students will be able to design and create interactive elements using Figma.

Entry Events

Events that will be used to introduce the project to students

Gamify Your Lesson

Imagine a world where learning is as engaging as your favorite video game. Your challenge: transform a typical lesson into an interactive Figma experience, making education fun and irresistible.

📚

Portfolio Activities

These activities progressively build towards your learning goals, with each submission contributing to the student's final portfolio.

Activity 1

Figma Fundamentals

Students will familiarize themselves with the Figma interface and basic tools.

Steps

Here is some basic scaffolding to help students complete the activity.

1. Sign up for a free Figma account and complete the introductory tutorial.

2. Explore the Figma interface, focusing on tools like frames, shapes, and text.

3. Choose a simple lesson topic and create a basic wireframe outlining the layout and key elements.

Final Product

What students will submit as the final product of the activityA completed Figma tutorial and a basic wireframe of their chosen lesson topic.

Alignment

How this activity aligns with the learning objectives & standardsAddresses learning goal: Students will be able to design and create interactive elements using Figma.

Activity 2

Interactive Elements

Students will learn to create interactive elements like buttons and animations.

Steps

Here is some basic scaffolding to help students complete the activity.

1. Review the Figma tutorial on creating interactive components and animations.

2. Design buttons for navigation and interaction within their lesson.

3. Add simple animations to enhance engagement, like hover effects and transitions.

4. Connect the interactive elements to create a clickable prototype.

Final Product

What students will submit as the final product of the activityA Figma prototype with interactive buttons and basic animations.

Alignment

How this activity aligns with the learning objectives & standardsAddresses learning goal: Students will be able to design and create interactive elements using Figma.

Activity 3

Drag-and-Drop Masterpiece

Students will apply their skills to design a complete drag-and-drop activity in Figma.

Steps

Here is some basic scaffolding to help students complete the activity.

1. Outline the learning objectives and flow of their drag-and-drop activity.

2. Create the draggable elements and designated drop zones.

3. Implement feedback mechanisms for correct and incorrect answers.

4. Test the drag-and-drop functionality and refine the design.

Final Product

What students will submit as the final product of the activityA fully functional drag-and-drop activity in Figma, ready to be shared and played.

Alignment

How this activity aligns with the learning objectives & standardsAddresses learning goal: Students will be able to design and create interactive elements using Figma.

🏆

Rubric & Reflection

Portfolio Rubric

Grading criteria for assessing the overall project portfolio

Interactive Figma Project Assessment Rubric

Category 1

Technical Skills

This category evaluates the student's ability to navigate and use the Figma interface and tools effectively.

Criterion 1

Figma Interface Navigation

Assesses the student's proficiency in navigating the Figma interface, using various tools like frames, shapes, text, and other design features.

Exemplary

4 Points

Demonstrates advanced navigation skills, using tools with ease and creativity to enhance the design.

Proficient

3 Points

Effectively navigates the Figma interface and uses essential tools to create functional designs.

Developing

2 Points

Navigates the Figma interface with basic proficiency and shows partial tool usage.

Beginning

1 Points

Struggles with navigating Figma and applying basic tools accurately.

Criterion 2

Interactive Element Creation

Evaluates the student's capability to design and implement interactive elements such as buttons and animations in Figma.

Exemplary

4 Points

Designs sophisticated interactive elements, seamlessly integrating animations and interactive components.

Proficient

3 Points

Creates functional interactive elements with effective use of animations and buttons.

Developing

2 Points

Develops basic interactive elements with limited animations, requiring further refinement.

Beginning

1 Points

Struggles with creating basic interactive elements, with minimal or problematic functionality.

Category 2

Creativity and Design

This category assesses the creativity and aesthetic quality of the design, including innovative use of Figma tools.

Criterion 1

Originality and Innovation

Measures the creativity of the design and originality in the use of Figma features to enhance engagement.

Exemplary

4 Points

Presents highly original and innovative designs, employing unique approaches to engage users.

Proficient

3 Points

Develops original designs with some innovative features that enhance user engagement.

Developing

2 Points

Shows limited originality with basic design elements and little innovation.

Beginning

1 Points

Produces unoriginal designs with minimal engagement-enhancing features.

Category 3

Functionality and Usability

This category evaluates how well the final product functions as intended, including user experience and usability principles.

Criterion 1

User Experience Design

Examines the usability and user experience quality of the final interactive Figma product.

Exemplary

4 Points

Delivers a highly intuitive and user-friendly experience, with seamless interaction and clear feedback mechanisms.

Proficient

3 Points

Provides a functional and understandable user experience with effective interactions.

Developing

2 Points

Offers a basic user experience with some usability challenges and unclear interactions.

Beginning

1 Points

Lacks a coherent user experience, with significant usability issues.

Reflection Prompts

End-of-project reflection questions to get students to think about their learning

Question 1

Reflect on your overall experience designing and developing interactive elements in Figma. What were your key takeaways, and how might you apply these skills in future projects?

Text

Required

Question 2

How effectively did you achieve the learning goal of designing and creating interactive elements using Figma?

Scale

Required

Question 3

What specific features or tools within Figma did you find most valuable for creating interactive experiences? How did these tools contribute to your overall design process?

Text

Required

Question 4

Describe the process of transforming a basic lesson into an interactive Figma experience. What were the key design decisions you made, and how did they align with the principles of gamification?

Text

Optional

Question 5

How did the development of a drag-and-drop activity solidify your understanding of interactive design principles? What were the specific challenges and triumphs you experienced in creating this interactive element?

Text

Required

Question 6

If you were to continue developing this project, what additional features or enhancements would you implement to further enhance the user experience?

Text

Optional