{"id":394,"date":"2022-09-20T11:13:47","date_gmt":"2022-09-20T09:13:47","guid":{"rendered":"https:\/\/www.freemindstudio.it\/istruzione\/?p=394"},"modified":"2025-02-01T23:08:57","modified_gmt":"2025-02-01T22:08:57","slug":"figma-elementi-base","status":"publish","type":"post","link":"https:\/\/www.freemindstudio.it\/istruzione\/figma-elementi-base\/","title":{"rendered":"Elementi Base"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Creare e Modificare Forme Base<\/h2>\n\n\n\n<p>Per creare forme base, utilizziamo il <strong>pannello degli strumenti<\/strong>. Cliccando sulla freccia accanto all\u2019icona delle forme, possiamo scegliere tra diverse opzioni: <strong>linee, rettangoli, cerchi, triangoli<\/strong> e altre forme predefinite.<\/p>\n\n\n\n<p>\u26a0\ufe0f Ricordate: una volta terminato il disegno di un elemento, \u00e8 necessario tornare allo <strong>strumento selezione<\/strong> per continuare a lavorare.<\/p>\n\n\n\n<p><strong>Modificare le dimensioni delle forme<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Selezionate l\u2019oggetto.<\/li>\n\n\n\n<li>Spostate il cursore su uno dei bordi o degli angoli dell\u2019elemento:<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Cliccate e trascinate<\/strong> per ridimensionare la forma.<\/li>\n\n\n\n<li>Utilizzate il tasto <strong>SHIFT<\/strong> per mantenere le proporzioni durante il ridimensionamento.<\/li>\n\n\n\n<li>Premete <strong>OPTION \/ ALT<\/strong> per scalare la forma partendo dal centro.<\/li>\n<\/ul>\n\n\n\n<p><strong>Modifiche dal pannello laterale<\/strong><\/p>\n\n\n\n<p>Nel <strong>pannello di destra<\/strong>, nella sezione <strong>POSITION e LAYOUT<\/strong>, \u00e8 possibile:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Regolare la <strong>posizione<\/strong> e le <strong>dimensioni<\/strong> dell\u2019elemento in modo preciso, inserendo valori numerici.<\/li>\n\n\n\n<li>Aumentare o diminuire i valori usando le <strong>frecce direzionali<\/strong> della tastiera (SU e GI\u00d9).<\/li>\n\n\n\n<li>Eseguire calcoli direttamente nei campi numerici (es. 30+10, 20\/4, ecc.).<\/li>\n<\/ul>\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\">Modificare i colori<\/h2>\n\n\n\n<p>Per modificare i colori di un oggetto o di un gruppo di oggetti:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Selezionate l\u2019elemento desiderato.<\/li>\n\n\n\n<li>Nel <strong>pannello di destra<\/strong>, sotto la sezione <strong>APPEARANCE<\/strong>, trovate:<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>FILL<\/strong>: il riempimento dell\u2019elemento.<\/li>\n\n\n\n<li><strong>STROKE<\/strong>: la traccia (o contorno).<\/li>\n<\/ul>\n\n\n\n<p><strong>Modifiche al riempimento (FILL)<\/strong><\/p>\n\n\n\n<p>Il colore \u00e8 rappresentato da un codice <strong>HEX.<\/strong> Mentre Cliccando sul quadrato del colore, si apre un pannello da cui \u00e8 possibile:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Selezionare un colore.<\/li>\n\n\n\n<li>Applicare una <strong>sfumatura<\/strong> al posto di un colore pieno.<\/li>\n<\/ul>\n\n\n\n<p>Per togliere il colore di riempimento premere il tasto <strong>\u201d-\u201d<\/strong>.<\/p>\n\n\n\n<p><strong>Modifiche alla traccia (STROKE)<\/strong><\/p>\n\n\n\n<p>Per attivare una traccia, cliccate sul pulsante <strong>\u201d+\u201d<\/strong> accanto a STROKE. Nelle impostazioni \u00e8 possibile regolare:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Il <strong>colore<\/strong>.<\/li>\n\n\n\n<li>Lo <strong>spessore<\/strong>.<\/li>\n\n\n\n<li>La <strong>posizione<\/strong> (interno, esterno, o centro).<\/li>\n\n\n\n<li>Altri parametri avanzati.<\/li>\n<\/ul>\n\n\n\n<p><strong>Opzioni aggiuntive<\/strong><\/p>\n\n\n\n<p>Nella sezione <strong>APPEARANCE<\/strong>, \u00e8 possibile regolare anche:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Opacit\u00e0<\/strong>: per rendere l\u2019elemento pi\u00f9 trasparente.<\/li>\n\n\n\n<li><strong>Raggiatura degli angoli<\/strong>: utile per creare forme con bordi arrotondati.<\/li>\n<\/ul>\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\">Duplicare e allineare gli elementi<\/h2>\n\n\n\n<p><strong>Duplicare gli elementi<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Metodo classico<\/strong>: Copiate e incollate l\u2019elemento utilizzando i comandi <strong>Ctrl \/ Cmd + C<\/strong> e <strong>Ctrl \/ Cmd + V<\/strong>.<\/li>\n\n\n\n<li><strong>Metodo rapido<\/strong>: Tenete premuto <strong>Option \/ Alt<\/strong> e trascinate l\u2019elemento con il mouse.<\/li>\n<\/ul>\n\n\n\n<p>Se si utilizza il metodo rapido, per ripetere la duplicazione in sequenza, premete <strong>Ctrl \/ Cmd + D<\/strong> dopo aver duplicato un elemento.<\/p>\n\n\n\n<p><strong>Allineare gli elementi<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Quando selezionate <strong>pi\u00f9 elementi<\/strong>, appariranno i comandi di <strong>allineamento<\/strong> nella barra in alto.<\/li>\n\n\n\n<li>Selezionando un singolo elemento, questo verr\u00e0 <strong>allineato al Frame<\/strong> in cui si trova.<\/li>\n\n\n\n<li>Nel pannello di destra, sotto <strong>POSITION<\/strong>, trovate ulteriori opzioni di allineamento e distribuzione.<\/li>\n<\/ol>\n\n\n\n<p>\u26a0\ufe0f <strong>Distanze tra gli elementi<\/strong>: sempre nel pannello di destra, sotto <strong>LAYOUT<\/strong>, \u00e8 possibile visualizzare e regolare la distanza tra pi\u00f9 elementi selezionati.<\/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\">Testi<\/h2>\n\n\n\n<p>Per creare un testo:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Selezionate lo strumento <strong>Text<\/strong> dal pannello degli strumenti.<\/li>\n\n\n\n<li>Cliccate e trascinate per creare un <strong>rettangolo di testo<\/strong> nell\u2019area di lavoro.<\/li>\n<\/ol>\n\n\n\n<p><strong>Modificare il testo<\/strong><\/p>\n\n\n\n<p>Nel <strong>pannello di destra<\/strong>, \u00e8 possibile personalizzare diverse caratteristiche del testo:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Font<\/strong>: scegliete il carattere desiderato.<\/li>\n\n\n\n<li><strong>Dimensioni<\/strong>: impostate la grandezza del testo.<\/li>\n\n\n\n<li><strong>Interlinea e spaziature<\/strong>: regolate la distanza tra righe, paragrafi e lettere.<\/li>\n\n\n\n<li><strong>Allineamento<\/strong>: impostate l\u2019allineamento del testo (sinistra, centro, destra, giustificato).<\/li>\n<\/ol>\n\n\n\n<p>\u26a0\ufe0f&nbsp;<strong>Opzioni avanzate per il box di testo<\/strong><\/p>\n\n\n\n<p>Nella sezione <strong>LAYOUT<\/strong>, trovate tre opzioni fondamentali per gestire la dimensione del rettangolo di testo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Auto Width<\/strong>: il box si adatta automaticamente alla lunghezza del testo.<\/li>\n\n\n\n<li><strong>Auto Height<\/strong>: il box si espande in altezza in base alla quantit\u00e0 di testo.<\/li>\n\n\n\n<li><strong>Fixed Size<\/strong>: il box ha una dimensione fissa, indipendentemente dalla lunghezza del testo.<\/li>\n<\/ul>\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>Replicare la schermata seguente assicurandovi di:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create tutti gli elementi necessari che siano <strong>allineati correttamente<\/strong>.<\/li>\n\n\n\n<li>Mantenete le <strong>distanze uguali<\/strong> come immagine di riferimento.<\/li>\n\n\n\n<li>Utilizzate le guide, i comandi di allineamento e i tasti di duplicazione per velocizzare il lavoro.<\/li>\n<\/ol>\n\n\n\n<p>\u26a0\ufe0f&nbsp;Per spegnere e accendere rapidamente le guide premere SHIFT + R<\/p>\n\n\n\n<p>\u26a0\ufe0f&nbsp;<strong>Attenzione:<\/strong>&nbsp;Nome file \u201cLezione 2\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1040\" height=\"726\" src=\"https:\/\/www.freemindstudio.it\/istruzione\/wp-content\/uploads\/sites\/3\/2022\/09\/Elementi-Base-Esercizio-1040x726.jpg\" alt=\"\" class=\"wp-image-1020\" srcset=\"https:\/\/www.freemindstudio.it\/istruzione\/wp-content\/uploads\/sites\/3\/2022\/09\/Elementi-Base-Esercizio-1040x726.jpg 1040w, https:\/\/www.freemindstudio.it\/istruzione\/wp-content\/uploads\/sites\/3\/2022\/09\/Elementi-Base-Esercizio.jpg 1194w\" sizes=\"auto, (max-width: 1040px) 100vw, 1040px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1040\" height=\"748\" src=\"https:\/\/www.freemindstudio.it\/istruzione\/wp-content\/uploads\/sites\/3\/2022\/09\/Dimensioni-1040x748.jpg\" alt=\"\" class=\"wp-image-1019\" srcset=\"https:\/\/www.freemindstudio.it\/istruzione\/wp-content\/uploads\/sites\/3\/2022\/09\/Dimensioni-1040x748.jpg 1040w, https:\/\/www.freemindstudio.it\/istruzione\/wp-content\/uploads\/sites\/3\/2022\/09\/Dimensioni-1536x1104.jpg 1536w, https:\/\/www.freemindstudio.it\/istruzione\/wp-content\/uploads\/sites\/3\/2022\/09\/Dimensioni.jpg 1655w\" sizes=\"auto, (max-width: 1040px) 100vw, 1040px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Creare e Modificare Forme Base Per creare forme base, utilizziamo il pannello degli strumenti. Cliccando sulla freccia accanto all\u2019icona delle forme, possiamo scegliere tra diverse opzioni: linee, rettangoli, cerchi, triangoli e altre forme predefinite. \u26a0\ufe0f Ricordate: una volta terminato il disegno di un elemento, \u00e8 necessario tornare allo strumento selezione per continuare a lavorare. Modificare [&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-394","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\/394","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=394"}],"version-history":[{"count":6,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/posts\/394\/revisions"}],"predecessor-version":[{"id":1114,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/posts\/394\/revisions\/1114"}],"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=394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/categories?post=394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/tags?post=394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}