thomas-lowry / figma-plugin-ds Goto Github PK

Hey,

fantastic job on this UI toolkit for figma plugins. I just used it and I figured there is a bug with the select-menu. It fails and breaks everything after, if there are no options.

Here is a screenshot I took from current development.

Looks like this is the affected line:

as this is the only .selected occurence ;)

My workaround is, that I only add the class class="select-menu" if I know I have options to that select and run the init after.

I would like to design my plugin UI using your figma file, I'm not sure if this can be done? Thank you

When an icon (in particular the spinner) is spinning, the center of the icon has an offset that makes the animation look wrong:

You can see a live demo here:
https://codesandbox.io/s/vigilant-dubinsky-ywl8q?file=/index.html

It is caused by this line:

background-position: 50% 50%;

Do you think we can fix this? Happy to open a PR for this.

Hi! I love this little DS ❤️ Have you considered publishing figma-plugin-ds as an npm package?

Do you think it would be possible to use currentColor instead of #000 for the fill of the SVG icons (or potentially just leave it empty, so it inherits the color value)? In this way it would be easier to tint the icons (instead of using CSS filters). Also, since the current fill is black anyway, this probably would have a minimal impact on the existing usage of the icons.

If it's something you would consider, let me know that I can open a PR.

Should be align-items: flex-start

Is there a way to alter the selected item of a selectMenu programatically? I see the selectedItem variable in the code, but wasn't sure if this was a private variable, seems to be no instance functions associated with it.

in that section https://thomas-lowry.github.io/figma-plugin-ds/#visual-bell
Loading has wrapper <div class="visual-bell">
which must be <div class="visual-bell visual-bell--loading"> instead.

After using your lib more often, I might have the idea, that web-components might be a good way to distribute it (at least for those components that need javascript backup). What brought me to web-components rather than using an existing FE framework:

• It's main purpose is to be used within just html/css, figma plugin sandbox luckily doesn't come with any specific framework/library out of the box
• In case somebody decides to use his favorite framework/library, it still can be used
• It's the common lowest common denominator amongst all that

Have you also thought about this? What's your stance?

add slider UI?

Forgot to remove, I guess):

Hey Tom, great work on the plugin ds!
I'm wondering if texts elements like Labels should remove the cursor change on hover, since in the native Figma UI almost all texts keeps the cursor unchanged.
What do you think?

Seems there is a lot of steps to build, minify and otherwise be able to reproduce the same files that exists here in this repository.

In order to contribute, it'd be great to be able to run these steps locally too. Currently I'm trying to figure out why the <select> element is not firing change events and was gonna use this websites examples as a base, but because I don't know/understand how this project is built, I cannot use it...

I think the demo site is down... any plans to get it replaced?

Am I missing something? You have import styles from 'figma-plugin-ds/dist/figma-plugin-ds.css' listed in the documentation, but that file isn't a module.css file so it comes back undefined if you console.log the styles export and if you try and use it in your code with {styles.button} or something it throws caught TypeError: Cannot read properties of undefined (reading 'button')

I just checked classnames for components, and it seems not backward compatible with previous realization. For sure it looks better, because it's kind of BEM, but good to mention this in README

I have a select control that uses the figma-plugin-ds CSS. When I dynamically populate it with multiple option elements using JavaScript, the menu only shows the options that existed before adding them (even though in the code they are there). Is there a way to force the control to refresh?

If I use a native, non-skinned, select control I can see the dynamically added option elements.

The company I work for requires a licenses to use open source code. Would it be possible to add a license to this?

Thanks!

According to the CSS declaration for .disclosure__content, the content is not clickable

But if a user puts an interactive element (eg. a button, a switch, etc.) inside the "disclosure" component, the interactive element is not clickable. I suggest overwriting the property when the disclose is expanded:

.disclosure--expanded .disclosure__content {
    pointer-events: all;
}

(Happy to open a PR if you think is OK)

Hey,

