---
title: "Do Figma ao HTML: Prototipagem Ágil e MVPs com Resultados de Qualidade"
description: "Produção ágil de protótipos e MVPs com MFEs: uma solução inovadora."
---

[Blog FFIT](https://ffit.com.br/pt-br/blog)

# [Do Figma ao HTML: Prototipagem Ágil e MVPs com Resultados de Qualidade](https://ffit.com.br/pt-br/blog/do-figma-ao-html-prototipagem-ágil-e-mvps-com-resultados-de-qualidade)

 Escrito por [Breno Morais](https://ffit.com.br/pt-br/blog/author/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.

[Visualizar publicação completa](https://ffit.com.br/pt-br/blog/do-figma-ao-html-prototipagem-ágil-e-mvps-com-resultados-de-qualidade)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Breno Morais"
  },
  "dateModified" : "2023-06-02T20:00:04.038Z",
  "datePublished" : "2023-06-02T20:00:04Z",
  "headline" : "Do Figma ao HTML: Prototipagem Ágil e MVPs com Resultados de Qualidade",
  "image" : {
    "@type" : "ImageObject",
    "height" : 850,
    "url" : "https://ffit.com.br/hubfs/Vista_superior_de_um_designer_fazendo_prot%C3%B3tipo_no_papel.jpg",
    "width" : 1280
  },
  "mainEntityOfPage" : "https://ffit.com.br/pt-br/blog/do-figma-ao-html-prototipagem-ágil-e-mvps-com-resultados-de-qualidade",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "Blog FFIT"
  }
}
```