Roadmap
Changelog

Have a request? Something unexpected happening?

We'd love to know what you are thinking, seeing or expecting.

Pinned

đŸ’Ŧ Discussion

DTCG format update on color tokens and support for color spaces.

Hey everyone, for those who aren't aware, I'm supporting the DTCG as an editor for the spec. I'm collecting feedback on the current state of the proposal for color tokens in the DTCG spec. Early responses are highly appreciated 🚀🚀 This thread holds the context: https://github.com/design-tokens/community-group/issues/137 đŸ’Ŧ Feedback that is valuable Proposed format in JSON { "my-token": { "$type": "color", "$value": { "hex": "#xxxxxx", "colorSpace": "color-space", "channels": [0.1, 0.2, 0.3], "alpha": 0.5 } } } Color spaces supported: srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020 | lab | oklab | xyz | xyz-d50 | xyz-d65 | hsl | hwb | lch | oklch Next steps (from DTCG team) Figure out aliasing. Possibly "hex": "{my-token.hex}", "channels": "{my-token.channels}", but this doesn’t feel very natural or particularly safe. 8 week-long RFC where we ask tool makers in particular for feedback. Below a summary of the thread to get you up to speed if you don't have time to read the whole discussion: Summary of Discussion on Legacy Color Issue (#137) Overview: The discussion revolves around the limitations of using hex color formats in design tokens, advocating for more modern and flexible color representations such as LAB, LCH, and OKLAB. Participants emphasize the need to future-proof the design token specification to accommodate advanced color spaces already supported by some browsers and anticipated to become standard. Key Points: Modern Color Support: Proposal: Standardize on modern color formats (e.g., OKLCH) instead of hex. Justification: Modern color formats offer better perceptual uniformity and more accurate color representation. Flexible Color Representation: Alternative Syntax: "colorSpace": "sRGB", "channels": [0.1, 0.1, 0.1], "alpha": 1.0 Advantages: This format supports various color spaces and offers higher precision compared to hex values. Backwards Compatibility and Toolchain Adoption: Concerns: Current toolchains predominantly support sRGB and hex formats. Suggestion: Include fallbacks to hex while allowing modern formats for future compatibility. Practical Implementation: Fallbacks Example: "colorSpace": "Display-P3", "channels": [1, 0.5,0], "alpha": 1, "fallback": "#FF8800" Tool Compatibility: Tools can adopt modern formats without the immediate need for full support, ensuring smoother transitions. Community Insights and Concerns: Wide Gamut Support: Limiting to hex/sRGB restricts the potential of design systems to leverage advanced color spaces. Precision and Accuracy: Higher precision formats like floating-point numbers prevent rounding errors common in hex conversions. Consensus and Next Steps: Flexibility in Spec: Propose allowing both hex and advanced color formats to coexist in the specification. Future-Proofing: Emphasize the importance of a forward-compatible spec that adapts to evolving design tools and browser capabilities. Conclusion: The discussion highlights the need to move beyond legacy color formats and adopt a more flexible, future-proof approach in the design token specification, balancing current toolchain limitations with the advantages of modern color spaces. ↔ Related topics 🎨 Expand support for color spaces → Jump to post

Mike (Tokens Studio) 4 months ago

6

💡 Plugin Feedback

Pinned

👀 Beta Testing

👍 Roadmap and Feedback tool

We are curious what you think about the new tool we are using as a "roadmap" to share what's coming and as a way to collect your feedback outside of Slack or Github. Feedback that is helpful What do you like? What could be improved? What doesn't work as expected or desired? What questions do you have?

Sam - Tokens Studio 6 months ago

6

đŸĢ  V2 Plugin Feedback

❇ī¸ Import Variables should include Themes [Pro]

🔀 Current Flow - Currently when importing variables, collections and modes are translated to sets and subsets and don’t include the plugin’s Themes. We might want to support this as exporting variables translates theme-groups and themes (for pro users) to Figma’s variable collections and modes. Support for this might possibly help users use both the import and export function to keep their tokens and variables in sync. 🔄 Use-case: Our aim is to import many existing variables/modes/collections already bound to components into TS and start managing them from TS only. So we are expecting to export it back to Figma to keep TS as the single source of truth from this point onwards.

Keegan (Tokens Studio) 30 days ago

💡 Plugin Feedback

Manual Numeric Input for Zoom Setting in Graph Visualization

Working with a large set of tokens makes it extremely difficult to use the graph visualization feature effectively. The current zoom controls lack the precision needed for navigating large datasets. The user proposes adding a manual numeric input field for the zoom setting, similar to the functionality found in web browsers.

Nuthan (Tokens Studio) About 1 month ago

âŋģ Graph Engine

Ability to scroll down the variables When Importing

Currently, users are restricted from scrolling when importing variables due to potential performance issues. However, the limited number of tokens visible at one time can be a blocker. To improve the import experience, it’s good to have the ability to scroll down at least 100 variables

Nuthan (Tokens Studio) About 1 month ago

💡 Plugin Feedback

🔷 Planned

[Penpot] Sync with GitHub

We are implementing the ability to store design tokens on remote storage and sync them with a GitHub repository. This feature will enable users to connect to a GitHub repo, manage their design tokens, and sync changes effectively. The following functionalities are essential for the successful implementation of this feature: Connecting to a GitHub Repository: Users can connect to a GitHub repository that contains design tokens by providing the required credentials: Personal Access Token, repo name, branch name, file path, and an optional base URL. Users can connect either to a single JSON file or to a folder containing multiple JSON files, including nested folders. Upon successful connection, the system should sync the tokens from the repository. Pushing and Pulling Changes: Users can push changes made to the design tokens in the Penpot to the connected GitHub repository, creating a commit. When pushing changes, users are prompted to write a commit message. The commit message cannot be blank; it must contain text. Users can pull changes from the GitHub repository to sync the latest token updates. Before finalizing a push or pull action, a diff should be displayed to show the changes being made. Error Handling: Proper error messages should be displayed if any issues occur during the connection, pushing, or pulling processes. This includes scenarios like incorrect credentials, network issues, or missing files. Additional Features (Good to Have): Users should be able to create a new branch directly from the Penpot interface. The system should support storing more than one repository and allow users to switch between them. Users should have the ability to see the list of branches on the connected repo and switch between them. Behavioral Considerations: If the user connects to a repo without any files, the system should display an error message indicating that there is no branch, so the process cannot proceed. If the specified file is missing, and there are no tokens locally, the system should still push the metadata. If there are existing tokens locally, it should reflect all base tokens and token files from the repository in Penpot If the application is closed without pushing changes to GitHub, the changes should be saved locally. When the app is reopened, it should recover and display the local changes.

Esther Cheran 2 months ago

🖋ī¸ Design Tokens in Penpot

💡 Requests

📚 Duplicating Tokens enhancements - QoL

Quality-of-life enhancements for duplicating tokens: https://feedback.tokens.studio/p/shortcut-for-duplicating-tokens When copying a token and you select another set, the pop-up automatically closes. It would be great when copying to multiple sets, to keep the dropdown open. > https://tokens-studio.slack.com/archives/C02JAL48UDN/p1723130192094899

Tokens Studio Team 2 months ago

đŸĢ  V2 Plugin Feedback

đŸŸŖ In Progress

[Penpot] Token sets

Token sets allow users to create groups or collections of tokens, providing an organized and manageable structure for design tokens. Token sets have several key features and behaviors: Default Token Set: On a new file, there will be a token set already existing. Creating New Sets: Every time a new set is created, it will be ordered after the existing sets. The name of the token set is not included in the name of the token. Users can create a token set and give it a unique name. Token Naming and Organization: Tokens with the same name can be created in different sets. Token sets should be ordered for clarity and organization. Reordering Token Sets: Users have the ability to drag and reorder token sets. The order of token sets is important for resolving token values. Tokens with the same name in a latter token set override the value of the token in an earlier token set. Enabling/Disabling Token Sets: Token sets can be enabled or disabled. If a token set is disabled, it will not be used in resolving the value of a token. These features ensure that users can effectively manage and prioritize their design tokens, facilitating a streamlined and flexible design workflow.

Esther Cheran 2 months ago

🖋ī¸ Design Tokens in Penpot

☑ī¸ Completed

❇ī¸ ❖ Export Styles with Variable References

Create Styles with Variable references For the Figma Styles which support Variable values, you can create and manage Styles with Variables references using Tokens Studio. This allows you to take advantage of the workflow benefits of working with Tokens Studio in Figma while sharing Styles and Variables with consumers of your Figma libraries. 👀 Note If this is your first time Exporting to Figma, you'll want to get familiar with the basics of the process, then come back to this guide. If you have a Free licence for Tokens Studio, follow the Export to Figma from Token Sets method. 1. Token setup Before you export your desired Tokens to Figma as Styles, ensure your Tokens have been created with Values that reference another token. Ensure the Tokens you wish to Export as Styles living in a Token Set that is separate from the Tokens which are being referenced in their values. This allows the plugin to export the desired token as Styles or Variables. 2. Create the Variables being referenced. If you haven't already, complete the Export to Figma as Variables process for the Tokens being referenced in the values of the Tokens you want to export as Styles. Ensure the Tokens you want to export as Styles are NOT exported as Variables. The plugin can only identify a Token by name to either Styles or Variables, not both. If needed, delete and detach any Variables you want to be created as styles. 3. Export your Tokens In order for the plugin to attach your Styles to the Variables you created, you have to configure the Token Sets or Themes you are Exporting as Styles to Reference the Token Sets where your Variables are located. The process is slightly different if you are Exporting from Themes or Token Sets. Export from Themes If you are Exporting your Tokens from Themes, navigate to the Themes feature in the plugin. Open the Theme you want to Export as Styles Ensure your Theme configuration has: Token Sets being Exported as Styles are Enabled. Token Sets being referenced in their values are Reference only. Confirm and save the Theme configuration and close the Theme modal. Open the Export to Styles and Variables modal and select your Export Options: The Style Types you want to create are selected (checkmark visible). The Create Styles with Variable references is selected (switch is on). Save and confirm. Select the Themes you want to Export as Styles. Ensure the themes you have exported as Variables are not selected. 📸 INSERT IMAGE - Themes Selected 📸 #add-image Check the newly created Styles. If the values are showing hard-coded values instead of your variables, don't worry! There's a known issue with the plugin where occasionally it needs to create the styles before it can attach the Variable references. Repeat the Export to Styles flow again, and the plugin will be able to map your variables to your styles. When you see the name of your Variables in the values of the Styles, the process is complete! ↓ If you have unexpected results, read the Troubleshooting section below. Ignore First Part of Token Name Prefix Styles with Active Theme Name Export from Token Sets If you are Exporting your Tokens from Token Sets, open the Export to Styles and Variables modal and select your Export Options to ensure: The Style Types you want to create are selected (checkmark visible). The Create Styles with Variable references is selected (switch is on). Save and confirm. From the Token Sets page, select the Change Sets Button to review your Token Set configuration. Review your Token Set configuration: Token Sets being Exported as Styles are Enabled. Token Sets being referenced in their values are Reference only. Save and confirm. Select the Export to Figma button Check the newly created Styles. If the values are showing hard-coded values instead of your variables, don't worry! There's a known issue with the plugin where, occasionally, it needs to create the styles before it can attach the Variable references. Repeat the Export to Styles flow again, and the plugin will be able to map your variables to your styles. When you see the name of your Variables in the values of the Styles, the process is complete! ↓ If you have unexpected results, read the Troubleshooting section below. 4. Troubleshooting Here are the common issues you might run into the first couple of times you try this process. Styles created with the correct values but not attached to Variables If the Tokens you exported are created as styles with the correct value, but they are missing the connection to the attached Variable, the plugin is missing the information it needs to attach it to a variable. Check your Token Values Ensure the Tokens you Exported have values that are referencing existing Tokens. Values are the name of a token inside curly brackets: {token-name} Ensure the Tokens being referenced have been created as Variables If not: Export to Figma as Variables for the Referenced Tokens so they are created Export to Figma as Styles following the steps above. Check your Export Options Ensure the Create Styles with Variable references option is enabled. If not, follow the Export as Styles steps above with the option enabled. Styles created with empty values If the Tokens you exported were created as Styles, but the values are "empty", the plugin is missing the information it needs to populate the values. Check your Theme and Token Set configuration. Ensure the Token Sets containing the Tokens being referenced in the Values are reference only. Ensure the Token Sets containing the Tokens being Exported as Styles are Enabled Styles created with partial values attached to Variables If the Tokens you exported were created as Styles, but some of the values are hard-coded and others are referencing Variables, the plugin is missing a connection to some the Variables. Check your Token Values and Token Types for compatibility. Not all Token Values and Token Types are compatible with Variables. A common example of this is Typography Composite Tokens which have Percentage (%) in their values for Line Height or Letter Spacing. The plugin will create the Text Style and show attached Variable references for most of the properties. The values with percentages will remain as hard-coded values because Figma does not support numeric values with units.

Sam - Tokens Studio 2 months ago

2

đŸĢ  V2 Plugin Feedback

✨ Improve UI of Recover local changes Modal

Current Functionality When you exit the plugin with changes in your local configuration vs what is stored in your repo, you get this warning message to either use the local ones or pull down from the repo and discard the local changes: User feedback - the button copy could be more explicit. Although “Yes” ties into the title, it doesn’t work quite as well grammatically with the modal body content. Given this is also a potentially destructive change if you hit “Cancel”, it might be better using a danger/destructive semantic:

Keegan (Tokens Studio) 3 months ago

💡 Plugin Feedback

🔀 Show Updated Number When Exporting Variables with Updated Values

Currently when you have existing Figma collections and export new values, the toast either shows "No Variables Created" as of rc10 or "3 collections and 120 variables created" in 38.9. 💭 How Might We It would be good to count the variables that are updated, separate from those created. rc10: 38.9

Keegan (Tokens Studio) 3 months ago

💡 Plugin Feedback

🧑đŸŊ‍đŸ’ģ Import Read-only Token-set + add local token sets

➕ Feature Request User would like the ability to pull read-only token set from a syncing provider. This system would allow the import of token sets in a read-only format, similar to how one would use ‘import in CSS’. Additionally, the user would like to have the capability to define local sets that can override some of the values from the imported token sets. Local Overrides: â€ĸ Users should have the ability to define local token sets that can override specific values from the imported token sets. â€ĸ This feature should enable customization and extension of the imported tokens without modifying the original imported values.

Keegan (Tokens Studio) 3 months ago

💡 Plugin Feedback

👀 Beta Testing

🐛[Penpot] Applying a spacing token on a board without layout crashes the app

When an individual property of a spacing token is applied on a board without a flex layout or grid layout, the app crashes. Steps for reproduction: Create a spacing token Create a board on the canvas Select the board, and apply the property Top via the context menu (right click the token) The app crashes

Esther Cheran 3 months ago

🖋ī¸ Design Tokens in Penpot

👀 Beta Testing

🐛 [Penpot] Applying stroke width on a shape without a stroke crashes the application

There is bug in the application that causes the app to crash when a stroke width token is applied to a shape without a stroke. Steps to reproduce: Create a Stroke Width token Create a shape on the canvas without stroke Apply the Stroke Width on the shape The application crashes

Esther Cheran 3 months ago

1

🖋ī¸ Design Tokens in Penpot

👀 Beta Testing

🐛 [Penpot] Opacity tokens do not work

Currently the opacity token does not work regardless of whether the value is in the format 0.5 or 50%. Steps to recreate: Create a new opacity token and give it a value of 0.5 or 50% The value of the token shows 0 Create a shape on the canvas with a fill Apply the opacity token on the shape The fill disappears Unapply the token and change the fill from the right panel The fill does not change and it is not possible to apply a fill again on the shape Expected result: In the above example, if the opacity token is applied the opacity of the fill should reduce to 50% On unapplying the token and changing the fill from the right panel, the fill should change on the shape

Esther Cheran 3 months ago

🖋ī¸ Design Tokens in Penpot

🔷 Planned

[Penpot] Import tokens

Currently in Penpot we have the option to create tokens and export them in json format. Another feature which is important for interoperability between files and tools is the ability to import or load tokens which has been worked on in the Penpot app or other tools. Desired solution: - Ability to import tokens - Maintain the structure of the token sets, themes etc using the $metadata and $themes - Ability to upload tokens in a multi-file structure - Ability to upload tokens in both DTCG format as well as legacy token format Current solution: - Ability to upload tokens in single file structure - Ability to upload tokens without set structure

Esther Cheran 3 months ago

🖋ī¸ Design Tokens in Penpot