I checked the code and saw that the active outline is disabled for the switch: https://github.com/thomas-lowry/figma-plugin-ds/blob/master/src/styles/components/_switch.scss#L11-L15

Why is this? Can this change be reverted?

Then I will be able to firstly design my plugin before building it 😇

Thannks!

Probably after changing selectMenu it is worth calling select.dispatchEvent (new Event ('change')) for the handlers to work?

Seems when you press the button, it keeps it in the clicked/active state until you click on something outside of it, instead of just doing it when clicking on it.

Could try to fix this, but blocked because of #8

Hey,

it would be great if you could tag releases and add the changes to a release so one can easily see the difference on the github releases page. 👍

Hi, i'm trying to get the plugin up and running. Have followed the instructions but styles are not showing up.

<link
  rel="stylesheet"
  href="./node_modules/figma-plugin-ds/dist/figma-plugin-ds.css"
/>

Hey Thomas - I can't seem to get the Disclosures to work out of the box in a React UI. Clicking on them doesn't seem to be swapping the --expanded class properly. If I add it manually in the React code it does get the correct --expanded styling, so I think the issue may be somewhere in the JS itself.

I was using .visual-bell and its various states in the previous version of this design system and now it doesn't seem to be present? Is it called something else? Removed?

Hello, sorry for posting issue. I don't understand how to use this kit. I have put <link> stylesheet in ui.html file, then I tried to make a full html page in ui.html and put these tags in <head /> then I tried to copy css from node_modules directly to ui.html and reference it as href="./css/figma-plugin-ds.css" but Figma seems to ignore any links and iframe is displayed as base64

This is the popup that appears with plugin

Any interest in adding a dropdown list as well? Would be great to have. If someone does the same design they have in Figma, I think I could implement and submit a patch relatively quickly.

Would appreciate any help or directions! Thanks!

OnChange event simply won't fire ☹️

I just started using this library and realized that there is no dedicated element style support for the integrated Figma color input which uses an integrated sandbox for color picking with RGB, HEX and HSB. It was quite disappointing to not find any style class for it in this repository as it is the standard for any color input in any newer Figma plugin

<div class="input">
  <input type="color" id="color1" class="colorPicker"/>
  <label for="colorPicker">Color 1</label>
</div>

Is there any possibility for the inclusion of the color input element style support in this repository in the future?

I want my UI to load with defaults, and I'm trying to set the value of the select, but it doesn't work:

directionMenu.value = defaults.direction;

is there another way?

thanks

Idan

Hey! First of all, great job on making this awesome resource 👏

I'm having some issues with using the Select menu component in the way it's presented on the docs. I'm importing the whole figma-plugin-ds.min.js and then running the code in the docs to initialize, i.e.:

I'm doing this

selectMenu.init({
    position: 'positionToSelection' //other options: 'under', 'overlap'
});

The markup is also the same as in the docs:

<select name="" id="select-menu1" class="select-menu">
    <option value="1" selected="selected">Item 1</option>
    <option value="2" >Item 2</option>
</select>

Then I get this error

But when I do this, figma-plugin-ds.min.js is throwing this error:

Uncaught TypeError: Cannot read property 'classList' of null

This seems easy enough to work around, but I can't help but feel like I'm doing something silly :)

Has anyone else stumbled upon this issue? Or alternatively, does someone know how to initialize it properly?

With Figma's latest release of dark mode, any chance of this being updated to include dark mode elements/UI updates?

I suggest replacing it with because:

1. The menu is hidden above, but you should at least display it again.
2. replaceWith does not create new nodes, which preserves their properties.

menu.style.display = "";
parent.replaceWith(menu)

It'd be great if these components (JS/CSS/SCSS/etc) were published to npm!

The icon should have a flex none applied to it, when is inside the Onboarding Tip:

.onboarding-tip .icon {
  flex: none;
}

otherwise when the Onboarding Tip is used in a small horizontal container and the text is long, the icon collapses its size.

These icons are present in the Figma UI but missing from UI2 doc and the package

• Drop Shadow
• Layer Blur
• Background Blur
• Inner Blur