This week we looked at no code tools. No code tools are products that allow users to create websites without any knowledge of HTML or CSS. Some can even convert a figma file into a website. Whilst these products allow website building to be more accessible users will have limited customisation and code performance may not be as good.
I have some experience with no code tools as I used one to create a photography portfolio in the past and I found I really resonate with the fact that customisation is limited. Here is how my site looked.
We started by looking at framer. One of many no code tools.
We are gonna start by exporting part of our figma file over to framer. The reason we do it in parts is because framer can be unreliable in its design, like I mentioned before about limited customisation. Doing it in parts aids in a more consistent design and keeps it malleable as we add more.
Here is the figma file we are exporting.
And here is how it looks in framer after a few small adjustments.
Already I am bumping into some issues with the positioning of the different components, if it were up to me we would stick to code as these issues are fixed much easier in code.