Componente

Componente em React é o component do Figma. Você define uma vez e usa em vários lugares, e quando muda a definição, muda em todo lugar.

No código, um componente é uma função que devolve interface:

function Botao({ rotulo, variante }) {
  return (
    <button className={`botao botao--${variante}`}>
      {rotulo}
    </button>
  );
}

E o uso:

<Botao rotulo="Salvar" variante="primario" />
<Botao rotulo="Cancelar" variante="secundario" />

Uma definição, duas instâncias, exatamente como no Figma.

O que muda em relação ao Figma

No Figma, uma instância pode sobrescrever quase tudo do master. No código não existe sobrescrita solta: o que pode variar precisa estar previsto como prop. Isso parece restrição e é a coisa mais saudável do modelo, porque força a decisão de "o que neste componente é configurável" a ser explícita.

É a mesma pergunta que você faz ao criar variants. A diferença é que aqui a resposta fica escrita.

Componente bom é componente burro

O componente ideal recebe tudo que precisa de fora e não sabe nada sobre o resto do sistema. Quanto mais ele depende de contexto, menos reutilizável ele é. Vale pro Figma e vale pro código.