react figma ui Download - react figma ui UI Quellcode Download

Reagieren Sie Figma UI

Um

Reaktierung der Implementierung für Figma-Plugin-Ds von Tom Lowry

Demo

Spielplatz - Spielen Sie mit der Bibliothek in Storybook

Alternativen

React-Figma-Plugin-Ds von Alexandr Tovmach
Komponenten im Figma -Stil von Jared
Figma-UI-Komponenten von LessMess
Figma React UI Kit von Liam Martens

Inhalt

So installieren
Komponenten
- Taste
- Kontrollkästchen
- Offenlegung
- Symbol
- Symbolknopf
- Eingang
- Etiketten und Abschnitte
- Tipps für Bord
- Optionsknopf
- Wählen Sie Menü
- Schalten
- Textbereich
- Typ

So installieren

Installieren Sie zunächst die Bibliothek in Ihrem Projekt von NPM:

$ npm install react-figma-ui

Oder Garn:

$ yarn add react-figma-ui

Komponenten

Taste

Verwenden Sie die folgende Komponente, um die Taste zu verwenden. Jede Taste hat eine zerstörerische Option. Tertiärschaltflächen werden wie Hyperlinks bezeichnet.

 import { Button } from 'react-figma-ui' ;

// Primary
< Button tint = "primary" > Label </ Button >
< Button tint = "primary" destructive > Label < / Button>
< Button tint = "primary" disabled > Label </ Button >

// Secondary
< Button tint = "secondary" > Label < / Button>
< Button tint = "secondary" destructive > Label </ Button >
< Button tint = "secondary" disabled > Label < / Button>

// Tertiary (Hyperlink style button)
< Button tint = "tertiary" > Label </ Button >
< Button tint = "tertiary" destructive > Label < / Button>
< Button tint = "tertiary" disabled > Label </ Button >

Verfügbare Optionen

HTML -Taste -Elemente -Requisiten und dedizierte Parameter

Param	Beschreibung
`tint`	Anzeigestil für Taste: Primär (gefüllt), sekundär (skizziert), tertiär (hyperlink)
`destructive`	Fügen Sie rote destruktive Variante für Aktionen wie das Löschen von etwas hinzu

Kontrollkästchen

Verwenden Sie die folgende Komponente, um das Kontrollkästchen zu verwenden. Denken Sie daran, dass jedes Kontrollkästchen eine eindeutige ID erhalten sollte.

 import { Checkbox } from 'react-figma-ui' ;

// Checkbox unchecked
< Checkbox id = "uniqueId" > Label </ Checkbox >

// Checkbox checked
< Checkbox id = "uniqueId" checked > Label < / Checkbox>

// Checkbox disabled
< Checkbox id = "uniqueId" disabled > Label </ Checkbox >

Verfügbare Optionen

HTML -Eingabeelement -Requisiten und dedizierte Parameter

Param	Beschreibung
`containerProps`	Requisiten für Checkbox Container
`labelProps`	Requisiten für das Etikettelement

Offenlegung

Um ein Offenlegungsfeld zu verwenden, müssen Sie die folgende Komponente verwenden.

 import { Disclosure , DisclosureItem } from 'react-figma-ui' ;

// Example items
const items = [
  { heading : 'Heading 1' , content : 'Content 1' , id : 1 } ,
  { heading : 'Heading 2' , content : 'Content 2' , id : 2 } ,
  { heading : 'Heading 3' , content : 'Content 3' , id : 3 } ,
] ;

< Disclosure
  items = { items }
  render = { ( { heading , content , id } , index ) => (
    < DisclosureItem
      heading = { heading }
      content = { content }
      section = { index % 2 === 0 }
      expanded = { index % 2 === 1 }
      key = { id }
    />
  ) }
/>

Verfügbare Optionen

Offenlegung

HTML UL -Element -Requisiten und dedizierte Parameter

Param	Beschreibung
`items`	Array mit Offenlegungsgegenständen
`render`	Requisiten für OffenlegungInItem rendern

OffenlegungInItem

HTML LI -Element -Requisiten und dedizierte Parameter

Param	Beschreibung
`heading`	Überschrift Textwert
`content`	Inhaltstextwert
`section`	Stiletikett wie eine Überschrift
`expanded`	Fügen Sie diese Option hinzu, um das Element auf dem Last erweitert zu haben
`labelProps`	Requisiten für das Etikettelement
`contentProps`	Requisiten für Inhaltselemente

