Design System Inspired by Figma

Category: Design e Creatività Strumento di design collaborativo. Multicolore vivace, giocoso ma professionale.

1. Tema Visivo e Atmosfera

L’interfaccia di Figma è lo strumento di design che ha progettato sé stesso — un capolavoro di sofisticazione tipografica in cui un font variabile personalizzato (figmaSans) modula tra sottilissimo (weight 320) e grassetto (weight 700) con soste a valori intermedi insoliti (330, 340, 450, 480, 540) che la maggior parte dei sistemi tipografici non esplora mai. Questo controllo granulare del peso conferisce a ogni elemento testuale un peso visivo precisamente calibrato, creando gerarchia attraverso micro-differenze piuttosto che con lo strumento grossolano di “normale vs grassetto.”

La pagina presenta una dualità affascinante: il chrome dell’interfaccia è rigorosamente in bianco e nero (letteralmente solo #000000 e #ffffff rilevati come colori), mentre la sezione hero e le vetrine dei prodotti esplodono con vivaci gradienti multicolore — verdi elettrici, gialli brillanti, viola profondi, rosa accesi. Questa separazione significa che il design system stesso è privo di colori, trattando l’output colorato del prodotto come il contenuto protagonista. La pagina marketing di Figma è essenzialmente una galleria con pareti bianche che espone arte colorata.

Ciò che rende Figma distintiva oltre al font variabile è la sua geometria circolare e a pillola. I pulsanti usano un raggio di 50px (pillola) o 50% (cerchio perfetto per i pulsanti icona), creando un aspetto organico simile a una tavolozza di strumenti. L’indicatore di focus con contorno tratteggiato (dashed 2px) è una scelta di design deliberata che richiama le maniglie di selezione nell’editor di Figma stesso — il linguaggio UI del sito web fa riferimento al linguaggio UI del prodotto.

Caratteristiche Principali:

• Font variabile personalizzato (figmaSans) con pesi insoliti: 320, 330, 340, 450, 480, 540, 700
• Chrome dell’interfaccia rigorosamente in bianco e nero — il colore esiste solo nel contenuto del prodotto
• figmaMono per etichette tecniche in maiuscolo con ampia spaziatura tra lettere
• Geometria dei pulsanti a pillola (50px) e circolare (50%)
• Contorni di focus tratteggiati che richiamano le maniglie di selezione dell’editor di Figma
• Gradienti hero multicolore vivaci (verde, giallo, viola, rosa)
• Feature OpenType "kern" abilitata globalmente
• Spaziatura tra lettere negativa ovunque — anche il testo corpo a -0.14px fino a -0.26px

2. Palette Colori e Ruoli

Primari

• Nero puro (#000000): Tutto il testo, tutti i pulsanti solidi, tutti i bordi. L’unico “colore” dell’interfaccia.
• Bianco puro (#ffffff): Tutti gli sfondi, i pulsanti bianchi, il testo su superfici scure. L’altra metà del binario.

Nota: Il sito marketing di Figma usa SOLO questi due colori per il suo livello interfaccia. Tutti i colori vivaci appaiono esclusivamente negli screenshot del prodotto, nei gradienti hero e nel contenuto incorporato.

Superfici e Sfondi

• Bianco puro (#ffffff): Sfondo principale della pagina e superfici delle card.
• Nero vetro (rgba(0, 0, 0, 0.08)): Sottile overlay scuro per i pulsanti circolari secondari e gli effetti vetro.
• Bianco vetro (rgba(255, 255, 255, 0.16)): Overlay vetro smerigliato per i pulsanti su superfici scure/colorate.

Sistema di Gradienti

• Gradiente Hero: Un vivace gradiente multi-stop che usa verde elettrico, giallo brillante, viola profondo e rosa acceso. Questo gradiente è la firma visiva della sezione hero — rappresenta le possibilità creative dello strumento.
• Gradienti delle Sezioni Prodotto: Le singole aree del prodotto (Design, Dev Mode, Prototipazione) possono usare temi di colore distinti nelle loro vetrine.

3. Regole Tipografiche

Famiglia di Font

• Primario: figmaSans, con fallback: figmaSans Fallback, SF Pro Display, system-ui, helvetica
• Monospace / Etichette: figmaMono, con fallback: figmaMono Fallback, SF Mono, menlo

Gerarchia

Principi

• Precisione del font variabile: figmaSans usa pesi che la maggior parte dei sistemi non utilizza mai — 320, 330, 340, 450, 480, 540. Questo crea gerarchia attraverso sottili differenze di peso piuttosto che salti drammatici. La differenza tra 330 e 340 è quasi impercettibile ma strutturalmente significativa.
• Il leggero come base: La maggior parte del testo corpo usa 320–340 (più leggero del tipico 400 “normale”), creando un’esperienza di lettura eterea e ariosa che si adatta all’estetica dello strumento di design.
• Kern ovunque: Ogni elemento testuale abilita la feature OpenType "kern" — la crenatura non è opzionale, è strutturale.
• Tracking negativo per default: Anche il testo corpo usa da -0.1px a -0.26px di spaziatura tra lettere, creando testo universalmente compatto. Il testo display si comprime ulteriormente a -0.96px e -1.72px.
• Mono per la struttura: figmaMono in maiuscolo con spaziatura tra lettere positiva (0.54px–0.6px) crea etichette di segnalazione tecnica.

4. Stili dei Componenti

Pulsanti

Nero Solido (Pillola)

• Sfondo: Nero puro (#000000)
• Testo: Bianco puro (#ffffff)
• Raggio: cerchio (50%) per i pulsanti icona
• Focus: contorno dashed 2px
• Massima enfasi

Pillola Bianca

• Sfondo: Bianco puro (#ffffff)
• Testo: Nero puro (#000000)
• Padding: 8px 18px 10px (verticale asimmetrico)
• Raggio: pillola (50px)
• Focus: contorno dashed 2px
• CTA standard su superfici scure/colorate

Vetro Scuro

• Sfondo: rgba(0, 0, 0, 0.08) (sottile overlay scuro)
• Testo: Nero puro
• Raggio: cerchio (50%)
• Focus: contorno dashed 2px
• Azione secondaria su superfici chiare

Vetro Chiaro

• Sfondo: rgba(255, 255, 255, 0.16) (vetro smerigliato)
• Testo: Bianco puro
• Raggio: cerchio (50%)
• Focus: contorno dashed 2px
• Azione secondaria su superfici scure/colorate

Card e Contenitori

• Sfondo: Bianco puro
• Bordo: nessuno o minimo
• Raggio: 6px (contenitori piccoli), 8px (immagini, card, dialog)
• Ombra: effetti di elevazione da sottile a medio
• Screenshot del prodotto come contenuto delle card

Navigazione

• Navigazione orizzontale pulita su sfondo bianco
• Logo: wordmark di Figma in nero
• Tab prodotto: navigazione a tab a forma di pillola (50px)
• Link: testo nero, decorazione sottolineatura 1px
• CTA: pulsante pillola nero
• Hover: colore del testo tramite variabile CSS

Componenti Distintivi

Barra Tab Prodotto

• Tab a forma di pillola orizzontale (raggio 50px)
• Ogni tab rappresenta un’area del prodotto Figma (Design, Dev Mode, Prototipazione, ecc.)
• Tab attivo evidenziato

Sezione Gradiente Hero

• Sfondo gradiente multicolore vivace a larghezza piena
• Testo bianco sovrapposto con intestazione display da 86px
• Screenshot del prodotto fluttuanti all’interno del gradiente

Indicatori di Focus Tratteggiati

• Tutti gli elementi interattivi usano il contorno dashed 2px al focus
• Richiamano le maniglie di selezione nell’editor di Figma
• Una scelta meta-design che collega il sito web e il prodotto

5. Principi di Layout

Sistema di Spaziatura

• Unità base: 8px
• Scala: 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px

Griglia e Contenitore

• Larghezza massima del contenitore: fino a 1920px
• Hero: gradiente a larghezza piena con contenuto centrato
• Sezioni prodotto: vetrine alternate
• Footer: sezione scura a larghezza piena
• Responsivo da 559px a 1920px

Filosofia dello Spazio Bianco

• Ritmo da galleria: La spaziatura generosa permette a ogni sezione prodotto di respirare come una propria esibizione.
• Le sezioni colorate come respiro visivo: Il gradiente hero e le vetrine dei prodotti forniscono sollievo cromatico tra le sezioni di interfaccia monocromatiche.

Scala dei Raggi dei Bordi

• Minimale (2px): Piccoli elementi link
• Sottile (6px): Contenitori piccoli, divisori
• Comodo (8px): Card, immagini, dialog
• Pillola (50px): Pulsanti tab, CTA
• Cerchio (50%): Pulsanti icona, elementi circolari

6. Profondità ed Elevazione

Filosofia delle Ombre: Figma usa le ombre con parsimonia. I principali meccanismi di profondità sono il contrasto di sfondo (contenuto bianco su sezioni colorate/scure) e la dimensionalità intrinseca degli screenshot del prodotto stessi.

7. Da Fare e Da Evitare

Da Fare

• Usare figmaSans con pesi variabili precisi (320–540) — il controllo granulare del peso È il design
• Mantenere l’interfaccia rigorosamente in bianco e nero — il colore proviene solo dal contenuto del prodotto
• Usare la geometria a pillola (50px) e circolare (50%) per tutti gli elementi interattivi
• Applicare contorni di focus dashed 2px — il pattern di accessibilità caratteristico
• Abilitare la feature "kern" su tutto il testo
• Usare figmaMono in maiuscolo con spaziatura tra lettere positiva per le etichette
• Applicare spaziatura tra lettere negativa ovunque (da -0.1px a -1.72px)

Da Evitare

• Non aggiungere colori all’interfaccia — la palette monocromatica è assoluta
• Non usare pesi di font standard (400, 500, 600, 700) — usare i valori unici del font variabile (320, 330, 340, 450, 480, 540)
• Non usare angoli netti sui pulsanti — solo geometria a pillola e circolare
• Non usare contorni di focus solidi — il tratteggiato è la firma
• Non aumentare il peso del font corpo sopra 450 — l’estetica a peso leggero è fondamentale
• Non usare spaziatura tra lettere positiva sul testo corpo — è sempre negativa

8. Comportamento Responsivo

Breakpoint

Strategia di Collasso

• Testo hero: 86px → 64px → 48px
• Tab prodotto: scroll orizzontale su mobile
• Sezioni feature: colonna singola impilata
• Footer: multi-colonna → impilato

9. Guida ai Prompt per Agenti

Riferimento Rapido Colori

• Tutto: “Nero puro (#000000)” e “Bianco puro (#ffffff)”
• Vetro Scuro: “rgba(0, 0, 0, 0.08)”
• Vetro Chiaro: “rgba(255, 255, 255, 0.16)“

Esempi di Prompt per Componenti

• “Crea un hero su un gradiente multicolore vivace (verde, giallo, viola, rosa). Titolo a 86px figmaSans peso 400, line-height 1.0, letter-spacing -1.72px. Testo bianco. Pulsante CTA pillola bianco (raggio 50px, padding 8px 18px).”
• “Progetta una barra tab prodotto con pulsanti a forma di pillola (raggio 50px). Attivo: sfondo nero, testo bianco. Inattivo: trasparente, testo nero. figmaSans a 20px peso 480.”
• “Costruisci un’etichetta sezione: figmaMono 18px, maiuscolo, letter-spacing 0.54px, testo nero. Kern abilitato.”
• “Crea testo corpo a 20px figmaSans peso 330, line-height 1.40, letter-spacing -0.14px. Nero puro su bianco.”

Guida all’Iterazione

1. Usare i valori di peso del font variabile con precisione: 320, 330, 340, 450, 480, 540, 700
2. L’interfaccia è sempre nero + bianco — non aggiungere mai colori al chrome
3. Contorni di focus tratteggiati, non solidi
4. La spaziatura tra lettere è sempre negativa sul corpo, sempre positiva sulle etichette mono
5. Pillola (50px) per pulsanti/tab, cerchio (50%) per i pulsanti icona