Figma, which I downloaded just 6 months ago to try, has become indispensable. If we say that it brought a new dimension to the design, we would not be wrong. I think it seems like medicine to designers working from home during the pandemic process.
Figma provides us an opportunity to open a file over the internet, allowing the whole team to work in a single file. If someone told me that all the designers could work in the same file at the same time without having to save the file 5 years ago, I would have thought that there was more time to such technology, but we are experiencing it now.
In another article, I will talk about how Figma closes the gaps of prototype programs such as sketch, adobe xd, invision. Let’s go back to the atomic design system for now.
Atomic Design
Brad Frost brought this methodology to us with his book, Atomic Design in November 2016. I think Atomic Design strengthens the bridge between UI / UX and frontend. Designers and developers applying this methodology are beginning to understand each other better. Atomic design also includes atoms, molecules, organisms, just like its scientific counterpart, followed by templates and pages.
Atoms are the smallest building blocks, in other words; colors, styles, inputs, buttons, etc. besides molecules are the first states where atoms come together to obtain meaningful forms. When we come to the organisms, we begin to see the cores of the final design. This part is very important for a designer because here we create small pieces of lego that will form our template. Now your colors, fonts, buttons, padding and margins are ready, we can combine them to form organisms. At this point, atomic design methodology and Figma worked very well for me.
Making a Design system in Figma
Figma, which is the component structure, allows you to create the elements you want to use in the whole file (icon, menu, input, etc.) wherever you want, against the symbol structure of the closest rival Sketch. Anywhere in your file, you simply do this by clicking the “create component” button. This provides us great ease in paging and grouping while establishing an atomic design system.
Figma also allows us to save text styles, the color palette we use, layout and grid structure, and even shading styles and share them with your team. By installing a design system, sharing the whole project simultaneously with other designers and software developers has never been easier.
Auto Layout
Finally, I would like to mention the Auto Layout ** settings. By bringing a concept called auto layout to our life, Figma brought the design one step closer with software. When we put a list or buttons next to each other, we no longer have to manually enter their distance from each other. By entering the settings of Vertical Padding, Horizontal Padding and Space Between Items, we can dynamically position the objects relative to each other. When the dimensions of one element change, you no longer need to move another element. ♡
I made a brief introduction to the atomic design and its creation. I know this seems like a lot of effort at first, but after creating this structure, you will see that the project is progressing faster and less problematic. We now live in a world where only designs exist. Thousands of designers are working every day trying to show users a better experience with a more aesthetic interface. We must establish our common language with frontend developers by working on such methodologies with some of the time we devote to them.
See you~
by Halim Mert İnan
