UX/Design Engineer · Design Systems · Front-end

Sou o Rafael. Atuo na interseção entre Design, Produto e Engenharia, organizando e direcionando tecnicamente o front-end para que a intenção de design vire interface de produção em React, sem se perder no caminho.

Barueri, SP Role

Entre a intenção do design e o código em produção existe um sistema: tokens, componentes, estados e critérios. É nesse espaço que eu trabalho.

2016Construindo para a web
ReactFront-end de produção
§ 01O que faço

Três camadas, um sistema.

Cada entrega passa por fundação, construção e direção. A cena ao lado mostra a camada em foco.

01Fundação

A base que dá consistência.

Design Systems & Governança

Componentes, tokens e documentação viva entre Figma e front-end, mantendo especificação e implementação em sincronia.

Arquitetura de Interface

Fluxos, estados e jornadas complexas organizados com clareza, previsibilidade e consistência de ponta a ponta.

02Construção

Do Figma ao código de produção.

UX Engineering & Front-end

Componentização, estados e comportamentos em React e TypeScript, com acessibilidade e qualidade de implementação.

Desenvolvimento assistido por IA

IA acelerando prototipação, implementação, refatoração, testes e documentação, sempre com revisão e validação técnica.

03Direção

Decisões com fundamento.

Direcionamento técnico de demandas

Escopo, dependências, riscos e critérios de implementação refinados junto a Product Owners e desenvolvedores.

Design × Produto × Engenharia

Referência entre as áreas: alinhamento com stakeholders, antecipação de riscos e decisões defendidas com base técnica e de experiência.

§ 02Trabalhos selecionados

O que já saiu do papel.

Projetos sob NDA aparecem como especificação, não como captura de tela.

Confidencial · NDA
01 · 2024 — Atual

Design System — C&M Software

Governança de componentes entre Figma, documentação e implementação. O front-end tratado como ecossistema React, com previsibilidade entre Design, Produto e Engenharia.

Design SystemReactGovernança
Confidencial · NDA
02 · Serviços financeiros

Jornadas em produto financeiro

Organização de fluxos, estados e jornadas complexas, com foco em acessibilidade, recuperação de erro e consistência visual.

UXFluxosAcessibilidade
03 · 2016 — 2024

Branding & Web

Identidade visual, desenvolvimento web, e-commerce e campanhas de aquisição. A base técnica e estratégica por trás da atuação atual em produto.

Portfólio no Behance ↗
§ 03Trajetória
2024 — Atual

C&M Software

UX/Design Engineer

Design Systems, arquitetura de interface e direcionamento técnico das demandas de front-end em produtos financeiros.

2016 — 2024

Web, Branding & Marketing

Desenvolvimento · Identidade

Desenvolvimento web, identidade visual, performance digital, e-commerce e campanhas de aquisição.

2007 — 2010

UNOPAR

Análise e Desenvolvimento de Sistemas

Formação em Tecnologia em Análise e Desenvolvimento de Sistemas.

—Ferramentas
Linguagem
TypeScript · JavaScript
Interface
React · HTML · CSS
Sistema
Figma Dev Mode · Storybook
Build
Node.js
Qualidade
Playwright · Acessibilidade
Versão
Git · GitHub
IA
Copilot · Codex · Claude
Base
Barueri, SP · Remoto
§ 04 · Contato

Vamos conversar.

rafaroyal.nogueira@gmail.com