Builder Session | Figma: Figma AI e Figma Make para Builders.

Introdução e Conexões

Apresentação Inicial

• O apresentador expressa felicidade pela presença de conhecidos e novos participantes, incluindo um DJ, no evento.

• Ele menciona a limitação de tempo para abordar todos os tópicos sobre o Figma Make, destacando que será uma visão geral do que pode ser feito.

Desafios e Expectativas

• Um desafio foi proposto em grupos de WhatsApp, mas apenas algumas pessoas compareceram. A ausência impactou a dinâmica do projeto.

• O apresentador questiona quem já usou o Figma Make, notando que muitos ainda não têm experiência com a ferramenta.

Objetivos do Projeto

Estrutura do Projeto

• O apresentador planeja realizar atividades práticas para demonstrar as capacidades do Figma Make dentro das limitações de tempo.

• Ele compartilha que a ideia do projeto surgiu da combinação de várias inspirações e experiências anteriores.

Interação com Participantes

• Pergunta se há participantes mineiros na sala como forma de conectar-se com o público local.

• Inicia o compartilhamento da tela para mostrar seu trabalho no projeto.

Fontes e Referências

Tipografia Utilizada

• O apresentador recomenda a fonte UI criada por designers brasileiros, ressaltando suas correções técnicas úteis para projetos.

• Ele explica como pretende usar essa fonte como base para o design do aplicativo que está desenvolvendo.

Aplicativo Proposto

• A ideia é criar um aplicativo chamado "Wi-Fi Finder", inspirado em placas comuns em Minas Gerais que indicam disponibilidade de Wi-Fi.

Desenvolvimento Prático

Referências Visuais

• Menciona um aplicativo anterior chamado Wi-Fi Magic como referência para seu novo projeto.

Processo Criativo

• O apresentador destaca sua experiência em design ao longo dos anos e sua transição para ferramentas modernas como o Figma.

Integração com Ferramentas Externas

Uso de Ícones e Estilos

• Ele planeja utilizar ícones open source junto à tipografia escolhida para enriquecer visualmente o aplicativo.

Conectividade com APIs

• Explica que o Figma Make permite acesso a serviços externos, APIs ou repositórios GitHub, ampliando as possibilidades criativas.

Preparação e Execução

Moodboard Inicial

• O apresentador utiliza imagens inspiradoras coletadas anteriormente para moldar seu layout inicial no projeto.

Organização da Informação

• Sugere usar ferramentas como Notion AI ou Atlia para organizar informações antes de integrá-las ao Figma Make.

Interatividade Durante a Sessão

Perguntas dos Participantes

• Incentiva os participantes a fazerem perguntas durante a apresentação, promovendo uma interação mais rica.

Criação do Prompt no Figma Make

Definição do Objetivo

• Começa a criar um prompt inicial detalhando as imagens anexadas e especificações sobre fontes e ícones desejados.

Considerações Técnicas sobre IA

Linguagem Utilizada nos Prompts

• Discute se deve criar prompts em inglês ou português; sugere manter tudo em inglês por questões práticas na programação.

Estrutura dos Prompts

• Recomenda formatar prompts em JSON (JavaScript Object Notation), pois isso facilita ajustes futuros nas solicitações feitas à IA.

Resultados Esperados da Criação

Modelos Disponíveis

• Comenta sobre diferentes modelos disponíveis no Figma Make; opta pelo modelo Gemini por ser considerado mais criativo.

Processamento da IA

• Observa que mesmo sem detalhes funcionais definidos, espera resultados interessantes enquanto aguarda processamento pela IA.

Dúvidas Frequentes Sobre Funcionalidade

Consumo de Créditos

• Aborda confusões relacionadas ao consumo de créditos durante uso intensivo da plataforma; menciona experiências passadas onde utilizou créditos ilimitados até dezembro anterior.

Eventos Futuro

• Anuncia participação no Floripa Design Days onde compartilhará aplicativos desenvolvidos usando o Figma Make.

Novas Funcionalidades do Figma

Lançamento de Páginas no Figma

• O FMA anunciou uma nova funcionalidade que permite acesso mais fácil às páginas dentro do Figma, facilitando a navegação entre diferentes partes da aplicação.

