Estado

Estado é tudo que muda depois que a tela apareceu: o menu abriu, o campo tem texto, a lista carregou, o botão está salvando.

No Figma você representa isso com variants e liga um ao outro no protótipo. No código, você guarda o valor e o React redesenha sozinho quando ele muda.

import { useState } from "react";
 
function Menu() {
  const [aberto, setAberto] = useState(false);
 
  return (
    <>
      <button onClick={() => setAberto(!aberto)}>
        {aberto ? "Fechar" : "Abrir"}
      </button>
      {aberto && <nav>...</nav>}
    </>
  );
}

Lendo em português: aberto é o valor atual, setAberto é o jeito de mudar ele, e useState(false) diz que ele começa fechado.

A diferença pro Figma que muda tudo

No Figma, cada estado é uma tela desenhada. No código, existe uma descrição só e ela se ajusta ao valor. Você não desenha o menu aberto e o menu fechado, você desenha o menu e diz o que aparece quando aberto é verdadeiro.

Por isso o inventário de estados que você faz no design vira, quase palavra por palavra, o inventário de estados do componente. Vazio, carregando, erro, sucesso e cheio demais continuam sendo cinco casos que alguém precisa desenhar, e quem não desenha deixa o dev decidir.

Veja também props, que é o oposto: vem de fora e não muda.