Fala Radizeiro e Radizeira, tudo bem com vocês?
Muitos de nós desenvolvedores quando iniciamos um projeto vamos diretamente para o código.
Isso não é ruim, mas em se tratando de experiência com o usuário, o layout das aplicações é muito ruim.
Pois no final de um projeto ao entregar para o cliente, nos deparamos com diversas dificuldades dele.
E para isso precisamos primeiramente modelar, e claro, prototipar antes de irmos diretamente para o código.
Pensando nisso, no post de hoje irei mostrar como fazer, e claro, como aplicar essas técnicas utilizando o Firemonkey.
Conhecendo o Figma.
O Figma é uma ferramenta para prototipagem de layouts.
E com ele é possível prototipar os mais diversos tipos de layouts.
Ele é uma alternativa, por exemplo, a um Photoshop, e a outras ferramentas de edição de imagens.
Só que o foco dele é em protótipos.
Com ele você irá construir um layout e importar para o Delphi.
Isso mesmo, iremos modelar todo o Layout e leva-lo para o Delphi.
Com o figma aberto, basta clicar no botão New e escolha a opção desktop, onde iremos modelar nossa aplicação para o Delphi é claro…rsrsr
Após isso ele irá criar uma área para que você possa trabalhar seu layout.
E basicamente o que você irá utilizar são as opções de formas geométricas.
E com uma inspiração de layout que possuímos em uma busca no Pinterest, falei sobre esse site anteriormente para que você possa buscar inspirações de layouts.
Nesse site você encontrará diversos layouts que é possível ter bastante inspiração para modelar seus softwares.
Com esse layout que acabamos de pegar no Pinterest iremos prototipar no Figma.
Com o Figma pronto para prototipar, iremos habilitar as grids, para melhor visualização.
E agora iremos trabalhar com as formas geométricas para modelar nosso protótipo.
Viu que com algumas formas estamos modelando nosso layout?
Observando a imagem e seguindo alguns padrões conseguimos criar nosso protótipo no Figma.
Viu como ficou legal?
Agora para que você consiga utilizar todas as imagens e logos utilizados nesse protótipo no Delphi é bem simples.
Basta selecionar todas as frases do lado esquerdo do figma e mandar exportar para o formato que desejar.
Com isso você terá todas as imagens e logos nas proporções necessárias para serem utilizadas no Delphi.
E agora no Firemonkey fica mais fácil, onde seguindo os padrões que utilizamos de formas geométricas no Figma, iremos usar layouts no FMX.
Iremos mostrar aqui um outro layout que criamos juntos no Figma e no FMX, e esse conteúdo você encontra dentro do CLUBE DOS PROGRAMADORES DELPHI.
Dentro do FMX nós trabalharemos componentizando e modelando com base nesse layout que criamos no figma.
Viu como fica legal, e como nosso projeto começa ter uma cara melhor.
Nós podemos colocar nos espaços em banco o próprio componente TBGWebChart, componente de criação de gráficos.
E com isso você consegue entender como é essa componentização e modelagem do layout.
Com essa criação de componentes separados, dando maior flexibilidade, removendo um pouco o acoplamento dos códigos, ficando mais leve e maleável.
Desta forma podendo reutilizar as informações quando quiser, e do jeito que quiser.
Assim conseguimos criar layouts fantásticos.
E caso você tenha interesse de conhecer mais sobre Aplicar Design Criativo no Delphi acesse o nosso portal do CLUBE DE PROGRAMADORES EM DELPHI, onde você não terá só conteúdos relacionados ao Design , mas uma quantidade enorme de conteúdos que poderá lhe ajudar muito no seu dia a dia, é uma verdadeira NETFLIX para os programadores Delphi.
CLIQUE AQUI E SAIBA MAIS SOBRE O CLUBE DOS PROGRAMADORES DELPHI
