react figma uiダウンロード - react figma uiソースコードダウンロード

Figma UIを反応します

について

Tom LowryによるFigma-Plugin-DSの反応実装

デモ

プレイグラウンド - ストーリーブックでライブラリで遊んでください

代替案

Alexandr TovmachによるReact-Figma-Plugin-DS
JaredによるFigmaスタイルのコンポーネント
LessmessによるFigma-ui-Components
Liam MartensによるFigma React UIキット

コンテンツ

インストール方法
コンポーネント
- ボタン
- チェックボックス
- 開示
- アイコン
- アイコンボタン
- 入力
- ラベルとセクション
- オンボーディングのヒント
- ラジオボタン
- [メニュー]を選択します
- スイッチ
- Textarea
- タイプ

インストール方法

まず、NPMまでにプロジェクトにライブラリをインストールします。

$ npm install react-figma-ui

または糸：

$ yarn add react-figma-ui

コンポーネント

ボタン

ボタンを使用するには、次のコンポーネントを使用します。各ボタンには破壊的なオプションがあります。三次ボタンは、ハイパーリンクのようなスタイルです。

 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 >

利用可能なオプション

HTMLボタン要素プロップと専用のパラメーション

パラメーション	説明
`tint`	ボタンのディスプレイスタイル：プライマリ（塗りつぶされた）、セカンダリ（輪郭）、三次（ハイパーリンク）
`destructive`	何かを削除するなどのアクションに赤い破壊バリアントを追加する

チェックボックス

チェックボックスを使用するには、次のコンポーネントを使用します。各チェックボックスは一意のIDを取得する必要があることを忘れないでください。

 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 >

利用可能なオプション

HTML入力要素プロップと専用のパラメーション

パラメーション	説明
`containerProps`	チェックボックスコンテナの小道具
`labelProps`	ラベル要素の小道具

開示

開示パネルを使用するには、次のコンポーネントを使用する必要があります。

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

利用可能なオプション

開示

HTML UL要素の小道具と専用のパラメーション

パラメーション	説明
`items`	開示アイテムを備えた配列
`render`	disclosureitemのプロップをレンダリングします

disclosureitem

HTML li要素の小道具と専用のパラメーション

パラメーション	説明
`heading`	見出しテキスト値
`content`	コンテンツテキスト値
`section`	見出しのようなスタイルラベル
`expanded`	このオプションを追加して、アイテムをロードで拡張します
`labelProps`	ラベル要素の小道具
`contentProps`	コンテンツ要素の小道具

アイコン

アイコンを使用するには、次のコンポーネントを使用します。適切なアイコン名を適用して、使用するアイテムを選択します。オプションを追加して色を変更したり、アイコンをスピンしたりすることもできます。また、テキスト文字をアイコンとして使用するアイコン名を指定しないこともできます（たとえば、width + heightアイコン入力のように、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>

利用可能なオプション

HTML Div Element Propsおよび専用のパラメーション

パラメーション	説明
`iconName`	使用するアイコンを指定します（例： `alert` 、 `draft` 、 `settings` ）
`spin`	アイコンが無限のループでスピンします（例： `spinner`アイコンで使用されるローダー）
`colorName` *	この小道具にfigma色のvarの名前を渡す（例： `blue` 、 `black3` ）

*受け入れられた色： blue 、 purple 、 purple4 、 hot-pink 、 green 、赤、 red 、 yellow 、 black black8 、 black3 3、 white 、 white8 、 white4

ここで利用可能なアイコンをプレビューします

アイコンボタン

アイコンボタンは、基本的にアイコンコンポーネントのラッパーです。

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

利用可能なオプション

HTML Div Element Propsおよび専用のパラメーション

パラメーション	説明
`selected`	このオプションを追加して、ボタン用にスタイルを選択します
`iconProps`	アイコンコンポーネントの小道具

入力

入力を使用するには、次のコンポーネントを使用します。

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

利用可能なオプション

HTML入力要素プロップと専用のパラメーション

パラメーション	説明
`containerProps`	スイッチコンテナの小道具
`iconProps`	アイコンコンポーネントの小道具

ラベルとセクション

ラベルまたはセクションを使用するには、次のコンポーネントを使用します。

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

// Label
< Label > Label </ Label >

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

利用可能なオプション

HTML Div Element Props

オンボーディングのヒント

オンボーディングヒントを作成するには、次のコンポーネントを使用します。

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

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

利用可能なオプション

HTML Div Element Propsおよび専用のパラメーション

パラメーション	説明
`containerProps`	スイッチコンテナの小道具
`iconProps`	アイコンコンポーネントの小道具

ラジオボタン

ラジオボタンを作成するには、次のコンポーネントを使用します。ラジオボタンの各グループは、互いに関連するように同じ名前を共有する必要があることを忘れないでください。各ボタンには一意のIDが必要であるため、ラベルはそれに関連付けられ、クリック可能なヒット領域の一部の一部です。

 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 >

利用可能なオプション

HTML入力要素プロップと専用のパラメーション

パラメーション	説明
`containerProps`	無線容器の小道具
`labelProps`	ラベル要素の小道具

[メニュー]を選択します

選択メニューを作成するには、次のコンポーネントを使用します。

[選択]メニューが開き、メニューを選択したオブジェクトに配置します。プラグインのiframe内に垂直部屋がない場合、メニューの位置が移動して、iframe内に収まるようにします。 iframeに収まるにはあまりにも多くのオプションがある選択メニューがある場合、メニューは垂直にスクロールします。

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

利用可能なオプション

selectmenu

HTMLは、要素の小道具を選択し、専用のパラメーションを選択します

パラメーション	説明
`options`	[メニュー]オプションを選択した配列
`render`	selectmenuoptionのプロップをレンダリングします

selectmenuoption

HTMLオプション要素プロップ

スイッチ

スイッチを使用するには、次のコンポーネントを使用します。各スイッチは、ラベルで参照されている一意のIDを取得する必要があることを忘れないでください。これにより、スイッチとラベル全体がクリック可能になります。

 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 >

利用可能なオプション

HTML入力要素プロップと専用のパラメーション

パラメーション	説明
`containerProps`	スイッチコンテナの小道具
`labelProps`	ラベル要素の小道具

Textarea

Textareaを使用するには、次のコンポーネントを使用します。

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

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

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

利用可能なオプション

HTML Textarea Element Props

タイプ

Figma UIのようにスタイルのタイポグラフィを使用するには、次のコンポーネントと追加のオプションを使用して、ポジティブ（明るい背景の暗いテキスト）およびネガティブ（暗い背景の明るいテキスト）アプリケーションに最適化されたサイズ、重量、および文字ペースを変更します。

 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 >

利用可能なオプション

HTML Div Element Propsおよび専用のパラメーション

パラメーション	説明
`size`	フォントサイズ：小-12px、大規模-13px、 xlarge -14px
`weight`	フォント重量：中、太字
`inverse`	明るいテキストが暗い背景にある逆（ネガティブ）アプリケーションがレターペースを増やして増加します

デフォルト：フォントサイズ11px、通常の重量、正のアプリケーション

ライセンス

拡大する