Creare e riutilizzare un sistema di design

Raccogli i riferimenti che definiscono il tuo brand

Apri Design systems nella barra laterale Home, quindi scegli Create. Prima della generazione, aggiungi il materiale di origine: un link a un sito web o a GitHub, un riferimento del brand, dei file oppure una descrizione scritta. La schermata di creazione accetta file fino a 12 MB ciascuno. Usa riferimenti che sei autorizzato a fornire al servizio selezionato.

Incolla DESIGN.md se disponi già di regole di design scritte. Puoi anche copiare un sistema di design esistente come punto di partenza. Specifica cosa deve rimanere invariato, ad esempio i colori del brand, la tipografia, la spaziatura del logo o il comportamento dei componenti.

Usa il codice o Figma come riferimento

Espandi Advanced per aggiungere un repository GitHub, codice locale, un file .fig o l’URL di un file Figma. Seleziona la fonte pertinente anziché caricare la cartella di un progetto non correlato. Conserva insieme le risorse e i file che descrivono i componenti.

Un URL Figma è un riferimento di origine, non una garanzia che ogni file privato possa essere letto. Se l’accesso non riesce, fornisci una copia locale .fig autorizzata o screenshot chiari. L’importazione di un riferimento Figma non abilita l’esportazione diretta in un file Figma nativo.

Genera, controlla e perfeziona il sistema

1. Controlla i riferimenti forniti e scegli Generate. Attendi il completamento dell’estrazione o della generazione prima di considerare pronto il sistema.
2. Esamina le anteprime generate e DESIGN.md. Confronta colori, dimensioni dei caratteri, spaziature e componenti con i riferimenti; correggi eventuali omissioni o regole in conflitto.
3. Salva il DESIGN.md modificato. Se chiedi all’agente di rivedere il sistema, controlla nuovamente il risultato prima di pubblicarlo.

Scrivi requisiti che un altro progetto possa seguire: dove usare ogni colore, quale font impiegare per titoli e corpo del testo e come devono comportarsi pulsanti, moduli e stati. Una raccolta di screenshot accattivanti, da sola, non definisce queste regole.

Pubblica il sistema e selezionalo per un progetto

1. Dopo aver controllato il sistema, usa il relativo controllo Published. Una bozza rimane disponibile per la revisione; pubblicala prima di aspettarti che altri progetti possano usarla.
2. Torna a Home o al selettore del sistema di design del progetto. Seleziona il sistema desiderato e confermane l’anteprima.
3. Descrivi il lavoro da creare e le regole importanti. Confronta l’artefatto generato con il sistema, quindi apporta revisioni mirate per correggere eventuali differenze.

Salvare le regole, pubblicare un sistema e applicarlo a un progetto sono azioni distinte. La modifica di un sistema di design non dimostra che gli output esistenti siano stati rigenerati. Riapri il progetto pertinente e controllane il risultato.

Per un flusso di lavoro dedicato alle interfacce, continua con i prototipi. Per piccole modifiche a un artefatto HTML esistente, consulta la modifica nell’area di lavoro.

Se un sistema non è disponibile o è di sola lettura

Controlla l’area di lavoro attiva e verifica se il sistema è pubblicato. Le risorse del team e quelle personali possono essere diverse. La copia sincronizzata di un collega potrebbe essere di sola lettura; per modificarne la fonte o lo stato di pubblicazione, usa l’account del proprietario o un account con le autorizzazioni necessarie per l’area di lavoro.

Se l’estrazione non riesce, verifica l’URL di origine, le dimensioni del file e l’accesso. Rimuovi una fonte inaccessibile o sostituiscila con un riferimento locale consentito, quindi riprova. Se il salvataggio non riesce, conserva una copia delle regole modificate prima di lasciare la schermata. La pubblicazione in OpenDesign non invia le modifiche a GitHub.