Come creare un componente con stile in Framer X

Ti faccio vedere come installare componenti in stile per il tuo progetto Framer X e come creare un componente Button di base.

L'articolo originale è stato pubblicato su zauberware.com

SÌ, Framer X sembra essere il primo strumento di progettazione, che integra perfettamente un framework come React. Va bene, c'è sempre spazio per miglioramenti, ma funziona e ci sono alcune belle funzionalità su questo argomento annunciate dai proprietari del prodotto @FramerX.

Framer X chiama un componente React un "componente codice" e sono scritti in Typescript. Non aver paura di Typescript se non ci sei abituato. Segui la traccia in questo tutorial e vedrai quanto è semplice scrivere un componente di codice.

Anche l'uso di librerie esterne come componenti con stile funziona! In questo how-to creeremo un componente Button in Framer X usando componenti in stile.

Se non hai mai sentito parlare di componenti con stile prima di raccomandarti di leggere i loro documenti. È davvero fantastico. Se sei nuovo a reagire, allora dovresti fare prima un corso di reazione di base.

5 semplici passaggi per creare un componente con stile in Framer X:

  1. Crea un nuovo componente di codice
  2. Installa componenti con stile
  3. Imposta un pulsante
  4. Crea varianti del pulsante
  5. Aggiungi i controlli delle proprietà di Framer X.

Cominciamo!

1. Creare un nuovo componente di codice

Crea un nuovo progetto in framer e vai alla scheda del componente.

Fai clic su nuovo, seleziona "Codice" e inserisci un titolo, ad es. "Pulsante". L'editor preferito dovrebbe aprire un file Button.tsx.

2. Installare i componenti con stile

Un progetto Framer X è un progetto npm, quindi possiamo aggiungere dipendenze come per ogni altra applicazione.

Il tuo file di progetto .framerx non è altro che un file zip e se apri un file ne contiene una copia nel percorso di salvataggio automatico del Mac.

Per aprire il percorso del progetto, fare clic su File> Mostra cartella progetto. Questo aprirà una finestra del Finder con il tuo progetto.

Scopri il percorso del tuo progetto. Sarà qualcosa del genere:

~ / Library / Autosave \ Information / Framer-833DA362-6D23-43F9-A719-06A1753E37C9 / container

Apri il terminale e cambia la directory con:

$ cd ~ / Library / Autosave \ Information / Framer-833DA362-6D23-43F9-A719-06A1753E37C9 / container

Il comando cd significa cambia directory e ~ è il percorso della home directory degli utenti.

Se fai fatica a trovare la strada giusta per il tuo progetto:

  1. Fare clic con il tasto destro su package.json> Ottieni informazioni.
  2. Copia il percorso.
  3. Prestare attenzione alle "Informazioni sul salvataggio automatico" copiate. Devi cambiarlo in "Salvataggio automatico \ Informazioni", perché nel Terminale non hai uno spazio vuoto.

Se ti trovi nella cartella del progetto, possiamo installare il pacchetto npm in stile componenti per il tuo progetto:

$ npm installa componenti con stile

Torna al tuo editor dove hai aperto il file Button.tsx e aggiungi la seguente dichiarazione di importazione in alto:

importazione in stile da "componenti in stile"

Il pulsante ora dovrebbe funzionare con componenti con stile. Ma non abbiamo impostato alcun elemento o stile. Andiamo al passaggio 3.

3. Imposta un pulsante

Rimuoviamo nella riga 5 tutti gli elementi delle proprietà CSS perché vogliamo sostituirli con un componente con stile.

Aggiungi un tag pulsante in stile base con un po 'di stile:

const StyledButton = styled.button`
  imbottitura: 20px;
  bordo-raggio: 10px;
  bordo: 0;
  dimensione carattere: 2em;
`

Se ti chiedi della `` sintassi: questo si chiama Template Literals e questo è un altro modo per gestire stringhe o template dinamici. Fornisce una soluzione più semplice, ad es. per concatenare stringa e variabili. Se ti piace saperne di più sulle stringhe e sui letterali dei template in JavaScript, posso consigliare di leggere questo articolo.

