Come utilizzare una formula booleana in Figma

Figma è conosciuto come uno dei migliori programmi per grafici in tutto il mondo. Le sue funzionalità sono complete e aiutano gli utenti a creare qualsiasi cosa, da loghi accattivanti a pagine di destinazione uniche. In particolare, la funzionalità booleana (anch’essa parte dell’aggiornamento delle proprietà dei componenti nel 2002) consente di ottenere forme personalizzate combinando i loro livelli attraverso più formule.

Qui imparerai come utilizzare le funzionalità booleane nel tuo prossimo progetto.

Le opzioni della formula booleana per le forme personalizzate

Prima di creare la tua forma personalizzata, dovrai sapere come funzionano le formule booleane e cosa ottengono. Ogni volta che crei un gruppo booleano, verrà conteggiato come un singolo livello di forma con proprietà di riempimento e tratto.

Puoi trovare l’icona booleana con due quadrati sovrapposti nella barra superiore della tua interfaccia. Avrai quattro opzioni di formula dal menu a discesa quando fai clic su di esso.

Queste opzioni di formula includono:

• Selezione unione: questa opzione trasforma le forme selezionate in un gruppo booleano. Quando si utilizza Unione, i percorsi della sottoforma esterna formeranno il contorno della nuova forma personalizzata. Tuttavia, non includerà nessuno dei segmenti interni sovrapposti.
• Sottrai selezione: è utile considerare che questa opzione è l’opposto della selezione dell’unione. Rimuove l’intera area di una forma dalla forma base. Ciò lascia visibile solo lo strato inferiore.
• Selezione intersecata: con la selezione intersecata, gli utenti possono creare una forma personalizzata costituita solo dai segmenti sovrapposti delle forme o dei sottolivelli originali.
• Escludi selezione: le funzioni di esclusione sono l’opposto dell’opzione di gruppo booleano di intersezione. Usandolo ti darà una forma personalizzata dalle parti non sovrapposte delle forme originali.

Ricorda che dovrai selezionare due o più forme prima di poter utilizzare efficacemente l’opzione booleana dal menu in alto. Questo perché Boolean combina solo più livelli di forma in un’unica forma personalizzata e complessa.

Utilizzo della proprietà di scambio di istanze Figma

Quando Figma annunciò l’aggiornamento delle proprietà dei componenti nel 2022, la selezione booleana era solo una delle molteplici nuove funzionalità disponibili. Lo scopo principale dell’aggiornamento dei componenti è quello di aiutarti a creare modelli di variazione in modo efficace anziché scavare tra opzioni fuori mano.

Sebbene Boolean sia una parte importante, gli utenti possono anche utilizzare la proprietà di scambio dell’istanza. Ecco come farlo:

1. Seleziona un elemento del tuo design.

   

2. Passare al menu di scambio istanza sul lato destro dell’interfaccia e fare clic su di esso. L’icona ha un diamante con una freccia sopra.

   

3. Dai un nome alla proprietà, come “icona” nel menu a comparsa, e imposta il valore, ad esempio, su un segno di spunta.

   

4. Seleziona “Crea proprietà”. Figma contrassegnerà quindi la proprietà del componente in cui si trovava originariamente il menu di scambio.

   

5. Crea una copia del tuo progetto selezionandolo e utilizzando il comando CTRL + C. Quindi, imposta le istanze una accanto all’altra.

   

6. Selezionare una nuova icona dal menu delle proprietà del componente contrassegnato facendo clic su di essa. Ciò modificherà automaticamente l’elemento sull’istanza.

La funzione di scambio di istanze è tutta una questione di comodità. Utilizzando l’opzione di scambio delle istanze, semplificherai il processo di progettazione alternando rapidamente varianti (istanze) affiancate.

Utilizzo dell’opzione Proprietà testo per modifiche semplici dell’istanza

Supponiamo che tu stia progettando un pulsante di invito all’azione per una pagina di destinazione. Hai due varianti affiancate e hai utilizzato la proprietà di scambio di istanze per visualizzare icone diverse. Tuttavia, la formulazione è un altro elemento da considerare.

Di solito, dovresti sfogliare la sezione dei livelli per completare il processo. Con la proprietà del componente testo, puoi invece visualizzarla e modificarla nella barra laterale. Ecco come utilizzare la funzionalità della proprietà del testo a tuo vantaggio:

1. Seleziona l’elemento di testo sul tuo disegno.

   

2. Assegna al tuo elemento un nome come “testo” e il valore “pulsante” prima di fare clic su “Crea proprietà”.
3. Potrai quindi modificare il testo e sperimentare le parole per il tuo invito all’azione.

La proprietà text è comoda da usare insieme allo scambio di istanze e alle opzioni booleane.

Come utilizzare le proprietà delle varianti su Figma

Con i nuovi aggiornamenti dei componenti su Figma, puoi creare più varianti e controllarle tutte dalla barra laterale destra. Ciò ti aiuterà a modificare il testo e a scambiare le icone in modo più efficiente. Puoi anche controllare altri aspetti del design della tua variante. Vediamo come fare:

1. Seleziona il tuo design e fai clic su “Aggiungi variante” nella barra in alto. Tieni premuto il tasto sinistro, fai clic sul tuo disegno e trascina la variante proprio accanto ad esso.

   

2. Noterai come apparirà la proprietà della seconda variante nella barra laterale destra. Rietichetta la proprietà su “pulsante” e il valore accanto ad essa su “rosso”.

   

3. Queste proprietà ora etichetteranno la tua variante. Se selezioni il design originale, noterai che il valore viene riportato a “predefinito”.

   

Domande frequenti

Posso creare loghi utilizzando l’opzione booleana?

Tecnicamente, la proprietà booleana consente di combinare più forme utilizzando i relativi percorsi. Sebbene questo possa essere un modo per creare loghi semplici, le opzioni sono limitate a forme semplici come le ellissi. Invece, utilizzare lo strumento penna per cose come la creazione di un logo è la soluzione migliore. Puoi comunque utilizzare gli aggiornamenti degli altri componenti per semplificare il processo di stratificazione.

Posso cambiare il carattere utilizzando l’opzione della proprietà del componente testo?

Sfortunatamente no. La proprietà del componente testo consente di modificare il testo anziché il carattere. Tuttavia, puoi comunque selezionare il testo e trovare il carattere appropriato tramite la barra laterale destra.

Quali sono alcune istanze di progettazione in cui dovrò utilizzare le proprietà dei componenti di cui sopra?

Non è necessario utilizzare le proprietà dei componenti per le varianti. Tuttavia, rende il processo di progettazione molto più semplice e veloce. Esempi sono i pulsanti che richiedono colori diversi, principalmente simili con un solo cambiamento di componente, o piccole varianti della forma della pagina di destinazione. Sono utili anche per creare due design e scegliere quello migliore.

Semplifica il tuo processo di progettazione con le proprietà dei componenti su Figma

Con opzioni come Booleano, puoi creare nuove forme personalizzate da una combinazione di quelle vecchie. Questo viene fatto tramite la barra laterale superiore con quattro opzioni di formula. Questi includono unione, sottrazione, intersezione ed esclusione. Allo stesso modo, puoi utilizzare altre opzioni di proprietà del componente, come la proprietà del testo e lo scambio di istanze. In questo modo è semplice creare varianti con componenti diversi. In definitiva, l’utilizzo delle proprietà dei componenti aiuta a semplificare il processo di progettazione.

Quali forme complesse hai realizzato utilizzando l’opzione booleana? Hai trovato facili da usare anche le opzioni delle proprietà del componente? Fatecelo sapere nella sezione commenti qui sotto.