Flutter – Design System

John Kevid Rodrigues Cardozo

​

Desenvolvedor Especialista - EXA

​

Globalcode – Open4education

Globalcode – Open4education

Agenda

• Introdução
• Fundamentos
• Implementação

Globalcode – Open4education

INTRODUÇÃO

Globalcode – Open4education

O que é um Design System?

• Um conjunto de elementos de design, componentes, guias e padrões que são usados ​​para criar uma consistência visual e de marca em um projeto de design.

​

• Objetivo: tornar o processo de design mais eficiente e consistente, ajudando a garantir que uma marca ou empresa tenha uma aparência consistente em todos os seus canais e plataformas.

​

• Exemplos de elementos incluídos: cores, tipografia, ícones, botões, formulários, grades, espaçamento e muito mais.

Globalcode – Open4education

O que é um Design System?

• É documentado em um guia de estilo que estabelece as diretrizes para a aparência e comportamento de cada elemento.

​

• Benefícios: economiza tempo, aumenta a eficiência do processo de design e ajuda a garantir a consistência da marca ou empresa em todos os pontos de contato com o usuário.

Globalcode – Open4education

�Importância do Design System para o desenvolvimento de um aplicativo�

• Ajuda a garantir a consistência visual e de marca em todas as telas e funcionalidades do aplicativo.

​

• Especialmente importante para equipes maiores, pois ajuda a alinhar todos os designers e desenvolvedores com as diretrizes de design da empresa.

​

• Economiza tempo e recursos, permitindo que a equipe se concentre em projetar e desenvolver novas funcionalidades.

Globalcode – Open4education

�Importância do Design System para o desenvolvimento de um aplicativo�

• Melhora a acessibilidade e usabilidade do aplicativo, estabelecendo padrões para cores, tipografia, espaçamento e outros elementos de design.

​

• Ajuda a produzir um aplicativo de alta qualidade que atenda às expectativas dos usuários.

Globalcode – Open4education

Flutter para Design Systems

• O Flutter permite criar componentes reutilizáveis e personalizáveis que seguem as diretrizes do design system da empresa.

​

• Widgets personalizados podem ser usados em todo o aplicativo.

Globalcode – Open4education

Flutter para Design Systems

• A comunidade ativa de desenvolvedores e designers cria e compartilha recursos, como widgets personalizados e ferramentas de design, para ajudar na implementação do design system.

​

• O Flutter é conhecido por sua alta performance e capacidade de criar interfaces de usuário responsivas e animações suaves.

​

• O Flutter permite que os desenvolvedores reutilizem o código em diferentes partes do aplicativo e até mesmo em diferentes projetos, o que pode ajudar a economizar tempo e recursos.

Globalcode – Open4education

Flutter para Design Systems

​

​

​

​

• Em resumo, o Flutter é uma excelente escolha para implementar um design system eficiente, oferecendo componentes personalizáveis, uma comunidade ativa, alta performance, documentação abrangente e reutilização de código.

Globalcode – Open4education

FUNDAMENTOS DO DESIGN SYSTEM

Globalcode – Open4education

Design System

• Um Design System é uma coleção de componentes, padrões e diretrizes de design que são usados para criar experiências de usuário consistentes e coesas em todas as plataformas e produtos.

Globalcode – Open4education

O que um Design System inclui?

• Padrões de cores e tipografia

​

• Componentes de interface do usuário, como botões, formulários e ícones

​

• Diretrizes de layout e grid

​

• Documentação e guias de estilo

​

• Exemplos de uso e casos de uso

Globalcode – Open4education

Integração do elementos do Design System

• Cada componente do Design System é projetado para trabalhar em conjunto com outros componentes para criar uma interface de usuário coesa e funcional.

​

• Os componentes do Design System devem ser testados e validados para garantir que funcionem corretamente e se integrem adequadamente à interface do usuário.

​

• Testes de usabilidade devem ser realizados para garantir que os componentes sejam fáceis de usar e atendam às necessidades dos usuários.

​

• O Design System é um sistema dinâmico que deve evoluir com o tempo para atender às necessidades em constante mudança do produto ou da marca.

Globalcode – Open4education

IMPLEMENTAÇÃO NO FLUTTER

Globalcode – Open4education

Implementação no Flutter

Globalcode – Open4education

Implementação no Flutter

Globalcode – Open4education

Implementação no Flutter

Globalcode – Open4education

Implementação no Flutter

https://github.com/JKRC/flutter_design_system_example

Globalcode – Open4education

E SOBRE A ARQUITETURA ?

Globalcode – Open4education

Arquitetura do Design System

• Onde concentrar o DS?
• Localmente no projeto principal
• Em um package separado do projeto principal mas no mesmo repositório
• Em um repositório diferente

​

​

Globalcode – Open4education

Arquitetura do Design System

• Design Tokens?

​

​

​

​

Globalcode – Open4education