> For the complete documentation index, see [llms.txt](https://johnkazer.gitbook.io/core-web-dev-concepts/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://johnkazer.gitbook.io/core-web-dev-concepts/app/design.md).

# Design

There are a variety of design tools available. I have used [whimsical ](https://whimsical.com)and to a lesser extent [Figma ](https://www.figma.com)whilst experimenting briefly with [Balsamiq ](https://balsamiq.com)(wire-framing) and cloud-based code auto-generating tools like [gridbox ](https://www.gridbox.io)and [webflow](https://webflow.com).

I wrote [an article](https://dev.to/johnkazer/revist-the-waterfall-process-but-this-time-with-maths-27cn) about how to link Figma designs semi-automatically into the state machine design process. The idea being to enable the graphical and logic design process to come together.