figma-plugin-ds
Version:
A UI library with CSS and vanilla JS that match the Figma UI for building plugins.
219 lines (170 loc) • 6.58 kB
HTML
<head>
<meta charset="utf-8">
<title>Figma Plugin DS</title>
<link rel="stylesheet" href="../dist/figma-plugin-ds.css">
</head>
<body class="m-medium">
<h1>Components</h1>
<h3>Select menu</h3>
<select name="" id="select-menu1" class="select-menu">
<option value="">Make a selection</option>
<option value="1" >Item 1</option>
<option value="2">Item 2</option>
<option value="3" >Item 3</option>
<option value="4" >Item 4</option>
</select>
<select name="" id="select-menu1" class="select-menu">
<option value="1" >Item 1</option>
<option value="2" selected>Item 2</option>
<option value="3" >Item 3</option>
<option value="4" >Item 4</option>
</select>
<select name="" id="select-menu2" class="select-menu">
<option value="1" >Item 1</option>
<option value="2" selected>Item 2</option>
<option value="3" >Item 3</option>
<option value="4" >Item 4</option>
</select>
<h3>Textarea</h3>
<textarea class="textarea" rows="2">Hello</textarea>
<hr>
<h3>Switches</h3>
<div class="switch">
<input class="switch__toggle" type="checkbox" id="switch1">
<label class="switch__label" for="switch1">Label</label>
</div>
<div class="switch">
<input class="switch__toggle" type="checkbox" id="switch2" checked>
<label class="switch__label" for="switch2">Label</label>
</div>
<div class="switch">
<input class="switch__toggle" type="checkbox" id="switch3" disabled>
<label class="switch__label" for="switch3">Label</label>
</div>
<div class="switch">
<input class="switch__toggle" type="checkbox" id="switch4" checked disabled>
<label class="switch__label" for="switch4">Label</label>
</div>
<hr>
<h3>Section</h3>
<div class="section-title">Section header</div>
<hr>
<h3>Radio button</h3>
<div class="radio">
<input id="radioButton1"type="radio" class="radio__button" name="radio-test">
<label for="radioButton1" class="radio__label">Radio button</label>
</div>
<div class="radio">
<input id="radioButton2"type="radio" class="radio__button" name="radio-test"checked>
<label for="radioButton2" class="radio__label">Radio button</label>
</div>
<div class="radio">
<input id="radioButton3"type="radio" class="radio__button" name="radio-test"disabled>
<label for="radioButton3" class="radio__label">Radio button</label>
</div>
<hr>
<h3>Onboarding tip</h3>
<div class="onboarding-tip">
<div class="icon icon--visible"></div>
<div class="onboarding-tip__msg">Onboarding tip goes here.</div>
</div>
<hr>
<h3>Input</h3>
<div class="input mb-xxsmall">
<input type="input" class="input__field" placeholder="Placeholder">
</div>
<div class="input mb-xxsmall">
<input type="input" class="input__field" value="Value">
</div>
<div class="input mb-xxsmall">
<input type="input" class="input__field" value="Value" disabled>
</div>
<div class="input input--with-icon mb-xxsmall">
<div class="icon icon--angle"></div>
<input type="input" class="input__field" value="Value">
</div>
<div class="input input--with-icon mb-small">
<div class="icon icon--spinner icon--spin"></div>
<input type="input" class="input__field" placeholder="Loading">
</div>
<hr>
<h3>Icons</h3>
<div class="flex row">
<div class="icon icon--hyperlink"></div>
<div class="icon icon--theme icon--black8"></div>
<div class="icon icon--theme icon--black3"></div>
<div class="icon icon--theme icon--blue"></div>
<div class="icon icon--theme icon--purple"></div>
<div class="icon icon--theme icon--red"></div>
<div class="icon icon--theme icon--yellow"></div>
<div class="icon icon--theme icon--hot-pink"></div>
<div class="icon icon--theme icon--green"></div>
</div>
<div class="flex row">
<div class="icon icon">W</div>
<div class="icon icon--black8">W</div>
<div class="icon icon--black3">W</div>
<div class="icon icon--blue">W</div>
<div class="icon icon--purple">W</div>
<div class="icon icon--red">W</div>
<div class="icon icon--yellow">W</div>
<div class="icon icon--hot-pink">W</div>
<div class="icon icon--green">W</div>
</div>
<h3>Icon Button</h3>
<div class="icon-button">
<div class="icon icon--blend"></div>
</div>
</div>
<hr>
<h3>Buttons</h3>
<button class="button button--primary mb-xxsmall">Label</button>
<button class="button button--primary mb-xxsmall" disabled>Label</button>
<button class="button button--primary-destructive mb-xxsmall">Label</button>
<button class="button button--primary-destructive mb-xxsmall" disabled>Label</button>
<button class="button button--secondary mb-xxsmall">Label</button>
<button class="button button--secondary mb-xxsmall" disabled>Label</button>
<button class="button button--secondary-destructive mb-xxsmall">Label</button>
<button class="button button--secondary-destructive mb-xxsmall" disabled>Label</button>
<button class="button button--tertiary mb-xxsmall">Label</button>
<button class="button button--tertiary mb-xxsmall" disabled>Label</button>
<button class="button button--tertiary-destructive mb-xxsmall">Label</button>
<button class="button button--tertiary-destructive mb-xxsmall" disabled>Label</button>
<hr>
<h3>Checkboxes</h3>
<div class="checkbox">
<input id="uniqueCheckboxId" type="checkbox" class="checkbox__box">
<label for="uniqueCheckboxId" class="checkbox__label">Checkbox label</label>
</div>
<div class="checkbox">
<input id="uniqueCheckboxId2" type="checkbox" class="checkbox__box" checked>
<label for="uniqueCheckboxId2" class="checkbox__label">Checkbox label</label>
</div>
<div class="checkbox">
<input id="uniqueCheckboxId3" type="checkbox" class="checkbox__box" disabled>
<label for="uniqueCheckboxId3" class="checkbox__label">Checkbox label</label>
</div>
<div class="checkbox">
<input id="uniqueCheckboxId4" type="checkbox" class="checkbox__box" checked disabled>
<label for="uniqueCheckboxId4" class="checkbox__label">Checkbox label</label>
</div>
<hr>
<h3>Disclosure Panels</h3>
<ul class="disclosure">
<li class="disclosure__item disclosure--expanded">
<div class="disclosure__label disclosure--section">Disclosure</div>
<div class="disclosure__content">Panel content here</div>
</li>
<li class="disclosure__item">
<div class="disclosure__label">Disclosure</div>
<div class="disclosure__content">Panel content here</div>
</li>
</ul>
<script src="../dist/iife/figma-plugin-ds.js"></script>
<script>
selectMenu.init();
disclosure.init();
</script>
</body>
</html>