v0.29.0

DesignCompose 0.29 Release Notes

DesignCompose 0.29 makes various performance and ergonomic improvements, and introduces several important new features, including Localization, Letter Spacing & Text Decoration, and Rotation Animations (in the Squoosh Renderer Preview). Behind the scenes, the migration to a stable DCF format using protobuf continues, and many dependencies have been updated to ensure that DesignCompose is secure.

API Changes

Use State<T> instead of @Composable() -> T

Using a State<T> can have performance benefits because reading the value out of a State<T> will only cause the closest @Composable function in the call stack to be recomposed. In this release:

• Visibility can now be customized using State<Boolean>
• Text can now be customized using State<String> instead of @Composable() -> String
• Meter (dial, gauge, progress bar) can now be customized using MeterState (as an alias to FloatState, holding a percentage value between 0 and 100) instead of @Composable() -> Meter

The following example illustrates how to use a State<Boolean> as the visibility customization type and a State<String> to replace text in a design element:

@DesignDoc(id = "<your figma doc id>")
interface HelloWorld {
   @DesignComponent(node = "#MainFrame")
   fun MainFrame(
       @Design(node = "#name") showText: State<Boolean>,
       @Design(node = "#name") name: State<String>,
   )
}

val showText = remember { mutableStateOf(true) }
val name = remember { mutableStateOf("World")}
val count = remember { mutableIntStateOf(0) }

LaunchedEffect(Unit) {
   while (true) {
       delay(1000)
       showText.value = !showText.value
       count.intValue += 1
       name.value = "World ${count.intValue}"
   }
}

HelloWorldDoc.MainFrame(showText = showText, name = name)

Because using State is more universal than using a Composable function, we have removed the previous @Composable () -> String customization type.

Localization Support (Preview)

We’ve added initial support for localization in DesignCompose, via a new Figma plugin which works with Android strings.xml resources. Check out our instructions to give it a try:

• https://google.github.io/automotive-design-compose/docs/localization

The Localization plugin extracts strings from a Figma design, and assigns a string resource name for each text node so that DesignCompose can load the appropriate string resource at runtime. You can also use the plugin to exclude particular nodes from the translation process, and upload an existing strings.xml file when creating additional designs for an app. Finally, you can use the plugin to change string resource names, and give string resources description and character limits as hints for the translator.

Any feedback would be greatly appreciated – please file tickets!

Letter Spacing and Text Decoration

Letter spacing, underline, and strikethrough text decorations are now supported.

Squoosh Renderer Preview

Variant Custom Animation API

Custom animations can now be programmatically specified in the DesignDocSetting() function that enables the squoosh animation code path. Populate the new customVariantTransition parameter with a function that takes a VariantTransitionContext and returns an AnimationTransition interface. The context provides some data on variant that is changing, and the AnimationTransition needs a function animationSpec() that returns AnimationSpec<Float>. The SmartAnimationTransition is the only supported transition at this time. The easiest way to use this is to use a compose function such as androidx.compose.animation.core.tween.

Here is an example:

DesignDocSettings(
    useSquoosh = true,
    customVariantTransition = { context ->
        if (context.fromComponentSet("MyComponentName")) {
            SmartAnimateTransition(
                tween(
                    durationMillis = (2f * 1000.0).roundToInt(),
                    easing = CubicBezierEasing(0.37f, 0f, 0.63f, 1f)
                )
            )
        } else {
            val mass = 1.0f
            val stiffness = 20.0f
            val critical = sqrt(4.0f * stiffness * mass)
            val damping = 30.0f
            SmartAnimateTransition(
                spring(dampingRatio = damping / critical, stiffness = stiffness)
            )
        }   

    }
)

We’re still working on the best way to identify the elements that are being animated. We added functions in VariantTransitionContext that use the node or component name, but this may change in the future.

Rotation Animations

Variants with rotated nodes will now perform rotational animations when switching between them.

Token Support

DesignCompose 0.28 added support for Design Tokens, mapped to Figma Variables (check out our docs!). Fetching variables from Figma requires an Enterprise plan, which meant that DesignCompose users on personal plans were unable to use DesignCompose. 0.29 changes this behavior so that users on non-Organization plans can continue to use DesignCompose, but without the variable to token mapping feature.