{"id":26519689,"url":"https://github.com/hakannyucel/style-finder","last_synced_at":"2026-05-01T02:33:56.896Z","repository":{"id":282992480,"uuid":"950334367","full_name":"hakannyucel/style-finder","owner":"hakannyucel","description":"A Figma plugin that extracts style information from websites, enabling designers to capture colors, fonts, and other design elements for use in their projects","archived":false,"fork":false,"pushed_at":"2025-03-18T02:10:27.000Z","size":19140,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-01T10:01:05.814Z","etag":null,"topics":["color","design","design-system","figma","figma-plugin","typescript","typography","website"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hakannyucel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-18T02:08:14.000Z","updated_at":"2025-03-18T10:31:28.000Z","dependencies_parsed_at":"2025-03-18T03:33:28.183Z","dependency_job_id":null,"html_url":"https://github.com/hakannyucel/style-finder","commit_stats":null,"previous_names":["hakannyucel/style-finder"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hakannyucel/style-finder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hakannyucel%2Fstyle-finder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hakannyucel%2Fstyle-finder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hakannyucel%2Fstyle-finder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hakannyucel%2Fstyle-finder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hakannyucel","download_url":"https://codeload.github.com/hakannyucel/style-finder/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hakannyucel%2Fstyle-finder/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32483406,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"online","status_checked_at":"2026-05-01T02:00:05.856Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["color","design","design-system","figma","figma-plugin","typescript","typography","website"],"created_at":"2025-03-21T11:23:17.492Z","updated_at":"2026-05-01T02:33:56.881Z","avatar_url":"https://github.com/hakannyucel.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# StyleFinder\n\n![StyleFinder Logo](src/assets/header-logo.svg)\n\n\u003e A Figma plugin that extracts style information from websites, enabling designers to capture colors, fonts, and other design elements for use in their projects.\n\n## Features\n\n- **Color Extraction**: Automatically identifies and extracts color palettes from websites\n- **Typography Analysis**: Captures font families, sizes, weights, and styles used across the website\n- **Gradient Detection**: Identifies and extracts gradient styles for use in designs\n- **Visual Organization**: Creates neatly organized Figma frames containing all extracted style elements\n- **User-Friendly Interface**: Simple UI that allows designers to enter any URL and extract styles with one click\n\n## Installation\n\n### For Users\n\n1. Open Figma and go to the Community tab\n2. Search for \"StyleFinder\"\n3. Click \"Install\"\n\n### For Developers\n\n1. Clone this repository:\n   ```bash\n   git clone https://github.com/hakannyucel/style-finder.git\n   cd style-finder\n   ```\n\n2. Install dependencies:\n   ```bash\n   npm install\n   ```\n\n3. Build the plugin:\n   ```bash\n   npm run build\n   ```\n\n4. To load the plugin in Figma:\n   - Open Figma Desktop app\n   - Go to Plugins \u003e Development \u003e Import plugin from manifest...\n   - Select the `manifest.json` file from this project\n\n## Usage\n\n1. Select the StyleFinder plugin from your Figma plugins\n2. Enter the URL of the website you want to extract styles from\n3. Click \"Extract Styles\"\n4. Wait for the extraction process to complete\n5. StyleFinder will generate frames in your Figma document containing:\n   - Color palette with hex and RGB values\n   - Typography styles with font families and properties\n   - Gradient styles if available\n\n## Development\n\n### Project Structure\n\n```\nstyle-finder/\n├── dist/               # Compiled files\n├── src/\n│   ├── assets/         # Images and static assets\n│   ├── components/     # Frame generation components\n│   ├── services/       # API and data processing services\n│   ├── types/          # TypeScript type definitions\n│   ├── ui/             # UI components\n│   ├── utils/          # Utility functions\n│   ├── code.ts         # Main plugin code\n│   ├── ui.html         # Plugin UI HTML\n│   └── ui.ts           # UI logic\n├── manifest.json       # Figma plugin manifest\n├── package.json        # Node dependencies\n├── tsconfig.json       # TypeScript configuration\n└── webpack.config.js   # Webpack configuration\n```\n\n### Development Workflow\n\n1. Make code changes\n2. Run the development server:\n   ```bash\n   npm run dev\n   ```\n3. The plugin will be rebuilt automatically when files change\n\n## Contributing\n\nWe welcome contributions to StyleFinder! Please follow these steps:\n\n1. Fork the repository\n2. Create a new branch:\n   ```bash\n   git checkout -b feature/your-feature-name\n   ```\n3. Make your changes\n4. Run tests (if applicable)\n5. Commit your changes following the commit convention:\n   ```\n   \u003ctype\u003e: \u003cenglish description\u003e\n   ```\n   Types: feat, fix, docs, style, refactor, test, chore\n6. Push to your branch\n7. Submit a Pull Request\n\nPlease ensure your code follows existing style conventions and includes appropriate comments.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## Contact\n\n- Author: Hakan Yucel\n- GitHub: [Visit](https://github.com/hakannyucel)\n\n---\n\nMade with ❤️ for designers who seek inspiration from the web ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhakannyucel%2Fstyle-finder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhakannyucel%2Fstyle-finder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhakannyucel%2Fstyle-finder/lists"}