Figma project
In order to show where we want to go, we are going to design a simple Figma set of pages
I have met Figma some months ago, and always wanted to use it. After I have finished this course, the codes, I have decided to add more one ball to balance, namely, User Interface Design using Figma. In simple terms, Figma allows us to desgin the interface as close as possible from reallity, as so we can have an idea how it will look like before coding.
Why I have decided to add Figma? Figma is an easy and fast way to prototype the interface of the app. Further, it is free of charge and has an active online community.
See that I do not normally follow this step: first prototyping on Figma, for after that coding. I find it easier to just create the codes, nonetheless, Figma can be handy for starters, and for those that need to showcase their insights to, say, a team, before start coding. I wish I had this tool when I started my postdoc project, I believe that it would have eaiser to showcase my ideias! If you are not interested on this step, I will do my best to separate this step from the codes, since this is just planning. As a matter of fact, I am doing my best to keep each ball as independent from each as possible: this is the secret to jungle several balls, one at a time!
Here goes some advantages I was able to spot using Figma briefly:
You can use the CSS generated by them, in Angular - for beginners, even for someone already advanced, CSS can be tricky. I myself like to use automatic generators online, and Figma has this option to export the CSS codes! I was able to find some Figma-Angular translators, but they seem to be paid!
You can fastly see how your app will look like, even though it will not have precisely the appearance designed;
We actually have published Figma components for Angular Material!
Essentially, they have a strong community, and several pre-built templates!
Below is our Figma project.
See that we are not aiming at making the project precisely like the Figma project, the Figma project is a nice way to have some insights before coding. Should you prefer, just start coding!
You should know even though I discuss the Figma project on the course, as a means for programming, we do not build it for now. You can follow any online tutorial and rebuild the project if you feel so! Compared to what Figma can do, the project is quite straightforward!
Even though I give my best to prepare the courses, do not take my words as the only way. Should you have your own way to do things, do it! I myself like to follow my way!
I have met Figma some months ago. A student came to me with a Figma project, and I thought the project was already implemented, it was quite real! Since then, I wanted to use Figma! This course was the opportunity I was waiting for! Please, keep in mind that Figma is a rich environment, they have several nice options. Should you be impressed by this humble project, most likely Figma will blow your mind!
I have used this tutorial to prepare this part!
Is the interface we designed the best? it is hard to know. For me, it sounds nice. However, there is a methodology for that called A/B testing, where they test statistically the possible interfaces! One thing that I like about this interface is being clean, not too much details, I like it! The first interface had too much details!
Last updated
