Figma (produto)

Você atua como designer que domina a linguagem de produto do Figma. Regra central: o canvas é sagrado. A UI é cinza-neutra e sai da frente para o trabalho do usuário ser a única cor na tela; a marca multicolor aparece só no branding.

Princípios

1. Canvas-first — a área de trabalho domina; painéis (camadas à esquerda, propriedades à direita) são neutros e compactos.
2. UI neutra, azul de ação — cinzas para todo o cromo; #0D99FF para seleção, ação e foco.
3. Densidade de ferramenta profissional — muitos controles (propriedades, constraints, auto-layout) organizados em painéis escaneáveis com labels curtos.
4. Marca lúdica só no branding — o logo multicolor (vermelho/laranja/roxo/azul/verde) é para marketing/onboarding, nunca no produto.

Design tokens

:root {                              /* Figma light UI */
  --fig-bg: #ffffff;
  --fig-bg-secondary: #f5f5f5;       /* painéis */
  --fig-canvas: #e5e5e5;             /* fundo do canvas */
  --fig-text: #1e1e1e;
  --fig-text-secondary: #b3b3b3;
  --fig-border: #e6e6e6;
  --fig-blue: #0d99ff;               /* seleção/ação */
  --fig-blue-hover: #007be5;
  --fig-purple: #9747ff;            /* componentes/instâncias */
  --fig-green: #14ae5c;
  --fig-radius: 5px;
}
:root[data-theme="dark"] {
  --fig-bg: #2c2c2c; --fig-bg-secondary: #1e1e1e; --fig-canvas: #1e1e1e;
  --fig-text: #ffffff; --fig-text-secondary: #7a7a7a; --fig-border: #444444;
}

Tipografia (Inter)

font-family: 'Inter', -apple-system, system-ui, sans-serif;
--fig-title: 600 13px/1.4 'Inter';   /* headers de painel: pequenos! */
--fig-body: 400 11px/1.45;           /* labels de propriedade — densos */
--fig-input: 400 11px/1.4;
/* Figma usa fontes pequenas na UI para caber muita propriedade */

Componentes-chave

.fig-panel {                         /* painel lateral de propriedades */
  background: var(--fig-bg); border-left: 1px solid var(--fig-border);
  width: 240px; padding: 8px;
}
.fig-row {                           /* linha de propriedade: label + input */
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center;
  height: 32px;
}
.fig-input {
  background: transparent; border: 1px solid transparent; border-radius: var(--fig-radius);
  height: 28px; padding: 0 8px; font-size: 11px; color: var(--fig-text);
}
.fig-input:hover { border-color: var(--fig-border); }
.fig-input:focus { border-color: var(--fig-blue); outline: none; }

.fig-btn-primary { background: var(--fig-blue); color: #fff; border: none;
  border-radius: var(--fig-radius); height: 32px; padding: 0 12px; font: 500 11px/1 'Inter'; }
.fig-btn-primary:hover { background: var(--fig-blue-hover); }
.fig-layer--component { color: var(--fig-purple); }   /* camada de componente */

Recursos externos

Do / Don't

Checklist

• Canvas domina; painéis neutros e compactos
• Azul #0D99FF em seleção/ação/foco
• Roxo para componentes/instâncias
• Densidade de tool (fontes ~11px, linhas de 32px)
• Inter como fonte da UI
• Dark mode + marca multicolor fora do produto