Figma para Penpot: como migrar componentes e tokens com segurança
Um roteiro de migração de Figma para Penpot com inventário, arquivo piloto, importação de componentes e tokens, revisão de layouts e critérios para liberar a mudança.
Autor
Maya Pixel
Designer de produto. Analisa interfaces, sistemas de design e ferramentas de criação com foco em acessibilidade e fluxo de trabalho.
Artigos publicados
View Transitions API no CSS: Como criar animações fluidas entre páginas sem JavaScript
Aprenda a implementar a View Transitions API nativa no CSS para criar transições suaves de navegação MPA sem bibliotecas pesadas.
CSS Container Queries vs Media Queries: Quando Usar Cada Um no Design Responsivo Moderno
Guia completo comparando CSS Container Queries e Media Queries com exemplos práticos para criar componentes web modulares e responsivos.
Como Sincronizar Figma Variables com Design Tokens CSS
Aprenda a criar e exportar variáveis do Figma diretamente como tokens CSS e variáveis utilitárias para o seu projeto.
Como o CSS Subgrid Resolve o Alinhamento de Cards
Domine o CSS Subgrid e elimine hacks de alinhamento vertical em layouts complexos de grids e cards.
CSS Variables vs Figma Variables: Como Sincronizar Design Tokens sem Retrabalho
Entenda a diferença estrutural entre variáveis do CSS e variáveis do Figma, e como implementar um fluxo de sincronização automatizado.
CSS Container Style Queries: Customização Dinâmica baseada em Variáveis CSS
Descubra como os Container Style Queries permitem que você estilize elementos com base em estilos e variáveis declarados no contêiner pai.
Como Criar Micro-interações CSS para Melhorar a UX
Veja o passo a passo de como criar micro-interacoes visuais usando apenas propriedades CSS limpas e sem pesar na performance.
Como Aplicar o Neo-Brutalismo no Web Design Moderno
Descubra como usar as tecnicas do neo-brutalismo para criar sites modernos, impactantes e com forte personalidade de marca.
Como CSS Container Style Queries Permite Criar Micro-Temas Modulares
Guia de implementação de Container Style Queries em CSS para aplicar estilos condicionais baseados em variáveis personalizadas declaradas no container pai.
Como Usar o CSS Subgrid em Layouts Web Complexos
Veja o passo a passo prático de como utilizar o CSS Subgrid para alinhar layouts complexos de forma perfeita na web.
O que e Design Emocional na Experiencia do Usuario (UX)
Descubra como aplicar o Design Emocional para transformar interfaces digitais em experiências memoráveis e estabelecer conexões fortes com os usuários.
Como criar bento grids responsivos com CSS Grid nativo
Como criar bento grids responsivos sem frameworks. Tutorial passo a passo de CSS Grid moderno, layouts de bento box e boas práticas de design em 2026.
O guia de design systems para blogs modernos: consistência sem peso de CSS
Descubra como estruturar um design system eficiente para blogs, combinando tokens de design modernos e Tailwind CSS para obter a máxima performance.
Astro View Transitions: como criar navegacao mais fluida sem perder performance
Veja quando usar Astro View Transitions para criar navegacao mais fluida sem transformar seu site rapido em uma SPA pesada.
Container Queries no CSS moderno: Diga adeus aos limites das Media Queries
Aprenda como usar Container Queries no CSS moderno para criar layouts responsivos baseados no tamanho do container pai e não na largura da viewport.
Design System do Zero ao Figma Avançado: Guia Prático de Tokens e Variáveis
Aprenda a criar um Design System escalável no Figma usando variáveis para cores, espaçamentos e temas (dark mode) compatíveis com código moderno.
Figma Variables: Como criar temas claros e escuros no Design System
Como criar temas claro e escuro no Figma com Variables: tokens primitivos e semânticos, modos, aplicação em frames e como levar os valores ao código.
Bento Grid no Web Design em 2026: Como Implementar com CSS Grid sem Errar na Usabilidade
Bento Grid no Web Design em 2026: Como Implementar com CSS Grid sem
UX para Realidade Mista e Computação Espacial: O Futuro é Agora
Explore os desafios e oportunidades do design de UX para Realidade Mista e Computação Espacial. Descubra como a Apple Vision Pro está moldando o futuro...
UX para Realidade Mista e Computacao Espacial: O Guia Essencial para Designers Brasileiros
UX para Realidade Mista e Computacao Espacial: O Guia Essencial para
WebGPU nos navegadores: Chrome, Firefox e Safari já suportam, com ressalvas
O WebGPU já funciona em Chrome, Edge, Firefox e Safari, mas por plataforma: Linux e Android ainda estão em andamento em parte, segundo o web.dev.
CSS Subgrid: Domine o Recurso Que Vai Transformar Seus Layouts Complexos e Diga Adeus a Hacks!
CSS Subgrid: Domine o Recurso Que Vai Transformar Seus Layouts Complexos
CSS Anchor Positioning: Como Criar Tooltips e Menus Flutuantes Sem Uma Unica Linha de JavaScript
CSS Anchor Positioning: Como Criar Tooltips e Menus Flutuantes Sem Uma