{"id":482,"date":"2023-09-19T21:01:18","date_gmt":"2023-09-20T04:01:18","guid":{"rendered":"https:\/\/puffyunicorn.me\/?p=482"},"modified":"2025-09-27T13:06:57","modified_gmt":"2025-09-27T20:06:57","slug":"ux-design-part-5-finished-figma-prototype","status":"publish","type":"post","link":"https:\/\/puffyunicorn.one\/?p=482","title":{"rendered":"UX Design\u2013Part 5: Finished Figma prototype"},"content":{"rendered":"\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n

It’s a wrap! Well at least for building the prototype. I made a copy of the wireframes and began by implementing the color palette and font choices. I then started laying it out, and as I went through that process, decided that putting the word and phrase flashcards on the same page as the video could actually work.<\/p>\n\n\n\n

I made it work by implementing horizontal scrolling and a 16:9 aspect ratio for the video where originally it was going to be square. This made it short enough to fit the flashcards complete with a subtitle bar with a toggle switch to change from Thai > English to English > Thai. Note: The toggle switch in the prototype only works to show basically what it does, but you’ll have to toggle back in order for the flashcards to work again. Also, the flashcards are just an overlay, so you’ll have to flip it back in order to click anywhere on the screen again.<\/p>\n\n\n\n

I feel like I got the basics of Figma down and now it’s a matter of being more efficient with an actual design system and usage of libraries. But that’s for another day. For now, on to building this thing!<\/p>\n\n\n\n

\n
Launch Figma Prototype<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

It’s a wrap! Well at least for building the prototype. I made a copy of the wireframes and began by implementing the color palette and font choices. I then started laying it out, and as I went through that process, decided that putting the word and phrase flashcards on the same page as the video […]<\/p>\n","protected":false},"author":1,"featured_media":484,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"cybocfi_hide_featured_image":"yes","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[23],"tags":[],"class_list":["post-482","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-design"],"jetpack_featured_media_url":"https:\/\/puffyunicorn.one\/wp-content\/uploads\/2023\/09\/App-noframe-square.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/puffyunicorn.one\/index.php?rest_route=\/wp\/v2\/posts\/482","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/puffyunicorn.one\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/puffyunicorn.one\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/puffyunicorn.one\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/puffyunicorn.one\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=482"}],"version-history":[{"count":3,"href":"https:\/\/puffyunicorn.one\/index.php?rest_route=\/wp\/v2\/posts\/482\/revisions"}],"predecessor-version":[{"id":1020,"href":"https:\/\/puffyunicorn.one\/index.php?rest_route=\/wp\/v2\/posts\/482\/revisions\/1020"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/puffyunicorn.one\/index.php?rest_route=\/wp\/v2\/media\/484"}],"wp:attachment":[{"href":"https:\/\/puffyunicorn.one\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=482"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/puffyunicorn.one\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=482"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/puffyunicorn.one\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}