react-figma-plugin-ds - GitLite

KO | EN

gitlite — search

#javascript #python #react #ai #go #golang #deep-learning #linux #docker #macos #windows #awesome #awesome-list #open-source

react-figma-plugin-ds

(★ 124)

React components of Figma design system

파일 탐색기

최종 버전 다운로드 (.zip)

- FUNDING.yml
- - api.js
  - ExamplePage.js
  - index.html
  - index.js
  - reset.scss
  - variables.scss
- Button.tsx
- Checkbox.tsx
- Disclosure.tsx
- Icon.tsx
- index.ts
- Input.tsx
- Label.tsx
- Select.tsx
- Text.tsx
- Textarea.tsx
- Tip.tsx
- Title.tsx
.babelrc
.gitignore
.npmignore
index.d.ts
LICENSE
package.json
README.md
tsconfig.json
webpack.config.js
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/alexandrtovmach/react-figma-plugin-ds

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd react-figma-plugin-ds

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm i react-figma-plugin-ds

이 명령어를 터미널에 그대로 입력해 실행하세요.

yarn add react-figma-plugin-ds

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# react-figma-plugin-ds

[![npm](https://img.shields.io/npm/v/react-figma-plugin-ds?logo=npm&cacheSeconds=1800)](https://www.npmjs.com/package/react-figma-plugin-ds)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-figma-plugin-ds?cacheSeconds=1800)](https://www.npmjs.com/package/react-figma-plugin-ds)
[![npm](https://img.shields.io/npm/dt/react-figma-plugin-ds?cacheSeconds=1800)](https://www.npmjs.com/package/react-figma-plugin-ds)

React components of Figma design system based on [thomas-lowry/figma-plugin-ds](https://github.com/thomas-lowry/figma-plugin-ds), and implements [UI2: Figma Design System](https://www.figma.com/community/file/768283795272784978).

[DEMO HERE](https://alexandrtovmach.github.io/react-figma-plugin-ds/)

## 🚀 Get Started

Follow these steps to start using React Figma components:

1. Installation:

```sh
   # with npm
   npm i react-figma-plugin-ds

# with yarn
   yarn add react-figma-plugin-ds
   ```

2. Usage:

```jsx
   import React from "react";
   import { Disclosure, Tip, Title, Checkbox, Button } from "react-figma-plugin-ds";
   import "react-figma-plugin-ds/figma-plugin-ds.css";

export default (props) => {
     return (
       <>
         <Title size="large" weight="bold">
           My plugin
         </Title>

<Disclosure label="Getting started" isDefaultExpanded>
           <Tip iconName="resolve">Install</Tip>
           <Tip iconName="play">Start</Tip>
           <Tip iconName="library">Read the docs</Tip>
         </Disclosure>

<Checkbox label="I promise to star this repo!" />

<Button>Start</Button>
       </>
     );
   };
   ```

3. Discover all components with properties on [demo page](https://alexandrtovmach.github.io/react-figma-plugin-ds/). Each of that has playground and as result in top right corner you can easily copy final code.

## 📝 License

[MIT](https://github.com/alexandrtovmach/react-figma-plugin-ds/blob/master/LICENSE)