Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kaimagnusmueller/tree-navigator
Figma plugin to quickly select similar layers in the element tree, do scoped searches and redo frequent searches
https://github.com/kaimagnusmueller/tree-navigator
figma plugin svelte
Last synced: 5 days ago
JSON representation
Figma plugin to quickly select similar layers in the element tree, do scoped searches and redo frequent searches
- Host: GitHub
- URL: https://github.com/kaimagnusmueller/tree-navigator
- Owner: KaiMagnusMueller
- License: mit
- Created: 2022-05-30T21:24:26.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-19T09:59:20.000Z (6 months ago)
- Last Synced: 2024-12-04T18:22:28.172Z (2 months ago)
- Topics: figma, plugin, svelte
- Language: Svelte
- Homepage: https://www.kaimagnus.de/articles/using-the-tree-navigator-plugin
- Size: 879 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tree Navigator
Quickly select similar elements in parent and sibling frames. Stop ⌘+⇧-clicking through your designs to select layers in lists, tables or other repeating patterns.
## Features
### Layer Tree
- Displays the layer hierarchy from the selected layer up to the current page
- Search for layers with the same name and type, scoped by the selected parent
- Select layers in different screens to bring up a sibling selector
### Search
- Leave the search field empty to find all layers that fit the current filters
- Match exact: All with the search string as name
- Match case sensitive: Return only layers with the search string as name (case sensitive)
- Match fuzzy (Default): Return layers with partial matches, different spellings or typos
- Match fuzzy with search string in quotes: equals "Match exact" option
### Additional Filters
- Layer type: Filter by layer type to speed up the search in large files and return only the selected types.
- Current selection: Search only the currently selected nodes
- Top level frame: scope the search to the topmost parent. Layers in other frames are excluded from the search
### Recent Searches
Rerun previous searches with the same parameters.
---
## To get started with development:
Clone the repository and install dependencies
```bash
npm install
```
## Connecting your plugin to Figma
Connecting your plugin to Figma
After installing, go to **Plugins / Development / New Plugin** in the Figma desktop app for Mac OS or Windows and choose the option **"Link existing plugin"**.
_You can also just type "New Plugin" in Figma global search to go there_
From there you need to link a **manifest.json** file located at **public** folder in your directory:
```bash
/figma-plugin/public/manifest.json
```
Now edit this file to give a new name for your plugin, and you will be able call it from Figma: **Plugins / Development / Your Plugin Name**
## Development
During development, watch your project for changes with the following command.
```bash
npm run dev
```
When ready to package up your final Figma Plugin:
```bash
npm run build
```
### Build
Package the plugin for download by selecting the files in /public and creating a .zip file with them.
### Update figma-plugin-ds-svelte-improved
`npm update figma-plugin-ds-svelte`
Built using the Svelte Figma components library by Thomas Lowry [Figma Plugin DS Svelte](https://github.com/thomas-lowry/figma-plugin-ds-svelte)