Skip to main content
Known Participant
June 8, 2021
Question

Confusions about customised Target Language Support in the VSCode Extension for Adobe XD

  • June 8, 2021
  • 3 replies
  • 595 views

Hi there,

 

Currently, I am reviewing the VS Code Extension [1], and, I am confused which target languages are supported, and, how to build a reliable solution for our own target languages (e.g. Qt support [2], TouchGFX support [3], Unity3D support [4] ... etc.)? Does this Adobe XD Extension support us to build a DSPs for our own target languages, or, do we need to build our own solutions built on Amazons Style Dictionary [5] to achieve this? Currently, only certain target languages [6] and code snippet languages [7] are supported. Or ... can this be achieved already with the currently existing code snippet languages section without the need to choose a certain target language to create a DSP? Could you please give advice in how to proceed?

 

Thx, Sebastian

 

[1] https://www.adobe.com/products/xd/learn/design-systems/cloud-libraries/vscode-extension.html

[2] https://doc.qt.io/

[3] https://support.touchgfx.com/docs/introduction/welcome

[4] https://docs.unity3d.com/ScriptReference/

[5] https://amzn.github.io/style-dictionary/

[6] Currently supported target languages:

  • CSS
  • Flutter (Dart)
  • Android (Java)
  • Javascript
  • iOS (Objective-C)
  • SCSS
  • iOS (Swift)

[7] Currently supported code snippet languages:

 

"languages": [
      {
        "label": "Coffeescript",
        "export_tokens": false,
        "snippet_id": "coffeescript",
        "syntax": "text/x-coffeescript"
      },
      {
        "label": "C",
        "export_tokens": false,
        "snippet_id": "c",
        "syntax": "text/x-csrc"
      },
      {
        "label": "C#",
        "export_tokens": false,
        "snippet_id": "csharp",
        "syntax": "text/x-csharp"
      },
      {
        "label": "CSS",
        "export_tokens": true,
        "snippet_id": "css",
        "syntax": "text/css",
        "ext-com_adobe_xd-styledictionary_id": "css"
      },
      {
        "label": "Flutter (Dart)",
        "export_tokens": false,
        "snippet_id": "dart",
        "syntax": "application/vnd.dart",
        "ext-com_adobe_xd-styledictionary_id": "flutter"
      },
      {
        "label": "F#",
        "export_tokens": false,
        "snippet_id": "fsharp",
        "syntax": "text/x-csharp"
      },
      {
        "label": "Go",
        "export_tokens": false,
        "snippet_id": "go",
        "syntax": "text/x-go"
      },
      {
        "label": "Groovy",
        "export_tokens": false,
        "snippet_id": "groovy",
        "syntax": "text/x-groovy"
      },
      {
        "label": "Handlebars",
        "export_tokens": false,
        "snippet_id": "handlebars",
        "syntax": "text/x-handlebars-template"
      },
      {
        "label": "HTML",
        "export_tokens": false,
        "snippet_id": "html",
        "syntax": "text/html"
      },
      {
        "label": "Android (Java)",
        "export_tokens": false,
        "snippet_id": "java",
        "syntax": "text/x-java",
        "ext-com_adobe_xd-styledictionary_id": "android"
      },
      {
        "label": "JavaScript",
        "export_tokens": false,
        "snippet_id": "javascript",
        "syntax": "text/javascript",
        "ext-com_adobe_xd-styledictionary_id": "js"
      },
      {
        "label": "JavaScript React",
        "export_tokens": false,
        "snippet_id": "javascriptreact",
        "syntax": "text/jsx"
      },
      {
        "label": "Less",
        "export_tokens": false,
        "snippet_id": "less",
        "syntax": "text/x-less"
      },
      {
        "label": "Lua",
        "export_tokens": false,
        "snippet_id": "lua",
        "syntax": "text/x-lua"
      },
      {
        "label": "iOS (Objective-C)",
        "export_tokens": false,
        "snippet_id": "objective-c",
        "syntax": "text/x-objectivec",
        "ext-com_adobe_xd-styledictionary_id": "ios"
      },
      {
        "label": "Objective-C++",
        "export_tokens": false,
        "snippet_id": "objective-cpp",
        "syntax": "text/x-c++src"
      },
      {
        "label": "Pug",
        "export_tokens": false,
        "snippet_id": "jade",
        "syntax": "text/html"
      },
      {
        "label": "Python",
        "export_tokens": false,
        "snippet_id": "python",
        "syntax": "text/x-python"
      },
      {
        "label": "Razor (cshtml)",
        "export_tokens": false,
        "snippet_id": "razor",
        "syntax": "text/x-csharp"
      },
      {
        "label": "Ruby",
        "export_tokens": false,
        "snippet_id": "ruby",
        "syntax": "text/x-ruby"
      },
      {
        "label": "Rust",
        "export_tokens": false,
        "snippet_id": "rust",
        "syntax": "text/x-rustsrc"
      },
      {
        "label": "SCSS",
        "export_tokens": false,
        "snippet_id": "scss",
        "syntax": "text/x-sass",
        "ext-com_adobe_xd-styledictionary_id": "scss"
      },
      {
        "label": "SASS",
        "export_tokens": false,
        "snippet_id": "sass",
        "syntax": "text/x-sass"
      },
      {
        "label": "ShaderLab",
        "export_tokens": false,
        "snippet_id": "shaderlab",
        "syntax": "text/x-vertex"
      },
      {
        "label": "iOS (Swift)",
        "export_tokens": false,
        "snippet_id": "swift",
        "syntax": "text/x-swift",
        "ext-com_adobe_xd-styledictionary_id": "ios-swift"
      },
      {
        "label": "TypeScript",
        "export_tokens": false,
        "snippet_id": "typescript",
        "syntax": "text/typescript"
      },
      {
        "label": "TypeScript React",
        "export_tokens": false,
        "snippet_id": "typescriptreact",
        "syntax": "text/typescript-jsx"
      },
      {
        "label": "Markdown",
        "export_tokens": false,
        "snippet_id": "markdown",
        "syntax": "text/x-markdown"
      }
    ]

 

 

    This topic has been closed for replies.

    3 replies

    smuxitAuthor
    Known Participant
    July 30, 2021

    Hi again, has anyone any updates on this matter? Is the Adobe XD VSCode Extension still under active development? Are you still working on a Design2Code-Toolchain [1]? If not, maybe Supernova.io [2] would be of help in near future, which also works on a VSCode Extension [3].

     

    [1] https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/12931119-built-in-library-of-common-ui-elements

    [2] https://www.supernova.io

    [3] https://developers.supernova.io/using-exporters/running-exporters

     

    smuxitAuthor
    Known Participant
    June 16, 2021

    Hi there, does anyone in here use the Adobe XD Extension for VSCode [1]. Help appreciated. Thx.

    [1] https://www.adobe.com/products/xd/learn/design-systems/cloud-libraries/vscode-extension.html

    smuxitAuthor
    Known Participant
    June 8, 2021

    For some reason, this conversation named "Confusions about customised Target Language Support in the VSCode Extension for Adobe XD" does not show up in the Adobe XD conversation list ...
    https://community.adobe.com/t5/adobe-xd/bd-p/xd?page=1&sort=latest_replies&filter=no_replies

    Any advice on this conversation?