[Compose] Passing the value of a Figma variable in another Figma variable

Open
  • Is something wrong?
#324 2 comments 6 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
28/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
typescript
Domain
developer-experience

Research direction

Start by reading the Compose Figma Connect documentation and tracing how Figma.mapping values are represented when generating component code. The issue provides a Kotlin example but names no repository files or tests, so first locate the Compose integration and its mapping tests. Done means mapped variable values render as their values instead of their variable names.

Written by the indexing model from the issue text.

Description

API question

Hello, I'm trying to pass the value of a Figma variable in another figma variable as below (full Figma code connect doc down below):

@FigmaProperty(FigmaType.Text, "Title content")
val titleContent: String = "this is a title"

@FigmaProperty(FigmaType.Boolean, "hasTitle")
val hasTitle: String? = Figma.mapping(
    true to contentTitle,
    false to null
)

When I use hasTitle in the component, Figma displays the name of the variable contentTitle rather than its value.
So Figma shows this:

Notification(
    title = contentTitle, // hasTitle is set to true in the Figma instance
    descripton = descripton
)

Instead of this:

Notification(
    title = "this is my title"
    descripton = descripton
)

Here the full Figma code connect doc:

@FigmaConnect(url="http://figma.com/component1")
@FigmaVariant("Device", "Android")
class NotificationDoc {
    @FigmaProperty(FigmaType.Text, "Title content")
    val titleContent: String = "this is a title"

    @FigmaProperty(FigmaType.Boolean, "hasTitle")
    val hasTitle: String? = Figma.mapping(
        true to contentTitle,
        false to null
    )

    @FigmaProperty(FigmaType.Text, "description")
    val descripton: String = "this is a description"

    @FigmaProperty(FigmaType.Enum, "Variant")
    val type: ButtonType = Figma.mapping(
        "Primary" to ButtonType.Primary,
        "Secondary" to ButtonType.Secondary
    )

    @Composable
    fun Component() {
        Notification(
            title = hasTitle,
            descripton = descripton
        )
    }
}

Is there a way to display the value of the variable rather than the variable name?

Thank you for you help. :-)

Dominant language
TypeScript
Stars
1.6k
Forks
126
No merged PRs in 30d

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from figma/code-connect

All issues in figma/code-connect

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.