Skip to main content

👨‍💻 Enhance data in Dev Mode

Plugin Feedback👨‍💻 Develper collaboration

Today, the data we can see in Dev Mode in Figma is quite limited.

Our community is requesting some additional data be available in Dev Mode

  • composition tokens (Github issue #2263)

    • token properties and values

  • tokens that are applied via styles and variables using the Figma UI (Github issue #2319)

It would also helpful to be able to open the Plugin while in Dev Mode.

  • Technically its possible, but a quick assessment from Figma’s documentation suggests the scope of work on the backend to make it happen is significant.

💭 How might we...

Improve the design to engineering handover and developer experiences who need to inspect design files that use Tokens Studio who no longer have free access to Figma?

💬 Feedback that is valuable

  • How does this issue impact your day-to-day workflow?

  • What workarounds do you have?

↔ Related topics

  • TBD →

Posted by Sam - Tokens Studio ·
Status: 💡 Requests5 comments

Log in to comment and vote

Comments5

  • Chris Laubacher

    •

    Oct 14, 2024

    Also, big +1 to the second feature on this ticket — “tokens that are applied via styles and variables using the Figma UI”. We’re currently looking at writing our own Figma plugin because Tokens Studio doesn’t currently make this available.

    • Sam - Tokens Studio

      •

      Dec 9, 2024

      Curious what the motivation + benefit + jobs to do are around this feature for your team, seeing as you are also exploring a solution. (:

  • Chris Laubacher

    •

    Oct 14, 2024

    It would also be useful to be able to customize how tokens get displayed in Dev Mode for the situation where the tokens used by developers are formatted differently from the tokens used by designers. For example, our developers currently see this in Dev Mode:

    paddingRight: "sem.space.12x";
paddingLeft: "sem.space.16x";
itemSpacing: "sem.space.24x";
fill: "sem.color.background.secondary";
borderRadius: "sem.radius.16x";


    But they have to translate that into this code:

    <Box
  paddingRight="$12x"
  paddingLeft="$16x"
  gap="$24x"
  backgroundColor="$backgroundSecondary"
  borderRadius="$16x"
/>

    It would be great to have some way of making the tokens they see in the plugin match exactly the code they’re going to end up writing.

    • Sam - Tokens Studio

      •

      Dec 9, 2024

      Love this! So the idea of a Token is being agnostic of code, but with style dictionary they specify it based on some configuration. So I think in order for this to be a reality we would need to work on bringing Style Dictionary into the plugin.

  • Sam - Tokens Studio

    •

    Mar 26, 2024

    Github Issues mentioned