{"id":652,"date":"2022-10-20T15:21:51","date_gmt":"2022-10-20T13:21:51","guid":{"rendered":"https:\/\/www.freemindstudio.it\/istruzione\/?p=652"},"modified":"2022-10-21T15:00:44","modified_gmt":"2022-10-21T13:00:44","slug":"figma-prototipi-e-animazioni","status":"publish","type":"post","link":"https:\/\/www.freemindstudio.it\/istruzione\/figma-prototipi-e-animazioni\/","title":{"rendered":"Prototipi e Animazioni"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Prototipi<\/h2>\n\n\n\n<p>I prototipi consentono di far interagire i vari componenti delle varie slide. Esempio se creo un menu, con i vari pulsanti posso passare da una pagina all\u2019altra al click.<\/p>\n\n\n\n<p>Per attivare un prototipo utilizziamo il menu nella barra di destra \u201cPrototype\u201d.<\/p>\n\n\n\n<p>Una volta selezionato un componente possiamo decidere di aggiungere un azione relativa al quel componente. Se cliccando e tenendo premuto sul simbolo + accanto al componente, trasciniamo e rilasciamo il mouse su un altra slide i due elementi verranno collegati. Nella barra di destra comparir\u00e0 un pannello dove possiamo impostare i vari comportamenti dell\u2019interazione. L\u2019azione principale \u00e8 \u201cOn Click\u201d, vuol dire che al click del componente possiamo passare alla frame di destinazione.<\/p>\n\n\n\n<p>Possiamo verificare cio\u00e8 facciamo nella sezione prototype cliccando sul triangolo di Play in altro a 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\">Animazioni Base tra Slide<\/h2>\n\n\n\n<p>Analizzando il pannello di comportamento quando creiamo una connessione nella modalit\u00e0 prototype, troviamo una sezione chiamata animation.<\/p>\n\n\n\n<p>In animation possiamo decidere il tipo di transizione tra una slide e un altra. Di base \u00e8 impostato in \u201cInstant\u201d, il che vuol dire che l\u2019animazione sar\u00e0 istantanea. Oppure possiamo usare le varie dissolvenze anche impostando i tempi di transizione.<\/p>\n\n\n\n<p>Interessante \u00e8 l\u2019impostazione \u201csmart animate\u201d che ci consente di far interagire tra di loro i componenti presenti in entrambi le slide.<\/p>\n\n\n\n<p>Nelle impostazione di animazione impostare Ease in out come metodo e il tempo va espresso in millisecondi.<\/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\">Gestione avanzata componenti<\/h2>\n\n\n\n<p>Quando creiamo un componente possiamo creare pi\u00f9 varianti dello stesso componente da utilizzare nelle sue istanze.<\/p>\n\n\n\n<p>Una volta creato il componente basta selezionare il componente appena creato e cliccare nella parte alta, nello stesso punto del comando \u201ccrea componente\u201d, troveremo il comando aggiungi variante.<\/p>\n\n\n\n<p>In questo modo quando andremo a creare un istanza del nostro componente possiamo scegliere quale variante utilizzare.<\/p>\n\n\n\n<p>Nel seguente esempio ho creato due slide una a tema chiaro e una a tema scuro. Successivamente ho creato un componente interruttore che mi consente di passare da una slide all\u2019altra, questo componente ha due varianti una per la schermata chiara e uno per la schermata scura.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"500\" src=\"https:\/\/www.freemindstudio.it\/istruzione\/wp-content\/uploads\/sites\/3\/2022\/10\/Figma-Toggle-Darkmode-Animation.gif\" alt=\"\" class=\"wp-image-651\"\/><\/figure>\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\">Gruppo Booleano<\/h2>\n\n\n\n<p>Questo tipo di gruppi servono per effettuare operazioni tra forme. Quando disegniamo pi\u00f9 forme possiamo farle interagire tra loro utilizzando questi gruppi.<\/p>\n\n\n\n<p>Il tasto di attivazione lo troviamo nella parte alta e ci consentono di sommare, sottrarre o intersecare le varie forme.<\/p>\n\n\n\n<p>Verra creato un gruppo con al suo interno le varie forme selezionate ma come risultato visivo otterremo il risultato dell\u2019operazione scelta.<\/p>\n\n\n\n<p>Esempio la luna dell\u2019esempio precedente \u00e8 stata creata utilizzando l&#8217;operazione sottrai tra due cerchi sfalsati uno sopra l\u2019altro.<\/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\">Esercizio: Toggle per la dark mode<\/h2>\n\n\n\n<p>Creiamo un due frame dimensione desktop nel seguente modo:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"264\" src=\"https:\/\/www.freemindstudio.it\/istruzione\/wp-content\/uploads\/sites\/3\/2022\/10\/Figma-Tutorial-Toggle-Darkmode-1.png\" alt=\"Figma Tutorial Toggle Darkmode\" class=\"wp-image-657\"\/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<p>Disegnamo il toggle creiamo un rettangolo di fondo dimensioni 60&#215;30 e un cerchio 22&#215;22 posizioniamo nel seguente modo:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"244\" src=\"https:\/\/www.freemindstudio.it\/istruzione\/wp-content\/uploads\/sites\/3\/2022\/10\/Figma-Tutorial-Toggle-Darkmode-2.png\" alt=\"Figma Tutorial Toggle Darkmode\" class=\"wp-image-658\"\/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<p>Utilizziamo il plug-in Material Symbols per le icone. Attenzione quando creeremo le icone saranno posizionate all\u2019 esterno del frame, spostarle all\u2019interno.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"244\" src=\"https:\/\/www.freemindstudio.it\/istruzione\/wp-content\/uploads\/sites\/3\/2022\/10\/Figma-Tutorial-Toggle-Darkmode-3.png\" alt=\"Figma Tutorial Toggle Darkmode\" class=\"wp-image-659\"\/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<p>Selezioniamo il risultato finale e creiamo il componente:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"244\" src=\"https:\/\/www.freemindstudio.it\/istruzione\/wp-content\/uploads\/sites\/3\/2022\/10\/Figma-Tutorial-Toggle-Darkmode-4.png\" alt=\"Figma Tutorial Toggle Darkmode\" class=\"wp-image-660\"\/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<p>Spostiamo il componente all\u2019esterno del frame e creiamo una nuova variante. Rinominiamo le varianti Light e Dark:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"327\" src=\"https:\/\/www.freemindstudio.it\/istruzione\/wp-content\/uploads\/sites\/3\/2022\/10\/Figma-Tutorial-Toggle-Darkmode-5.gif\" alt=\"Figma Tutorial Toggle Darkmode\" class=\"wp-image-661\"\/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<p>Cambiamo i colori della modalit\u00e0 dark e spostiamo il cerchio:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"418\" src=\"https:\/\/www.freemindstudio.it\/istruzione\/wp-content\/uploads\/sites\/3\/2022\/10\/Figma-Tutorial-Toggle-Darkmode-6.gif\" alt=\"Figma Tutorial Toggle Darkmode\" class=\"wp-image-662\"\/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<p>Nella sezione asset prendiamo il componente e lo posizioniamo nella prima slide. Poi copiamo e incolliamo nella stessa posizione nella seconda slide e successivamente selezioniamo la variante &#8220;Dark\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"244\" src=\"https:\/\/www.freemindstudio.it\/istruzione\/wp-content\/uploads\/sites\/3\/2022\/10\/Figma-Tutorial-Toggle-Darkmode-7.png\" alt=\"Figma Tutorial Toggle Darkmode\" class=\"wp-image-663\"\/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<p>Entriamo nella modalit\u00e0 prototipo e colleghiamo il pulsante della prima slide con la seconda e viceversa:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"285\" src=\"https:\/\/www.freemindstudio.it\/istruzione\/wp-content\/uploads\/sites\/3\/2022\/10\/Figma-Tutorial-Toggle-Darkmode-8.gif\" alt=\"Figma Tutorial Toggle Darkmode\" class=\"wp-image-664\"\/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<p>Premiamo play in altro a destra per provare l\u2019animazione.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Prototipi I prototipi consentono di far interagire i vari componenti delle varie slide. Esempio se creo un menu, con i vari pulsanti posso passare da una pagina all\u2019altra al click. Per attivare un prototipo utilizziamo il menu nella barra di destra \u201cPrototype\u201d. Una volta selezionato un componente possiamo decidere di aggiungere un azione relativa al [&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,27],"tags":[38],"class_list":["post-652","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\/652","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=652"}],"version-history":[{"count":5,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/posts\/652\/revisions"}],"predecessor-version":[{"id":667,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/posts\/652\/revisions\/667"}],"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=652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/categories?post=652"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freemindstudio.it\/istruzione\/wp-json\/wp\/v2\/tags?post=652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}