react figma ui 다운로드 -Rect react figma ui 소스 코드 다운로드

반응 Figma UI

에 대한

Tom Lowry의 Figma-Plugin-DS에 대한 반응 구현

데모

놀이터 - 스토리 북의 도서관과 함께 연주하십시오

대안

Alexandr Tovmach에 의한 반응-피그마-플루인 -DS
Figma는 Jared의 구성 요소입니다
Lessmess의 Figma-ui 경쟁
Liam Martens의 Figma React UI 키트

내용물

설치 방법
구성 요소
- 단추
- 확인란
- 폭로
- 상
- 아이콘 버튼
- 입력
- 레이블 및 섹션
- 온 보딩 팁
- 라디오 버튼
- 메뉴를 선택하십시오
- 스위치
- Textarea
- 유형

설치 방법

먼저 NPM으로 프로젝트에 라이브러리를 설치하십시오.

$ npm install react-figma-ui

또는 원사 :

$ yarn add react-figma-ui

구성 요소

단추

버튼을 사용하려면 다음 구성 요소를 사용하십시오. 각 버튼에는 파괴적인 옵션이 있습니다. 3 차 버튼은 하이퍼 링크와 같은 스타일입니다.

 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`	버튼의 디스플레이 스타일 : 1 차 (채워진), 보조 (요약), 3 차 (하이퍼 링크)
`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`	공개를위한 소품을 렌더링합니다

공개

HTML Li 요소 소품 및 전용 매개 변수

파라	설명
`heading`	제목 텍스트 값
`content`	컨텐츠 텍스트 값
`section`	제목처럼 스타일 레이블
`expanded`	이 옵션을 추가하여 항목을로드시 확장하십시오
`labelProps`	레이블 요소에 대한 소품
`contentProps`	컨텐츠 요소에 대한 소품

상

아이콘을 사용하려면 다음 구성 요소를 사용하십시오. 사용하려는 항목을 선택하려면 적절한 아이콘 이름을 적용하고 색상을 변경하거나 아이콘을 돌리기 위해 옵션을 추가 할 수도 있습니다. 또한 텍스트 문자를 아이콘으로 사용할 아이콘 이름을 지정할 수도 있습니다 (예 : 너비 + 높이 아이콘 입력과 같이 그림)

 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 요소 소품 및 전용 매개 변수

파라	설명
`iconName`	사용할 아이콘을 지정하십시오 (예 : `alert` , `draft` , `settings` )
`spin`	끝없는 루프에서 아이콘이 회전하게됩니다 (예 : `spinner` 아이콘과 함께 사용되는 로더)
`colorName` *	이 소품에 Figma Color var의 이름을 전달하십시오 (예 : `blue` , `black3` )

*색상 : blue , purple , purple4 , hot-pink , green , red , yellow , black , black8 , black3 , 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 요소 소품 및 전용 매개 변수

파라	설명
`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 요소 소품

온 보딩 팁

온 보딩 팁을 만들려면 다음 구성 요소를 사용하십시오.

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

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

사용 가능한 옵션

HTML DIV 요소 소품 및 전용 매개 변수

파라	설명
`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`	select -menuoption에 대한 소품 렌더링

select -menuoption

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 요소 소품

유형

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 요소 소품 및 전용 매개 변수

파라	설명
`size`	글꼴 크기 : 작은 -12px, 대형 -13px, xlarge -14px
`weight`	글꼴 중량 : 중간, 대담한
`inverse`	라이트 텍스트가 어두운 배경에있는 거꾸로 된 (음성) 응용 프로그램

기본값 : 글꼴 크기 11px, 정상 중량, 양성 적용

특허

확장하다