Brush through Design System 101 here.
From our experienced brain box, we’ve put together some insights to help you understand the need for design systems & how one can get started:
<rich-h2>Purpose Of Having A Design System<rich-h2>
<rich-list-item>Creates design consistency across projects (for instance, the consistent appearance of a drop-down menu or text-field throughout your project, since the layout is already defined in the design system)<rich-list-item>
<rich-list-item>Any change to one component automatically updates all the other instances of the same component<rich-list-item>
<rich-list-item>Improves speed of the project & is time effective (liberates teams from recreating)<rich-list-item>
<rich-list-item last-item>Easier to maintain & collaborate (makes the designer-developer collaboration seamless without needing to reach out often)<rich-list-item last-item>
<rich-h2>Organising The Design Library In Figma<rich-h2>
<rich-list-item>Use clear naming conventions to organise components in the library.This will make it easier to find components in the Assets panel as well as help you swap related component instances.<rich-list-item>
<rich-list-item>When creating a single library with multiple components, use the forward-slash naming convention. (For example, buttons/primary, buttons/secondary). The slash naming system helps to organise components in the Assets panel and Instance menu. Each / in a component's name will create another level of hierarchy. The text before the first / will become the name of the component set.<rich-list-item>
<rich-h2>How To Create A Design System in Figma<rich-h2>
<rich-list-item>Put together your style & design guidelines in place i.e. your text styles, colour styles & effect styles<rich-list-item>
<rich-h3>Creating Text style<rich-h3>
<rich-list-item>Select a text layer<rich-list-item>
<rich-list-item>Click the style icon (four dots) in the text section<rich-list-item>
<rich-list-item>Click the “+” icon in the text styles menu to create a new style and give the style a name<rich-list-item>
<rich-h3>Applying styles to the text<rich-h3>
<rich-list-item>Select the text layer you want to apply styles to<rich-list-item>
<rich-list-item>Click the style icon (four dots) in the text section<rich-list-item>
<rich-list-item>Select the style from the options to apply it to the selected text layer<rich-list-item>
<rich-h3>Creating Color/Effect style<rich-h3>
<rich-list-item>Select the object you’d like to create a style for<rich-list-item>
<rich-list-item>Click the style icon (four dots) in the color/effect section<rich-list-item>
<rich-list-item>Click the “+” icon in the text styles menu to create a new style and give the style a name<rich-list-item>
<rich-h3>Components library include<rich-h3>
<rich-list-item>Icons<rich-list-item>
<rich-list-item>Forms<rich-list-item>
<rich-list-item>Buttons<rich-list-item>
<rich-list-item>Nested<rich-list-item>
<rich-h3>Creating a component<rich-h3>
<rich-list-item>Select the layers you want to create components from<rich-list-item>
<rich-list-item>Click the “diamond” icon to create a component in the toolbar<rich-list-item>
<rich-list-item>Select create multiple components from the options<rich-list-item>
<rich-h3>Create Images/Illustrations library<rich-h3>
<rich-para>A true design system is created when the entire product team comes together to work on how things ought to be designed, coded, presented and talked about. It stands as a company’s digital asset for creating digital products.<rich-para>
<rich-h3>Few Pro-Tips From One Fellow Designer To Another<rich-h3>
<rich-list-item>You can also apply Color & Effect Styles to Text Layers<rich-list-item>
<rich-list-item>Use “Clip content” to reduce repetitive instances (Note: Clip content should be ticked)<rich-list-item>
<rich-list-item>Quickly swap related components<rich-list-item>
<rich-list-item>Use resizing as “Hug contents” while creating nested components<rich-list-item>
<rich-h2>Takeaway<rich-h2>
<rich-para>Having a design system in place ensures all guidelines are being followed, teams are working in sync, your product’s elements are categorised and most importantly, the entire workflow is enhanced.<rich-para>
