react figma ui Unduh - react figma ui Sumber Code Unduh

Bereaksi Figma UI

Tentang

Implementasi Bereaksi untuk Figma-Plugin-DS oleh Tom Lowry

Demo

Playground - Play With the Library di Storybook

Alternatif

react-figma-plugin-ds oleh alexandr tovmach
Komponen gaya figma oleh Jared
Figma-ui-komponen oleh lessmess
Figma React UI Kit oleh Liam Martens

Isi

Cara menginstal
Komponen
- Tombol
- Kotak centang
- Penyingkapan
- Ikon
- Tombol ikon
- Masukan
- Label dan bagian
- Tip onboarding
- Tombol radio
- Pilih Menu
- Mengalihkan
- TexTarea
- Jenis

Cara menginstal

Pertama, instal perpustakaan di proyek Anda oleh NPM:

$ npm install react-figma-ui

Atau benang:

$ yarn add react-figma-ui

Komponen

Tombol

Untuk menggunakan tombol, gunakan komponen berikut. Setiap tombol memiliki opsi yang merusak. Tombol tersier ditata seperti hyperlink.

 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 >

Opsi yang tersedia

Props elemen tombol html dan params khusus

Param	Keterangan
`tint`	Gaya tampilan untuk tombol: primer (diisi), sekunder (diuraikan), tersier (hyperlink)
`destructive`	Tambahkan varian destruktif merah untuk tindakan seperti menghapus sesuatu

Kotak centang

Untuk menggunakan kotak centang, gunakan komponen berikut. Ingat setiap kotak centang harus mendapatkan ID yang unik.

 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 >

Opsi yang tersedia

HTML Input Element Props dan Params Dedicated

Param	Keterangan
`containerProps`	Alat peraga untuk wadah kotak centang
`labelProps`	Alat peraga untuk elemen label

Penyingkapan

Untuk menggunakan panel pengungkapan, Anda harus menggunakan komponen berikut.

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

Opsi yang tersedia

Penyingkapan

HTML UL Element Props dan Params Dedicated

Param	Keterangan
`items`	Array dengan item pengungkapan
`render`	Membuat alat peraga untuk pengungkapan

Pengungkapan

HTML Li Element Props dan Params Dedicated

Param	Keterangan
`heading`	Nilai Teks HEADING
`content`	Nilai teks konten
`section`	Label gaya seperti judul
`expanded`	Tambahkan opsi ini agar item diperluas pada beban
`labelProps`	Alat peraga untuk elemen label
`contentProps`	Alat peraga untuk elemen konten

Ikon

Untuk menggunakan ikon, gunakan komponen berikut. Terapkan nama ikon yang sesuai untuk memilih item yang ingin Anda gunakan, Anda juga dapat menambahkan opsi untuk mengubah warna, atau bahkan memutar ikon. Anda juga dapat menentukan tidak ada nama ikon untuk menggunakan karakter teks sebagai ikon (misalnya, seperti yang ditemukan di input ikon Lebar + Tinggi di 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>

Opsi yang tersedia

HTML Div Element Props dan Params Dedicated

Param	Keterangan
`iconName`	Tentukan ikon mana yang akan digunakan (misalnya: `alert` , `draft` , `settings` )
`spin`	Menyebabkan ikon berputar dalam loop tanpa akhir (misalnya: loader yang digunakan dengan ikon `spinner` )
`colorName` *	Lewati nama Figma Color Var apa pun ke prop ini (misalnya: `blue` , `black3` )

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

Pratinjau ikon yang tersedia di sini

Tombol ikon

Tombol Ikon pada dasarnya adalah pembungkus untuk komponen ikon.

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

Opsi yang tersedia

HTML Div Element Props dan Params Dedicated

Param	Keterangan
`selected`	Tambahkan opsi ini untuk memiliki gaya yang dipilih untuk tombol
`iconProps`	Alat peraga untuk komponen ikon

Masukan

Untuk menggunakan input, gunakan komponen berikut.

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

Opsi yang tersedia

HTML Input Element Props dan Params Dedicated

Param	Keterangan
`containerProps`	Alat peraga untuk wadah saklar
`iconProps`	Alat peraga untuk komponen ikon

Label dan bagian

Untuk menggunakan label atau bagian, gunakan komponen berikut.

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

// Label
< Label > Label </ Label >

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

Opsi yang tersedia

HTML Div Element Props

Tip onboarding

Untuk membuat tip onboarding, gunakan komponen berikut.

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

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

Opsi yang tersedia

HTML Div Element Props dan Params Dedicated

Param	Keterangan
`containerProps`	Alat peraga untuk wadah saklar
`iconProps`	Alat peraga untuk komponen ikon

Tombol radio

Untuk membuat tombol radio, gunakan komponen berikut. Ingat setiap kelompok tombol radio harus berbagi nama yang sama sehingga mereka terkait satu sama lain. Setiap tombol harus memiliki ID unik sehingga labelnya dikaitkan dengannya dan tetap menjadi bagian dari area hit yang dapat diklik.

 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 >

Opsi yang tersedia

HTML Input Element Props dan Params Dedicated

Param	Keterangan
`containerProps`	Alat peraga untuk wadah radio
`labelProps`	Alat peraga untuk elemen label

Pilih Menu

Untuk membuat menu pilih, gunakan komponen berikut.

Menu pilih akan membuka dan memposisikan menu ke objek yang dipilih. Jika tidak ada ruang vertikal di dalam iframe plugin Anda, posisi menu akan dipindahkan untuk memastikannya cocok di dalam iframe. Jika Anda memiliki menu pilih dengan terlalu banyak opsi agar sesuai dengan iframe, menu akan menggulir secara vertikal.

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

Opsi yang tersedia

SelectMenu

Html pilih alat peraga elemen dan params khusus

Param	Keterangan
`options`	Array dengan Pilih Opsi Menu
`render`	Membuat alat peraga untuk selectMenuoption

SelectMenuOption

Props elemen opsi html

Mengalihkan

Untuk menggunakan sakelar, gunakan komponen berikut. Ingat setiap sakelar harus mendapatkan ID unik yang dirujuk dalam label. Ini memastikan sakelar dan seluruh label dapat diklik.

 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 >

Opsi yang tersedia

HTML Input Element Props dan Params Dedicated

Param	Keterangan
`containerProps`	Alat peraga untuk wadah saklar
`labelProps`	Alat peraga untuk elemen label

TexTarea

Untuk menggunakan TextArea, gunakan komponen berikut.

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

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

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

Opsi yang tersedia

HTML TextArea Element Props

Jenis

Untuk menggunakan tipografi yang ditata seperti di Figma UI, gunakan komponen berikut plus opsi tambahan untuk memodifikasi ukuran, berat, dan letterpacing yang dioptimalkan untuk aplikasi positif (teks gelap pada latar belakang cahaya) dan aplikasi negatif (teks terang pada latar belakang gelap).

 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 >

Opsi yang tersedia

HTML Div Element Props dan Params Dedicated

Param	Keterangan
`size`	Ukuran font: kecil - 12px, besar - 13px, xlarge - 14px
`weight`	Berat font: sedang, tebal
`inverse`	Aplikasi terbalik (negatif) di mana teks terang berada pada latar belakang gelap dengan peningkatan huruf

Default: Ukuran font 11px, berat normal, aplikasi positif

Lisensi

Memperluas