Um Design System completo e protótipo de alta fidelidade para gestão corporativa de usuários, controle de permissões e logs de auditoria.
O VLF System nasceu da necessidade de modernizar e centralizar a visão administrativa (Admin View) de sistemas de gestão. O foco deste projeto foi criar uma interface limpa, escalável e com forte feedback visual, permitindo que administradores gerenciem bases de usuários densas sem atrito cognitivo.
Este projeto não é apenas um layout estático; ele foi construído com uma mentalidade de Engenharia Front-end, utilizando lógicas de estado, variáveis booleanas e componentização modular dentro do Figma para simular uma aplicação real.
- Dashboard de KPIs: Visão macro de usuários ativos, suspensos e alertas de segurança em tempo real.
- Gestão de Usuários (CRUD): Fluxos completos para visualizar, editar, criar e bloquear/desbloquear acessos.
- Controle de Permissões Granular: Painel dedicado para habilitar/desabilitar permissões específicas (Visualizar, Criar, Excluir).
- Logs de Auditoria: Tabela de rastreabilidade de ações críticas de segurança do sistema.
- Filtragem Dinâmica: Sistema de filtros na tabela utilizando troca de estados e instâncias visuais.
- Auto Layout: Utilizado em 100% dos cards e tabelas para garantir responsividade e espaçamentos matematicamente precisos.
- Variáveis e Estados Booleano: Implementação de lógicas do tipo
Set variable to true/falsepara controlar o estado global de botões (ex: Toggle de Bloqueio/Desbloqueio) sem precisar duplicar telas inteiras. - Interactive Components: Menus dropdown, overlays de confirmação de exclusão e inputs com estados de foco integrados nativamente.
Aqui estão alguns dos fluxos interativos configurados no protótipo:
Navegação entre diferentes estados de visualização de dados utilizando lógicas de Smart Animate para simular requisições de banco de dados e aplicação de filtros em tempo real.
Navegação fluida pelo perfil do usuário, demonstrando a alteração de dados, controle de permissões (switches on/off) e o fluxo de bloqueio/desbloqueio de acesso.
Fluxo completo e interativo para a adição de um novo membro ao sistema, validando a seleção de níveis de acesso e escolha de avatar.
- Acesse o protótipo interativo clicando aqui.
- Para explorar o arquivo fonte, componentes e variáveis, a permissão de visualização do editor está habilitada no mesmo link.
Desenvolvido por Vinícius Ramos, Fernanda Anacleto e Livya Carneiro