{"id":391,"date":"2022-09-20T11:11:12","date_gmt":"2022-09-20T09:11:12","guid":{"rendered":"https:\/\/www.freemindstudio.it\/istruzione\/?p=391"},"modified":"2025-02-27T22:23:23","modified_gmt":"2025-02-27T21:23:23","slug":"figma-gerarchie-e-strutture","status":"publish","type":"post","link":"https:\/\/www.freemindstudio.it\/istruzione\/figma-gerarchie-e-strutture\/","title":{"rendered":"Gerarchie e Strutture"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Nuovi livelli e gruppi<\/h2>\n\n\n\n<p><strong>Creare un nuovo livello<\/strong><\/p>\n\n\n\n<p>Per creare un nuovo livello, basta disegnare un elemento qualsiasi all\u2019interno di un <strong>Frame<\/strong>. Noterete che nella <strong>barra dei Layers<\/strong> apparir\u00e0 il nuovo elemento e poich\u00e9 \u00e8 stato creato all\u2019interno del Frame, il livello verr\u00e0 posizionato automaticamente al suo interno.<\/p>\n\n\n\n<p>Se spostiamo l\u2019elemento <strong>fuori dal Frame<\/strong> utilizzando lo strumento <strong>Move<\/strong>, anche nella barra dei Layers il rettangolo si sposter\u00e0 all\u2019esterno del Frame. Riposizioniamolo nuovamente all\u2019interno.<\/p>\n\n\n\n<p><strong>Gestire i livelli<\/strong><\/p>\n\n\n\n<p>Disegnando altri elementi, noteremo che i livelli vengono aggiunti uno sopra l\u2019altro nella barra dei Layers.<\/p>\n\n\n\n<p><strong>Creare un gruppo<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Selezioniamo pi\u00f9 elementi (usando il mouse o tenendo premuto <strong>Shift<\/strong> per selezionare).<\/li>\n\n\n\n<li>Premiamo <strong>Cmd+G<\/strong> (Mac) o <strong>Ctrl+G<\/strong> (Windows) per creare un gruppo.<\/li>\n\n\n\n<li>Nella <strong>barra dei Layers<\/strong> apparir\u00e0 il nuovo gruppo, indicato con una cartella, cliccando sulla freccia accanto al gruppo, possiamo espandere o contrarre il contenuto.<\/li>\n<\/ol>\n\n\n\n<p><strong>Opzioni aggiuntive per i gruppi<\/strong><\/p>\n\n\n\n<p>Nel <strong>pannello di destra<\/strong> \u00e8 possibile trasformare un gruppo in un Frame cliccando sull\u2019apposita opzione.<\/p>\n\n\n\n<p><strong>Sciogliere un gruppo<\/strong><\/p>\n\n\n\n<p>Per sciogliere un gruppo, selezionatelo e premete <strong>Cmd+Shift+G<\/strong> (Mac) o <strong>Ctrl+Shift+G<\/strong> (Windows).<\/p>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Plugins<\/h2>\n\n\n\n<p>I <strong>Plugins<\/strong> sono risorse esterne sviluppate da terze parti che possono essere integrate in Figma per aggiungere funzionalit\u00e0 extra.<\/p>\n\n\n\n<p><strong>Come accedere ai Plugins<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Aprite il menu <strong>Action<\/strong> (l\u2019ultimo a destra).<\/li>\n\n\n\n<li>Andate su <strong>Plugins &amp; Widget<\/strong>.<\/li>\n\n\n\n<li>Cercate i plugin desiderati.<\/li>\n\n\n\n<li>I plugin utilizzati di frequente possono essere salvati per un accesso rapido.<\/li>\n<\/ol>\n\n\n\n<p><strong>Plugins consigliati<\/strong><\/p>\n\n\n\n<p>\u2022 <strong>Boxicons<\/strong> (attenzione: scegliete quello corretto, non Iconduck).<\/p>\n\n\n\n<p>\u2022 <strong>Material Symbols<\/strong>: una libreria di simboli e icone.<\/p>\n\n\n\n<p>\u2022 <strong>Unsplash<\/strong>: per aggiungere immagini.<\/p>\n\n\n\n<p>\u2022 <strong>Lorem Ipsum<\/strong>: per generare testo segnaposto.<\/p>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Auto Layout<\/h2>\n\n\n\n<p>L\u2019<strong>Auto Layout<\/strong> \u00e8 uno strumento potente per creare regole di impaginazione dinamiche.<\/p>\n\n\n\n<p><strong>Attivare e personalizzare Auto Layout<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Selezionate un gruppo o una serie di elementi.<\/li>\n\n\n\n<li>Premete il comando rapido <strong>Shift+A<\/strong> oppure attivatelo dal pannello di destra.<\/li>\n<\/ol>\n\n\n\n<p>Nel <strong>pannello di destra<\/strong> \u00e8 possibile:<\/p>\n\n\n\n<p>\u2022 Impostare l\u2019<strong>orientamento<\/strong> (verticale o orizzontale).<\/p>\n\n\n\n<p>\u2022 Definire l\u2019<strong>allineamento<\/strong> degli elementi.<\/p>\n\n\n\n<p>\u2022 Regolare lo <strong>spazio<\/strong> tra gli elementi.<\/p>\n\n\n\n<p>\u2022 Modificare il <strong>padding<\/strong>, ovvero lo spazio tra gli elementi e il bordo del contenitore.<\/p>\n\n\n\n<p><strong>Opzioni Aggiuntive<\/strong><\/p>\n\n\n\n<p>Un Auto Layout si comporta come un <strong>Frame<\/strong>, consentendo di aggiungere o gestire elementi al suo interno.<\/p>\n\n\n\n<p>Se un elemento non deve seguire le regole dell\u2019Auto Layout, \u00e8 possibile selezionarlo e cliccare su <strong>\u201cIgnore Auto Layout\u201d<\/strong> nella sezione <strong>Position<\/strong> del pannello di destra.<\/p>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Operazioni Booleane<\/h2>\n\n\n\n<p>Le <strong>operazioni booleane<\/strong> consentono di combinare pi\u00f9 forme con varie modalit\u00e0:<\/p>\n\n\n\n<p>\u2022 <strong>Unione<\/strong>: combina le forme in un unico elemento.<\/p>\n\n\n\n<p>\u2022 <strong>Sottrazione<\/strong>: sottrae una forma dall\u2019altra.<\/p>\n\n\n\n<p>\u2022 <strong>Intersezione<\/strong>: mantiene solo l\u2019area comune tra le forme.<\/p>\n\n\n\n<p>\u2022 <strong>Esclusione<\/strong>: mantiene le aree non sovrapposte.<\/p>\n\n\n\n<p>L\u2019opzione <strong>\u201cFlatten Selection\u201d<\/strong> trasforma l\u2019operazione booleana in un tracciato, rendendolo un elemento unico e modificabile.<\/p>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Esercitazione<\/h2>\n\n\n\n<p>Creare un file con un frame smartphone nel quale posizionare un Menu nella parte inferiore.<\/p>\n\n\n\n<p>Scegliete uno dei seguenti stili proposti per il menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"549\" height=\"412\" src=\"https:\/\/www.freemindstudio.it\/istruzione\/wp-content\/uploads\/sites\/3\/2025\/02\/Istance-edited.jpg\" alt=\"\" class=\"wp-image-1174\" style=\"width:453px;height:auto\"\/><\/figure>\n\n\n\n<div style=\"height:44px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>\u26a0\ufe0f&nbsp;<strong>Attenzione:<\/strong>&nbsp;Nome file \u201cLezione 3\u201d.<\/p>\n\n\n\n<p><strong>Specifiche menu:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Icone<\/strong>: utilizzate Boxicons, dimensione <strong>36&#215;36 px<\/strong>. <\/li>\n\n\n\n<li><strong>Font<\/strong>: DM Sans, dimensione <strong>10 px<\/strong>.<\/li>\n\n\n\n<li><strong>Spaziatura<\/strong>: distanza verticale tra icona e testo di <strong>8 px<\/strong>.<\/li>\n\n\n\n<li><strong>Padding del menu<\/strong>: minimo <strong>16 px<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p><strong>Colori<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Colore primario: #0491C5.<\/li>\n\n\n\n<li>Colore nero: #454545.<\/li>\n\n\n\n<li>Sfondo del menu: <strong>Bianco<\/strong>.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Nuovi livelli e gruppi Creare un nuovo livello Per creare un nuovo livello, basta disegnare un elemento qualsiasi all\u2019interno di un Frame. Noterete che nella barra dei Layers apparir\u00e0 il nuovo elemento e poich\u00e9 \u00e8 stato creato all\u2019interno del Frame, il livello verr\u00e0 posizionato automaticamente al suo interno. Se spostiamo l\u2019elemento fuori dal Frame utilizzando [&hellip;]<\/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,28,27],"tags":[38],"class_list":["post-391","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-e-modellazione-3d","category-enac","category-jac","category-marketing-e-comunicazione","category-operatore-grafico","tag-figma"],"_links":{"self":[{"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/posts\/391","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=391"}],"version-history":[{"count":13,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/posts\/391\/revisions"}],"predecessor-version":[{"id":1178,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/posts\/391\/revisions\/1178"}],"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=391"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/categories?post=391"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/tags?post=391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}