The Emulsify UI Kit is a tool for designers and front-end engineers to build high-quality user interfaces effectively and efficiently while maintaining WCAG 2.1 AA standards and project performance goals.
The Emulsify UI Kit gives users access to a library of prebuilt tokens and components that follow accessibility best practices and are easy to customize. The components in the kit are fully responsive, carefully designed, and can be implemented for modification in every project.
The Emulsify UI Kit has two distinct building blocks: the Figma and the code repo. These two items are kept in alignment for a seamless experience.
Instructions to come. TKTK
This will make your own copy of the repo and push the code to Netlify, where you can review the UI kit.
First, get your own copy of the Emulsify UI kit from the Figma community.
The strength of this UI kit leans on its connection with Figma via Tokens Studio.
To connect the Figma file with your code, see the instructions in the Tokens Studio documentation.
A complete component meets the following criteria:
semantic
as much as possible..storybook/configma.json
.The button component serves as an example of how variables are used to connect Figma with the code.
.button {
background-color: var(--button-color-bkg);
padding: var(--button-padding-y) var(--button-padding-x);
color: var(--button-color-label);
border-radius: var(--button-radius);
border: var(--button-border-width-border) solid var(--button-border-color);
font-size: var(--font-size-small);
font-weight: var(--button-font-weight-label);
text-transform: var(--button-text-case);
text-decoration: none;
&:hover,
&.button--hover {
background-color: var(--button-color-bkg-hover);
padding: var(--button-padding-y-hover) var(--button-padding-x-hover);
border: var(--button-border-width-border-hover) solid var(
--button-border-color-hover
);
color: var(--button-color-label-hover);
text-decoration: underline;
text-transform: var(--button-text-case);
}
&:focus,
&.button--focus {
padding: var(--button-padding-y-focus) var(--button-padding-x-focus);
color: var(--button-color-label-focus);
border: var(--button-border-width-border-focus) solid var(
--button-border-color-focus
);
outline: var(--button-border-width-outline-focus) solid var(
--button-color-outline-focus
);
text-transform: var(--button-text-case);
}
}
See this whiteboard that outlines the preferred naming convention for design tokens.
.storybook/configma.json
and confirm the following:https://www.figma.com/file/[FIGMA_FILE_ID]/[FIGMA_FILE_NAME]?node-id=[NODE_ID]
url
has the correct FIGMA_FILE_ID
and FIGMA_FILE_NAME
.NODE_ID
being the value.configma.json
into your story.figma.$KEY
as shown below.Button.parameters = {
design: {
type: 'figma',
url: figma.url + figma.button,
},
};
To come. TKTK
Randy Oest |
Brian Lewis |
Mariana Núñez |
brendan-wu-4K |
Amanda Luker |
Ryan Hagerty |