react figma ui Téléchargement - react figma ui Code source Télécharger

React figma ui

À propos

React Implémentation pour Figma-Plugin-D par Tom Lowry

Démo

Playground - Jouez avec la bibliothèque dans le livre de contes

Alternatives

React-Figma-Plugin-DS par Alexandr Tovmach
Composants stylisés par Figma par Jared
Figma-ui-components par LessMess
Kit d'interface utilisateur de Figma React par Liam Martens

Contenu

Comment installer
Composants
- Bouton
- Cocher
- Divulgation
- Icône
- Bouton d'icône
- Saisir
- Étiquettes et sections
- Pointe intégrée
- Bouton radio
- Sélectionner le menu
- Changer
- Textarea
- Taper

Comment installer

Tout d'abord, installez la bibliothèque dans votre projet par NPM:

$ npm install react-figma-ui

Ou fil:

$ yarn add react-figma-ui

Composants

Bouton

Pour utiliser le bouton, utilisez le composant suivant. Chaque bouton a une option destructrice. Les boutons tertiaires sont stylés comme des hyperliens.

 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 >

Options disponibles

Accessoires d'élément de bouton HTML et paramètres dédiés

Paramot	Description
`tint`	Style d'affichage pour le bouton: primaire (rempli), secondaire (décrit), tertiaire (hyperlien)
`destructive`	Ajouter une variante de destructrice rouge pour des actions telles que la suppression de quelque chose

Cocher

Pour utiliser la case, utilisez le composant suivant. N'oubliez pas que chaque case devrait obtenir un identifiant unique.

 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 >

Options disponibles

Accessoires d'élément d'entrée HTML et paramètres dédiés

Paramot	Description
`containerProps`	Accessoires pour le conteneur à cocher
`labelProps`	Accessoires pour l'élément d'étiquette

Divulgation

Pour utiliser un panneau de divulgation, vous devez utiliser le composant suivant.

 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 }
    />
  ) }
/>

Options disponibles

Divulgation

HTML UL Élément accessoires et paramètres dédiés

Paramot	Description
`items`	Tableau avec des articles de divulgation
`render`	Rendre des accessoires pour DisclosureItem

Divulgationitem

Html Li Element accessoires et paramètres dédiés

Paramot	Description
`heading`	Valeur du texte
`content`	Valeur texte de contenu
`section`	Étiquette de style comme une rubrique
`expanded`	Ajouter cette option pour que l'élément agrandie en charge
`labelProps`	Accessoires pour l'élément d'étiquette
`contentProps`	Accessoires pour l'élément de contenu

Icône

Pour utiliser l'icône, utilisez le composant suivant. Appliquez le nom d'icône approprié pour sélectionner l'élément que vous souhaitez utiliser, vous pouvez également ajouter une option pour modifier la couleur, ou même faire tourner l'icône. Vous pouvez également spécifier aucun nom d'icône pour utiliser un caractère de texte comme icône (par exemple, comme trouvé dans les entrées d'icône Largeur + Height sur Figma)

 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>

Options disponibles

HTML Div Element accessoires et paramètres dédiés

Paramot	Description
`iconName`	Spécifiez l'icône à utiliser (par exemple: `alert` , `draft` , `settings` )
`spin`	Fait tourner l'icône dans une boucle sans fin (par exemple: le chargeur utilisé avec l'icône `spinner` )
`colorName` *	Passez le nom de toute couleur figma var à cet accessoire (par exemple: `blue` , `black3` )

* Couleurs acceptées: blue , purple , purple4 , hot-pink , green , red , yellow , black , black8 , black3 , white , white8 , white4

Aperçu des icônes disponibles ici

Bouton d'icône

Le bouton ICON est essentiellement un wrapper pour le composant icône.

 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 / >

Options disponibles

HTML Div Element accessoires et paramètres dédiés

Paramot	Description
`selected`	Ajoutez cette option pour avoir un style sélectionné pour le bouton
`iconProps`	Accessoires pour la composante icône

Saisir

Pour utiliser l'entrée, utilisez le composant suivant.

 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' } } / >

Options disponibles

Accessoires d'élément d'entrée HTML et paramètres dédiés

Paramot	Description
`containerProps`	Accessoires pour le conteneur de commutation
`iconProps`	Accessoires pour la composante icône

Étiquettes et sections

Pour utiliser une étiquette ou une section, utilisez les composants suivants.

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

// Label
< Label > Label </ Label >

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

Options disponibles

Accessoires d'élément div html

Pointe intégrée

Pour créer une astuce d'intégration, utilisez le composant suivant.

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

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

Options disponibles

HTML Div Element accessoires et paramètres dédiés

Paramot	Description
`containerProps`	Accessoires pour le conteneur de commutation
`iconProps`	Accessoires pour la composante icône

Bouton radio

Pour créer un bouton radio, utilisez le composant suivant. N'oubliez pas que chaque groupe de boutons radio doit partager le même nom afin qu'ils soient liés les uns aux autres. Chaque bouton doit avoir un ID unique afin que son étiquette lui soit associée et reste à faire partie de la zone de coup cliquable.

 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 >

Options disponibles

Accessoires d'élément d'entrée HTML et paramètres dédiés

Paramot	Description
`containerProps`	Accessoires pour le conteneur radio
`labelProps`	Accessoires pour l'élément d'étiquette

Sélectionner le menu

Pour créer un menu sélectionné, utilisez les composants suivants.

Le menu Sélectionnez s'ouvrir et positionnera le menu vers l'objet sélectionné. S'il n'y a pas de pièce verticale à l'intérieur de l'IFRAME de votre plugin, la position du menu sera déplacée pour s'assurer qu'elle s'inscrit à l'intérieur de l'IFRAME. Si vous avez un menu sélectionné avec trop d'options pour s'adapter à l'IFRAME, le menu fait défiler verticalement.

 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 >
    ) }
  />
) ;

Options disponibles

SelectMenu

HTML SELECT Element accessoires et paramètres dédiés

Paramot	Description
`options`	Tableau avec des options de menu sélectionnées
`render`	Rendre des accessoires pour SelectMenuoption

SelectMenuoption

Accessoires d'élément d'option HTML

Changer

Pour utiliser le commutateur, utilisez le composant suivant. N'oubliez pas que chaque commutateur doit obtenir un ID unique qui est référencé dans l'étiquette. Cela garantit que l'interrupteur et l'étiquette entière sont cliquables.

 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 >

Options disponibles

Accessoires d'élément d'entrée HTML et paramètres dédiés

Paramot	Description
`containerProps`	Accessoires pour le conteneur de commutation
`labelProps`	Accessoires pour l'élément d'étiquette

Textarea

Pour utiliser TextArea, utilisez le composant suivant.

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

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

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

Options disponibles

HTML TextArea Element accessoires

Taper

Pour utiliser la typographie qui est stylée comme dans l'interface utilisateur de Figma, utilisez le composant suivant plus des options supplémentaires pour modifier la taille, le poids et le service de lettres optimisé pour des applications positives (texte sombre sur fond clair) et négatifs (texte léger sur fond sombre).

 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 >

Options disponibles

HTML Div Element accessoires et paramètres dédiés

Paramot	Description
`size`	Taille de la police: petit - 12px, grand - 13px, xlarge - 14px
`weight`	Poids de la police: moyen, audacieux
`inverse`	Application inversée (négative) où le texte léger est sur fond sombre avec une augmentation des lettres

Par défaut: taille de police 11px, poids normal, application positive

Licence

Développer