thomas-lowry / figma-plugin-ds Goto Github PK
View Code? Open in Web Editor NEWA small lightweight design system for use in Figma Plugins
License: MIT License
A small lightweight design system for use in Figma Plugins
License: MIT License
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?
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:
Have you also thought about this? What's your stance?
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. ๐
Forgot to remove, I guess):
figma-plugin-ds/js/disclosure.js
Line 17 in 18d30b4
figma-plugin-ds/js/selectMenu.js
Line 376 in f58d127
I suggest replacing it with because:
menu.style.display = "";
parent.replaceWith(menu)
According to the CSS declaration for .disclosure__content
, the content is not clickable
figma-plugin-ds/dist/figma-plugin-ds.css
Line 884 in a060f66
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)
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
I think the demo site is down... any plans to get it replaced?
Hi! I love this little DS โค๏ธ Have you considered publishing figma-plugin-ds as an npm package?
The company I work for requires a licenses to use open source code. Would it be possible to add a license to this?
Thanks!
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"
/>
figma-plugin-ds/dist/figma-plugin-ds.css
Line 1523 in 52bc3f0
Should be align-items: flex-start
add slider UI?
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.
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:
figma-plugin-ds/js/selectMenu.js
Line 131 in f58d127
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.
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
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.
Probably after changing selectMenu it is worth calling select.dispatchEvent (new Event ('change'))
for the handlers to work?
I would like to design my plugin UI using your figma file, I'm not sure if this can be done? Thank you
It'd be great if these components (JS/CSS/SCSS/etc) were published to npm!
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.
figma-plugin-ds/dist/figma-plugin-ds.css
Lines 1527 to 1529 in e1acbac
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.
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?
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.
Would appreciate any help or directions! Thanks!
OnChange event simply won't fire
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 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?
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.
Then I will be able to firstly design my plugin before building it ๐
Thannks!
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.:
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>
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?
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
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...
With Figma's latest release of dark mode, any chance of this being updated to include dark mode elements/UI updates?
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?
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.
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.