• A nova funcionalidade simplifica a adição de novas páginas e a edição de componentes, tornando o processo menos complexo em comparação com versões anteriores.

Importância dos Guidelines MD

• Os guidelines MD são essenciais para manter as regras e diretrizes organizadas em projetos, servindo como um índice de informações.

• É crucial que este arquivo esteja sempre atualizado e organizado para garantir que as informações sejam processadas corretamente durante o desenvolvimento.

Estruturação dos Arquivos de Guidelines

• Recomenda-se dividir o arquivo de guidelines em seções menores, como componentes ou animações, para facilitar a edição e manutenção das informações.

• Um arquivo separado para regras de SEO é sugerido para otimização nos aplicativos desenvolvidos.

Conexão com Supabase

Gerenciamento com Supabase

• O Supabase é apresentado como uma ferramenta útil para gerenciar bancos de dados e usuários em projetos, permitindo funcionalidades como onboarding e salvamento de favoritos.

• É importante ter cuidado com os limites da conta paga no Supabase, pois custos inesperados podem surgir rapidamente.

Limitações Técnicas

• Existem limitações técnicas ao usar o Supabase que podem ser mais facilmente compreendidas por desenvolvedores do que por designers ou gerentes de projeto.

Documentação Automatizada

Criação Automática de Documentação

• Ao solicitar a criação automática da documentação no guidelines MD, o sistema começa a organizar as informações relevantes sobre ícones e fontes utilizadas no projeto.

• A documentação gerada automaticamente ajuda na estruturação das diretrizes visuais e componentes do projeto.

Regras de Acessibilidade

Implementação das Diretrizes

• Discussões sobre acessibilidade são importantes; recomenda-se criar regras específicas para garantir que novos recursos sigam essas diretrizes durante o desenvolvimento.

Geolocalização no Projeto

Integração da Geolocalização

• A geolocalização pode ser implementada no aplicativo, mas deve ser testada fora do ambiente do Figma devido a problemas técnicos relacionados à segurança.

Votação sobre Escopo do Aplicativo

Decisão sobre Abrangência Geográfica

• Durante uma votação interativa, 57% dos participantes optaram por expandir o aplicativo Wi-Fi para todo o Brasil ao invés de limitar apenas Minas Gerais.

Discussão sobre o Aplicativo e Categorias

Funcionalidade do Aplicativo

• O aplicativo funcionou, mas ainda precisa de ajustes, como a inclusão dos pins no mapa.

• A primeira categoria "cafezinho" foi bem recebida, mas sugere-se adicionar uma nova categoria para "pão de queijo", que também deve incluir locais com Wi-Fi.

Interação e Feedback

• O apresentador expressa satisfação com a funcionalidade atual do aplicativo e agradece a participação do público.

Publicação e Integração de Dados

Compartilhamento de Informações

• O apresentador se oferece para publicar o link final do aplicativo no GitHub e convida os participantes a se conectarem pelo LinkedIn.

Uso de APIs

• Menciona que utilizou uma opção gratuita para integração, destacando que o Google Maps tem um limite gratuito mensal até $180.

• A API do Google Maps é considerada superior em termos de informações detalhadas, embora sua integração seja mais complexa.

Questões Técnicas e Segurança

Desafios na Integração

• A conexão com APIs pode exigir edição de código e medidas de segurança para proteger chaves secretas.

Perguntas Frequentes

• O apresentador responde perguntas sobre gravações da aula e certificados disponíveis para os participantes.

Cursos Futuros e Créditos Utilizados

Lançamento de Cursos

• Um curso completo sobre Figma será lançado em breve, previsto para o final de fevereiro.

Uso de Créditos

• O apresentador menciona que cada prompt consumiu entre 18 a 40 créditos, dependendo da complexidade da tarefa realizada.

Conexões Futuras e Encerramento

Networking

• Incentivo à conexão via LinkedIn ou Instagram para esclarecer dúvidas futuras sobre projetos ou cursos.

Próximos Eventos

• Anúncio da próxima Builder Session focada em análise de dados com copiloto AI marcada para dia 27.

Reflexões Finais

Importância do Aprendizado Contínuo

• O apresentador enfatiza que este é apenas o começo do aprendizado em desenvolvimento de aplicativos, mencionando novos conteúdos planejados.