Team:KCIS NewTaipei/Contribution


Before the iGEM wiki, we had no fundamental knowledge of web design or development. Therefore, we consulted Madeline Hsia, a UI/UX professional; she recommended us a web-based software called Figma for designing and prototyping our wiki. This tool really improved our overall workflow and helped us formulate an overall theme for our wiki. Our wiki was then built from the ground up via HTML/CSS/JAVASCRIPT without utilizing any existing framework (although inspiration was collected from previous iGEM wikis).

Knowing that wiki is a challenging and perhaps foreign part for many iGEM teams, we created an instruction video that might help by giving future teams a general guide to Figma and a way to establish an efficient workflow.
The video attached below includes a brief introduction of Figma, a brief tutorial on how to use it, and some suggestions on designing and implementing your wiki based on our experience. The video is uploaded onto YouTube for ease of access. If you have any questions, feel free to contact us via Instagram.

Figma has its dimension. So when we implement the units from Figma, we often have to use a DP/PX converter to code. To accomplish this, the wiki team uses to fix such problems.

Follow Us:
Contact Us: