edicardenas/figma-to-flutter-skill

O que figma-to-flutter-skill faz?

Habilidade do Codex que traduz quadros do Figma para Flutter com auditorias de design system e fluxos complementares de arquitetura, layout e desempenho.

Visão Geral

Esta habilidade converte designs do Figma diretamente em código Flutter, garantindo consistência com o design system da sua equipe por meio de auditorias automatizadas. Além da tradução básica, oferece suporte a fluxos de trabalho que avaliam a arquitetura, o layout e o desempenho dos componentes gerados.

Funcionalidades Principais

• Tradução de Quadros: Extrai propriedades de design de quadros do Figma (cores, tipografia, espaçamento, etc.) e gera widgets Flutter correspondentes.
• Auditoria de Design System: Verifica se o código gerado está em conformidade com tokens de design predefinidos (ex.: cores, fontes, margens).
• Fluxos Complementares:
  • Arquitetura: Sugere estrutura de widgets e separação de responsabilidades.
  • Layout: Otimiza a hierarquia de layout para flexibilidade e responsividade.
  • Desempenho: Identifica possíveis gargalos e recomenda boas práticas de renderização.

Plataformas Suportadas

• Codex (via extensão ou integração)
• Figma (como plugin ou exportação de dados)
• Flutter (geração de código Dart)

Como Usar

1. Configuração: Configure as variáveis de ambiente necessárias para autenticação no Figma e no Codex (ex.: FIGMA_ACCESS_TOKEN, CODEX_PROJECT_ID).
2. Selecionar Quadros: No Figma, selecione os quadros que deseja traduzir.
3. Executar: No Codex, execute o comando que aciona a habilidade (ex.: /figma-to-flutter translate).
4. Auditar: A habilidade retorna um resumo da auditoria de design system e sugestões de melhoria.
5. Revisar: Revise o código gerado e os fluxos complementares antes de integrar ao projeto.

Exemplo de Saída

// Widget gerado a partir de um quadro do Figma
class CustomButton extends StatelessWidget {
  final String label;
  final VoidCallback onPressed;

  const CustomButton({
    Key? key,
    required this.label,
    required this.onPressed,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text(label),
    );
  }
}

Contribuições

Contribuições são bem-vindas! Abra issues ou envie pull requests no repositório GitHub.

Licença

MIT