Added the figma design system

[websiddu]

• Added the figma design system (https://thomas-lowry.github.io/figma-plugin-ds/)
• Now the UI follows the figma DS
• All the error badges will be aligned to the right
• Updated the UI for the bottom actions
• Removed the Truncate plugin, instead use CSS ellipsis
• Updated the settings panel UI

[destefanis]

Looks great except for small things! I know Figma's style is to use no border around the icons like we had in the previous design. However, I think with this design the ordering feels a bit off visually (which is why I did have them).

Would you mind changing the "re-run" button back into an icon? I think new users may confuse that button with as a necessary action (it's OK if it's something they learn to use if they need it).

I also think the button ordering should be "Jump to error" "refresh/re-run" "settings" like in the previous design. Icons in Figma are generally aligned right in the properties panel.

[destefanis]

A lot of great changes! Some design decisions I think we should address before merging.

[destefanis]

Thanks for all these changes, Ill set some time aside to review today!

[websiddu]

And regrading the re-run button, I have a strong feeling about it. As many people at Google thought its is refresh button.

I feel Re-run is more accurate and none gets confused. But if you have strong feelings I can it back. After all you are the owner. ;)

Also about the action button, any from the primary actions are aligned to the right of the panel. E.g dialogs, forms, even this git hub issues submit box. I would recommend Keeping the primary action towards and right and secondary action before that and then any third actions.

[destefanis]

Ok! That's solid feedback and I've been convinced. Let's keep the re-run button and the ordering of the buttons!

Appreciate your work and effort on this!