O Design System n\u00e3o \u00e9 um conceito novo. A novidade \u00e9 como o aplicamos ao nosso trabalho, nesse caso s\u00e3o espec\u00edficos para produtos digitais \u2014 sites, aplicativos, etc.<\/strong> <\/p>\n\n\n\n E tocam pessoas que trabalham com design digital, experi\u00eancia do usu\u00e1rio, design de intera\u00e7\u00e3o e desenvolvimento front-end.<\/p>\n\n\n\n Atualmente, o Design System<\/strong>, que \u00e9 o que estamos disponibilizando no UI Kit, \u00e9 feito atrav\u00e9s de UX volunt\u00e1rios<\/strong>, tendo uma iniciativa no cap\u00edtulo de UX. <\/p>\n\n\n\n O DS (como chamamos internamente) \u00e9 constantemente atualizado e melhorado, sempre contando com a colabora\u00e7\u00e3o de todos os UX e demais \u00e1reas de Blip<\/strong>, sempre com o intuito de auxiliar na documenta\u00e7\u00e3o e acompanhar as atualiza\u00e7\u00f5es dos aplicativos que emula.<\/p>\n\n\n\n \u00c9 de suma import\u00e2ncia que o DS seja priorizado dentro dos fluxos conversacionais, pois \u00e9 a partir dele que n\u00f3s montamos os fluxos conversacionais, trazendo uma melhor visualiza\u00e7\u00e3o de caminhos e desmembramentos dentro do Contato Inteligente. <\/p>\n\n\n\n \u00c9 atrav\u00e9s dele que as Stakeholders conseguem entender o funcionamento do fluxo, alinhando expectativas e funcionalidades antes mesmo do Contato Inteligente ser constru\u00eddo no Blip.<\/p>\n\n\n\n O uso Design System tem alguns objetivos principais, como:<\/p>\n\n\n\n O principal objetivo do Design System \u00e9 ser escal\u00e1vel, evoluir e melhorar constantemente, sempre atendendo \u00e0s necessidades da experi\u00eancia e de todos os envolvidos.<\/p>\n\n\n\n Leia tamb\u00e9m:<\/strong> WhatsApp Business Search – sua empresa no app mais usado pelos brasileiros<\/a><\/p>\n\n\n\n O nosso Chatbot UI kit est\u00e1 no Figma<\/a>, nele, existem componentes e boas pr\u00e1ticas na constru\u00e7\u00e3o de fluxos de Contatos Inteligentes e outros, tais como:<\/p>\n\n\n\n Dentro da nossa documenta\u00e7\u00e3o. utilizamos dois tipos de fluxo, o Fluxo Macro e o Fluxo Micro:<\/p>\n\n\n\n O intuito do Fluxo Macro \u00e9 documentar a arquitetura do Contato Inteligente<\/a>, suas subdivis\u00f5es e desmembramentos.<\/p>\n\n\n\n Exemplo:<\/strong><\/p>\n\n\n\n O Fluxo Micro contempla todos os componentes utilizados no fluxo conversacional, \u00e9 o meio de visualizar as fraseologias utilizadas, os desmembramentos do fluxo e a divis\u00e3o de Bots e Sub-bots.<\/p>\n\n\n\n Os componentes separados por canal, tais como:<\/p>\n\n\n\n Se estiver iniciando agora ou j\u00e1 tiver um bot no ar, mas que falta documenta\u00e7\u00e3o, voc\u00ea pode poupar um bom tempo utilizando a nossa biblioteca.<\/p>\n\n\n\n O Chatbot UI Kit \u00e9 um documento vivo que crescemos e aprimoramos a cada feedback, ent\u00e3o, se tiver alguma d\u00favida ou sugest\u00e3o, manda uma mensagem pra gente: design@blip.ai<\/p>\n\n\n\n Dica:<\/strong> Se n\u00e3o tiver uma conta paga no Figma, voc\u00ea pode copiar os componentes para uma aba de um arquivo e projetar as conversas em outra com a mesma facilidade.<\/p>\n\n\n\nComo o Design System \u00e9 feito?<\/h1>\n\n\n\n
A que o Design System se destina?<\/h1>\n\n\n\n
Chatbot UI Design Kit<\/h1>\n\n\n\n
Fluxo Macro<\/h3>\n\n\n\n
![\"Chatbot](\"https:\/\/www.blip.ai\/blog\/wp-content\/uploads\/2022\/12\/image-611x1024.png\" "\\"-\\"")
<\/figure>\n\n\n\nFluxo Micro<\/h3>\n\n\n\n
Agora \u00e9 a sua vez de experimentar!<\/h1>\n\n\n\n