In this article I will tell you how to make a component in Figma that will be suitable for export to code. In Figma, you can select our component and use the plugin to generate the finished code.
UPD
Figma is an application that specializes in providing a whole package of services and functions for developing interfaces of varying complexity. The application itself is cross-platform and can be used both as a desktop application and in a browser. At its core, it is a vector graphics editor that supports a large base of plugins. From the very beginning, supported the generation of CSS styles and code for mobile devices. A big plus is the storage of layouts in the cloud, and the ability to work simultaneously on one project with a whole team of designers. For developers, there is a convenient export of resources (for example, vector icons) to PNG / SVG / JPG formats, as well as export of pages to a PDF file.
Plugins in Figma serve to facilitate the task of the designer and developer - extending the functionality of the base Figma application with custom extensions (plugins).
Let's draw a leaf view with an icon and generate a layout.
This is how the approximate structure of our list item looks like - an icon on the left, and then text.
This will be the structure of our component - the vertical set of elements that we came up with above.
So, we figured out the structure, understood what we need to do approximately, now we proceed directly to the design. For this we will take one element and make it based on the components of Figma and apply Auto layout to it. First, merge the text and the icon, add padding, and align it in the middle and left. It turns out like this ...
, , Auto layout. , , , .
. , . .
.
.
. . Tailwind 2. , .
, .
, , , SVG . …
( , - url .).
, .
.
, , display: flex; - CSS , .
I drew the layout as in the previous example, made the design, distributed the blocks, and using Auto layout, I aligned everything as I needed. I generated the code, corrected some of the nuances with pictures and icons, and as a result I received a finished product card. Learn more about Flexbox here .
My generated markup is available here . You can watch and try for yourself.
I hope my article is useful to you, and it will become much easier to typeset. But if not, then I ask you not to minus the article, but to help me refine it to a digestible form by leaving your comments.