33. Como organizar os componentes
Eu mostro como organizo um projeto grande na Harena usando setorização: crio pastas para o design system (botões, rodapé, cards, tags), uma pasta separada para o menu com todos os seus estados, outra para páginas de aulas com player, sidebar e conteúdos ligados ao CMS, além de pastas para sazonais e formulários. Explico como criar, renomear, mover e agrupar componentes, selecionar vários itens ao mesmo tempo e a importância de manter tudo fechado para facilitar a busca. Também ensino a duplicar, exportar/importar componentes e copiar o URL para compartilhar partes do projeto com parceiros. Ao finalizar o trabalho, sempre verifico e deleto componentes que não estão sendo usados para evitar peso desnecessário no carregamento do site. Essa organização evita dor de cabeça quando o projeto cresce (no meu caso já tive projetos com mais de 200 componentes) e facilita manutenção, atualização e colaboração. A dica final é revisar e limpar componentes ao terminar para manter o projeto leve e eficiente. Termos técnicos explicados: - Assets: arquivos e recursos usados no projeto (imagens, ícones, etc.). - Components (componentes): partes reutilizáveis da interface (botões, cards, menus). - Design system: conjunto padronizado de componentes e regras visuais do produto. - CMS: sistema de gerenciamento de conteúdo que alimenta componentes com dados. - Dropdown (drop down): menu suspenso. - Accordion: componente que expande/contrai conteúdos. - Sidebar: barra lateral de navegação ou conteúdo. - Player: reprodutor de vídeo/audio.
Comentários
Eu mostro como organizo um projeto grande na Harena usando setorização: crio pastas para o design system (botões, rodapé, cards, tags), uma pasta separada para o menu com todos os seus estados, outra para páginas de aulas com player, sidebar e conteúdos ligados ao CMS, além de pastas para sazonais e formulários. Explico como criar, renomear, mover e agrupar componentes, selecionar vários itens ao mesmo tempo e a importância de manter tudo fechado para facilitar a busca. Também ensino a duplicar, exportar/importar componentes e copiar o URL para compartilhar partes do projeto com parceiros. Ao finalizar o trabalho, sempre verifico e deleto componentes que não estão sendo usados para evitar peso desnecessário no carregamento do site. Essa organização evita dor de cabeça quando o projeto cresce (no meu caso já tive projetos com mais de 200 componentes) e facilita manutenção, atualização e colaboração. A dica final é revisar e limpar componentes ao terminar para manter o projeto leve e eficiente. Termos técnicos explicados: - Assets: arquivos e recursos usados no projeto (imagens, ícones, etc.). - Components (componentes): partes reutilizáveis da interface (botões, cards, menus). - Design system: conjunto padronizado de componentes e regras visuais do produto. - CMS: sistema de gerenciamento de conteúdo que alimenta componentes com dados. - Dropdown (drop down): menu suspenso. - Accordion: componente que expande/contrai conteúdos. - Sidebar: barra lateral de navegação ou conteúdo. - Player: reprodutor de vídeo/audio.
Comentários
Eu mostro como organizo um projeto grande na Harena usando setorização: crio pastas para o design system (botões, rodapé, cards, tags), uma pasta separada para o menu com todos os seus estados, outra para páginas de aulas com player, sidebar e conteúdos ligados ao CMS, além de pastas para sazonais e formulários. Explico como criar, renomear, mover e agrupar componentes, selecionar vários itens ao mesmo tempo e a importância de manter tudo fechado para facilitar a busca. Também ensino a duplicar, exportar/importar componentes e copiar o URL para compartilhar partes do projeto com parceiros. Ao finalizar o trabalho, sempre verifico e deleto componentes que não estão sendo usados para evitar peso desnecessário no carregamento do site. Essa organização evita dor de cabeça quando o projeto cresce (no meu caso já tive projetos com mais de 200 componentes) e facilita manutenção, atualização e colaboração. A dica final é revisar e limpar componentes ao terminar para manter o projeto leve e eficiente. Termos técnicos explicados: - Assets: arquivos e recursos usados no projeto (imagens, ícones, etc.). - Components (componentes): partes reutilizáveis da interface (botões, cards, menus). - Design system: conjunto padronizado de componentes e regras visuais do produto. - CMS: sistema de gerenciamento de conteúdo que alimenta componentes com dados. - Dropdown (drop down): menu suspenso. - Accordion: componente que expande/contrai conteúdos. - Sidebar: barra lateral de navegação ou conteúdo. - Player: reprodutor de vídeo/audio.
Comentários
Physis
Destravando Framer
Mão na massa
Physis
Destravando Framer
Mão na massa
Physis
Destravando Framer
Mão na massa
Especialista

Olá 👋,
aluno(a)
Aqui é o Will, em que posso ajudar?
Sugestões & Feedbacks