Symbol

Verwenden Sie die folgende Komponente, um das Symbol zu verwenden. Wenden Sie den entsprechenden Symbolnamen an, um das Element auszuwählen, das Sie verwenden möchten. Sie können auch keinen Symbolnamen angeben, um ein Textzeichen als Symbol zu verwenden (z. B. wie in den Icon -Eingängen der Breite + Höhe in Figma zu finden).

 import { Icon } from 'react-figma-ui' ;

// Icon
< Icon iconName = "theme" />

// Icon with blue colorName to change color
< Icon iconName = "theme" colorName = "blue" / >

// Spinner Icon with spinning animation
< Icon iconName = "spinner" spin />

// Text Icon
< Icon > W < / Icon>

Verfügbare Optionen

HTML DIV -Element -Requisiten und dedizierte Parameter

Param	Beschreibung
`iconName`	Geben Sie an, welches Symbol verwendet werden soll (z. B. `alert` , `draft` , `settings` ).
`spin`	Bewirkt, dass das Symbol in einer endlosen Schleife dreht (z. B. mit `spinner` verwendet.
`colorName` *	Übergeben Sie den Namen einer Figma -Farbvar an diese Requisite (z. B. `blue` , `black3` ).

*Farben akzeptiert: blue , purple , purple4 , hot-pink , green , red , yellow , black , black8 , black3 , white , white8 , white4

Vorschau verfügbare Symbole hier

Symbolknopf

Die Symboltaste ist im Wesentlichen ein Wrapper für die Symbolkomponente.

 import { IconButton } from 'react-figma-ui' ;

// Icon button with a blend icon
< IconButton iconProps = { { iconName : 'blend' } } />

// Icon button with selected option
< IconButton iconProps = { { iconName : 'blend' } } selected / >

Verfügbare Optionen

HTML DIV -Element -Requisiten und dedizierte Parameter

Param	Beschreibung
`selected`	Fügen Sie diese Option hinzu, um einen ausgewählten Stil für die Schaltfläche zu haben
`iconProps`	Requisiten für die Symbolkomponente

Eingang

Verwenden Sie die folgende Komponente, um die Eingabe zu verwenden.

 import { Input } from 'react-figma-ui' ;

// Input with placeholder
< Input placeholder = "Placeholder" />

// Input with initial value
< Input value = "Initial value" / >

// Disabled input
< Input value = "Initial value" disabled />

// Input with icon
< Input value = "Value" iconProps = { { iconName : 'angle' } } / >

Verfügbare Optionen

HTML -Eingabeelement -Requisiten und dedizierte Parameter

Param	Beschreibung
`containerProps`	Requisiten für Schalterbehälter
`iconProps`	Requisiten für die Symbolkomponente

Etiketten und Abschnitte

Verwenden Sie die folgenden Komponenten, um eine Beschriftung oder einen Abschnitt zu verwenden.

 import { Label , SectionTitle } from 'react-figma-ui' ;

// Label
< Label > Label </ Label >

// Section title
< SectionTitle > Section title < / SectionTitle>

Verfügbare Optionen

HTML DIV -Element -Requisiten

Tipps für Bord

Verwenden Sie die folgende Komponente, um einen Onboarding -Tipp zu erstellen.

 import { OnboardingTip } from 'react-figma-ui' ;

< OnboardingTip iconProps = { { iconName : 'styles' } } >
  Onboarding tip goes here.
</ OnboardingTip >

Verfügbare Optionen

HTML DIV -Element -Requisiten und dedizierte Parameter

Param	Beschreibung
`containerProps`	Requisiten für Schalterbehälter
`iconProps`	Requisiten für die Symbolkomponente

Optionsknopf

Verwenden Sie die folgende Komponente, um ein Optionsfeld zu erstellen. Denken Sie daran, dass jede Gruppe von Optionsschaltflächen denselben Namen so teilen muss, dass sie miteinander verwandt sind. Jede Taste sollte eine eindeutige ID haben, damit ihr Etikett damit verbunden ist und Teil des klickbaren Hit -Bereichs bleibt.

 import { Radio } from 'react-figma-ui' ;

// Radio button
< Radio value = "Value" id = "radioButton1" name = "radioGroup" > Radio button </ Radio >

// Radio button checked
< Radio value = "Value" id = "radioButton2" name = "radioGroup" checked > Radio button < / Radio>

// Radio button disabled
< Radio value = "Value" id = "radioButton3" name = "radioGroup" disabled > Radio button </ Radio >

Verfügbare Optionen

HTML -Eingabeelement -Requisiten und dedizierte Parameter

Param	Beschreibung
`containerProps`	Requisiten für Funkbehälter
`labelProps`	Requisiten für das Etikettelement

Wählen Sie Menü

Um ein Menü zu erstellen, verwenden Sie die folgenden Komponenten.

Das Menü auswählen wird geöffnet und positioniert das Menü zum ausgewählten Objekt. Wenn sich kein vertikaler Raum im Iframe Ihres Plugins befindet, wird die Position des Menüs bewegt, um sicherzustellen, dass es in den Iframe passt. Wenn Sie über ein Menü mit zu vielen Optionen ausgewählt werden, um sie in den IFRame zu passen, wird das Menü vertikal scrollen.

 import { SelectMenu , SelectMenuOption } from 'react-figma-ui' ;

// Example options
const options = [
  { value : 1 , label : 'Option 1' } ,
  { value : 2 , label : 'Option 2' } ,
  { value : 3 , label : 'Option 3' } ,
] ;

( ) => (
  < SelectMenu
    options = { options }
    render = { ( { value , label } ) => (
      < SelectMenuOption value = { value } key = { value } >
        { label }
      </ SelectMenuOption >
    ) }
  />
) ;

Verfügbare Optionen

SelectMenu

HTML Wählen Sie Element -Requisiten und dedizierte Params aus

Param	Beschreibung
`options`	Array mit Menüoptionen auswählen
`render`	Requisiten für ausgewählteMenuOption rendern

SelectMenuOption

HTML -Optionselement -Requisiten

Schalten

Verwenden Sie die folgende Komponente, um den Switch zu verwenden. Denken Sie daran, dass jeder Schalter eine eindeutige ID erhalten sollte, auf die im Etikett verwiesen wird. Dies stellt sicher, dass der Schalter und das gesamte Etikett anklickbar sind.

 import { Switch } from 'react-figma-ui' ;

// Switch
< Switch id = "uniqueId" > Label </ Switch >

// Switch checked
< Switch id = "uniqueId" checked > Label < / Switch>

// Switch disabled
< Switch id = "uniqueId" disabled > Label </ Switch >

Verfügbare Optionen

HTML -Eingabeelement -Requisiten und dedizierte Parameter

Param	Beschreibung
`containerProps`	Requisiten für Schalterbehälter
`labelProps`	Requisiten für das Etikettelement

Textbereich

Verwenden Sie die folgende Komponente, um die TextArea zu verwenden.

 import { Textarea } from 'react-figma-ui' ;

// Textarea
< Textarea value = "Initial value" rows = { 2 } />

// Textarea disabled
< Textarea value = "Initial value" rows = { 2 } disabled / >

Verfügbare Optionen

HTML TextArea -Element -Requisiten

Typ

Um die Typografie zu verwenden, die wie in der Figma -Benutzeroberfläche so gestaltet ist, verwenden Sie die folgenden Komponenten sowie zusätzliche Optionen, um die Größe, das Gewicht und die Buchstabenspazierungen für positiven (dunklen Text auf hellem Hintergrund) und negativer (hellem Text auf dunklem Hintergrund) zu ändern.

 import { Type } from 'react-figma-ui' ;

< Type > UI11, size: xsmall (default) weight: normal, positive </ Type >

< Type > UI13 , size : large , weight : bold , positive < / Type>

< Type size = "large" weight = "medium" inverse > UI12, size: large, weight: medium, negative </ Type >

Verfügbare Optionen

HTML DIV -Element -Requisiten und dedizierte Parameter

Param	Beschreibung
`size`	Schriftgröße: klein - 12px, groß - 13px, xlarge - 14px
`weight`	Schriftgewicht: Medium, fett
`inverse`	Invertierte (negative) Anwendung, bei der heller Text auf dunklem Hintergrund mit erhöhter Buchstaben steht

Standardeinstellungen: Schriftgröße 11px, normales Gewicht, positive Anwendung

Lizenz

Expandieren