Introduction
01
course overview
I designed this product as 15 minute mocrolearning module with the intention to help novice web-designers understand Figma’s Auto Layout through the lens of the CSS Box Model. After completion of this course the learner will be able to add auto layout and manipulate some of its settings such as layout flow, padding, gap, and alignment.
Role
Learning Experience Designer (LxD)
Learners
Novice web-designers with some understanding of Figma.
Tools
Articulate Rise 360 & Figma
Problem
Learner requires knowledge of Figma without having to learn all its features.
Design-tool Knowledge Gap
Measurable goal
Learners will gain enough knowledge to begin iterating quickly especially in a web-design context.
Weight-loss and wellbeing
Research
02
Persona
This course was designed for a fictional persona that has intermediate knowledge of front end web-development and some knowledge of Figma.
Yuto Inoue
Age: 22
Occupation: Student
Location: Nagasaki
Summary
Yuto has been studying some courses on front-end web-development and would like to learn a little more about how he could utilize Figma to help with his front-end workflow. He is a very busy student and can only spare 15 minutes to learn Figma’s most powerful feature auto layout.
Frustrations
Workload
Stressed
Goals
Coding Skill
Design Skills
hobbies
Movies & tv
Photography
Values
Family
Education
“I’m developing a website for a Catholic organization in Nagasaki, but I wish knew Figma well enough to iterate faster.”
Design
03
Backwards Design
Learning Objectives
Content
Practice & Feedback
Style guide
Colors
learning objectives
Understand the relationship between Figma’s auto layout feature and the CSS Box Model.
Apply auto layout to create vertical and horizontal layouts of four or more design elements.
udl principles
Engagement: 8.1, 8.5
Representation: 2.1, 2.5
Action & Expression: 4.1, 6.1
Instructional Strategy
Direct Instruction and Compare & Contrast.
Lesson outline
Learning Point 1
This lesson will present brief information about the CSS Box Model.
Learning Point 2
Figma’s auto layout and its similarity to the CSS Box Model.
Learning Point 3
Practicals on utilizing Figma’s auto layout feature.
Content
The information for the course came from my personal knowledge of Figma. I also referenced Figma’s educational resources and a did a surface level research of the CSS Box Model.
Testing
04
Task
Learners will understand the relationship between Figma’s auto layout feature and the CSS Box Model. They will manipulate the auto layout to better understand this relationship.
Condition
The entirety of the course will be developed on Storyline Rise.
Standard
Create two boxes mimicking CSS Box Model
Four shape elements
Correct alignment
Use of padding and spacing
Conclusion
05
Take aways
I am thankful for the opportunity to design this product. I believe Figma is a great tool and look forward to feedback on how I can better improve the course. I will definitely be testing this with users that are familiar with Figma. I conducted a usability test with a user that had zero experience with any kind of design tool and the result were better than expected.
experience the course