Usa il tuo StyledButton nel metodo di rendering del componente:

render () {
  return  {this.props.text} 
}

Il componente dovrebbe ora apparire come segue:

import * as React da "reagire"
importare {PropertyControls, ControlType} da "framer"
importazione in stile da "componenti in stile"
const StyledButton = styled.button`
  imbottitura: 20px;
  bordo-raggio: 10px;
  bordo: 0; dimensione carattere: 2em;
`
// Definisce il tipo di proprietà
interfaccia Props {
  testo: stringa;
}
La classe di esportazione Button estende React.Component  {
  // Imposta le proprietà predefinite
  static defaultProps = {
    testo: "Ciao mondo!"
  }
  // Articoli visualizzati nel pannello delle proprietà
  proprietà staticheControl: PropertyControls = {
    testo: {tipo: ControlType.String, titolo: "Testo"},
  }
  render () {
    return  {this.props.text} 
  }
}

4. Creare la variazione del pulsante

Usiamo i vantaggi dei componenti in stile e di Framer X. Che cosa ha ogni sistema di progettazione: Sì, un pulsante principale e uno secondario.

Aggiungiamo alcune variazioni per il nostro pulsante.

const StyledButton = styled.button`
  imbottitura: 20px;
  bordo-raggio: 10px;
  bordo: 0;
  dimensione carattere: 2em;
  $ {props => props.primary && css`
    colore bianco;
    colore di sfondo: verde;
  `}
  $ {props => props.secondary && css`
    colore bianco;
    colore di sfondo: blu;
  `}
`

css non trovato? Non preoccuparti, importiamolo dai componenti con stile:

import styled, {css} da "styled-Components"

Utilizzare la proprietà nel componente:

render () {
  return  {this.props.text} 
}
// o secondario
render () {
  return  {this.props.text} 
}

5. Aggiungi i controlli delle proprietà di Framer X.

La modifica della proprietà nel codice è un po 'invariata. Creiamo la possibilità di cambiare il tipo di pulsante in Framer X.

Aggiungi una nuova proprietà, ad es. "genere"

// Definisce il tipo di proprietà
interfaccia Props {
  testo: stringa;
  tipo: stringa;
}

Supponiamo di voler un pulsante primario predefinito:

// Imposta le proprietà predefinite
static defaultProps = {
  testo: "Hello World!",
  tipo: "primario",
}

Aggiungi un nuovo controllo proprietà per la nostra selezione del tipo. Stiamo usando ControlType.Enum per raggiungere il nostro obiettivo:

// Articoli visualizzati nel pannello delle proprietà
proprietà staticheControl: PropertyControls = {
  testo: {
     tipo: ControlType.String,
     titolo: "Testo"
   },
  genere: {
     tipo: ControlType.Enum,
    titolo: "Tipo",
    opzioni: ['primario', 'secondario'],
    optionTitles: ['Pulsante principale', 'Pulsante secondario']
   },
}

Se vai su Framer X dovresti vedere un'opzione selezionata per il tipo di pulsante.

Ma, bene, nulla sta cambiando, quando colpiamo la selezione. Ecco perché non abbiamo usato la proprietà type nel nostro componente.

Dobbiamo cambiare un po 'il codice. Per prima cosa vogliamo trasferire la proprietà al componente con stile.

render () {
  ritorno (
    
      {} This.props.text
    
  )
}

Nel nostro StyledButton ora possiamo decidere in base al "tipo" quale stile di pulsante vogliamo caricare:

$ {props => props.type == 'primary' && css`
  colore bianco;
  colore di sfondo: verde;
`}
$ {props => props.type == 'secondario' && css`
  colore bianco;
  colore di sfondo: blu;
`}

Congratulazioni! Provalo in Framer X!

Ora hai una conoscenza di base su come integrare una libreria di terze parti in Framer X e su come creare un componente di base con variazioni.

Grazie per aver letto! Sono Simon Franzen, co-fondatore di zauberware. Sentiti libero di connetterti con me via Twitter.

Puoi trovare le fonti finali di questo how-to nella mia sintesi: https://gist.github.com/simonfranzen/f46ff1a8b24356f6729d11a6ca8b968b