Keeping Things Organized
Scaling the Microsoft Teams Component Libraries (TCL) in Figma Illustration via Devansh Parikh The Teams Component Libraries (TCL) are the Figma UI kits that undertake Fluent UI parts however are themed and custom designed for Microsoft Teams. TCL incorporates 4 kits, masking each platform sort. This is a prescriptive article and useful resource that highlights how the TCL — Web & Desktop package was once constructed, how it’s maintained, and the parameters we arrange for folks to give a contribution. We will duvet the next subjects: Structuring pages Naming issues Aligning with code Design tokens Version keep watch over When deciding learn how to construction our pages the next priorities have been regarded as: We will have to supply transparent element location endpoints. We will have to make it simple to import parts. We will have to supply transparent well being standing signs of parts at stated endpoints. The conclusion was once that every element must get its personal web page. This makes it more straightforward for designers to scan a web page and briefly replica what they have been on the lookout for, moderately than seeking to visually clear out what they don’t want. The standing of an element is on the best degree and the designer can see this ahead of even uploading. These concepts got here from aligning nearer to code. Example appearing pages in Figma looked after from A-Z and well being signs A commonplace report construction follow in React or TypeScript is to team via report sort the place every element has its personal subfolder nested inside of a father or mother folder like this: src/parts/Button/Button.tsx 💡 Note: src manner “supply.” In Fluent’s GitHub repo, parts every have their folder and are looked after from A-Z Page standing signs The title of every element web page has a standing emoji on the finish. Green (🟢) manner all just right and the element is wholesome and in a position to make use of. Yellow (🟡) implies that the element can be utilized however workout warning as it’s being labored on. Red (🔴) manner don’t use beneath any instances; the element is risky. The function is to have a 1:1 element naming parity with code, however there are a couple of uncommon exceptions. This theory is helping designers and engineers simply keep up a correspondence with every different and determine what is going the place. There are a couple of guiding naming conventions which can be used and helped encourage our naming constructions. Let’s evaluation BEM and PascalCase: BEM BEM stands for block, component, modifier. Breaking this down: Block: a standalone entity this is significant by itself. Examples: header, container, menu, checkbox, enter . Element: part of a block that has no standalone that means and is semantically tied to its block. Examples: menu merchandise, record merchandise, checkbox caption, header identify Modifier: a flag on a block or component. Use them to switch look or conduct. Examples: disabled, highlighted, checked, fastened, measurement giant, colour yellow We don’t use BEM actually, extra as an inspiration. If you need to be informed extra about how BEM works, pass to http://getbem.com/. PascalCase PascalCase is a naming conference through which the primary letter of every phrase in a compound phrase is capitalized. » Read More
Like to keep reading?
This article first appeared on medium.com. If you'd like to keep reading, follow the white rabbit.