{"id":18418717,"url":"https://github.com/c5inco/shape-composer-figma","last_synced_at":"2025-04-07T13:31:23.408Z","repository":{"id":46451618,"uuid":"439821929","full_name":"c5inco/shape-composer-figma","owner":"c5inco","description":"Source for a small Figma plugin to export vector shapes to Shape classes for use in Jetpack Compose apps","archived":false,"fork":false,"pushed_at":"2023-04-05T07:32:15.000Z","size":556,"stargazers_count":66,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-22T19:02:46.479Z","etag":null,"topics":["figma-plugin","jetpack-compose"],"latest_commit_sha":null,"homepage":"https://www.figma.com/community/plugin/1054248779295272882/Shape-Composer","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/c5inco.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}},"created_at":"2021-12-19T09:21:46.000Z","updated_at":"2025-03-04T04:33:30.000Z","dependencies_parsed_at":"2022-09-08T04:50:51.551Z","dependency_job_id":null,"html_url":"https://github.com/c5inco/shape-composer-figma","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c5inco%2Fshape-composer-figma","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c5inco%2Fshape-composer-figma/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c5inco%2Fshape-composer-figma/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c5inco%2Fshape-composer-figma/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/c5inco","download_url":"https://codeload.github.com/c5inco/shape-composer-figma/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247661681,"owners_count":20975098,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["figma-plugin","jetpack-compose"],"created_at":"2024-11-06T04:14:24.602Z","updated_at":"2025-04-07T13:31:22.950Z","avatar_url":"https://github.com/c5inco.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Cover art](./assets/community/coverArt.png)\n\n# Shape Composer Figma plugin\n\nSmall plugin that exports custom shapes for use in a [Jetpack Compose](https://developer.android.com/jetpack/compose) app.\n\nEssentially, the path data from a Figma [VectorNode](https://www.figma.com/plugin-docs/api/VectorNode/) is translated into [Path commands](https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Path) to be recreated in Android, with some extra wrapping around a [Shape class](https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape) to easily copy-paste into the project.\n\nClover shape example:\n\n![Clover shape](./assets/community/clover.png)\n\n```kotlin\nval CloverShape: Shape = object: Shape {\n    override fun createOutline(\n        size: Size,\n        layoutDirection: LayoutDirection,\n        density: Density\n    ): Outline {\n        val baseWidth = 200f\n        val baseHeight = 200f\n\n        val path = Path().apply {\n            moveTo(12f, 100f)\n            cubicTo(12f, 76f, 0f, 77.6142f, 0f, 50f)\n            cubicTo(0f, 22.3858f, 22.3858f, 0f, 50f, 0f)\n            cubicTo(77.6142f, 0f, 76f, 12f, 100f, 12f)\n            cubicTo(124f, 12f, 122.3858f, 0f, 150f, 0f)\n            cubicTo(177.6142f, 0f, 200f, 22.3858f, 200f, 50f)\n            cubicTo(200f, 77.6142f, 188f, 76f, 188f, 100f)\n            cubicTo(188f, 124f, 200f, 122.3858f, 200f, 150f)\n            cubicTo(200f, 177.6142f, 177.6142f, 200f, 150f, 200f)\n            cubicTo(122.3858f, 200f, 124f, 188f, 100f, 188f)\n            cubicTo(76f, 188f, 77.6142f, 200f, 50f, 200f)\n            cubicTo(22.3858f, 200f, 0f, 177.6142f, 0f, 150f)\n            cubicTo(0f, 122.3858f, 12f, 124f, 12f, 100f)\n            close()\n        }\n        \n        return Outline.Generic(\n            path\n                .asAndroidPath()\n                .apply {\n                    transform(Matrix().apply {\n                        setScale(size.width / baseWidth, size.height / baseHeight)\n                    })\n                }\n                .asComposePath()\n        )\n    }\n}\n```\n\nUnsupported path commands:\n\n- Vertical line to (V, v)\n- Horizontal line to (H, h)\n- Smooth curve to (S, s)\n- Smooth quadratic curve to (T, t)\n- Elliptical Arc (A, a)\n\n## Setup\n\n1. Clone this repo\n2. `npm install` in cloned directory to install dependencies\n3. Import plugin for local development in Figma desktop app, using `manifest.json`\n4. Run `npm start` to start development server and Typescript watcher\n5. Use plugin in Figma!\n\n## Current designed workflow\n\n1. Select Vector layer in Figma (flatten if necessary)\n2. Execute plugin action\n3. Paste copied class from clipboard into Compose project\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fc5inco%2Fshape-composer-figma","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fc5inco%2Fshape-composer-figma","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fc5inco%2Fshape-composer-figma/lists"}