Design System e Design Language #1506
Replies: 16 comments
-
|
Aqui "na firma" estamos na fase 1 de desenvolvimento da implementação do design system, então criamos uma biblioteca CSS global que pode ser utilizada por todos os componentes, antes de criar componentes especializados que implementam as especificações, sendo que aqui trabalhamos fortemente com Angular na implementação deste design system. Para esta primeira fase rodamos as seguintes definições: Pré-processador
Arquitetura Plataformas de desenvolvimento Nos baseamos um tanto nos projetos da Liferay: https://liferay.design/lexicon/ e https://clayui.com/ |
Beta Was this translation helpful? Give feedback.
-
|
@evertonthepaula Cara sensacional, valew pelas dicas, e como vcs documentam ele? fizeram alguma ferramenta em Angular para manter a documentação sempre atualizada ou usaram de terceiro? Como é feita a integração com o Design? |
Beta Was this translation helpful? Give feedback.
-
|
Blz @deppbrazil ? Cara, vou dar meus 5 centavos aqui porque realmente no Brasil ainda tem muito a amadurecer as discussões de Design System. E é bom achar esse tipo de discussão por aqui ❤️ Só um adendo que é minha visão profissional e não necessariamente reflete a visão ou estratégias da empresa que trampo e tal 😄e nem de longe devo estar pontualmente certo Design
As perguntas que vocês têm que fazer é: Qual o conhecimento do teu time de Front? Quais as máquinas que a empresa disponibiliza à eles? Mac? Linux? Windows? No caso o Sketch só para Mac, aí dependendo já te blocka bastante. Se todo o time de Front não possui Mac, eu vejo dois caminhos que funcionam bem:
Mas eu ainda assim tentaria também disponibilizar no Zeplin. Desenvolvimento Qualquer um dos 4 maiores frameworks JS vai entregar o que você precisa no fim. A diferença é o como e os desafios que cada uma delas traz. Arquitetura CSS
Misturar por misturar, não. Não é bom. Se você tem 2 padrões, você não tem padrão nenhum. O que é perfeitamente possível é você criar o próprio padrão de vocês usando como base esses padrões ou compor igual o @evertonthepaula sugeriu. O importante é o Design System conter além da biblioteca de UI, manual da marca etc, ter também uma boa documentação de Coding Style. Pré-processador Também depende do know-how da equipe. Se não tiver nenhum sendo usado, mesmo esquema dos frameworks JS. Faz uma PoC e escolham o que mais faz sentido. Aqui um Documentação Você pode criar um site estático que consome as várias documentações do seu design system, mas criar uma solução do 0, aí não compensa. O Zeroheight permite você importar seus Stories do Storybook e com isso compor a documentação. Aqui é importante separar o que é cada documentação e sua importância. O Zeroheight você vai ter as definições de design para a criação dos componentes, vai ajudar os Fronts também mas é mais voltado para o seu time de Design. Já o Storybook é sua biblioteca de componentes, é nela que os Front's vão se basear para entender como usar os Componentes criados. Tem um plugin do Storybook chamado Integração (gerenciador de pacotes) Eu escolheria 1 só. Por padrão eu opto por npm. Repositório Você comentou no final: > Sei que no final das conta ele vai gerar um CSS, mas... Importante salientar aqui que na verdade, não. A sua biblioteca de componentes React (se for o caso) vai gerar sim o seu CSS mas o grande fator dela é gerar o conjunto todo de estrutura (HTML) + interatividade (JS) + estilo (CSS). Nesse ponto eu vou pelo pensamento do @evertonthepaula criar um package npm do seu design system onde tenha apenas o CSS, é uma biblioteca de estilos CSS e nada mais, com isso você pode depois criar uma biblioteca de componentes em Vue, Ember, React e Angular e usar esse mesmo estilo CSS que todos seus componentes vão ter o mesmo estilo (estrutura e interatividade podem ser diferentes de acordo com o framework, mas será transparente para o time e os usuários). Se depois construirmos um website em React vai ser possível usar esse Design System da melhor forma? O mesmo vai atender um app feito em React-native? O mesmo vai atender uma aplicação feita em HTML, CSS e Javascript apenas? Essa seria a única maneira de com uma única biblioteca de componentes você usar ela em projetos React, Ember, Vue, Angular e projetos que tenham só jQuery ou só JS puro. Não sei se você já conhece, mas recomendo muito o livro de Atomic Design do Brad Frost: http://atomicdesign.bradfrost.com E particularmente o capítulo 5: http://atomicdesign.bradfrost.com/chapter-5/ |
Beta Was this translation helpful? Give feedback.
-
|
Já que vai estar usando framework JS, recomendo usar algo como PostCSS pro CSS, isso pq vc vai precisar mudar a forma de pensar para uma arquitetura de componentes. Além de que PostCSS é baseado em JS, então da pra fazer muita coisa maneira em termos de integração do CSS com o JS. Indo por esse caminho pode optar por CSS Modules, o que é de certo modo uma forma automatizada do BEM. Sobre npm ou yarn, não importa muito, mas yarn é melhor. A propósito, pra plataforma Storybook é muito bom, sério, bom o suficiente, vai te atender e se for criativo pode ser muito além de um mero showcase the componentes, pode de fato ser a plataforma completa do Design System. Sobre suas ultimas questões, tudo depende de como voce abstrai o código. Se conseguir separar camadas de lógica de negócio da camada de apresentação, ai nesse caso as possibilidades são muito maiores! |
Beta Was this translation helpful? Give feedback.
-
@danilovaz Cara muito bom seu ponto de vista, já me abriu novos horizontes,DesignBom sobre o Sketch os designers aqui já usam então não teríamos problemas neste ponto, também temos o Figma para alguns projetos, usamos o Zeplin para Handoff quando o projeto é feito no Sketch, sobre setup aqui fica a critério por time e preferência do Dev ou Designer, não teria problemas em limitação de SO tb, DesenvolvimentoSobre o framework ou lib de UI, acho que o React se encaixa perfeitamente pelo fato de já ser uma stack da empresa e por enquanto tem apenas eu de Frontend e um Designer que está envolvido neste início de projeto do Design System, mas sempre troco umas figurinhas com os times que já usam Reactjs e o pessoal de mobile que estão com React-native com principal stack, Arquitetura CSSSim, imaginei que o melhor caminho era ter um próprio padrão se baseado com alguns padrões já existentes no mercado, mas com propósitos, então pensei no BEM pois acho objetivo como ele organiza pais e filhos, e o SMACSS gosto da estrutura de pastas dele, mas ambos ainda não me aprofundei muito, Pré-processadorDefinimos o SASS pois já usamos em outros projetos e é bem completão, DocumentaçãoCurti bastante a ideia de usar o Zeroheight junto com o Storybook, vamos fazer alguns testes aqui, IntegraçãoAmo npm e Yarn, mas atualmente estou achando o Yarn mais rápido, Quanto a criação do package do Design System onde tenha apenas o CSS foi o que imaginei mesmo, e depois criamos a nossa lib de componentes em Reactjs e React-native (onde eu acho conseguiremos aproveitar bastante estrutura dos componentes de Reactjs para React-native, me corrijam por favor se isso não for possível) que são as stacks principais aqui, Se depois construirmos um website em React vai ser possível usar esse Design System da melhor forma?Não tenho experiência avançada ainda com Reactjs, mas vejo o pessoal falando muito bem do Styled-components, desta forma não conseguiríamos usar o Styled-components certo? E se possível seria redundância usar o Design System junto com o Styled-component? me perdoem se a dúvida for grotesca kkkk O mesmo vai atender um app feito em React-native?No caso seria o Design System atender Reactjs e React-native se teria alguma particularidade, e não fazer componentes em Reactjs que atenda React-native, O mesmo vai atender uma aplicação feita em HTML, CSS e Javascript apenas?Aqui também no caso seria o Design System e não a lib de componentes, mas fiquei curioso em relação a essa lib agnóstica que vc menciona, tem algum case de exemplo?
:) |
Beta Was this translation helpful? Give feedback.
-
@bernardodiasc valew pelas ideias mano, vamos testar aqui,Sobre PostCSS e CSS Modules, vai nos atender se caso fizermos uma landing page simples usando apenas HTML, CSS e Javascript e não Reactjs? Ou vai ser muito bom apenas quando falamos de componentes? |
Beta Was this translation helpful? Give feedback.
-
|
Arquitetura CSS Só um ponto aqui, se você vai usar o React mesmo. Dá para pensar sim em usar o Styled Component, ele é na pegada CSS in JS Aí é uma outra forma de se escrever e manter seu CSS. Fica muito mais componentizavel sim. React Native & React Eu não cheguei a ter que implementar e usar um componente de React no React Native. Mas acredito que não seja só usar o componente, porque existem algumas particularidades do Native. Mas aí são divagações mesmo, infelizmente.
Não existe dúvida grotesca, mano 👊 Cara, o Design System ele é um organismo vivo que serve para a empresa inteira. Você vai desde posicionamento da marca, voz da marca, personas, tipografia, cores, componentes UI, atendimento etc etc etc. O Styled Component é uma lib para você estilizar seus componentes seguindo os princípios de CSS in JS. Considere o Styled Component como uma possível ferramenta para ser usada na lib de componentes UI do seu Design System.
O Design System sim, pode atender seu app React, React Native, Angular, NativeSript, Vue, Vanilla JS, etc. Ele é um guia para todas as plataformas. Agora, a sua lib de componentes UI do React não necessariamente vai atender ao React Native. Como disse, é só um "achismo", não cheguei a implementar nada do tipo. Mas creio que em alguns casos não vai dar simplesmente só para importar e usar.
Sim, sim. O Design System atende sim. Lembrando sempre da diferença entre o Design System (que é o todo) com o a biblioteca de componentes UI (que é uma parte do DS). Se eu não me engano, o Design System da SalesForce é Agnóstico: https://lightningdesignsystem.com/ dá uma fuçada no repositório deles, bem bacana. Para entender melhor um DS agnóstico: https://hackernoon.com/design-systems-should-be-javascript-framework-agnostic-2a0c47129ec8 Uma forma de implementar sua lib de UI agnóstica é usando Svelte ou Stencil Mas assim, é tudo muito novo ainda. Uma lib de UI agnóstica para uma empresa do tamanho da SalesForce é pechincha. Mas não acho que seja barato e nem rápido, apesar de ser o ponto máximo de um DS. E por fim eu gostaria de compartilhar esse link, pode te ajudar bastante com alguns recursos e até insights de outros DS no mercado: https://designsystemsrepo.com/ |
Beta Was this translation helpful? Give feedback.
-
A questão vai ser respondida pelos recursos que voce voce tem disponível para preparar a plataforma. PostCSS e CSS Modules não são dependentes de React. Voce precisa de algo como Webpack, ou seja, a resposta da sua pergunta é relacionada ao uso de "module bundler" ou não. |
Beta Was this translation helpful? Give feedback.
-
|
@bernardodiasc Ah saquei mano... boa vou dar uma estudada sobre o assunto, valew pela dica! ;) |
Beta Was this translation helpful? Give feedback.
-
|
@danilovaz Mano sensacional sua contribuição, vou me aprofundar nesses assuntos que vc coloca aqui em cima, logo logo mando novidades aqui do nosso processo evolutivo de DS! :) |
Beta Was this translation helpful? Give feedback.
-
|
Adicionando, tem um projeto da Amazon que auxilia em algumas coisas em relação a centralizar e compartilhar definições de estilo, principalmente falando de Sketch - web - RN, não componentes. E se for focar em NativeUm cara que não recomendo muito, mas cito é o react-native-web, só pra dar uma olhada se caso fazer interfaces reutilizáveis tanto no react web quanto native for realmente um problema. Não sei como anda esse projeto, mas no começo era bem criticado. E seria bom fazer umas POCs com a stack em todos os cenários, talvez seja meio chato pra configurar preprocessadores. e uma recomendação extraPensar em uma estrutura voltada a monorepo. É bem irrelevante e desnecessária essa minha recomendação, mas me ajudou bastante deixar um pacote só pros componentes do design system. |
Beta Was this translation helpful? Give feedback.
-
|
@ninetails Legal suas considerações, desculpe a demora mas estávamos focado em outras demandas aqui, e voltamos neste projeto agora, eu vi esse react-native-web porém não conseguir entender muito o propósito dele, Quanto ao recomendação da estrutura de monorepo não entendi muito o que vc quiz dizer... |
Beta Was this translation helpful? Give feedback.
-
|
@deppbrazil sem problemas. Sobre o react-native-web, foi uma lib que há uns anos teve um boom de gente usando e fazendo palestra sobre: Twitter e Uber. Não cheguei a testar ele, mas estes players gigantes usavam pra fazer uma UI e exportar tanto pra web quanto pra Native, pelo que eu tinha entendido. Já a idéia do monorepo eu citei para facilitar o desenvolvimento. Foi algo que facilitou bastante quando ajudei a desenvolver alguns Design Systems. Para exemplo de estrutura (mesmo não sendo para UI), acho que o maior caso é o do Babel. E dizer que foi algo que facilitou pois modularizou a UI. Daria para criar um pacote para todos os componentes quanto um pacote para cada componente individual, e cada pacote teria sua versão, testes etc. Não acho que para cada componente individual seja uma boa, mas um grande exemplo é o bit src. E dentro da sua aplicação vc instala e usa o componente, ex: import Component from '@my-company/react-components/Component'E na raiz (ou só no pacote desta lib de UI) vc deixa um Storybook para pegar todos os componentes e documentar cada um. Usar monorepo facilitou pois todos os componentes estavam "pertos" (não em um outro repositório). Já tive experiências passadas com multi-repo que para atualizar um Botão era necessário fazer commit, gerar pacote, publicar para daí poder utilizar no pacote do app. Claro que também tem revés. Usar diferentes versões de um mesmo componente não é possível, e para utilizar diferentes versões em projetos diferentes seria necessário publicar o pacote de componentes para um registro (npm por exemplo). |
Beta Was this translation helpful? Give feedback.
-
|
@ninetails Boaaaaaa mano agora deu pra entender aqui o conceito, caramba abriu minha mente, Uma dúvida como vc já participou da construção de vários Design System como vcs trataram a questão de pacotes para Web e Mobile? fizeram pacotes diferentes no npm e consequentemente acabou duplicando a lib de componente sendo uma para ReactJS e outra para Native? (no caso da Stack default do projeto ser React) Ou conseguiram fazer algo agnóstico sendo o mesmo pacote/lib para Web e Mobile? Claro que depende tb da concepção de design visto que o Native não aceita tudo do CSS como objeto pois vai transpilar aquilo para nativo. Mano tem alguma forma de trocarmos uma ideia e tirar algumas dúvidas pontuais? Vc está na em alguma comunidade no Slack ou Discord? ai te chamo no chat lá.... Valew :) |
Beta Was this translation helpful? Give feedback.
-
|
Em relação a ReactJS vs React Native acho que vale dar uma perguntada pro pessoal da thread #1549. Como eu disse e ainda vejo, galera ainda prefere separar o que vai pra web do que vai pra mobile. Entendo que deve ser chato lidar com o react-native-web mas apenas quis deixar uma alternativa. Além do que separar também ajudaria a especializar a UI para cada ambiente, por exemplo: talvez não faria muito sentido ter uma cara mais web para um aplicativo nativo. Mesmo creio que devam ter diferenciações de UI para uma release pro Android em relação a outra para iOS e por isso acho que a galera prefere separar. Porém ainda tem coisa que pode ser reaproveitado tirando Componentes, como lógicas, gerenciamento de estado e regras de negócio. Vi que tu me adicionou no twitter, posso mandar meus contatos por lá. Só não sei se consigo ser de muita ajuda em relação a essa parada de native pois não tive muitas experiências. |
Beta Was this translation helpful? Give feedback.
-
|
@ninetails Boaaaaa... Eu dei uma scrolada nessa thread e a galera fala bem isso mesmo sobre o compartilhamento entre esses 2 universos, não comentei pois tb não tenho mta vivência com Mobile tb, Isso eu te add no tt, vou te mandar uma msg lá, e seus palpites estão me ajudando muitoooooo.... :) |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Design System e Design Language
Estou fazendo uma pesquisa aqui sobre Design System, construção, documentação, integração com o Design, linguagem para construção, whatever...
Aqui na empresa estamos fazendo um Design System próprio para atender todas as verticais na interface de produtos e apps, e como vejo que é algo novo no mercado estou buscando fontes e cases de quem já atuou em algum projeto assim ou que não tenha atuado mas manja dos paranauê...
Estamos usando e pensando em usar:
Design e Desenvolvimento
o Design já está sendo construído nele pelos Designersestamos pensando em usarArquitetura CSS
um pouquinho desseum tiquinho dessePré-processadores
Documentação
estamos estudando qual melhor opçãoestamos estudando qual melhor opçãoIntegração (para utilização nos projetos baixando via command line)
Repositório
Dúvidas
Que os jogos comecem... rsrs 🐰
Beta Was this translation helpful? Give feedback.
All reactions