Descargar react figma ui - Descargar el código fuente de react figma ui

React Figma UI

Acerca de

Reaccionar la implementación para FIGMA-Plugin-DS por Tom Lowry

Manifestación

Planeground - Juega con la biblioteca en Storybook

Alternativas

React-figma-plugin-dds por Alexandr Tovmach
Componentes de estilo figma por Jared
Figma-UI componentes por menosMess
Kit de UI de reacción de Figma por Liam Martens

Contenido

Cómo instalar
Componentes
- Botón
- Caja
- Divulgación
- Icono
- Botón de icono
- Aporte
- Etiquetas y secciones
- Punta de incorporación
- Botón de radio
- Seleccionar menú
- Cambiar
- Textea
- Tipo

Cómo instalar

Primero, instale la biblioteca en su proyecto por NPM:

$ npm install react-figma-ui

O hilo:

$ yarn add react-figma-ui

Componentes

Botón

Para usar el botón, use el siguiente componente. Cada botón tiene una opción destructiva. Los botones terciarios tienen un estilo como hipervínculos.

 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 >

Opciones disponibles

Accesorios de elementos de botón HTML y parámetros dedicados

Parámetro	Descripción
`tint`	Estilo de visualización para el botón: primario (relleno), secundario (descrito), terciario (hipervínculo)
`destructive`	Agregue una variante destructiva roja para acciones como eliminar algo

Caja

Para usar la casilla de verificación, use el siguiente componente. Recuerde que cada casilla de verificación debe obtener una identificación única.

 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 >

Opciones disponibles

Accesorios de elementos de entrada HTML y parámetros dedicados

Parámetro	Descripción
`containerProps`	Propiedades para el contenedor de casilla de verificación
`labelProps`	Propiedades para el elemento de etiqueta

Divulgación

Para usar un panel de divulgación, debe usar el siguiente componente.

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

Opciones disponibles

Divulgación

Accesorios de elementos HTML UL y parámetros dedicados

Parámetro	Descripción
`items`	Matriz con elementos de divulgación
`render`	Representar accesorios para divulgación

Divulgación

Accesorios de elementos HTML Li y parámetros dedicados

Parámetro	Descripción
`heading`	Valor de texto de encabezado
`content`	Valor de texto de contenido
`section`	Etiqueta de estilo como un encabezado
`expanded`	Agregue esta opción para que el artículo se expandiera en la carga
`labelProps`	Propiedades para el elemento de etiqueta
`contentProps`	Propiedades para el elemento de contenido

Icono

Para usar el icono, use el siguiente componente. Aplique el nombre del icono apropiado para seleccionar el elemento que desea usar, también puede agregar la opción para cambiar el color o incluso girar el icono. También puede especificar el nombre del icono para usar un carácter de texto como un icono (por ejemplo, como se encuentra en las entradas de icono de ancho + altura en la 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>

Opciones disponibles

Accesorios de elementos Div HTML y parámetros dedicados

Parámetro	Descripción
`iconName`	Especifique qué icono usar (por ejemplo: `alert` , `draft` , `settings` )
`spin`	Hace que el icono gire en un bucle interminable (por ejemplo: cargador utilizado con icono `spinner` )
`colorName` *	Pase el nombre de cualquier color de figma var a este accesorio (por ejemplo: `blue` , `black3` )

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

Vista previa a los iconos disponibles aquí

Botón de icono

El botón de icono es esencialmente un envoltorio para el componente del icono.

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

Opciones disponibles

Accesorios de elementos Div HTML y parámetros dedicados

Parámetro	Descripción
`selected`	Agregue esta opción para tener un estilo seleccionado para el botón
`iconProps`	Propiedades para el componente de icono

Aporte

Para usar la entrada, use el siguiente componente.

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

Opciones disponibles

Accesorios de elementos de entrada HTML y parámetros dedicados

Parámetro	Descripción
`containerProps`	Propiedades para el contenedor de interruptor
`iconProps`	Propiedades para el componente de icono

Etiquetas y secciones

Para usar una etiqueta o sección, use los siguientes componentes.

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

// Label
< Label > Label </ Label >

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

Opciones disponibles

Accesorios de elementos HTML Div

Punta de incorporación

Para crear un consejo de incorporación, use el siguiente componente.

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

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

Opciones disponibles

Accesorios de elementos Div HTML y parámetros dedicados

Parámetro	Descripción
`containerProps`	Propiedades para el contenedor de interruptor
`iconProps`	Propiedades para el componente de icono

Botón de radio

Para crear un botón de radio, use el siguiente componente. Recuerde que cada grupo de botones de radio debe compartir el mismo nombre para que estén relacionados entre sí. Cada botón debe tener una ID única para que su etiqueta esté asociada con ella y permanezca parte del área de búsqueda de clicsable.

 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 >

Opciones disponibles

Accesorios de elementos de entrada HTML y parámetros dedicados

Parámetro	Descripción
`containerProps`	Accesorios para contenedor de radio
`labelProps`	Propiedades para el elemento de etiqueta

Seleccionar menú

Para crear un menú Seleccionar, use los siguientes componentes.

El menú Seleccionar se abrirá y colocará el menú al objeto seleccionado. Si no hay espacio vertical dentro del iframe de su complemento, la posición del menú se moverá para asegurarse de que se ajuste dentro del iframe. Si tiene un menú Seleccionar con demasiadas opciones para caber dentro del iframe, el menú se desplazará verticalmente.

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

Opciones disponibles

SelectMenu

HTML Seleccionar accesorios de elementos y parámetros dedicados

Parámetro	Descripción
`options`	Matriz con opciones de menú seleccionar
`render`	Representar accesorios para selectMenuOption

SelectMenuOption

Propiedades de elementos de opción HTML

Cambiar

Para usar el interruptor, use el siguiente componente. Recuerde que cada interruptor debe obtener una ID única que se hace referencia en la etiqueta. Esto asegura que el interruptor y la etiqueta completa sean haciendo clic.

 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 >

Opciones disponibles

Accesorios de elementos de entrada HTML y parámetros dedicados

Parámetro	Descripción
`containerProps`	Propiedades para el contenedor de interruptor
`labelProps`	Propiedades para el elemento de etiqueta

Textea

Para usar TextAREA, use el siguiente componente.

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

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

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

Opciones disponibles

Accesorios de elementos html textarea

Tipo

Para usar la tipografía que tiene un estilo como está en la interfaz de usuario de Figma, use el siguiente componente más opciones adicionales para modificar el tamaño, el peso y la costura de letras que está optimizada para aplicaciones positivas (texto oscuro sobre fondo claro) y negativo (texto claro sobre fondo oscuro).

 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 >

Opciones disponibles

Accesorios de elementos Div HTML y parámetros dedicados

Parámetro	Descripción
`size`	Tamaño de fuente: pequeño - 12px, grande - 13px, xlarge - 14px
`weight`	Peso de fuente: mediano, audaz
`inverse`	Aplicación invertida (negativa) donde el texto ligero está en un fondo oscuro con mayor espacio

Predeterminados: Tamaño de fuente 11px, peso normal, aplicación positiva

Licencia

Expandir