react figma ui Download - react figma ui UI Fonte Download

Reaja figma ui

Sobre

Reactar a implementação para figma-plugin-ds por Tom Lowry

Demonstração

Playground - brinque com a biblioteca no livro de histórias

Alternativas

React-Figma-Plugin-DS por Alexandr Tovmach
Componentes com estilo de figma por Jared
figma-ui-componentes por LessMess
Figma React Ui Kit por Liam Martens

Conteúdo

Como instalar
Componentes
- Botão
- Caixa de seleção
- Divulgação
- Ícone
- Botão do ícone
- Entrada
- Rótulos e seções
- Dica de integração
- Botão de rádio
- Selecione o menu
- Trocar
- Textarea
- Tipo

Como instalar

Primeiro, instale a biblioteca em seu projeto pelo NPM:

$ npm install react-figma-ui

Ou fio:

$ yarn add react-figma-ui

Componentes

Botão

Para usar o botão, use o seguinte componente. Cada botão tem uma opção destrutiva. Os botões terciários são estilizados como hiperlinks.

 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 >

Opções disponíveis

HTML Button Element adereços e parâmetros dedicados

Param	Descrição
`tint`	Estilo de exibição para botão: primário (preenchido), secundário (descrito), terciário (hiperlink)
`destructive`	Adicione a variante destrutiva vermelha para ações, como excluir algo

Caixa de seleção

Para usar a caixa de seleção, use o seguinte componente. Lembre -se de que cada caixa de seleção deve obter um ID exclusivo.

 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 >

Opções disponíveis

Adereços de elemento de entrada HTML e parâmetros dedicados

Param	Descrição
`containerProps`	Adereços para contêiner de caixa de seleção
`labelProps`	Adereços para elemento de etiqueta

Divulgação

Para usar um painel de divulgação, você deve usar o seguinte 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 }
    />
  ) }
/>

Opções disponíveis

Divulgação

HTML UL elementos adereços e parâmetros dedicados

Param	Descrição
`items`	Array com itens de divulgação
`render`	Renderizar adereços para divulgação

DivlosureItEm

HTML Li Element adereços e parâmetros dedicados

Param	Descrição
`heading`	Valor do texto do cabeçalho
`content`	Valor do texto do conteúdo
`section`	Etiqueta de estilo como um título
`expanded`	Adicione esta opção para ter o item expandido na carga
`labelProps`	Adereços para elemento de etiqueta
`contentProps`	Adereços para o elemento de conteúdo

Ícone

Para usar o ícone, use o seguinte componente. Aplique o nome do ícone apropriado para selecionar o item que você deseja usar, você também pode adicionar opção para alterar a cor ou até girar o ícone. Você também pode especificar nenhum nome de ícone para usar um caractere de texto como um ícone (por exemplo, como encontrado nas entradas de ícone de largura + altura no 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>

Opções disponíveis

HTML Div elem elemento adereços e parâmetros dedicados

Param	Descrição
`iconName`	Especifique qual ícone usar (por exemplo: `alert` , `draft` , `settings` )
`spin`	Faz com que o ícone gire em um loop sem fim (por exemplo: carregador usado com ícone `spinner` )
`colorName` *	Passe o nome de qualquer cor figma var para este suporte (por exemplo: `blue` , `black3` )

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

Visualizar ícones disponíveis aqui

Botão do ícone

O botão do ícone é essencialmente um invólucro para o componente do ícone.

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

Opções disponíveis

HTML Div elem elemento adereços e parâmetros dedicados

Param	Descrição
`selected`	Adicione esta opção para ter um estilo selecionado para o botão
`iconProps`	Adereços para o componente do ícone

Entrada

Para usar a entrada, use o seguinte 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' } } / >

Opções disponíveis

Adereços de elemento de entrada HTML e parâmetros dedicados

Param	Descrição
`containerProps`	Adereços para contêiner de interruptor
`iconProps`	Adereços para o componente do ícone

Rótulos e seções

Para usar um rótulo ou seção, use os seguintes componentes.

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

// Label
< Label > Label </ Label >

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

Opções disponíveis

Html div elemento adereços

Dica de integração

Para criar uma dica de integração, use o seguinte componente.

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

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

Opções disponíveis

HTML Div elem elemento adereços e parâmetros dedicados

Param	Descrição
`containerProps`	Adereços para contêiner de interruptor
`iconProps`	Adereços para o componente do ícone

Botão de rádio

Para criar um botão de rádio, use o seguinte componente. Lembre -se de que cada grupo de botões de rádio deve compartilhar o mesmo nome para que estejam relacionados um ao outro. Cada botão deve ter um ID exclusivo para que seu rótulo esteja associado a ele e permaneça parte da área de acerto clicável.

 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 >

Opções disponíveis

Adereços de elemento de entrada HTML e parâmetros dedicados

Param	Descrição
`containerProps`	Adereços para contêiner de rádio
`labelProps`	Adereços para elemento de etiqueta

Selecione o menu

Para criar um menu selecionado, use os seguintes componentes.

O menu selecionado abrirá e posicionará o menu no objeto selecionado. Se não houver sala vertical dentro do iFrame do seu plug -in, a posição do menu será movida para garantir que ele se encaixe dentro do iframe. Se você tiver um menu selecionado com muitas opções para se encaixar no iFrame, o menu rolará 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 >
    ) }
  />
) ;

Opções disponíveis

Selectmenu

HTML Selecione adereços de elemento e parâmetros dedicados

Param	Descrição
`options`	Array com opções de menu selecionadas
`render`	Renderizar adereços para selectmenuoption

SelectMenuOption

Adereços de elemento da opção html

Trocar

Para usar o comutador, use o seguinte componente. Lembre -se de que cada interruptor deve obter um ID exclusivo referenciado no rótulo. Isso garante que o comutador e o rótulo inteiro sejam clicáveis.

 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 >

Opções disponíveis

Adereços de elemento de entrada HTML e parâmetros dedicados

Param	Descrição
`containerProps`	Adereços para contêiner de interruptor
`labelProps`	Adereços para elemento de etiqueta

Textarea

Para usar o Textarea, use o seguinte componente.

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

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

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

Opções disponíveis

Adereços de elemento textarea html

Tipo

Para usar a tipografia que é estilizada como se estivesse na interface do usuário do figma, use o seguinte componente, além de opções adicionais para modificar o tamanho, o peso e o espaço para letras que é otimizado para aplicações positivas (texto escuro em fundo claro) e negativo (texto claro em fundo escuro).

 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 >

Opções disponíveis

HTML Div elem elemento adereços e parâmetros dedicados

Param	Descrição
`size`	Tamanho da fonte: pequeno - 12px, grande - 13px, xlarge - 14px
`weight`	Peso da fonte: médio, negrito
`inverse`	Aplicação invertida (negativa), onde o texto claro está em fundo escuro com aumento de letras

Padrões: tamanho da fonte 11px, peso normal, aplicação positiva

Licença

Expandir