Skip to content

Releases: google/automotive-design-compose

v0.32.0

18 Nov 21:25
3709859
Compare
Choose a tag to compare

What's Changed

New Contributors

Full Changelog: v0.31.0...v0.32.0

v0.32.0-rc01

12 Nov 18:00
d7a865a
Compare
Choose a tag to compare
v0.32.0-rc01 Pre-release
Pre-release

What's Changed

New Contributors

Full Changelog: v0.31.0...v0.32.0-rc01

v0.31.0

07 Oct 18:23
5b1b4a1
Compare
Choose a tag to compare

New Features

  • Animation: Enjoy smoother animations as text and vector sizes now scale dynamically during transitions, enhancing visual appeal and user experience. [#1680, #1641]
  • Image Export: Easily export images from Figma designs in various formats, including PNG, JPG, and GIF, streamlining your design workflow. [#1593]

Improvements

  • Localization: The image cache now includes locale information, ensuring that images update correctly when the app language changes. [#1678, #1676]
  • Animation: Individual animation timelines are now supported, allowing for more precise control over animation sequences. [#1580, #1567]
  • User Interface: A new icon button is added to help break strings into two translations, improving text management in the UI. [#1557]

Fixes

  • Fix: Resolve issues with animations defined in Figma by ensuring they use the correct animation specs, enhancing consistency and performance. [#1637, #1636]
  • Fix: Address crashes in component replacement with AndroidView, ensuring a smoother experience when updating .dcf files. [#1604, #1603]
  • Fix: Correct the bitmap cache key for drawable lookups, ensuring images load correctly when changing languages. [#1678, #1676]

v0.31.0-rc01

30 Sep 16:43
5b1b4a1
Compare
Choose a tag to compare
v0.31.0-rc01 Pre-release
Pre-release

What's Changed

Full Changelog: v0.30.0...v0.31.0-rc01

v0.30.0

13 Sep 17:52
7179517
Compare
Choose a tag to compare

What's Changed

New Contributors

Full Changelog: v0.29.0...v0.30.0

v0.30.0-rc02

10 Sep 21:13
07479a7
Compare
Choose a tag to compare
v0.30.0-rc02 Pre-release
Pre-release

What's Changed

Full Changelog: v0.30.0-rc01...v0.30.0-rc02

v0.30.0-rc01

28 Aug 15:03
5ab32b3
Compare
Choose a tag to compare
v0.30.0-rc01 Pre-release
Pre-release

What's Changed

New Contributors

Full Changelog: v0.29.1...v0.30.0-rc01

v0.29.1

26 Jul 15:44
cd9a8de
Compare
Choose a tag to compare

DesignCompose 0.29.1 Release Notes

DesignCompose 0.29.1 is a maintenance release that changes the protobuf dependency to protobuf-lite (#1441).

Please see DesignCompose 0.29.0 Release Notes for new features and fixes in 0.29.0.

Full Changelog: v0.29.0...v0.29.1

v0.29.0

22 Jul 16:48
2cf118c
Compare
Choose a tag to compare

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:

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.
unnamed

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)
            )
        }   

    }
)

unnamed (1)

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.
unnamed

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.

v0.29.0-rc01

18 Jul 15:21
2cf118c
Compare
Choose a tag to compare
v0.29.0-rc01 Pre-release
Pre-release

What's Changed

Full Changelog: v0.28.0...v0.29.0-rc01