Lezione dal corso Figma Basics
I film possiamo definire dei componenti come funzionano.
Vediamolo subito con un esempio pratico creò un fra me che questo qua crea un componente cliccando questa opzione oppure con command option k e lo pubblico.
Quello che otteniamo in questo modo è un componente componente e la sua istanza quello che fa un componente molto semplice.
Nel momento in cui lo modifico, tutte le modifiche appaiono nelle sue istanze.
Quindi posso definire un bottone posso definire un ex field? Posso definire un titolo quello che voglio e tutte le volte che modifico qualcosa dentro il componente iniziale, tutte le modifiche verranno applicate anche alle sue istanze.
È molto comodo per riutilizzare degli elementi in modo da non dover reinventare ogni volta un qualsiasi rimedio di white.
Un concetto fondamentale da conoscere sono gli o verrai infatti i componenti non verranno sempre utilizzati allo stesso modo.
Se per esempio abbiamo un bottone come questo, vogliamo cambiare alcuni degli elementi.
Non sarà sempre un bottone esattamente come questo.
Quindi se io faccio una coppia ne faro' tre per questa lezione.
Quello che succede, come abbiamo visto poco fa, è che cambiando qualcosa dentro questo componente, tutte le modifiche che vengono portate anche nelle istanze.
Posso però fare degli operai.
Che esempio posso modificare questo testo? Posso chiamarlo approda oppure questo potrei chiamarlo drink.
Posso cambiare componenti innestati dentro altri componenti qui, per esempio questa icona.
Ma potrei voler usare l'icona cocktail o addirittura i colori.
Potrei volere questo bottone come un bottone distruttivo.
Un bottone rosso Quando applichiamo una vera raid.
Quello che succede è che le modifiche non vengono piu' propagate per quella specifica proprietà.
Quindi, per esempio, se cambio questo tipo cambierà nell' ultimo elemento in cui non ho cambiato, in cui non ho creato come verrai di testa, ma non cambierà in tutti gli altri.
Stessa cosa.
Per esempio, il colore scambio.
Questo colore verrà sovrascritto lì dove non c'.
È una vera raid, mentre verrà mantenuta una modifica lì dove lo verrei.
Cioè, questo dà ai componenti la giusta flessibilità per poter essere utilizzati in giro per l'interfaccia.
In ogni caso, possiamo sempre annullare.
Io vorrei che abbiamo creato, per esempio, su questo Burton Road.
Vedete, qui abbiamo reset all over right che ci fa ritornare questo bottone esattamente com'era prima.
Oppure posso cambiare una proprietà specifica e quindi resettare solo un colore invece che il colore.
Il testo il resto cioè un ultimo concerto fondamentale per capire i componenti e sono le variants.
In questo caso il bottone che abbiamo usato nell'esempio di prima lo vediamo declinato con delle modalità diverse.
Vediamo tre stati resting over e disable così come tre colori lo vediamo blu, rosso e verde.
Questo è concettualmente è sempre lo stesso componente, perché sempre un bottone, ma che si presenta con alcune variazioni.
Quello che possiamo fare è dentro Fig, ma è utilizzare le variants.
Ora seleziona tutti questi bottoni da' qua possiamo creare dei componenti multipli con un click solo.
É quello che possiamo fare.
Un film è andare in questo menu' variants e combinare tutti questi componenti come un componente unico che ha tante varianti.
Quando definisco una variante la vedo tutta intorno ai componenti che la compongono.
Possiamo poi definire delle proprietà come questa e dei valori che queste proprietà hanno in questo caso che proprietà abbiamo? L'abbiamo lo stato re Sting, cover o disabled che possiamo aggiungere in questo modo? Selezioniamo il nostro button ri nominiamo la proprietà di default e possiamo chiamarla state dopo di che possiamo selezionare questi tre a indicare che la proprietà state ha valore resting per loro possiamo fare la stessa cosa per il secondo il terzo stato e possiamo fare la stessa cosa di nuovo anche per il colore.
Quindi prendiamo questo tasto per vedere più opzioni e aggiungiamo una nuova proprietà.
La proprietà in questo caso sarà color e avrà tre valori diversi.
Blu Red Brin Una volta definito questo, quello che succede è che copiando un bottone questa istanza questo sarà genericamente un button e potremo impostare qua tutte le proprietà che vogliamo darli.
Quindi vorremmo prendere lo state e metterlo in over, per esempio, oppure cambiare il colore da blu.
Potremmo volerlo rosso per fare un'azione distruttiva, così come gli outlet layout.
Questo è un argomento di cui di teorico, cioè poco, ma la cosa davvero importante è mettere le mani in pasta e provare.
Ho preparato un piccolo esempio pratico che vedremo nella prossima lezione.
Learnn è la piattaforma online che ti aiuta a 360 gradi a crescere nel digitale. Sviluppa competenze con oltre 300 corsi, condividi i tuoi risultati, fai networking con otre 150.000 professionisti/e e oltre 700 aziende.
Vogliamo cambiare l’Italia, una persona alla volta.
Per farlo ci proponiamo di democratizzare l’apprendimento e accelerare la crescita di persone, idee e aziende attraverso strumenti tecnologici a supporto di qualsiasi professionista.
Learnn prevede un piano totalmente gratuito (Free) che ti permette di iniziare qualsiasi corso che abbiamo su Learnn.
Per chi volesse finire i corsi, ottenere certificazioni e connettersi con professionisti e aziende, Learnn Pro permette di avere accesso illimitato a tutto questo. Il corso di Learnn Pro è 9.99 euro / mese e puoi disdire quando vuoi.
Per i team di aziende abbiamo anche un Piano Team con oltre 700 clienti aziendali.
Potrai seguire i contenuti da computer, tablet e smartphone.
Scarica l’App iOS/Android Learnn e segui i contenuti in modalità video, audio e testo.
Learnn ha un piano gratuito che ti permette di accedere all 40% di ogni corso in maniera gratuita e solo con la tua email, no carta richiesta.
Learnn offre sia un piano gratuito con accesso limitato ai contenuti, sia un piano PRO del costo di soli 9.99 euro al mese con cui potrai avere accesso a tutti i nostri corsi senza limiti o sorprese.
Una volta completata l’iscrizione sarà possibile gestire i propri dati e disdire in qualsiasi momento e in completa autonomia.
Si, le nostre certificazioni vengono rilasciate al completamento dell’80% di ogni corso dopo il superamento di un quiz di 10 domande.
La certificazione potrà essere condivisa sul proprio profilo personale Learnn e sui proprio profili LinkedIn e CV.
Le nostre certificazioni sono riconosciute da centinaia di aziende che formano i loro team su Learnn e queste aziende assumono abitualmente dentro alla nostra piattaforma.
Iscrivendoti a Learnn avrai accesso ad una community con 150.000 professionisti dove potrai confrontarti, fare networking e trovare nuove opportunità.
Se avessi altre domande puoi usare la live chat qui di fianco.
Per partnership compila questo form
La nostra vision è rendere l'Italia famosa nel mondo per l'esecuzione.
La missione di Learnn
è accelerare la crescita di ogni individuo rendendo accessibili conoscenza, opportunità e tecnologia per avere un impatto positivo sul mondo e sugli altri.
Tutto incluso (come Netflix), IVA inclusa, nessuna sorpresa o addebito indesiderato.
Disdici quando vuoi, in 1 click.
Scegli di migliorare ogni giorno per 12 mesi senza interruzioni scegliendo il piano annuale.
In un unico pagamento annuale
Disdici quando vuoi, in 1 click.
Con l’abbonamento otterrai:
Consuma i +200 corsi e webinar di Learnn da webapp o app iOS e Android, in formato video, audio o testo.
Con l'abbonamento a Learnn hai accesso a tutto (proprio tutto) ciò che contiene la piattaforma.
Ogni mese registriamo nuovi corsi su tutto cio di cui potresti avere bisogno nel mondo digitale.
Con l'app Learnn trasformi ogni momento di vuoto in un'occasione di apprendimento.
Scarica tutto il materiale che ti serve e utilizza i moduli riassuntivi per fissare i concetti.
Ogni settimana nuove offerte di lavoro da parte di tantissime aziende che operano nel mondo digitale.