figmavars
v0.0.10
Published
A React hooks library for integrating and managing Figma Variables in your React and React-Native application.
Downloads
8
Maintainers
Readme
Getting Started with FigmaVars
Welcome to FigmaVars, a React hooks library designed to simplify the integration of Figma variables into your React applications.
Installation
To get started, install FigmaVars via npm or yarn:
npm install figmavars
# or
yarn add figmavars
Setup
Before using the hooks, you need to configure your Figma API token. You can store your token securely and make it available in your application, preferably through environment variables.
Create a .env
file in the root of your project and add:
REACT_APP_FIGMA_TOKEN=your_figma_api_token_here
Please ensure you have .env in your .gitignore file to secure your token.
Basic Usage
Here's a simple example of how to use the useFigmaVars hook to fetch variables from a Figma file:
import React, { useEffect } from 'react';
import { useFigmaVars } from 'figma-vars-hooks';
// Define a type for the variable object
interface FigmaVariable {
id: string;
name: string;
value: string; // Adjust the type according to what `value` can be
}
Const App: React.FC = () => {
// Here we're assuming `useFigmaVars` returns an object with data, loading, and error properties
// Adjust the type of `data` based on the actual structure of variables you expect
const { data: variables, loading, error } = useFigmaVars('file_key_here');
useEffect(() => {
if (error) {
console.error(error);
}
}, [error]);
if (loading) return <div>Loading...</div>;
return (
<div>
{variables?.map((varItem: FigmaVariable) => (
<div key={varItem.id}>{varItem.name}: {varItem.value}</div>
))}
</div>
);
};
export default App;
Next Steps
You can thoroughly explore the other hooks provided by FigmaVars to leverage Figma variables in your project. For detailed API documentation, please take a look at APIReference.md.
React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
- Configure the top-level
parserOptions
property like this:
export default {
// other rules...
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
}
- Replace
plugin:@typescript-eslint/recommended
toplugin:@typescript-eslint/recommended-type-checked
orplugin:@typescript-eslint/strict-type-checked
- Optionally add
plugin:@typescript-eslint/stylistic-type-checked
- Install eslint-plugin-react and add
plugin:react/recommended
&plugin:react/jsx-runtime
to theextends
list