react figma ui Download - react figma ui Скачать исходный код

React Figma UI

О

Реагировать реализацию для Figma-Plugin-Ds Тома Лоури

Демо

Игровая площадка - Играйте с библиотекой в сборнике рассказов

Альтернативы

React-Figma-Plugin-DS от Alexandr Tovmach
Компоненты стиля фигмы от Джареда
Figma-UI-Components MessMess
Figma React React UI Kit от Liam Martens

Содержимое

Как установить
Компоненты
- Кнопка
- Флажок
- Раскрытие
- Икона
- Кнопка значка
- Вход
- Ярлыки и разделы
- Совет по борьбе
- Радиобатовая
- Выберите меню
- Выключатель
- 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`	Добавьте красный деструктивный вариант для таких действий, как удаление чего -либо

Флажок

Чтобы использовать флажок, используйте следующий компонент. Помните, что каждый флажок должен получить уникальный идентификатор.

 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 Element Reps и выделенные параметры

Парамет	Описание
`items`	Массив с предметами раскрытия
`render`	Рендеринг реквизита для раскрытия информации

Раскрытие

HTML Li Element Props и выделенные параметры

Парамет	Описание
`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 Element Reps и выделенные параметры

Парамет	Описание
`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 Element Reps и выделенные параметры

Парамет	Описание
`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 Reps

Совет по борьбе

Чтобы создать наконечник адаптации, используйте следующий компонент.

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

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

Доступные варианты

HTML Div Element Reps и выделенные параметры

Парамет	Описание
`containerProps`	Реквизит для контейнера коммутатора
`iconProps`	Реквизит для компонента значков

Радиобатовая

Чтобы создать радиобатчу, используйте следующий компонент. Помните, что каждая группа радиопроизводительных кнопок должна иметь одно и то же имя, чтобы они были связаны друг с другом. Каждая кнопка должна иметь уникальный идентификатор, так что его этикетка ассоциируется с ней и оставалась частью области кликабельного хит.

 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`	Подтверждение для элемента ярлыка

Выберите меню

Чтобы создать меню «Выбрать», используйте следующие компоненты.

Меню Select откроется и расположит меню для выбранного объекта. Если внутри вашего плагина нет вертикальной комнаты, позиция меню будет перемещена, чтобы убедиться, что он вписывается в iframe. Если у вас есть меню Select с слишком большим количеством вариантов, чтобы соответствовать 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 SELECT Element PROPS и выделенные параметры

Парамет	Описание
`options`	Массив с параметрами меню «Выбрать
`render`	Рендеринг реквизита для selectmenuoption

SELECTMENUOPTION

Html опционные элементы реквизита

Выключатель

Чтобы использовать переключатель, используйте следующий компонент. Помните, что каждый переключатель должен получить уникальный идентификатор, на который ссылается на этикетке. Это гарантирует, что коммутатор и вся этикетка кликируют.

 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 Reps

Тип

Чтобы использовать типографику, которая стилизована так же, как в пользовательском интерфейсе Figma, используйте следующий компонент, плюс дополнительные параметры для изменения размера, веса и пластинга, которые оптимизированы для положительного (темный текст на световом фоне) и отрицательный (легкий текст на темном фоне) приложения.

 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 Reps и выделенные параметры

Парамет	Описание
`size`	Размер шрифта: маленький - 12px, большой - 13px, xlarge - 14px
`weight`	Вес шрифта: средний, жирный
`inverse`	Перевернутое (негативное) приложение, где световой текст находится на темном фоне с увеличением пластик.

По умолчанию: размер шрифта 11px, нормальный вес, положительное применение

Лицензия

Расширять