{"id":13579893,"url":"https://github.com/thomas-lowry/figma-plugin-ds","last_synced_at":"2025-05-15T13:06:10.460Z","repository":{"id":40545851,"uuid":"199364605","full_name":"thomas-lowry/figma-plugin-ds","owner":"thomas-lowry","description":"A small lightweight design system for use in Figma Plugins","archived":false,"fork":false,"pushed_at":"2024-07-02T01:20:32.000Z","size":414,"stargazers_count":720,"open_issues_count":19,"forks_count":72,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-05-12T02:06:27.150Z","etag":null,"topics":["figma-plugins"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thomas-lowry.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-07-29T02:34:27.000Z","updated_at":"2025-05-05T09:04:14.000Z","dependencies_parsed_at":"2024-01-06T07:50:17.092Z","dependency_job_id":"59d024c1-c8ce-408d-beda-1e4658e28531","html_url":"https://github.com/thomas-lowry/figma-plugin-ds","commit_stats":{"total_commits":108,"total_committers":6,"mean_commits":18.0,"dds":"0.17592592592592593","last_synced_commit":"a060f663a1f63d14cbc6abd6927c7bb512f1176e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomas-lowry%2Ffigma-plugin-ds","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomas-lowry%2Ffigma-plugin-ds/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomas-lowry%2Ffigma-plugin-ds/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomas-lowry%2Ffigma-plugin-ds/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thomas-lowry","download_url":"https://codeload.github.com/thomas-lowry/figma-plugin-ds/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254346624,"owners_count":22055808,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["figma-plugins"],"created_at":"2024-08-01T15:01:44.469Z","updated_at":"2025-05-15T13:06:10.437Z","avatar_url":"https://github.com/thomas-lowry.png","language":"SCSS","funding_links":[],"categories":["CSS","模板和UI组件包","SCSS","Templates \u0026 UI Kits"],"sub_categories":[],"readme":"# Figma Plugin DS\n\nA lightweight UI library for creating Figma plugins.\n\n## Contents\n\n  * [Contents](#contents)\n  * [Intro](#intro)\n  * [Getting started](#getting-started)\n  * [Roadmap](#roadmap)\n  * [Components](#components)\n    + [Button](#button)\n    + [Checkbox](#checkbox)\n    + [Disclosure](#disclosure)\n    + [Icon](#icon)\n    + [Icon button](#icon-button)\n    + [Input](#input)\n    + [Labels and sections](#labels-and-sections)\n    + [Onboarding tip](#onboarding-tip)\n    + [Radio button](#radio-button)\n    + [Select menu](#select-menu)\n    + [Switch](#switch)\n    + [Textarea](#textarea)\n    + [Type](#type)\n\n\n## Intro\n\nThis package contains CSS and Javascript to closely match the look, feel and function of those found in Figma. It has been created without any frameworks (like React, Vue, etc.) and only leverages (native) javascript for components not possible without.\n\n\n## Getting started\n\nYou can install this package as a dependecy on your own project: `npm install figma-plugin-ds`\n\n\n**Styles**\nTo use the styles, you can use them via a link tag, or import them like a module using a CSS loader.\n```HTML\n\u003c!-- Standard link tag--\u003e\n\u003clink rel=\"stylesheet\" href=\"../../node_modules/figma-plugin-ds/dist/figma-plugin-ds.css\"\u003e\n```\n\n```Javascript\n//You could also inport the css via a CSS Loader in your JS environment (refer to syntax of whatever loader you are using)\nimport styles from 'figma-plugin-ds/dist/figma-plugin-ds.css'\n```\n\nTo use the Select menu or Disclosure components, you will need to import the Javascript files as well. This package supports both standard IIFE (Immediately Invoked Function Expressions) and ES6 Modules. There are a number of ways to get started.\n\n**Scripts: IIFE hosted on CDN (quick and easy, I don't want to mess with npm packages)**\n```HTML\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/thomas-lowry/figma-plugin-ds/dist/iife/figma-plugin-ds.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    selectMenu.init(); //initiates the select menu component\n    disclosure.init(); //initiates the disclosure component\n\u003cscript\u003e\n```\n\n**Scripts: IIFE**\n```HTML\n\u003c!-- Standard link tag--\u003e\n\u003cscript src=\"../node_modules/figma-plugin-ds/dist/iife/figma-plugin-ds.js\"\u003e\u003c/script\u003e \n```\n\n**Scripts: ES6 Modules**\n```Javascript\nimport { selectMenu, disclosure } from 'figma-plugin-ds';\n```\n\n\n## Roadmap\n- New documentation website \n- Improved support for keyboard nav in the select menu\n- Slider component\n\n\n---\n\n# Components\n\n### Button\n\nTo use the button, use the following HTML markup. Each button has a destructive option. Teritary buttons are styled like hyperlinks.\n\n```HTML\n\u003c!-- Primary --\u003e\n\u003cbutton class='button button--primary'\u003eLabel\u003c/button\u003e \n\u003cbutton class='button button--primary-destructive'\u003eLabel\u003c/button\u003e\n\u003cbutton class='button button--primary' disabled\u003eLabel\u003c/button\u003e \n\n\u003c!-- Secondary --\u003e\n\u003cbutton class='button button--secondary'\u003eLabel\u003c/button\u003e\n\u003cbutton class='button button--secondary-destructive'\u003eLabel\u003c/button\u003e\n\u003cbutton class='button button--secondary' disabled\u003eLabel\u003c/button\u003e\n\n\u003c!-- Tertirary (Hyperlink style button) --\u003e\n\u003cbutton class='button button--tertiary'\u003eLabel\u003c/button\u003e\n\u003cbutton class='button button--tertiary-destructive'\u003eLabel\u003c/button\u003e\n\u003cbutton class='button button--tertiary' disabled\u003eLabel\u003c/button\u003e\n```\n\n**Modifiers**\n\n| Modifier class                       | Description                                                                                     |\n|--------------------------------------|-------------------------------------------------------------------------------------------------|\n| `button--primary`                    | Primary button                                                                                  |\n| `button--primary-destructive`        | Primary button with red destructive variant for actions such as deleting something              |\n| `button--secondary`                  | Secondary button with outline style                                                             |\n| `button--secondary-destructive`      | Secondary button with red destructive variant for actions such as deleting something            |\n| `button--tertiary`                   | Tertiary button with hyperlink style                                                            |\n| `button--tertiary-destructive`       | Tertiary button with red destructive variant for actions such as deleting something             |\n\n---\n\n### Checkbox\n\nTo use the checkbox, use the following HTML markup. Remember each checkbox should get a unique ID that is referenced in the label. This ensures the checkbox and the entire label are clickable.\n\n```HTML\n\u003c!-- Checkbox unchecked --\u003e\n\u003cdiv class=\"checkbox\"\u003e\n  \u003cinput id=\"uniqueId\" type=\"checkbox\" class=\"checkbox__box\"\u003e\n  \u003clabel for=\"uniqueId\" class=\"checkbox__label\"\u003eLabel\u003c/label\u003e\n\u003c/div\u003e\n\n\u003c!-- Checkbox checked --\u003e\n\u003cdiv class=\"checkbox\"\u003e\n  \u003cinput id=\"uniqueId\" type=\"checkbox\" class=\"checkbox__box\" checked\u003e\n  \u003clabel for=\"uniqueId\" class=\"checkbox__label\"\u003eLabel\u003c/label\u003e\n\u003c/div\u003e\n\n\u003c!-- Checkbox disabled --\u003e\n\u003cdiv class=\"checkbox\"\u003e\n  \u003cinput id=\"uniqueId\" type=\"checkbox\" class=\"checkbox__box\" disabled\u003e\n  \u003clabel for=\"uniqueId\" class=\"checkbox__label\"\u003eLabel\u003c/label\u003e\n\u003c/div\u003e\n```\n\n---\n\n### Disclosure\n\nTo use a disclosure panel, you must use the following markup and also make sure you initialize the Javascript for the disclosure to work. \n\n```HTML\n\u003c!-- Disclosure --\u003e\n\u003cul class=\"disclosure\"\u003e\n  \u003cli class=\"disclosure__item disclosure--expanded\"\u003e\n    \u003cdiv class=\"disclosure__label disclosure--section\"\u003eDisclosure heading\u003c/div\u003e \u003c!-- This item is styled as a section --\u003e\n    \u003cdiv class=\"disclosure__content\"\u003ePanel content here\u003c/div\u003e\n  \u003c/li\u003e\n\n  \u003cli class=\"disclosure__item disclosure--expanded\"\u003e \u003c!-- This item is expanded on load --\u003e\n    \u003cdiv class=\"disclosure__label\"\u003eDisclosure heading\u003c/div\u003e\n    \u003cdiv class=\"disclosure__content\"\u003ePanel content here\u003c/div\u003e\n  \u003c/li\u003e\n\n  \u003cli class=\"disclosure__item\"\u003e\n    \u003cdiv class=\"disclosure__label\"\u003eDisclosure heading\u003c/div\u003e\n    \u003cdiv class=\"disclosure__content\"\u003ePanel content here\u003c/div\u003e\n  \u003c/li\u003e\n\u003c/ul\u003e\n```\n\nTo initialize with Javascript:\n```Javascript\n//initialize all disclosure panels\ndisclosure.init();\n\n//uninitialize all disclosure panels\ndisclosure.destroy();\n```\n\n**Modifiers**\n\n| Modifier class         | Description                                                                                     |\n|------------------------|-------------------------------------------------------------------------------------------------|\n| `disclosure--section`  | Add this class to the `disclosure__label` to style it like a heading                            |\n| `disclosure--expanded` | Add this class to the `disclosure__item` to have it expanded on load                            |\n\n---\n\n### Icon\n\nTo use the icon component, use the following markup. Apply the appropriate modifier class to select the item you wish to use, you can also add additional modifiers to change the color, or even spin the icon. You can also specify no icon name to use a text character as an icon (for example, like found in the width + height icon inputs in Figma)\n\n```HTML\n\u003c!-- Icon --\u003e\n\u003cdiv class=\"icon icon--theme\"\u003e\u003c/div\u003e\n\n\u003c!-- Icon with blue modifier class to change color --\u003e\n\u003cdiv class=\"icon icon--theme icon--blue\"\u003e\u003c/div\u003e\n\n\u003c!-- Spinner icon with spinning animation--\u003e\n\u003cdiv class=\"icon icon--spinner icon--spin\"\u003e\u003c/div\u003e\n\n\u003c!-- Text icon --\u003e\n\u003cdiv class=\"icon\"\u003eW\u003c/div\u003e\n```\n\n**Modifiers**\n\n| Modifier class     | Description                                                                                     |\n|--------------------|-------------------------------------------------------------------------------------------------|\n| `icon--iconName`*  | Sepcify which icon to use. Ex: `icon--adjust` or `icon--settings`                               |\n| `icon--spin`       | Causes the icon to spin in an endless loop (for example: a loader used with `icon--spinner`)    |\n| `icon--colorName`* | Pass the name of any Figma color var to this prop. Ex: `icon--blue` or `icon--black3`           |\n\n_*Colors accepted: icon--blue, icon--purple, icon--purple4, icon--hot-pink, icon--green, icon--red, icon--yellow, icon--black, icon--black8, icon--black3, icon--white, icon--white8, icon--white4_\n\n**Icons**\n\nTo use an icon, add one of the following modifier classes (see markup example above).\n\n| Icon                                                                                   | Modifier class                        |\n|----------------------------------------------------------------------------------------|---------------------------------------|\n| ![IconAdjust](src/icons/adjust.svg \"icon\")                                             | `icon--adjust`                        |\n| ![IconAlert](src/icons/alert.svg \"icon\")                                               | `icon--alert`                         |\n| ![IconAngle](src/icons/angle.svg \"icon\")                                               | `icon--angle`                         |\n| ![IconArrowLeftRight](src/icons/arrow-left-right.svg \"icon\")                           | `icon--arrow-left-right`              |\n| ![IconUpDown](src/icons/arrow-up-down.svg \"icon\")                                      | `icon--updown`                        |\n| ![IconAutoLayoutHorizontal](src/icons/auto-layout-horizontal.svg \"icon\")               | `icon--auto-layout-horizontal`        |\n| ![IconAutoLayoutVertical](src/icons/auto-layout-vertical.svg \"icon\")                   | `icon--auto-layout-vertical`          |\n| ![IconBack](src/icons/back.svg \"icon\")                                                 | `icon--back`                          |\n| ![IconBlendEmpty](src/icons/blend-empty.svg \"icon\")                                    | `icon--blend-empty`                   |\n| ![IconBlend](src/icons/blend.svg \"icon\")                                               | `icon--blend`                         |\n| ![IconBreak](src/icons/break.svg \"icon\")                                               | `icon--break`                         |\n| ![IconCaretDown](src/icons/caret-down.svg \"icon\")                                      | `icon--caret-down`                    |\n| ![IconCaretLeft](src/icons/caret-left.svg \"icon\")                                      | `icon--caret-left`                    |\n| ![IconCaretRight](src/icons/caret-right.svg \"icon\")                                    | `icon--caret-right`                   |\n| ![IconCaretUp](src/icons/caret-up.svg \"icon\")                                          | `icon--caret-up`                      |\n| ![IconCheck](src/icons/check.svg \"icon\")                                               | `icon--check`                         |\n| ![IconClose](src/icons/close.svg \"icon\")                                               | `icon--close`                         |\n| ![IconComponent](src/icons/component.svg \"icon\")                                       | `icon--component`                     |\n| ![IconCornerRadius](src/icons/corner-radius.svg \"icon\")                                | `icon--corner-radius`                 |\n| ![IconCorners](src/icons/corners.svg \"icon\")                                           | `icon--corners`                       |\n| ![IconDistributeHorizontalSpacing](src/icons/distribute-horizontal-spacing.svg \"icon\") | `icon--distribute-horizontal-spacing` |\n| ![IconDistributeVerticalSpacing](src/icons/distribute-vertical-spacing.svg \"icon\")     | `icon--distribute-vertical-spacing`   |\n| ![IconDraft](src/icons/draft.svg \"icon\")                                               | `icon--draft`                         |\n| ![IconEffects](src/icons/effects.svg \"icon\")                                           | `icon--effects`                       |\n| ![IconEllipses](src/icons/ellipses.svg \"icon\")                                         | `icon--ellipses`                      |\n| ![IconEyedropper](src/icons/eyedropper.svg \"icon\")                                     | `icon--eyedropper`                    |\n| ![IconForward](src/icons/forward.svg \"icon\")                                           | `icon--forward`                       |\n| ![IconFrame](src/icons/frame.svg \"icon\")                                               | `icon--frame`                         |\n| ![IconGroup](src/icons/group.svg \"icon\")                                               | `icon--group`                         |\n| ![IconHidden](src/icons/hidden.svg \"icon\")                                             | `icon--hidden`                        |\n| ![IconHorizontalPadding](src/icons/horizontal-padding.svg \"icon\")                      | `icon--horizontal-padding`            |\n| ![IconHyperlink](src/icons/hyperlink.svg \"icon\")                                       | `icon--hyperlink`                     |\n| ![IconImage](src/icons/image.svg \"icon\")                                               | `icon--image`                         |\n| ![IconInstance](src/icons/instance.svg \"icon\")                                         | `icon--instance`                      |\n| ![IconKey](src/icons/key.svg \"icon\")                                                   | `icon--key`                           |\n| ![IconLayoutAlignBottom](src/icons/layout-align-bottom.svg \"icon\")                     | `icon--layout-align-bottom`           |\n| ![IconAlignHorizontalCenters](src/icons/layout-align-horizontal-centers.svg \"icon\")    | `icon--align-horizontal-centers`      |\n| ![IconAlignLeft](src/icons/layout-align-left.svg \"icon\")                               | `icon--align-left`                    |\n| ![IconAlignRight](src/icons/layout-align-right.svg \"icon\")                             | `icon--align-right`                   |\n| ![IconAlignTop](src/icons/layout-align-top.svg \"icon\")                                 | `icon--align-top`                     |\n| ![IconAlignVerticalCenters](src/icons/layout-align-vertical-centers.svg \"icon\")        | `icon--align-vertical-centers`        |\n| ![IconLayoutGridColumns](src/icons/layout-grid-columns.svg \"icon\")                     | `icon--layout-grid-columns`           |\n| ![IconLayoutGridRows](src/icons/layout-grid-rows.svg \"icon\")                           | `icon--layout-grid-rows`              |\n| ![IconLayoutGridUniform](src/icons/layout-grid-uniform.svg \"icon\")                     | `icon--layout-grid-uniform`           |\n| ![IconLibrary](src/icons/library.svg \"icon\")                                           | `icon--library`                       |\n| ![IconLinkBroken](src/icons/link-broken.svg \"icon\")                                    | `icon--link-broken`                   |\n| ![IconLinkConnected](src/icons/link-connected.svg \"icon\")                              | `icon--link-connected`                |\n| ![IconListDetailed](src/icons/list-detailed.svg \"icon\")                                | `icon--list-detailed`                 |\n| ![IconListTile](src/icons/list-tile.svg \"icon\")                                        | `icon--list-tile`                     |\n| ![IconList](src/icons/list.svg \"icon\")                                                 | `icon--list`                          |\n| ![IconLockOff](src/icons/lock-off.svg \"icon\")                                          | `icon--lock-off`                      |\n| ![IconLockOn](src/icons/lock-on.svg \"icon\")                                            | `icon--lock-on`                       |\n| ![IconMinus](src/icons/minus.svg \"icon\")                                               | `icon--minus`                         |\n| ![IconPlay](src/icons/play.svg \"icon\")                                                 | `icon--play`                          |\n| ![IconPlus](src/icons/plus.svg \"icon\")                                                 | `icon--plus`                          |\n| ![IconRandom](src/icons/random.svg \"icon\")                                             | `icon--random`                        |\n| ![IconRecent](src/icons/recent.svg \"icon\")                                             | `icon--recent`                        |\n| ![IconResizeToFit](src/icons/resize-to-fit.svg \"icon\")                                 | `icon--resize-to-fit`                 |\n| ![IconResolveFilled](src/icons/resolve-filled.svg \"icon\")                              | `icon--resolve-filled`                |\n| ![IconResolve](src/icons/resolve.svg \"icon\")                                           | `icon--resolve`                       |\n| ![IconReverse](src/icons/reverse.svg \"icon\")                                           | `icon--reverse`                       |\n| ![IconSearchLarge](src/icons/search-large.svg \"icon\")                                  | `icon--search-large`                  |\n| ![IconSearch](src/icons/search.svg \"icon\")                                             | `icon--search`                        |\n| ![IconSettings](src/icons/settings.svg \"icon\")                                         | `icon--settings`                      |\n| ![IconShare](src/icons/share.svg \"icon\")                                               | `icon--share`                         |\n| ![IconSmiley](src/icons/smiley.svg \"icon\")                                             | `icon--smiley`                        |\n| ![IconSortAlphaAsc](src/icons/sort-alpha-asc.svg \"icon\")                               | `icon--sort-alpha-asc`                |\n| ![IconSortAlphaDsc](src/icons/sort-alpha-dsc.svg \"icon\")                               | `icon--sort-alpha-dsc`                |\n| ![IconSortTopBottom](src/icons/sort-top-bottom.svg \"icon\")                             | `icon--sort-top-bottom`               |\n| ![IconSpacing](src/icons/spacing.svg \"icon\")                                           | `icon--spacing`                       |\n| ![IconSpinner](src/icons/spinner.svg \"icon\")                                           | `icon--spinner`                       |\n| ![IconStarOff](src/icons/star-off.svg \"icon\")                                          | `icon--star-off`                      |\n| ![IconStarOn](src/icons/star-on.svg \"icon\")                                            | `icon--star-on`                       |\n| ![IconStrokeWeight](src/icons/stroke-weight.svg \"icon\")                                | `icon--stroke-weight`                 |\n| ![IconStyles](src/icons/styles.svg \"icon\")                                             | `icon--styles`                        |\n| ![IconSwap](src/icons/swap.svg \"icon\")                                                 | `icon--swap`                          |\n| ![IconTheme](src/icons/theme.svg \"icon\")                                               | `icon--theme`                         |\n| ![IconTidyUpGrid](src/icons/tidy-up-grid.svg \"icon\")                                   | `icon--tidy-up-grid`                  |\n| ![IconTidyUpListHorizontal](src/icons/tidy-up-list-horizontal.svg \"icon\")              | `icon--tidy-up-list-horizontal`       |\n| ![IconTidyUpListVertical](src/icons/tidy-up-list-vertical.svg \"icon\")                  | `icon--tidy-up-list-vertical`         |\n| ![IconTimer](src/icons/timer.svg \"icon\")                                               | `icon--timer`                         |\n| ![IconTrash](src/icons/trash.svg \"icon\")                                               | `icon--trash`                         |\n| ![IconVerticalPadding](src/icons/vertical-padding.svg \"icon\")                          | `icon--vertical-padding`              |\n| ![IconVisible](src/icons/visible.svg \"icon\")                                           | `icon--visible`                       |\n| ![IconWarningLarge](src/icons/warning-large.svg \"icon\")                                | `icon--warning-large`                 |\n| ![IconWarning](src/icons/warning.svg \"icon\")                                           | `icon--warning`                       |\n\n---\n\n### Icon button\n\nThe icon button is essentially a wrapper for the icon component. Refer to the icon component above for its usage.\n\n```HTML\n\u003c!-- Icon button with a blend icon --\u003e\n\u003cdiv class=\"icon-button\"\u003e\n  \u003cdiv class=\"icon icon--blend\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- Icon button with selected modifier --\u003e\n\u003cdiv class=\"icon-button icon-button--selected\"\u003e\n  \u003cdiv class=\"icon icon--blend\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n---\n\n### Input\n\nTo use the input, use the following markup. You can also insert an icon into the input (see Icon component for usage).\n\n```HTML\n\u003c!-- Input with placeholder --\u003e\n\u003cdiv class=\"input\"\u003e\n  \u003cinput type=\"input\" class=\"input__field\" placeholder=\"Placeholder\"\u003e\n\u003c/div\u003e\n\n\u003c!-- Input with initial value --\u003e\n\u003cdiv class=\"input\"\u003e\n  \u003cinput type=\"input\" class=\"input__field\" value=\"Initial value\"\u003e\n\u003c/div\u003e\n\n\u003c!-- Disabled input --\u003e\n\u003cdiv class=\"input\"\u003e\n  \u003cinput type=\"input\" class=\"input__field\" value=\"Initial value\" disabled\u003e\n\u003c/div\u003e\n\n\u003c!-- Input with icon --\u003e\n\u003cdiv class=\"input input--with-icon\"\u003e\n  \u003cdiv class=\"icon icon--angle\"\u003e\u003c/div\u003e\n  \u003cinput type=\"input\" class=\"input__field\" value=\"Value\"\u003e\n\u003c/div\u003e\n```\n\n**Modifiers**\n\n| Modifier class      | Description                                                                                     |\n|---------------------|-------------------------------------------------------------------------------------------------|\n| `input--with-icon`* | Add this modifier class if you plan to include the icon component within the input              |\n\n---\n\n### Labels and sections\n\nTo use a label or section, use the following markup.\n\n```HTML\n\u003c!-- Label --\u003e\n\u003cdiv class=\"label\"\u003eLabel\u003c/div\u003e\n\n\u003c!-- Section title --\u003e\n\u003cdiv class=\"section-title\"\u003eSection title\u003c/div\u003e\n```\n\n### Onboarding tip\n\nTo create an onboarding tip, use the following markup. The tip also makes use of the icon component (see Icon component for usage).\n\n```HTML\n\u003cdiv class=\"onboarding-tip\"\u003e\n  \u003cdiv class=\"icon icon--styles\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"onboarding-tip__msg\"\u003eOnboarding tip goes here.\u003c/div\u003e\n\u003c/div\u003e\n```\n\n---\n\n### Radio button\n\nTo create an radio button, use the following markup. Remember each group of radio buttons must share the same name so that they are related to one another. Each button should have a unique id so that its label is associated with it and remains part of the clickable hit area.\n\n```HTML\n\u003c!-- Radio button --\u003e\n\u003cdiv class=\"radio\"\u003e\n    \u003cinput id=\"radioButton1\"type=\"radio\" class=\"radio__button\" value=\"Value\" name=\"radioGroup\" \u003e\n    \u003clabel for=\"radioButton1\" class=\"radio__label\"\u003eRadio button\u003c/label\u003e\n\u003c/div\u003e\n\n\u003c!-- Radio button checked --\u003e\n\u003cdiv class=\"radio\"\u003e\n    \u003cinput id=\"radioButton2\"type=\"radio\" class=\"radio__button\" value=\"Value\" name=\"radioGroup\" checked\u003e\n    \u003clabel for=\"radioButton2\" class=\"radio__label\"\u003eRadio button\u003c/label\u003e\n\u003c/div\u003e\n\n\u003c!-- Radio button disabled--\u003e\n\u003cdiv class=\"radio\"\u003e\n    \u003cinput id=\"radioButton3\"type=\"radio\" class=\"radio__button\" value=\"Value\" name=\"radioGroup\" disabled\u003e\n    \u003clabel for=\"radioButton3\" class=\"radio__label\"\u003eRadio button\u003c/label\u003e\n\u003c/div\u003e\n```\n\n---\n\n### Select menu\n\nTo create an select menu, use the following markup. The select menu also requires you to initalize it with Javascript. If your plugin requires you to add or remove items in the select menu, simply use Javascript to modify the select menu and the select will reinitialize.\n\nThe select menu will open and position the menu to the selected object. If there is no vertical room inside your plugin's iFrame, the position of the menu will be moved to ensure it fits inside the iframe. If you have a select menu with too many options to fit within the iFrame, the menu will scroll vertically.\n\n```HTML\n\u003c!-- Select menu, default behavior is for the initial item to get selected --\u003e\n\u003cselect id=\"uniqueId\" class=\"select-menu\"\u003e\n  \u003coption value=\"1\" \u003eItem 1\u003c/option\u003e\n  \u003coption value=\"2\" \u003eItem 2\u003c/option\u003e\n  \u003coption value=\"3\" \u003eItem 3\u003c/option\u003e\n\u003c/select\u003e\n\n\u003c!-- Select menu, provide an initial item with no value to have no items selected --\u003e\n\u003cselect id=\"uniqueId\" class=\"select-menu\"\u003e\n  \u003coption\u003ePlease make a selection\u003c/option\u003e\n  \u003coption value=\"2\" \u003eItem 2\u003c/option\u003e\n  \u003coption value=\"3\" \u003eItem 3\u003c/option\u003e\n\u003c/select\u003e\n\n\u003c!-- Disabled select menu --\u003e\n\u003cselect id=\"uniqueId\" class=\"select-menu\" disabled\u003e\n  \u003coption value=\"1\" \u003eItem 1\u003c/option\u003e\n  \u003coption value=\"2\" \u003eItem 2\u003c/option\u003e\n  \u003coption value=\"3\" \u003eItem 3\u003c/option\u003e\n\u003c/select\u003e\n```\n\nTo initialize with Javascript:\n```Javascript\n//initialize all select menus\nselectMenu.init();\n\n//uninitialize all select menus\nselectMenu.destroy();\n```\n\n---\n\n### Switch\n\nTo use the switch, use the following HTML markup. Remember each switch should get a unique ID that is referenced in the label. This ensures the switch and the entire label are clickable.\n\n```HTML\n\u003c!-- Switch --\u003e\n\u003cdiv class=\"switch\"\u003e\n    \u003cinput class=\"switch__toggle\" type=\"checkbox\" id=\"uniqueId\"\u003e\n    \u003clabel class=\"switch__label\" for=\"uniqueIdA\"\u003eLabel\u003c/label\u003e\n\u003c/div\u003e\n\n\u003c!-- Switch checked --\u003e\n\u003cdiv class=\"switch\"\u003e\n    \u003cinput class=\"switch__toggle\" type=\"checkbox\" id=\"uniqueId\" checked\u003e\n    \u003clabel class=\"switch__label\" for=\"uniqueId\"\u003eLabel\u003c/label\u003e\n\u003c/div\u003e\n\n\u003c!-- Disabled switch --\u003e\n\u003cdiv class=\"switch\"\u003e\n    \u003cinput class=\"switch__toggle\" type=\"checkbox\" id=\"uniqueId\" disabled\u003e\n    \u003clabel class=\"switch__label\" for=\"uniqueId\"\u003eLabel\u003c/label\u003e\n\u003c/div\u003e\n```\n\n---\n\n### Textarea\n\nTo use the textarea, use the following HTML markup.\n\n```HTML\n\u003c!-- Textarea --\u003e\n\u003ctextarea class=\"textarea\" rows=\"2\"\u003eInitial value\u003c/textarea\u003e\n\n\u003c!-- Disabled textarea --\u003e\n\u003ctextarea class=\"textarea\" rows=\"2\" disabled\u003eInitial value\u003c/textarea\u003e\n```\n\n---\n\n### Type\n\nTo use the typography that is styled like it is in the Figma UI, use the following markup plus additional modifier classes to modify the size, weight, and letterspacing that is optimized for positive (dark text on light background) and negative (light text on dark background) applications.\n\n```HTML\n\u003cdiv class=\"type\"\u003eUI11, size: xsmall (default) weight: normal, positive\u003c/div\u003e\n\u003cdiv class=\"type type--large type--bold\"\u003eUI13, size: large, weight: bold, positive\u003c/div\u003e\n\u003cdiv class=\"type type--small type--medium type--inverse\"\u003eUI12, size: large, weight: medium, negative\u003c/div\u003e\n```\n\n**Modifiers**\n\n| Modifier class     | Description                                                                                         |\n|--------------------|-----------------------------------------------------------------------------------------------------|\n| `type--small`      | Font size 12px                                                                                      |\n| `type--large`      | Font size 13px                                                                                      |\n| `type--xlarge`     | Font size 14px                                                                                      |\n| `type--medium`     | Font weight medium                                                                                  |\n| `type--bold`       | Font weight bold                                                                                    |\n| `type--inverse`    | Inversed (negative) application where light text is on dark background with increased letterspacing |\n\n_Defaults: Font size 11px, normal weight, positive application_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomas-lowry%2Ffigma-plugin-ds","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthomas-lowry%2Ffigma-plugin-ds","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomas-lowry%2Ffigma-plugin-ds/lists"}