{"repo":"c5inco/shape-composer-figma","free":true,"listed":false,"github":"https://github.com/c5inco/shape-composer-figma","clone":"git clone https://github.com/c5inco/shape-composer-figma.git","description":"Source for a small Figma plugin to export vector shapes to Shape classes for use in Jetpack Compose apps","language":"TypeScript","stars":101,"topics":["figma-plugin","jetpack-compose"],"license":null,"category":"design_to_code","readme_excerpt":"![Cover art](./assets/community/coverArt.png)\n\n# Shape Composer Figma plugin\n\n[Codegen DevMode plugin](https://www.figma.com/plugin-docs/codegen-plugins/) that exports vectors as custom Shape classes to use in a [Jetpack Compose](https://developer.android.com/jetpack/compose) app.\n\n![Screenshot](./assets/community/screenshot.png)\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. Switch to DevMode\n3. Select the Shape Composer plugin from the Code tab in the Inspect Panel to see the generated code\n","default_branch":"main","files":21,"tree":[".fleet/run.json",".gitignore",".idea/ShapeComposer.iml",".idea/modules.xml",".idea/workspace.xml","README.md","assets/community/clover.png","assets/community/coverArt.png","assets/community/icon.png","assets/community/screenshot.png","manifest-internal.json","manifest.json","package-lock.json","package.json","src/code.ts","src/generators/composeShape.ts","src/pathUtils.ts","src/stringUtils.ts","src/ui.html","tsconfig.json","webpack.config.js"],"storefront":"/r/c5inco","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/c5inco/shape-composer-figma/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}