The Deep Get Variables plugin for Dev Mode allows users to get all variables contained in a selection recursively, and optionally transform them into Design Tokens names with a custom prefix for Android and iOS formats.
- Retrieve all variables from a selected layer or component in Figma.
- Display variables in a structured format.
- Optionally transform variable names into Design Tokens for Android and iOS.
- Customise the prefix for the generated Design Tokens names.
- Click copy to clipboard.
- Open Dev Mode: Make sure Dev Mode is enabled.
- Select Elements: Select the elements in your Figma document from which you want to retrieve variables.
- Run the Plugin: Open the Deep Get Variables plugin.
- View Variables: The plugin will display all variables contained in the selection.
- Transform Names (Optional):
- Check the "Transform Design Tokens Names" option.
- Enter a custom prefix for the variable names.
- Click "Generate" to see the transformed names for Android and iOS.
- Copy to Clipboard: Use the "Copy" button next to the transformed names to copy them to the clipboard.
- Download and install the plugin from the Figma Plugin Library.
- Alternatively, you can download the source code and load it as a custom plugin in Figma.
To develop and modify the plugin:
- Clone this repository:
git clone https://github.com/yourusername/deep-get-variables.git
- Navigate to the plugin directory:
cd deep-get-variables
- Install dependencies:
npm install
- Build the plugin:
npm run build
- Load the
manifest.json
file in Figma to use the plugin.
If you have ideas for new features or improvements, we would love to hear from you! Please submit your feature requests by creating a new issue on our GitHub repository. Provide as much detail as possible, including the problem the feature will solve, potential use cases, and any specific requirements or examples.
Also pull requests are more than welcome! With your contributions help make this project better for everyone, and we appreciate your feedback and suggestions.
Network by Anwar Hossain from Noun Project (CC BY 3.0)
This project is licensed under the Figma Community Free Resource License. See the LICENSE file for details.