Figma for developers

As a full stack developer who has finished the fundamentals of Figma, I am writing this to share my experience. When I worked as a frontend developer at the beginning of my career, I had many interactions with UI/UX designers, merely to understand the nature of the components. The discussions were about the feasibility of elements across devices and how to incorporate certain features on Safari. It was always about finding alternative solutions to execute what our designer envisioned.

I never questioned the things that followed certain visual hierarchy or typography, let alone the structure of sections. It was like I was following a path without understanding the actual reasoning behind it, despite being able to enjoy the process of execution. As a reflection on this, I took this course and completed it within a couple of days. It was supremely consolidated with compelling video tutorials.

I started learning web development when CSS3 was pretty much prevalent in the dev community. There were some super cool properties that kept me spending more time playing with CSS. So I barely used the float property to align elements since I was comfortable with flexbox and grid. Whenever I encounter it in our ancient codebase, I subconsciously migrate it to either flex or grid.

But when you work with auto layout in Figma, you feel the same way you work with flex and grid. It is very easy to draw parallels between design and development since there isn't much to discover. In addition to that, if you don't want to use auto layout, there is a traditional setup that works the same way we work with flex and grid properties.

Apart from that, there are two other important properties I want to talk about. One is "hug contents" and the other is "fill container." Let's say you want to design a button and, for good reasons, you want to make it a component to use across your project. The "hug contents" property helps you retain the design of your button no matter how big your text is. But when you realize this is the default behavior of the HTML button element, and you don't have to enforce a mystery property to make it behave the way it behaves, it's kind of surprising. The other property is "fill container," which helps your child component shrink and grow based on your parent component.

I tried using other shapes like ellipse, rectangle, polygon, and arrow. These shapes have tremendous power in terms of configuration if you want to build vectors out of them. I made simple yet insanely customizable icons out of them. One way to understand the different elements inside an SVG while you manipulate them using JavaScript is to design them in Figma. I remember a couple of days back there was a challenge to implement a complex hamburger menu icon. Its active and rest states were completely based on the translation of SVG elements. I manually coded the line, circle, rect and changed their positions based on state. It was indeed complex, especially when you have to work with multiple files. But now I believe the process would have been much smoother if I had understood the fundamental aspects of SVG vectors.

I'm saying that Figma is built not only for UI/UX designers who want to do wireframes, prototypes, build design systems, conduct research, and maintain competitor references - it can be used to understand vector fundamentals. There are many ways to build the same visual. I would recommend exploring all the edge cases creatively.

I am going to explore all of them deeply in the near future. I know that I have only touched the surface level of Figma's potential.

I am adding a couple of works from what I have experimented with over the past couple of days. I believe you could create better visuals and have a good time with Figma.