How-To: ReactJs styled-component mit Framer X

Ja, Framer X scheint eines der ersten Design-Werkzeuge zu sein, welches perfekt mit React zusammen funktioniert. Natürlich ist immer Raum für Verbesserungen da, aber es funktioniert und die Produktentwickler von @FramerX haben bereits angekündigt, dass es in dieser Richtung weitere neue Funktionen geben wird. Wir dürfen also gespannt sein.

Framer X nennt eine React Komponente “Code Component” und sie sind geschrieben mit Typescript. Du brauchst keine Angst vor Typescript haben, wenn Du vorher noch nie damit gearbeitet hast. Folge einfach den Schritten in diesem Tutorial und Du wirst sehen wie einfach es ist eine Code-Komponente mit Framer X zu erstellen.

Die Benutzung von externen Bibliotheken, wie z.B. styled-components, in Framer X funktioniert auch! In dieser Anleitung werden wir zusammen einen Button erstellen, der styled components benutzt.

Falls Du vorher noch niemals etwas von styled components gehört hast, dann empfehle ich Dir in die Dokumentation zu schauen. Die ist wirklich sehr gut! Und wenn React noch Neuland für Dich ist, empfehle ich vor diesem Tutorial ein Anfänger Kurs zu machen.

Dieses Tutorial beinhaltet folgende Schritte:

1. Eine Code-Komponente in Framer erstellen
2. styled-components installieren
3. Einen Button erstellen
4. Variationen für Button anlegen
5. Eingabemasken für Framer X mit "Property Controls"

1. Eine Code-Komponente in Framer erstellen

Erstelle ein neues Projekt in Framer X und gehe zum Tab "Komponenten".

Klicke auf "Neu", wähle "Code" aus und gebe der Komponente einen Namen, z.B. ”Button”. Dein Standard Editor sollte automatisch die Datei Button.tsx öffnen.

2. styled components installieren

Ein Framer X Projekt ist ein npm Projekt, also können wir hier genau so neue Bibliotheken installieren, wie bei jeder anderen npm Anwendung.

Deine .framerx Projektdatei ist auch nichts weiter als eine ZIP-Datei und wenn Du sie mit Framer X öffnest, dann wird der Inhalt der ZIP in den Mac Autosave Pfad abgelegt.

Um das Projektverzeichnis zu finden klicke auf File > Show Project Folder. Das öffnet ein Finder-Fenster mit dem Projekt.

Finde jetzt den genauen Pfad heraus. Der Pfad sieht ungefähr aus wie:

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

Öffne ein Terminal-Fenster und wechsele in das Projektverzeichnis:

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

Der Befehlt cd bedeutet Verzeichnis wechseln, und ~ ist der Pfad zu Deinem Benutzer Home-Verzeichnis.

Falls Du Probleme hast, den richtigen Pfad herauszufinden:

1. Rechtsklick auf z.B. package.json > Informationen.
2. Pfad markieren und kopieren mit CMD-C.
3. Pass auf, wenn du “Autosave Information” kopierst. Du musst es ändern in  “Autosave\ Information", da das Terminal keine Leerzeichen kennt. (" " wird "\ ")

Wenn Du Dich jetzt im Projektverzeichnis befindest, dann können wir styled components installieren:

$ npm install styled-components

Gehe zurück zu Deinem Editor, in dem du Button.tsx noch geöffnet hast und füge die folgende Import-Deklaration oben hinzu.

import styled from 'styled-components'

Dein Button sollte jetzt mit styled components funktionieren. Aber wir haben ja noch gar kein Styling aufgesetzt. Das machen wir in Schritt 3.

3. Einen Button erstellen

Als erstes entfernen wir in Zeile 5 alles was mit CSS-Properties zu tun hat, denn das wollen wir ja durch styled components ersetzen.

Jetzt erstellen wir einen neuen StyledButton:

const StyledButton = styled.button`  
  padding: 20px;
  border-radius: 10px;
  border: 0;
  font-size: 2em;
`

Falls Du dich über die ` ` Syntax wunderst: Das nennt man Template Literals und ist ein alternativer Weg um dynamische String oder Templates zu erstellen. Es ist eine einfache Lösung um z.B. Variables mit Zeichenketten zu verschmelzen. Wenn Du mehr über Template Literals erfahren möchtest, dann kann ich dir diesen Artikel empfehlen.

