Hey fellow designers! 👋
Frustrating.
How frustrating is it to design something and fake interactions with prototyping tools without an idea of how things will work under the hood?
What if I could build what I design? Never did this thought hit you?
So we search “Figma to code” or “XD to code” in Google. After findings a few weird convertors that we don’t understand outputs, we decide to stay to do only design… Because you know, coding is not for us, too boring and complex…
If you are a designer, coding is the best thing you can try (counterintuitive) because how things looks are tied with how things work. Coding isn’t scary and brings real magic to the table.
Learn by fire, today we will design and build something real: a simple sine waves generator.
Let’s get into it 🤟
Update: You can now grab the design files and the source code of our app! Enjoy your day :)
1. Design it like we design all the day
Is our design ready to start building it? Let’s check those points:
- Did I properly name my layers? If it’s already a mess in Figma, the code won’t fix that.
- Did I think of how will be the user experience? Is it fresh?
- Have I used auto-layout and container frames to group my design elements?
- Have I a proper design system with a defined spacing rule, type system, and colors? (There is nothing more painful than keeping designing elements when we are in the build phase)
- Have I designed every state of my elements? Disable, hover, active…
2. From UI design to code
Every web app interface can be translated from UI design to code with HTML/CSS/JS. There is how we can see the role of each of those 3 “languages”:
HTML: I want a button.
CSS: I want my button looks rounded.
JS: I want something happens when I click on my button.
So, you can pick vanilla HTML/CSS/JS, front-end framework like Vue or React or Python web framework… technology is not the thing, is the tool. Why? Because a rounded border will be coded the same way in every code for web purposes.
We will use Svelte for this one! Svelte is a “compiler” that allows you to mix HTML/CSS/JS in a simple, cool, and fast way.
Let’s see how code is like a music sheet of our UI design:
“Hey dear web browser, I want a button that will be named “exportButton” and do everything is coded in a function named “downloadSVGpath” when someone clicks on it :) Thanks”
“Hey dear web browser, I want you to apply these style rules to my basic HTML button: I want a beautiful rounded corner at 16px, a mouse pointer when we hover it, I don’t want any borders but I want a cool color gradient as a background color. Then, I want the font inside the button to have its color set to #fcfcfc and be Inter typeface (bold please). I also want to center stuff in the button and add padding just like my Figma design. Oh, and add a subtle shadow :) Thanks.”
And all the UI can be translated like this in code :) This is magic.
What we learn about coding as a designer:
- Coding is just a tool that allows us to translate our very visual metaphors into something that everybody can use. How cool is that?!
- Coding helps us to envision our design goals and forces us to see beyond the visual range: how is my button will be supposed to work? how it looks when hovering? How my popup modal can be designed for mobile devices?
- Coding allows us to create the weird idea we designed “just for fun” instead of just pushing the design case study into our portfolio under the “personal project” tag.
- Coding shows us how much work is required to achieve what we designed. So we can better understand our design clients' needs, challenges, and resource management.
- Coding is flexible. You can replicate the Netflix website pixel perfect with pure HTML/CSS or with the Vue Framework, or with any other Web framework.
3. Coding and creativity
Yes, the sky is the limit. Think about video games, they are “just” pieces of software that have to work and be enjoyable.
Painting on a board, rendering a 3D scene, finding piano melodies, drawing on a sketchbook, writing a poem, and coding our ideas are the expression of something bigger: the raw expression of creativity.
What I found is the following: coding is a creative catalyzer tailored for solving problems (aka challenges).
With code, you can create a Discord bot, a 3D game, a tool to achieve [your passion here] better, a funny thing, your own auto-refuse cookies app, a non-profit challenge… If you are a bit creative person, it’s vertiginous to think about that.
Go back to our app! You know programming is a way to describe things, but things stay the same no matter how you describe them. So grab some basic maths you surely ear in school: trigonometric functions. If we want to draw and tweak a sine wave, we just have to translate it to code and stick parameters to little sliders no?
“Hey dear web browser, each time our slider moves, I want to run this function: I want you to draw a curve inside a frame that I have defined inside my HTML code. I also want my curve stroke looks rounded at each cap and have a color and width I’ve defined inside variables. You will take the sine function parameters from the stored values of the sliders. Finally, while your x variable did not reach the total width in the x-axis of our frame you will solve the y-axis point position of the sine equation and draw the curve :) Thanks.”
That it :) After our code is clean, we have to give our code files to a hosting service. Why? because when we code the app we do it on our computer, locally with our code files. But if we want our app can be accessible on the internet we have to host all these files on a server to be available through a real URL, like a website :)
Some hosting services are available these days for free like Vercel, Netlify, Heroku, and so on, for this one, we will use Vercel. So put our code files on GitHub and Vercel will find them, just hit the “deploy” button and our app is now online… all for free, magical.
Now buy a domain for $20 like… hum… sinwaver.com?
Stick our fresh domain to our new online app and voilà!
We just designed, coded, and deployed an app that can export sine waves as SVG from scratch. Exactly how we wanted it to look, exactly how we wanted it to work.
I’ve said before coding is tied to raw creativity. For me, it’s bigger than that: is tied to freedom. If you can design & code, no one can stop you from creating stuff for you, and others ❤.
Update: You can now grab the design files and the source code of our app! Enjoy your day :)
Hope this paper helps you with your design journey! You can test our fresh app here! If you have questions about this project or any questions you can text me at duprez.hugo@gmail.com
Go further
Ressources to learn code I’ve personally tested and liked:
Two amazing designers who code:
