<aside>

Experiment: Ask Figma Make to create my personal portfolio home page using the frame that I designed to see if it can follow the layout perfectly.

</aside>

Design Vision (Expected Output)

Iterations

• This is my full conversation with Figma Make: https://www.figma.com/make/Ew23EOWZpHBSjEHWx4CKzJ/Create-Portfolio-Frame?t=tD6K7TDAonndBWYR-1
• Time Spent: 1.5 hours (gave up because it’s late and I was tired of back-and-forth editing without getting the desired result)

V1-V2

• Input: A frame called Homepage with the header being grouped and using auto layout. Other components were not grouped, such as the code + design highlight.
• Output: Version 1.0 was really awful. The layout was off. The assets were not imported properly. The only thing that was right was the main content in the center. The Design Engineer Portfolio badge, the main paragraph after, and the highlight code + design are all centrally aligned.

V3 + V5

V4 generated the same result as V3, so I did not include it here

• Input: A frame called Homepage with all elements being properly grouped and using auto layout.
• Output: A homepage that matches 80% of the original design, with generally good layout, but some of the components’ layouts were off. The menu bar is not visible in the viewport.

For V3, the layout was significantly better and all the assets were imported almost correctly. However, in the main content in the centered column, all the divs are not centrally aligned. The tech stack bar also does not wrap the inner icons fully.

For V4, the layout remained the same and the tech stack bar’s background div has been adjusted to tightly wrap the inner icons. However, in both versions, the menu bar was not visible in the viewport. I had to scroll in order to see it.

V18

• Input: A frame called Homepage with all elements being properly grouped and using auto layout.
• Intervention: I had to manually modify the code to make the div that wraps all the tech stack icons have a larger height and width.
• Output: A homepage that matches 80% of the original design, with generally good layout, but some of the components’ layouts were off. The menu bar is not visible in the viewport.