Den angelegten StyledButton benutzen wir jetzt in der render Methode:

render() {  
  return <StyledButton>{this.props.text}</StyledButton>
}

Deine Komponente sollte nun folgendermaßen aussehen:

import * as React from "react"
import { PropertyControls, ControlType } from "framer"
import styled from "styled-components"
const StyledButton = styled.button`  
  padding: 20px;
  border-radius: 10px;
  border: 0;  font-size: 2em;
`
// Define type of property
interface Props {
  text: string;
}
export class Button extends React.Component<Props> {
  // Set default properties  
  static defaultProps = { 
    text: "Hello World!"  
  }
  // Items shown in property panel  
  static propertyControls: PropertyControls = {
    text: { type: ControlType.String, title: "Text" },  
  }
  render() {
    return <StyledButton>{this.props.text}</StyledButton>
  }
}

4. Variationen für Buttons anlegen 

Lasst uns die Vorteile von styled-components und Framer X nutzen. Was jedes Design-System besetzt: Genau, ein Primär- und einen Sekundär-Button.

const StyledButton = styled.button`
  padding: 20px;
  border-radius: 10px;
  border: 0;
  font-size: 2em;
  ${props => props.primary && css`
    color: white;
    background-color: green;
  `}
  ${props => props.secondary && css`
    color: white;
    background-color: blue;
  `}
`

css konnte nicht gefunden werden? Keine Bange, wir importieren den Helfer über styled components:

import styled, { css } from "styled-components"

Jetzt können wir die Variationen in dem StyledButton tag benutzen:

render() {
  return <StyledButton primary>{this.props.text}</StyledButton>
}
// oder secondary
render() {
  return <StyledButton secondary>{this.props.text}</StyledButton>
}

5. Eingabemasken für Framer X mit "Property Controls"

Wenn wir jedes Mal im Code unsere Variation setzen müssen, dann ist das natürlich Unsinn. Das Ziel ist direkt in Framer X die Variation selektierbar zu machen.

Dafür geben wir dem Button eine neue Property "type".

// Define type of property
interface Props {
  text: string;
  type: string;
}

Den Standardwert setzen wir auf primary:

// Set default properties
static defaultProps = {
  text: "Hello World!",
  type: "primary",
}

Füge eine neue "Property Control" für "type" an. Dafür benutzen wir ControlType.Enum:

// Items shown in property panel
static propertyControls: PropertyControls = {
  text: {
     type: ControlType.String,
     title: "Text"
   },
  type: {
     type: ControlType.Enum,
    title: "Type",
    options: ['primary', 'secondary'],
    optionTitles: ['Primary Button', 'Secondary Button']
   },
}

Wenn Du zurück zu Framer X gehst solltest du jetzt eine Auswahl rechts in der Seitenleiste für den Button sehen.

Allerdings ändert sich jetzt noch nichts, wenn man Primary oder Secondary auswählt. Das kommt daher, weil wir noch nicht die Property "type" in der Komponente verwenden.

Wir müssen ein bisschen den Code anpassen. Als ersten übergeben wir "type" in der render Methode an den StyledButton.

render() {
  return (
    <StyledButton type={this.props.type}>
      {this.props.text}
    </StyledButton>
  )
}

In dem StyledButton können auf Basis der "type"-Property entscheiden, welches Styling geladen werden soll.

${props => props.type == 'primary' && css`
  color: white;
  background-color: green;
`}
${props => props.type == 'secondary' && css`
  color: white;
  background-color: blue;
`}

Herzlichen Glückwunsch! Probiere es aus in Framer X!

Jetzt hast du ein Basis-Verständnis wie man externe Bibliotheken in Framer X installiert und wie man eine einfache Komponente mit Variationen bauen kann.

Danke fürs Lesen! Ich heiße Simon Franzen, Co-Founder zauberware. Ich freue mich über Kontakt über Twitter.

Du findest den Code zu diesem Framer How-To in meinem gist: https://gist.github.com/simonfranzen/f46ff1a8b24356f6729d11a6ca8b968b