Blog FFIT

Do Figma ao HTML: Prototipagem Ágil e MVPs com Resultados de Qualidade

Escrito por Breno Morais | Jun 2, 2023 8:00:04 PM

 

Bem-vindo ao mundo da produção ágil de protótipos e desenvolvimento de MVPs de baixo custo e alta fidelidade! Apresentamos a você nosso produto inovador, que utiliza o Figma como ponto de partida. Nosso objetivo final é permitir a rápida criação de protótipos realistas, prontos para serem testados e validados por usuários reais. Prepare-se para uma série de vídeos envolventes que mostrarão com clareza o que buscamos alcançar.

A chave para alcançar essa agilidade é a tecnologia de micro front-end, ou MFE. Esses são pequenos blocos de código que podem ser reutilizados, executados e hospedados, proporcionando flexibilidade e eficiência no desenvolvimento. Nossa produção de MFEs segue um processo rigoroso, passando por etapas de concepção, prototipação e revisão, garantindo resultados de alta qualidade. Nossa filosofia de implementação é baseada em quatro pilares: usabilidade, inovação, acessibilidade e reuso. 

A usabilidade é cuidadosamente considerada, seguindo as heurísticas de Nielsen e realizando mais de 200 verificações após as fases de prototipação e desenvolvimento. A inovação é impulsionada pela produção rápida de protótipos altamente realistas e de baixo custo. A acessibilidade é uma preocupação central, com a produção de código adequado para leitores de tela e a disponibilização de vídeos em Libras para pessoas surdas, quando necessário. E, é claro, o reuso é fundamental, permitindo que os MFEs sejam utilizados em qualquer dispositivo, seja ele web ou mobile.

Para facilitar o acesso aos MFEs, criamos a Biblioteca de Micro Front-ends, conhecida como LAUM. Nessa página web, você encontrará todos os MFEs disponíveis. Ao selecionar um deles, você terá acesso a uma descrição concisa, o status do desenvolvimento e uma pré-visualização.

Além disso, você encontrará informações detalhadas, como parâmetros, eventos, acessibilidade e exemplos de código, permitindo que você configure cada MFE de acordo com suas necessidades e veja seu comportamento em ação.

E não para por aí! Com nosso plugin FFIT LAUM para o Figma, você pode adicionar facilmente os MFEs ao seu protótipo. Basta consultar a documentação na página do LAUM para obter instruções passo a passo. E o melhor de tudo, o plugin permite exportar seu fluxo prototipado para HTML, mantendo todos os comportamentos nativos do Figma e dos MFEs utilizados.

Para uma experiência ainda mais aprimorada, recomendamos o uso da folha de componentes primitivos da FFIT. Ao utilizar esses componentes em seu protótipo, eles serão identificados pelo plugin e exportados como componentes reais. Por exemplo, se você adicionar um campo de texto da folha de primitivos FFIT, o HTML exportado será um campo de texto interativo, permitindo que os usuários digitem nele.

E isso não é tudo! Nossa folha de componentes primitivos foi desenvolvida com base nas orientações do Material UI, garantindo que os componentes exportados tenham uma aparência e comportamento alinhados a essa biblioteca de design renomada.

Com a nossa solução, você terá em suas mãos uma ferramenta poderosa para acelerar seu processo de prototipagem e desenvolvimento, garantindo produtos de alta qualidade, acessibilidade e usabilidade.

Na sequência desta série, iremos abordar a prototipagem, a configuração dos MFEs e a disponibilização do HTML exportado em nosso servidor. Além disso, compartilharemos uma valiosa ferramenta de verificação de acessibilidade chamada Lighthouse, desenvolvida pelo Google. Através dela, poderemos garantir a melhor experiência possível em termos de acessibilidade. 

Fique atento, pois essas informações serão essenciais para o seu sucesso na produção ágil de protótipos e MVPs.