Shape Composer Figma plugin

Codegen DevMode plugin that exports vectors as custom Shape classes to use in a Jetpack Compose app.

Essentially, the path data from a Figma VectorNode is translated into Path commands to be recreated in Android, with some extra wrapping around a Shape class to easily copy-paste into the project.

Clover shape example:

val CloverShape: Shape = object: Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        val baseWidth = 200f
        val baseHeight = 200f

        val path = Path().apply {
            moveTo(12f, 100f)
            cubicTo(12f, 76f, 0f, 77.6142f, 0f, 50f)
            cubicTo(0f, 22.3858f, 22.3858f, 0f, 50f, 0f)
            cubicTo(77.6142f, 0f, 76f, 12f, 100f, 12f)
            cubicTo(124f, 12f, 122.3858f, 0f, 150f, 0f)
            cubicTo(177.6142f, 0f, 200f, 22.3858f, 200f, 50f)
            cubicTo(200f, 77.6142f, 188f, 76f, 188f, 100f)
            cubicTo(188f, 124f, 200f, 122.3858f, 200f, 150f)
            cubicTo(200f, 177.6142f, 177.6142f, 200f, 150f, 200f)
            cubicTo(122.3858f, 200f, 124f, 188f, 100f, 188f)
            cubicTo(76f, 188f, 77.6142f, 200f, 50f, 200f)
            cubicTo(22.3858f, 200f, 0f, 177.6142f, 0f, 150f)
            cubicTo(0f, 122.3858f, 12f, 124f, 12f, 100f)
            close()
        }
        
        return Outline.Generic(
            path
                .asAndroidPath()
                .apply {
                    transform(Matrix().apply {
                        setScale(size.width / baseWidth, size.height / baseHeight)
                    })
                }
                .asComposePath()
        )
    }
}

Unsupported path commands:

• Vertical line to (V, v)
• Horizontal line to (H, h)
• Smooth curve to (S, s)
• Smooth quadratic curve to (T, t)
• Elliptical Arc (A, a)

Setup

1. Clone this repo
2. npm install in cloned directory to install dependencies
3. Import plugin for local development in Figma desktop app, using manifest.json
4. Run npm start to start development server and Typescript watcher
5. Use plugin in Figma!

Current designed workflow

1. Select Vector layer in Figma (flatten if necessary)
2. Switch to DevMode
3. Select the Shape Composer plugin from the Code tab in the Inspect Panel to see the generated code