Neste artigo, irei lhe dizer como fazer um componente no Figma que será adequado para exportação para o código. Na Figma, você pode selecionar nosso componente e usar o plugin para gerar o código finalizado.
UPD
Figma é um aplicativo especializado em fornecer um pacote completo de serviços e funções para o desenvolvimento de interfaces de complexidade variável. O aplicativo em si é multiplataforma e pode ser usado tanto como um aplicativo de desktop quanto em um navegador. Em sua essência, é um editor de gráficos vetoriais que oferece suporte a uma grande base de plug-ins. Desde o início, apoiou a geração de estilos CSS e código para dispositivos móveis. Uma grande vantagem é o armazenamento de layouts na nuvem e a capacidade de trabalhar simultaneamente em um projeto com toda uma equipe de designers. Para desenvolvedores, existe uma exportação conveniente de recursos (por exemplo, ícones vetoriais) para os formatos PNG / SVG / JPG, bem como a exportação de páginas para um arquivo PDF.
Os plug-ins no Figma servem para facilitar a tarefa do designer e desenvolvedor - estendendo a funcionalidade do aplicativo base do Figma com extensões personalizadas (plug-ins).
Vamos desenhar uma visualização de folha com um ícone e gerar um layout.
É assim que a estrutura aproximada de nosso item de lista se parece - um ícone à esquerda e, em seguida, texto.
Esta será a estrutura do nosso componente - o conjunto vertical de elementos que criamos acima.
Então, descobrimos a estrutura, entendemos o que precisamos fazer aproximadamente, agora vamos direto para o design. Para fazer isso, vamos pegar um elemento e torná-lo baseado nos componentes Figma e aplicar o layout Auto a ele. Primeiro, vamos mesclar o texto e o ícone, adicionar um pouco de preenchimento e alinhá-lo no meio e à esquerda. Acontece assim ...
, , Auto layout. , , , .
. , . .
.
.
. . Tailwind 2. , .
, .
, , , SVG . …
( , - url .).
, .
.
, , display: flex; - CSS , .
Desenhei o layout como no exemplo anterior, fiz o design, distribuí os blocos e, usando o Auto layout, alinhei tudo conforme necessário. Gerei o código, corrigi algumas das nuances com imagens e ícones e, como resultado, recebi um cartão do produto acabado. Saiba mais sobre o Flexbox aqui .
Minha marcação gerada está disponível aqui . Você pode assistir e experimentar por si mesmo.
Espero que meu artigo seja útil para você e se torne muito mais fácil de escrever. Mas se não, peço-lhe que não retire o artigo, mas me ajude a refiná-lo para uma forma digerível, deixando seus comentários.