Entire project refactor - Githubissues

thomas-lowry / figma-plugin-ds

A small lightweight design system for use in Figma Plugins

MIT License

693 stars 71 forks source link

Entire project refactor #26

Closed thomas-lowry closed 4 years ago

thomas-lowry commented 4 years ago

I've been working on refactoring this project.

Here are a summary of improvements:

General improvements

refactored entire project with a gulp build configuration
added package.json
support both IIFE and ES6 modules
removed iconInput.js (Figma no longer highlights icons on focus on inputs and thus no JS is required)
replaced SCSS vars with CSS vars to share variable/base with Figma Plugin DS Svelte
introducing new base also adds a selection of utility classes for flex / spacing
markup refinements for switches, checkboxes and radio buttons

Icon improvements

automated svg inlining in build process
moved from base64 to svg+xml;utf8 encoding for smaller file size

Select menu improvements

added disabled states
automatically reinitialize menu when menu items are modified
expanded drop down will scroll and ensure menu fits within plugin iFrame
icon ability to include an icon within input

Decisions made

Made sense to support IIFE and ES6. IIFE's seem easier for newcomers
Moved away from Rollup ( as seen in #25 ) in favor of Gulp, much easier config and inline options available
Some breaking changes with in favor of simpler markup
Published as npm package npm install --save-dev figma-plugin-ds

Remaining work

Finish rough documentation
Finish new documentation website