XD 21 - plugin panel UI & improved CSS/layout!

[peterflynn]

XD 21 has shipped, with huge upgrades for plugins! If you see a lot of exclamation points in the overview below, well, that’s because we’re pretty excited about this release

Panel UI – Plugins can now show UI persistently in a side panel!

• How to define a panel
• Panel overview / reference
• Panel Quick Start tutorial
• Migrating from dialogs to panels

New ‘UXP 3’ CSS / layout engine

• Inline layout for links, bold/italic spans, etc!
• SVG UI icons!
• CSS gradients
• Radio buttons
• Lots more improved CSS support
• To enable this new UI engine, you must set minVersion to 21 or above. These changes will likely break the layout of any existing plugin UI, so plugins run in a compatibility mode by default. Opt into the new engine by bumping up your minVersion, and then be sure to test all the UI states of your plugin to make sure appearance is correct.

Further reading

• Adobe Tech Blog: full developer blog post
• Detailed XD 21 API changelog
• Complete diff of all API docs changes
• XD 21 new features for end users – new stakeholder/reviewing features

Happy coding – we can’t wait to see great things you build!

[cpryland]

Fantastic work, Adobe folk!

And sure looking forward to the panel drag’n’drop and CDT debugging (which I hope will also support VSCode debugging by inheritance)!

[cpryland]

Oh, does this release fix the niggling dropped spaces around <a> content?

[kerrishotts]

No; that’s still on our to-fix list. A fix was too risky to introduce so late in the game. You can put spaces inside your tags, or use white-space:pre-wrap if you want the previous behaviour.