Tools / Templates

There are times when I find myself doing repetitive tasks. In my never-ending quest to free up my time, I try to create tools or templates that will allow me to move faster next time. These are some of the stuff I created.

Basic form prototype with framer

Designing for government services means I deal with a lot of forms. Taking advantage of framer's design and code tabs, I created this boilerplate for my less code-savvy colleagues.

They will now be able to design their form in the design tab (similar to working in sketch) and make minimal changes in code to have a testable working prototype. This version comes with: native mobile keyboards, input limits, validation, displaying input data in a review page and so on.

(Try it with the framer app on your phone to get the native keyboards)

Grab a copy

form boilerplate

Quick translate tool with Google sheets

Taking advantage of the google translate function in google sheets, I quickly whipped up this sheet to help fine-tune my layout designs for the four main languages in Singapore — English, Chinese, Malay, and Tamil. The character count gives me a rough estimation of the maximum width I should accommodate for my components.

Grab a copy

translate tool

Other Stuff

Illustration / Motion Tools / Templates Comics