Getting Familiar with Figma
So far, I have been implementing the web frontend while referring to the wonderful Figma artifacts created by designers. As I experienced this over and over, I wanted to become proficient in using Figma.
Dependence on CSS Frameworks
In my personal development so far, I have been developing web applications with a neat appearance using CSS frameworks such as Bootstrap and Material UI. I often felt that the "Bootstrap-like" was too strong. However, I didn't know how to improve the look of the web with originality. From a few years ago, Tailwind CSS became a trend, and I wanted to aim for more free styling. Furthermore, I have been doing more work to convert designs using Figma into React code in my work, and I have been doing more styling myself. That's why I wanted to use Figma myself.
Formulating Concepts
Instead of starting Figma suddenly, I first roughly thought about the purpose, target, and problems to be solved of the web application I wanted to draw. I thought about these using the food price comparison service "bochi bochi" that I am developing personally as an example.
Referencing Design Systems
Once the concept was somewhat solidified, I referred to the design system of the Digital Agency. From basic styles such as typography, color, and spacing, to components such as buttons and text fields, I refer to what seems to be useful.
Learning How to Use Figma
When I started the project in Figma, I initially focused on the design for smartphones without considering the responsive design for PCs and tablets. I initially struggled with the operation of Figma, but my understanding of the functions gradually deepened by using it repeatedly. In particular, I felt the convenience of defining and reusing styles and components. Among them, the Auto Layout function is exceptional, and I use it frequently because of its ease of use.
Actually Designing
I actually did the design work and felt a big change before and after the design. When I used Figma before, I was just stacking basic shapes or sketching roughly by hand. However, now I feel that I can create a more structured, proper design.
Below is the appearance of bochi bochi implemented without using Figma.
And here is the new design of bochi bochi that I worked on using Figma in the past few days.
It's hard to say which is superior, but personally, I'm satisfied with the new design.
Conclusion
From now on, I plan to implement the designs created in Figma into React code and apply them to the already operational bochi bochi. Meeting Figma has added a new step to my development skills.
If it was helpful, support me with a ☕!