Come Creare un Colore come Stile<\/strong><\/p>\n\n\n\n \u2022 Vai al pannello laterale di destra e trova un\u2019impostazione che supporta i colori, ad esempio Fill<\/strong> (riempimento).<\/p>\n\n\n\n \u2022 Clicca sull\u2019icona con i quattro puntini<\/strong> accanto al colore attuale per accedere alle librerie.<\/p>\n\n\n\n \u2022 Nel pannello Library<\/strong>, clicca sul pulsante +<\/strong> per aggiungere un nuovo stile.<\/p>\n\n\n\n \u2022 Dai un nome al colore e, se desideri, una descrizione che spieghi come e dove utilizzarlo.<\/p>\n\n\n\n \u2022 Conferma cliccando su Crea Stile<\/strong>.<\/p>\n\n\n\n \u26a0\ufe0f Nota:<\/strong> Non utilizzare le variabili.<\/p>\n\n\n\n Una volta creato, il colore del tuo elemento cambier\u00e0 da \u201ccustom\u201d al nome dello stile appena definito. Per scollegare<\/strong> un elemento dal suo stile basta cliccare sull\u2019icona della catena spezzata<\/strong> accanto al colore.<\/p>\n\n\n\n Attenzione:<\/strong> Scollegare lo stile da un elemento non comporta la sua eliminazione dalla libreria.<\/p>\n\n\n\n Visualizzare e Gestire gli Stili<\/strong><\/p>\n\n\n\n Se deselezionamo tutto cliccando su uno spazio vuoto nella tua area di lavoro. Nel pannello laterale destro apparir\u00e0 l\u2019elenco di tutti gli stili creati (colori, testi, effetti, ecc.). Puoi rinominare, modificare o eliminare gli stili direttamente da questo elenco.<\/p>\n\n\n\n Avanzato:<\/strong> Puoi creare delle cartelle nei stili, basta inserire il nome della cartella<\/strong>, seguito da uno slash ( \/ )<\/strong> e poi il nome dello stile.<\/p>\n\n\n\n Impostare una schermata di style guide come quella seguente. Font per le indicazioni IBM Plex Mono<\/strong>.<\/p>\n\n\n\n \u26a0\ufe0f Attenzione:<\/strong> Nome file \u201cLezione 7\u201d.<\/p>\n\n\n\n I componenti<\/strong> in Figma sono elementi riutilizzabili che permettono di creare interfacce pi\u00f9 coerenti ed efficienti. Sono particolarmente utili per elementi ripetuti come pulsanti, card, icone o sezioni di un\u2019interfaccia.<\/p>\n\n\n\n Quando crei un componente, puoi utilizzarlo in pi\u00f9 parti del progetto e, se lo aggiorni, tutte le sue istanze si aggiorneranno automaticamente.<\/p>\n\n\n\n Creare un Componente<\/strong><\/p>\n\n\n\n \u2022 Crea un pulsante, un\u2019icona o un qualsiasi elemento che vuoi riutilizzare.<\/p>\n\n\n\n \u2022 Seleziona l\u2019elemento e premi CMD + ALT + K<\/strong> (Mac) o CTRL + ALT + K<\/strong> (Windows), oppure clicca con il tasto destro e scegli Create Component<\/strong>.<\/p>\n\n\n\n \u2022 Noterai un\u2019icona \ud83d\udfe3 viola<\/strong> accanto al livello nel pannello Layers.<\/p>\n\n\n\n Utilizzare un Componente<\/strong><\/p>\n\n\n\n Dopo aver creato un componente, puoi utilizzarlo in diverse parti del progetto:<\/p>\n\n\n\n \u2022 Trascinandolo dalla libreria Assets<\/strong>.<\/p>\n\n\n\n \u2022 Copiando e incollando l\u2019elemento<\/strong> direttamente nell\u2019area di lavoro.<\/p>\n\n\n\n Se aggiorni il componente Master<\/strong>, tutte le sue istanze si aggiorneranno automaticamente. Puoi personalizzare alcune propriet\u00e0 delle istanze senza perdere il legame con il master (ad esempio, cambiare testo o colore di un pulsante).<\/p>\n\n\n\n Se vuoi scollegare<\/strong> un\u2019istanza dal componente principale, seleziona l\u2019istanza e clicca su Detach Instance<\/strong> dal menu di destra.<\/p>\n\n\n\n Le varianti<\/strong> permettono di creare pi\u00f9 versioni di uno stesso componente (es. pulsante attivo\/disattivo, grande\/piccolo, con\/senza icona) mantenendo tutto organizzato all\u2019interno di un unico elemento.<\/p>\n\n\n\n Creare Varianti di un Componente<\/strong><\/p>\n\n\n\n Per aggiungere una variante seleziona il Componente e clicca sul + in alto a destra.<\/p>\n\n\n\n Imposta le Propriet\u00e0 delle Varianti<\/strong><\/p>\n\n\n\n \u2022 Nella sezione \u201cVariants\u201d, assegna un nome alle diverse varianti.<\/p>\n\n\n\n \u2022 Aggiungi propriet\u00e0 personalizzate per modificare colore, dimensioni o stato.<\/p>\n\n\n\n Figma creer\u00e0 automaticamente un single component<\/strong> con pi\u00f9 varianti accessibili dal pannello delle propriet\u00e0.<\/p>\n\n\n\n Quando utilizzi un componente con varianti:<\/p>\n\n\n\n \u2022 Seleziona l\u2019istanza nell\u2019area di lavoro.<\/p>\n\n\n\n \u2022 Nel pannello laterale Properties<\/strong>, troverai un menu a tendina per selezionare la variante desiderata.<\/p>\n\n\n\n Le varianti permettono di gestire le modifiche in modo pi\u00f9 intuitivo e organizzato, senza dover creare e gestire molteplici componenti separati.<\/p>\n\n\n\n Un\u2019organizzazione efficiente del progetto in Figma aiuta a mantenere ordine, migliorare la collaborazione e velocizzare il flusso di lavoro. Una buona pratica \u00e8 suddividere il progetto in pi\u00f9 pagine<\/strong> per separare design, componenti e altre risorse.<\/p>\n\n\n\n Le pagine si trovano nel pannello laterale sinistro<\/strong>, accanto ai menu Layers<\/strong> e Assets<\/strong>.<\/p>\n\n\n\n Struttura consigliata<\/strong><\/p>\n\n\n\n Disegnare all\u2019interno della pagina Design e una volta individuato un componente spostarlo nella pagina componenti. Nella pagina componenti creare tutti gli stili e componenti necessari.<\/p>\n\n\n\n Nella pagina Thumbnail creare la copertina che sar\u00e0 visibile nella dashboard dei progetti. Dimensioni copertina 1600×960 px<\/strong>. Per impostare il frame come copertina click con il destro sul frame e \u201cSet as thumbnail\u201d.<\/p>\n\n\n\n Proseguendo sul file precedente replicare la seguente schermata.<\/p>\n\n\n\n Dividere cos\u00ec le componenti (i primi due componenti li trovi nella cartella condivisa materiali)<\/p>\n\n\n\n Librerie in Figma Le librerie di Figma sono uno strumento potente che permette di creare e salvare stili (come colori, caratteri e altri effetti) per poterli riutilizzare in modo semplice e coerente nei progetti. Una delle principali funzionalit\u00e0 \u00e8 che, modificando uno stile salvato, tutti gli elementi che utilizzano quello stile vengono aggiornati automaticamente. Come […]<\/p>\n","protected":false},"author":1,"featured_media":43,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29,24,25,27],"tags":[38],"class_list":["post-600","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-e-modellazione-3d","category-enac","category-jac","category-operatore-grafico","tag-figma"],"_links":{"self":[{"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/posts\/600","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/comments?post=600"}],"version-history":[{"count":11,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/posts\/600\/revisions"}],"predecessor-version":[{"id":1511,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/posts\/600\/revisions\/1511"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/media\/43"}],"wp:attachment":[{"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/media?parent=600"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/categories?post=600"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/tags?post=600"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Esercitazione 1<\/h2>\n\n\n\n
![\"\"](\"https:\/\/www.freemindstudio.it\/istruzione\/wp-content\/uploads\/sites\/3\/2022\/10\/Style-Guide-1040x2026.png\")
<\/figure>\n\n\n\nComponenti<\/h2>\n\n\n\n
Varianti dei componenti<\/h2>\n\n\n\n
Organizzare il lavoro<\/h2>\n\n\n\n
\n
Esercitazione 2<\/h2>\n\n\n\n
![\"\"](\"https:\/\/www.freemindstudio.it\/istruzione\/wp-content\/uploads\/sites\/3\/2022\/10\/Home.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/www.freemindstudio.it\/istruzione\/wp-content\/uploads\/sites\/3\/2022\/10\/Components-1040x1173.png\")
<\/figure>\n","protected":false},"excerpt":{"rendered":"