{"id":386,"date":"2022-09-20T11:07:50","date_gmt":"2022-09-20T09:07:50","guid":{"rendered":"https:\/\/www.freemindstudio.it\/istruzione\/?p=386"},"modified":"2025-02-01T23:11:01","modified_gmt":"2025-02-01T22:11:01","slug":"figma-area-di-lavoro","status":"publish","type":"post","link":"https:\/\/www.freemindstudio.it\/istruzione\/figma-area-di-lavoro\/","title":{"rendered":"Area di Lavoro"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Creare un progetto<\/h2>\n\n\n\n<p>All\u2019apertura di Figma, la schermata iniziale permette di <strong>creare nuovi progetti<\/strong> o di <strong>aprire progetti esistenti<\/strong>.<\/p>\n\n\n\n<p>Nella colonna di sinistra, oltre alle informazioni di login, troviamo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Drafts<\/strong> (bozze);<\/li>\n\n\n\n<li><strong>Teams<\/strong> (spazi collaborativi per i team).<\/li>\n<\/ul>\n\n\n\n<p>In alto a destra, nelle impostazioni, \u00e8 possibile cambiare il <strong>tema<\/strong>: \u00e8 consigliato utilizzare il <strong>tema scuro<\/strong> per ridurre l\u2019affaticamento visivo.<\/p>\n\n\n\n<p>\u00c8 importante ricordare che Figma \u00e8 un <strong>software basato sul web<\/strong>, il che significa che \u00e8 necessaria una <strong>connessione a Internet<\/strong> per scaricare, lavorare e salvare i file.<\/p>\n\n\n\n<p>Per iniziare, accediamo alla sezione <strong>Drafts<\/strong> e creiamo il nostro primo progetto cliccando su <strong>\u201cNew design file\u201d<\/strong>. Dopo aver cliccato, si aprir\u00e0 la <strong>pagina di lavoro<\/strong> del file.<\/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\">Area di lavoro<\/h2>\n\n\n\n<p>Una volta creato un progetto, ci troviamo nella <strong>schermata di lavoro<\/strong> di Figma, che \u00e8 composta da:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Pannello Strumenti Inferiore<\/strong>: contiene gli <strong>strumenti principali<\/strong>.<\/li>\n\n\n\n<li><strong>Barra di sinistra<\/strong>: mostra il <strong>nome del file<\/strong> (di default \u201cUntitled\u201d), che pu\u00f2 essere modificato con un semplice clic, i <strong>Layers<\/strong> (Livelli) e gli <strong>Assets<\/strong> (Risorse).<\/li>\n\n\n\n<li><strong>Barra di destra<\/strong>: \u00e8 un <strong>menu dinamico<\/strong> che mostra le <strong>propriet\u00e0<\/strong> degli elementi selezionati.<\/li>\n\n\n\n<li><strong>Area centrale<\/strong>: \u00e8 la <strong>finestra di lavoro<\/strong> principale dove si svolge il design.<\/li>\n<\/ol>\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\">Frames<\/h2>\n\n\n\n<p>I <strong>Frames<\/strong> sono i <strong>contenitori<\/strong> in cui possiamo inserire <strong>forme, testi e immagini<\/strong>. Puoi immaginare i Frames come <strong>singole schermate<\/strong> del tuo progetto.<\/p>\n\n\n\n<p><strong>Come creare un Frame<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Clicca sull\u2019icona <strong>Frame<\/strong> nel <strong>pannello degli strumenti<\/strong> in alto.<\/li>\n\n\n\n<li>Nella barra di destra, seleziona un dispositivo (es. <strong>Phone<\/strong>) e scegli la dimensione, ad esempio <strong>iPhone 16<\/strong>.<\/li>\n\n\n\n<li>Il <strong>Frame<\/strong> apparir\u00e0 al centro dell\u2019area di lavoro.<\/li>\n<\/ol>\n\n\n\n<p>Nella barra dei <strong>Layers<\/strong>, il <strong>Frame<\/strong> appena creato verr\u00e0 visualizzato come un nuovo elemento. Per rinominarlo, fai doppio clic sul nome e scrivi, ad esempio, <strong>\u201cHome\u201d<\/strong>.<\/p>\n\n\n\n<p>Per rimuovere una tavola selezionarla e premi <strong>Cancella<\/strong> sulla tastiera.<\/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\">Zoom e Panning<\/h2>\n\n\n\n<p>Ecco le <strong>scorciatoie<\/strong> per ingrandire e spostare l\u2019inquadratura:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Zoom<\/strong>:<\/li>\n\n\n\n<li><strong>Ctrl \/ Cmd + scroll del mouse<\/strong> (per ingrandire o ridurre);<\/li>\n\n\n\n<li><strong>Ctrl \/ Cmd + \u201c+\u201d<\/strong> (per aumentare lo zoom);<\/li>\n\n\n\n<li><strong>Ctrl \/ Cmd + \u201c-\u201d<\/strong> (per ridurre lo zoom).<\/li>\n\n\n\n<li><strong>Panning<\/strong> (spostare l\u2019inquadratura):<\/li>\n\n\n\n<li><strong>Space + Click<\/strong> e trascina con il mouse.<\/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\">Annullare comando<\/h2>\n\n\n\n<p>Qualsiasi operazione pu\u00f2 essere <strong>annullata<\/strong> o <strong>ripristinata<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Annullare<\/strong>: vai su <strong>Modifica > Annulla<\/strong> (o usa la scorciatoia <strong>Ctrl \/ Cmd + Z<\/strong>).<\/li>\n\n\n\n<li><strong>Ripristinare<\/strong>: vai su <strong>Modifica > Ripristina<\/strong> (scorciatoia <strong>Ctrl \/ Cmd + Shift + Z<\/strong>).<\/li>\n<\/ul>\n\n\n\n<p>\u26a0\ufe0f Nota: se esegui una nuova operazione dopo aver annullato un comando, l\u2019opzione <strong>Ripristina<\/strong> verr\u00e0 disattivata.<\/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\">Salvare lavoro<\/h2>\n\n\n\n<p>Figma salva automaticamente il tuo lavoro, quindi non \u00e8 necessario eseguire salvataggi manuali.<\/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\">Distanze e righelli<\/h2>\n\n\n\n<p><strong>Visualizzare i righelli<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vai su <strong>Figma Logo > View > Rulers<\/strong> oppure premi <strong>Shift + R<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p><strong>Aggiungere e rimuovere guide<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Per posizionare una guida, trascinala dai <strong>righelli<\/strong> fino all\u2019area di lavoro.<\/li>\n\n\n\n<li>Per cancellare una guida, trascinala nuovamente sul righello o selezionala e premi <strong>Cancella<\/strong> sulla tastiera.<\/li>\n<\/ul>\n\n\n\n<p><strong>Misurare le distanze<\/strong><\/p>\n\n\n\n<p>Durante il posizionamento delle guide, premi <strong>Alt \/ Option<\/strong> per vedere le <strong>distanze<\/strong> tra la guida e altri elementi.<\/p>\n\n\n\n<p>Per misurare la distanza tra due elementi:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Seleziona il primo elemento.<\/li>\n\n\n\n<li>Posiziona il mouse sul secondo elemento e premi <strong>Alt \/ Option<\/strong>.<\/li>\n<\/ol>\n\n\n\n<p>\u26a0\ufe0f Attenzione: il tasto <strong>Alt \/ Option<\/strong> viene utilizzato anche per <strong>duplicare<\/strong> un elemento durante lo spostamento.<\/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>Crea un file Figma e rinominalo <strong>\u201cLezione 01\u201d<\/strong>.<\/p>\n\n\n\n<p>All\u2019interno del file, aggiungi <strong>due Frames<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Uno con dimensione <strong>iPhone<\/strong>.<\/li>\n\n\n\n<li>Uno con dimensione <strong>MacBook Pro 16\u201d<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p>Posiziona i Frames <strong>affiancati<\/strong> e inserisci <strong>due guide<\/strong> per ciascun Frame:<\/p>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>32px<\/strong> di distanza dai bordi per l\u2019iPhone.<\/li>\n\n\n\n<li><strong>160px<\/strong> di distanza dai bordi per il MacBook Pro.<\/li>\n<\/ul>\n\n\n\n<p>Rinominare le tavole nel seguente modo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u201dHome &#8211; Smartphone\u201d per l\u2019iPhone.<\/li>\n\n\n\n<li>\u201dHome &#8211; Desktop&#8221; per il MacBook Pro.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1040\" height=\"650\" src=\"https:\/\/www.freemindstudio.it\/istruzione\/wp-content\/uploads\/sites\/3\/2022\/09\/Screenshot-2025-01-07-at-00.05.55-1040x650.png\" alt=\"\" class=\"wp-image-1016\" srcset=\"https:\/\/www.freemindstudio.it\/istruzione\/wp-content\/uploads\/sites\/3\/2022\/09\/Screenshot-2025-01-07-at-00.05.55-1040x650.png 1040w, https:\/\/www.freemindstudio.it\/istruzione\/wp-content\/uploads\/sites\/3\/2022\/09\/Screenshot-2025-01-07-at-00.05.55-1536x960.png 1536w, https:\/\/www.freemindstudio.it\/istruzione\/wp-content\/uploads\/sites\/3\/2022\/09\/Screenshot-2025-01-07-at-00.05.55-2048x1280.png 2048w\" sizes=\"auto, (max-width: 1040px) 100vw, 1040px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Creare un progetto All\u2019apertura di Figma, la schermata iniziale permette di creare nuovi progetti o di aprire progetti esistenti. Nella colonna di sinistra, oltre alle informazioni di login, troviamo: In alto a destra, nelle impostazioni, \u00e8 possibile cambiare il tema: \u00e8 consigliato utilizzare il tema scuro per ridurre l\u2019affaticamento visivo. \u00c8 importante ricordare che Figma [&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-386","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\/386","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=386"}],"version-history":[{"count":7,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/posts\/386\/revisions"}],"predecessor-version":[{"id":1116,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/posts\/386\/revisions\/1116"}],"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=386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/categories?post=386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/tags?post=386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}