Application Design II / Task 3: Interaction Design Submission

10.06.2025 - 20.05.2025 / Week 9 - Week 12

ID name YANG HANWEN

ID number 0364085

Program Name Bachelor of Design (Honors) in Creative Media

UI/UX

Task 3: Interaction Design Submission

LIST

◆ Instructions

◆ Lectures

◆ Task 3: Interaction Design Submission

◆ Feedback

◆  Reflections

Instructions

Lectures

Week 7 App Design 2 - Week 6 (Thursday)

Week 7 App Design 2 -Week 8

Week 9 App Design 2 - Week 9

Week 10 App Design 2 - Week 10 Monday

FlutterFlow Tutorial

Week 11 App Design 2 - Week 11 (Monday)

FlutterFlow Tutorial

Task 3: Interaction Design Submission

So first of all, based on my final submission in Task 2 post...

that is the storyboard below⬇️

Then according to the submission requirements...

Aha， I need to use the FlutterFlow platform. Before that, I asked ChatGPT if it would use this platform. It said yes and then...there are some chat records. You can read them below.

So I followed ChatGPT’s instructions and created a new project in Figma called Task 3 to create an Auto Layout for each component？ in each screen in the storyboard.

As shown below⬇️

Let me take a look... Yeah, no problem.

The next step is to import the Figma project into that platform.

Even ChatGPT let me continue.

Then the next step is to import the fonts.

Then I went to this website and found the following six fonts.

Click this share link or click this Google Drive link to get or check what font I use.

Then after the font is successfully imported...

I asked ChatGPT why there was nothing on the page. 

ChatGPT answered me...you can read it ⬇️ below.

Then I saw there was an option to view the code, and I was wondering...

Can I unlock the development mode in Figma and then copy my project code in Figma and paste it into the FlutterFlow project...

but it turns out that this is not feasible...

I can only view but not edit, even though ChatGPT is so sure.

And... I asked this classmate, and she also said no. Oh, what a fucking trouble.

There is no other way. I can only do it page by page. Then here is the button. I directly paste the picture as an interactive button option.

That is the page below⬇️

Ok, so ⬇️ here’s the overall project for Task 3 that I created in Figma…

and the project I made in FlutterFlow in nearly 3 or 4 days.

Oh, by the way, here I finally thank this classmate for telling me how to jump to each page of the App on this platform.

Finally, according to the above requirements, an instruction video⬇️

In the Collaboration options, add Mr. Razif's email address (razif.mohamed@taylors.edu.my) and set it as an editor.

Then I published.

So finally, here's ↓

Oh, I forgot to mention that this is the script for my presentation video.

Wait, let me to correct. This ↓ is it.

So finally, here's ↓

Submission

• The Published Web Adresss (url)
  https://login-u-i-qm3rz3.flutterflow.app/
  
• Presentation Video
  https://youtu.be/J2b8FawfFkI?si=4XRbYwAQDZteAga3
  
• Walkthrough Video
  https://youtu.be/9DHEsfhV1Uc?si=NAopfji6wk_XIGxc
  

Feedback

Week 8

Starting from this week, offline classes have finally resumed. And also from this week, Razif taught us how to use FlutterFlow to do projects.

Week 9

After completing Task 2, I naively thought that I could directly paste the files from the prototype interactive prototype project made in Figma into the FlutterFlow project. In fact, it was only half right, or even less than half. The style can be used, but all the interfaces cannot be used. Even if the source code function is enabled in Figma, I cannot directly copy the source code and paste it into the code base of the FlutterFlow project (this is also what I mentioned in the presentation video).

Week 14 2025.07.21

I asked Mr. Razif if the final project submission should include a summary of Task 1, Task 2, and Task 3. He said yes. Then I said I planned to show him my project this Thursday, and he said yes.

Week 14 2025.07.24

When I failed to import fonts into FlutterFlow, I asked him how to solve it. He told me to import the fonts one by one, and finally solved the problem. I also asked him if all presentation videos need to turn on the camera. He said yes.

Reflections

Experience

I retract what I wrote in my previous post. I think Task 2 is a simple task. Simple as a sh*t! Just to create the 59→0 second countdown variant, I had to make 60 of them (even though I copied and pasted each one and modified it), and then created them as variants. It took me nearly a week to complete the entire storyboard.

Observations

After completing Task 2, I naively thought that I could directly paste the files from the prototype interactive prototype project made in Figma into the FlutterFlow project. In fact, it was only half right, or even less than half. The style can be used, but all the interfaces cannot be used. Even if the source code function is enabled in Figma, I cannot directly copy the source code and paste it into the code base of the FlutterFlow project (this is also what I mentioned in the presentation video).

Findings

I found many problems with this platform, the most important of which is that the previewed App page and the actual page display after release are not completely different, but it is true that the layouts are completely mismatched. You may need to adjust a few dozen px to ensure that the effect after release is what you want. I understand why there is a Final project after Task 3. For students who discovered this problem in Task 3 and corrected it, it ends with Task 3. But for students who discovered it after completing Task 3 (yes, that's me), the Final project is obviously the one after adjusting the Task 3 project.