title
The Adobe XD Visual Studio Code Plugin (Crash Course)

description
http://framer.com/designcourse -- Sign up to Framer for free or get 20% off any paid plan! -- Want to learn UI/UX? https://designcourse.com -- Today, we're going to check out the new Adobe XD Visual Studio Code Extension, which is *very* awesome. It allows UI/UX designers and frontend developers to work together more seamlessly. At the heart of the extension are DSP's (Design System Packages), which take in both design tokens (colors, sizes, etc..) and design components that are created in an Adobe XD document. With these DSP's, you can create code snippets and have a living design system within Visual Studio Code. There's a lot to cover, so that's why I'm dubbing this a crash course! Let's get started! - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! Learn UI/UX: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Designcourse.com. Come to my discord server or add me on social media and say Hi!

detail
{'title': 'The Adobe XD Visual Studio Code Plugin (Crash Course)', 'heatmap': [{'end': 755.55, 'start': 700.55, 'weight': 1}], 'summary': 'This crash course covers the new adobe xd visual studio code plugin, ui design system workflow, using markdown and design tokens for design systems, design system implementation process, and text field styling with a 70% increase in investment in interactive prototyping according to a study by design week.', 'chapters': [{'end': 172.568, 'segs': [{'end': 71.102, 'src': 'embed', 'start': 23.629, 'weight': 1, 'content': [{'end': 31.651, 'text': "and really it's a big deal because it really helps the communication process between a UI designer and a front-end developer.", 'start': 23.629, 'duration': 8.022}, {'end': 35.231, 'text': "All right, so I'm going to show you exactly how to use this.", 'start': 32.211, 'duration': 3.02}, {'end': 44.634, 'text': "It's called the Adobe XD Visual Studio Code plugin, but it allows you to define what are called DSPs or design system packages.", 'start': 35.291, 'duration': 9.343}, {'end': 53.316, 'text': "And so I'm going to take you through a real world scenario where you play the role as a UI designer, working in Adobe XD,", 'start': 45.154, 'duration': 8.162}, {'end': 57.558, 'text': 'creating all of your design tokens or your assets in the assets panel,', 'start': 53.316, 'duration': 4.242}, {'end': 65.56, 'text': "and then we're gonna switch over to the front end developer role and we're going to take that Adobe XD libraries document.", 'start': 57.558, 'duration': 8.002}, {'end': 71.102, 'text': "we're gonna import it and with the help of this plugin here, the Adobe XD plugin,", 'start': 65.56, 'duration': 5.542}], 'summary': 'Adobe xd plugin facilitates ui designer-front-end developer communication.', 'duration': 47.473, 'max_score': 23.629, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5MhfwvlGkfA/pics/5MhfwvlGkfA23629.jpg'}, {'end': 125.651, 'src': 'embed', 'start': 97.343, 'weight': 0, 'content': [{'end': 103.885, 'text': 'Before we begin, getting a job in design is more competitive than ever, which is why you need to focus on skills that help you stand out.', 'start': 97.343, 'duration': 6.542}, {'end': 111.627, 'text': 'In a recent study by Design Week, 70% of respondents said that their company is investing more in interactive prototyping.', 'start': 104.325, 'duration': 7.302}, {'end': 113.628, 'text': 'So Framer is here to help you level up.', 'start': 111.847, 'duration': 1.781}, {'end': 114.908, 'text': 'Getting started is easy.', 'start': 113.908, 'duration': 1}, {'end': 119.229, 'text': 'Import from your favorite design tool and start swapping static elements for interactive components.', 'start': 115.068, 'duration': 4.161}, {'end': 125.651, 'text': 'Set up transitions with just a few clicks and create impressive animations right on the canvas, all 100% code free.', 'start': 119.609, 'duration': 6.042}], 'summary': 'In a recent study, 70% of companies are investing more in interactive prototyping, making the job market in design more competitive. framer can help you stand out with easy interactive design tools.', 'duration': 28.308, 'max_score': 97.343, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5MhfwvlGkfA/pics/5MhfwvlGkfA97343.jpg'}], 'start': 6.158, 'title': 'Adobe xd visual studio code plugin', 'summary': 'Discusses the new adobe xd visual studio code plugin enabling better communication between ui designers and developers, with a 70% increase in investment in interactive prototyping according to a study by design week.', 'chapters': [{'end': 172.568, 'start': 6.158, 'title': 'Adobe xd visual studio code plugin', 'summary': 'Discusses the new adobe xd visual studio code plugin that helps in creating design system packages, facilitating better communication between ui designers and front-end developers, with a 70% increase in investment in interactive prototyping in companies according to a study by design week.', 'duration': 166.41, 'highlights': ['New Adobe XD Visual Studio Code plugin The Adobe XD Visual Studio Code plugin is discussed, highlighting its role in creating design system packages and improving communication between UI designers and front-end developers.', '70% increase in investment in interactive prototyping According to a study by Design Week, 70% of respondents mentioned that their company is investing more in interactive prototyping, emphasizing the growing importance of this skill in the design industry.', 'Importance of Adobe XD in creating design tokens and assets The tutorial emphasizes the role of Adobe XD in creating design tokens and assets in the assets panel, showcasing its significance in the design process.', 'Benefits of the Adobe XD plugin for front-end developers The plugin is highlighted for its ability to create organized design system packages, making it easier for front-end developers to create components and necessary CSS and HTML snippets, ultimately streamlining the development process.']}], 'duration': 166.41, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5MhfwvlGkfA/pics/5MhfwvlGkfA6158.jpg', 'highlights': ['70% increase in investment in interactive prototyping According to a study by Design Week, 70% of respondents mentioned that their company is investing more in interactive prototyping, emphasizing the growing importance of this skill in the design industry.', 'New Adobe XD Visual Studio Code plugin The Adobe XD Visual Studio Code plugin is discussed, highlighting its role in creating design system packages and improving communication between UI designers and front-end developers.', 'Benefits of the Adobe XD plugin for front-end developers The plugin is highlighted for its ability to create organized design system packages, making it easier for front-end developers to create components and necessary CSS and HTML snippets, ultimately streamlining the development process.', 'Importance of Adobe XD in creating design tokens and assets The tutorial emphasizes the role of Adobe XD in creating design tokens and assets in the assets panel, showcasing its significance in the design process.']}, {'end': 983.496, 'segs': [{'end': 196.098, 'src': 'embed', 'start': 172.568, 'weight': 0, 'content': [{'end': 179.492, 'text': 'the design system, package stuff, work by adding assets otherwise known, sometimes referred to as tokens over here.', 'start': 172.568, 'duration': 6.924}, {'end': 180.392, 'text': 'all right.', 'start': 180.052, 'duration': 0.34}, {'end': 184.394, 'text': "so, um, let's just design a real quick, very simple landing page.", 'start': 180.392, 'duration': 4.002}, {'end': 189.055, 'text': 'only take a few minutes just because we i really want to provide the actual, full context here.', 'start': 184.394, 'duration': 4.661}, {'end': 190.516, 'text': "so you're the ui designer.", 'start': 189.055, 'duration': 1.461}, {'end': 196.098, 'text': "you may be playing multiple roles, as being a single person, who's going to also be the front end developer,", 'start': 190.516, 'duration': 5.582}], 'summary': 'Discussion on design system, package work, and roles of a ui designer and front-end developer.', 'duration': 23.53, 'max_score': 172.568, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5MhfwvlGkfA/pics/5MhfwvlGkfA172568.jpg'}, {'end': 349.239, 'src': 'embed', 'start': 315.236, 'weight': 6, 'content': [{'end': 319.46, 'text': 'And so for that, that has some unique characteristics about it as well.', 'start': 315.236, 'duration': 4.224}, {'end': 325.406, 'text': 'So, for instance, we can go ahead and add the color for it.', 'start': 319.981, 'duration': 5.425}, {'end': 335.892, 'text': "Alright, so we'll just call this color, let's just call this Paragraph body or something like that.", 'start': 326.447, 'duration': 9.445}, {'end': 346.818, 'text': 'And then also, whenever you select a type based element like these two, you can go ahead and add character styles as well.', 'start': 336.552, 'duration': 10.266}, {'end': 349.239, 'text': "So there's a character style right there.", 'start': 346.918, 'duration': 2.321}], 'summary': 'Unique characteristics include adding color and character styles to type-based elements.', 'duration': 34.003, 'max_score': 315.236, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5MhfwvlGkfA/pics/5MhfwvlGkfA315236.jpg'}, {'end': 656.766, 'src': 'embed', 'start': 629.214, 'weight': 3, 'content': [{'end': 632.717, 'text': "So if we want to add the character style, we'll click plus here after selecting it.", 'start': 629.214, 'duration': 3.503}, {'end': 634.999, 'text': 'We can call this placeholder.', 'start': 633.658, 'duration': 1.341}, {'end': 641.716, 'text': "All right, there's another one here for like the button call to action.", 'start': 637.813, 'duration': 3.903}, {'end': 646.739, 'text': 'So we can call this CTA type or something like that.', 'start': 641.796, 'duration': 4.943}, {'end': 653.384, 'text': 'I would really need to rethink these naming conventions to make them all consistent, but you get the hint here.', 'start': 647.6, 'duration': 5.784}, {'end': 656.766, 'text': "So now we have just what's left final is the components.", 'start': 653.504, 'duration': 3.262}], 'summary': 'Improving naming conventions for consistency is needed for the components.', 'duration': 27.552, 'max_score': 629.214, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5MhfwvlGkfA/pics/5MhfwvlGkfA629214.jpg'}, {'end': 755.55, 'src': 'heatmap', 'start': 700.55, 'weight': 1, 'content': [{'end': 702.01, 'text': "I'll just call this CTA.", 'start': 700.55, 'duration': 1.46}, {'end': 704.751, 'text': 'Uh, no, no, my DSP.', 'start': 702.03, 'duration': 2.721}, {'end': 707.252, 'text': "How about that? We'll go ahead and save that.", 'start': 704.791, 'duration': 2.461}, {'end': 712.013, 'text': "Um, we're going to click on this icon right up here, this little publish as a library.", 'start': 708.012, 'duration': 4.001}, {'end': 713.473, 'text': 'This is a necessary step.', 'start': 712.053, 'duration': 1.42}, {'end': 715.054, 'text': 'So we have my DSP.', 'start': 713.954, 'duration': 1.1}, {'end': 716.874, 'text': "We're going to click publish here.", 'start': 715.494, 'duration': 1.38}, {'end': 722.449, 'text': 'And then I, what we can do after this part.', 'start': 717.555, 'duration': 4.894}, {'end': 727.935, 'text': "So if we click browse right here, it'll show us, let's click done.", 'start': 723.15, 'duration': 4.785}, {'end': 729.997, 'text': 'My DSP.', 'start': 729.156, 'duration': 0.841}, {'end': 734.362, 'text': 'So right here, we click get link.', 'start': 730.678, 'duration': 3.684}, {'end': 738.039, 'text': 'then now we can copy this link.', 'start': 736.718, 'duration': 1.321}, {'end': 743.125, 'text': "that's what we need in order to communicate it with, uh, visual studio code.", 'start': 738.039, 'duration': 5.086}, {'end': 746.928, 'text': "so now you're, you're pretty much done here as the ui designer,", 'start': 743.125, 'duration': 3.803}, {'end': 755.55, 'text': 'and now we come back to our visual studio code and you want to open up a empty document.', 'start': 746.928, 'duration': 8.622}], 'summary': 'Cta saved as library in dsp, link copied for visual studio code.', 'duration': 55, 'max_score': 700.55, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5MhfwvlGkfA/pics/5MhfwvlGkfA700550.jpg'}, {'end': 861.683, 'src': 'embed', 'start': 831.205, 'weight': 2, 'content': [{'end': 839.867, 'text': 'So whenever you make a change to your DSP here within the Adobe XD Visual Studio Code plugin or extension,', 'start': 831.205, 'duration': 8.662}, {'end': 848.07, 'text': "it's going to take a lot of the information based on, like your design tokens and all of that,", 'start': 839.867, 'duration': 8.203}, {'end': 853.052, 'text': "and it's going to save them to these different platforms.", 'start': 848.07, 'duration': 4.982}, {'end': 861.683, 'text': "So for instance, your colors, if you choose CSS, it's going to export those as CSS variables in a CSS file.", 'start': 853.979, 'duration': 7.704}], 'summary': 'Adobe xd visual studio code plugin exports design tokens to different platforms, e.g. css variables.', 'duration': 30.478, 'max_score': 831.205, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5MhfwvlGkfA/pics/5MhfwvlGkfA831205.jpg'}], 'start': 172.568, 'title': 'Ui design system workflow', 'summary': 'Covers the process of designing ui elements, including creating containers, adding background colors, selecting border widths, naming and organizing colors and design tokens, creating components, and generating a design system package for integration with visual studio code.', 'chapters': [{'end': 376.803, 'start': 172.568, 'title': 'Design system and ui elements', 'summary': 'Discusses the use of design tokens, color, font, and type treatment for creating a simple landing page, emphasizing the importance of naming conventions and character styles for consistency and collaboration.', 'duration': 204.235, 'highlights': ['The chapter discusses the use of design tokens, color, font, and type treatment for creating a simple landing page.', 'Emphasizes the importance of naming conventions and character styles for consistency and collaboration.', 'Provides insights into adding assets to colors, creating character styles, and working with components within the design system.', 'Demonstrates the process of adding assets to colors and creating character styles for unique type treatments.']}, {'end': 983.496, 'start': 377.944, 'title': 'Ui design system workflow', 'summary': 'Covers the process of designing ui elements, including creating containers, adding background colors, selecting border widths, naming and organizing colors and design tokens, creating components, and generating a design system package for integration with visual studio code.', 'duration': 605.552, 'highlights': ['The process of designing UI elements, including creating containers, adding background colors, selecting border widths, naming and organizing colors and design tokens, creating components, and generating a design system package for integration with Visual Studio Code The chapter covers the step-by-step process of designing UI elements, such as creating containers, adding background colors, selecting border widths, naming and organizing colors and design tokens, creating components, and generating a design system package for integration with Visual Studio Code.', 'Importing design elements and tokens into Visual Studio Code for a seamless workflow Explains the process of importing design elements and tokens into Visual Studio Code for a seamless workflow, including naming conventions, component creation, and saving the design system package.', 'Customizing and editing design tokens and components within the design system package Demonstrates the ability to customize and edit design tokens and components within the design system package to align with specific project requirements for a personalized UI design system.']}], 'duration': 810.928, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5MhfwvlGkfA/pics/5MhfwvlGkfA172568.jpg', 'highlights': ['The chapter covers the step-by-step process of designing UI elements, such as creating containers, adding background colors, selecting border widths, naming and organizing colors and design tokens, creating components, and generating a design system package for integration with Visual Studio Code.', 'Demonstrates the ability to customize and edit design tokens and components within the design system package to align with specific project requirements for a personalized UI design system.', 'Explains the process of importing design elements and tokens into Visual Studio Code for a seamless workflow, including naming conventions, component creation, and saving the design system package.', 'Emphasizes the importance of naming conventions and character styles for consistency and collaboration.', 'The chapter discusses the use of design tokens, color, font, and type treatment for creating a simple landing page.', 'Provides insights into adding assets to colors, creating character styles, and working with components within the design system.', 'Demonstrates the process of adding assets to colors and creating character styles for unique type treatments.']}, {'end': 1257.062, 'segs': [{'end': 1011.565, 'src': 'embed', 'start': 983.616, 'weight': 1, 'content': [{'end': 988.482, 'text': 'Before I get ahead of myself, notice under documentation, we have an introduction.', 'start': 983.616, 'duration': 4.866}, {'end': 994.95, 'text': 'Now, This introduction is something that is structured through Markdown.', 'start': 989.123, 'duration': 5.827}, {'end': 1003.778, 'text': "If you don't know what Markdown is, it's just an easy way to create style to an otherwise basic plain text document.", 'start': 995.971, 'duration': 7.807}, {'end': 1011.565, 'text': "And so it's popular for, you know, say Markdown that's used, for instance, for your GitHub readme pages.", 'start': 1004.398, 'duration': 7.167}], 'summary': 'Introduction to markdown for creating structured documentation, popular for github readme pages.', 'duration': 27.949, 'max_score': 983.616, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5MhfwvlGkfA/pics/5MhfwvlGkfA983616.jpg'}, {'end': 1086.842, 'src': 'embed', 'start': 1035.46, 'weight': 0, 'content': [{'end': 1042.184, 'text': 'where you put any relevant and pertinent information for people like other developers or designers who are going to be using it.', 'start': 1035.46, 'duration': 6.724}, {'end': 1051.731, 'text': 'Principles, again here, this would include information about how your design system should be structured.', 'start': 1043.065, 'duration': 8.666}, {'end': 1061.617, 'text': 'You can add all these pages and make it into a robust design system with a lot of documentation where you outline sizing topography,', 'start': 1051.791, 'duration': 9.826}, {'end': 1065.38, 'text': 'how components are to be used or not to be used.', 'start': 1061.617, 'duration': 3.763}, {'end': 1067.741, 'text': 'This all goes here in the documentation section.', 'start': 1065.42, 'duration': 2.321}, {'end': 1077.251, 'text': 'Design tokens, like I mentioned before, design tokens are just the physical characteristics, the visual characteristics of your design system.', 'start': 1069.242, 'duration': 8.009}, {'end': 1083.598, 'text': 'So that includes colors, fonts, weights, font weights, scale.', 'start': 1077.311, 'duration': 6.287}, {'end': 1086.842, 'text': 'It could include margins and padding and all that stuff.', 'start': 1084.119, 'duration': 2.723}], 'summary': 'Documentation should include principles, design tokens, and detailed component usage guidelines.', 'duration': 51.382, 'max_score': 1035.46, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5MhfwvlGkfA/pics/5MhfwvlGkfA1035460.jpg'}, {'end': 1161.306, 'src': 'embed', 'start': 1111.317, 'weight': 4, 'content': [{'end': 1114.6, 'text': 'And so when we click edit on one of these, we have a few different options.', 'start': 1111.317, 'duration': 3.283}, {'end': 1118.883, 'text': 'We can specify the type of token, color or size or an alias.', 'start': 1114.66, 'duration': 4.223}, {'end': 1126.69, 'text': 'The token ID right here is, this is basically pulled from whatever you name it on this section in Adobe XD.', 'start': 1120.464, 'duration': 6.226}, {'end': 1136.877, 'text': 'And then it has a hex and opacity that you can add a description like, you know, when you should be using this and also any type of associated tags.', 'start': 1127.851, 'duration': 9.026}, {'end': 1143.961, 'text': "When you're done, always click this checkbox or just the X if you didn't make changes to that.", 'start': 1137.917, 'duration': 6.044}, {'end': 1152.287, 'text': 'Typography pretty much the same thing, except you just have different fields that are pertinent to relevant to typography, like the font,', 'start': 1144.462, 'duration': 7.825}, {'end': 1154.909, 'text': 'family weight size, description tag, etc.', 'start': 1152.287, 'duration': 2.622}, {'end': 1161.306, 'text': 'Now your components, you have several different options or areas where you add these components.', 'start': 1156.024, 'duration': 5.282}], 'summary': 'In adobe xd, users can edit tokens, specify type, color, size, and alias, as well as typography details and components.', 'duration': 49.989, 'max_score': 1111.317, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5MhfwvlGkfA/pics/5MhfwvlGkfA1111317.jpg'}, {'end': 1213.625, 'src': 'embed', 'start': 1185.156, 'weight': 7, 'content': [{'end': 1192.779, 'text': "the only token that we're using so let's click the edit icon is, and if we'd start typing here, we'll see a list.", 'start': 1185.156, 'duration': 7.623}, {'end': 1197.902, 'text': 'is the background darker right here?', 'start': 1192.779, 'duration': 5.123}, {'end': 1199.323, 'text': "So let's click add.", 'start': 1198.082, 'duration': 1.241}, {'end': 1203.66, 'text': "And then we'll go ahead and click that little checkbox.", 'start': 1200.359, 'duration': 3.301}, {'end': 1208.442, 'text': 'So now we have a token associated with this particular component.', 'start': 1203.7, 'duration': 4.742}, {'end': 1213.625, 'text': 'Now, the purpose of this is just to let your front end developer or whatever,', 'start': 1209.223, 'duration': 4.402}], 'summary': 'Using a single token, adding and associating it with a component for front-end development.', 'duration': 28.469, 'max_score': 1185.156, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5MhfwvlGkfA/pics/5MhfwvlGkfA1185156.jpg'}], 'start': 983.616, 'title': 'Using markdown and design tokens for design systems', 'summary': 'Covers the use of markdown for structuring an introduction in design systems for github readme pages and the understanding and implementation of design tokens including colors, fonts, weights, and components for visual aesthetics.', 'chapters': [{'end': 1061.617, 'start': 983.616, 'title': 'Introduction to markdown for design systems', 'summary': 'Covers the use of markdown for structuring an introduction in design systems, particularly for github readme pages, emphasizing its easy styling capabilities and the importance of including relevant and pertinent information for developers and designers.', 'duration': 78.001, 'highlights': ['The introduction is structured through Markdown, providing an easy way to create style for plain text documents, popularly used for GitHub readme pages.', 'Including relevant and pertinent information for developers and designers is important for the design system, such as principles and structure, to create a robust documentation.', 'Markdown allows for easy styling of otherwise basic plain text documents, which is popularly used for GitHub readme pages.']}, {'end': 1161.306, 'start': 1061.617, 'title': 'Design tokens and components', 'summary': 'Focuses on understanding design tokens, which include colors, fonts, weights, and components, with the ability to edit and specify different types of tokens such as color, size, and alias, and to add typography with fields related to font, family weight, and size.', 'duration': 99.689, 'highlights': ['Design tokens encompass physical characteristics like colors, fonts, weights, and scale, as well as margins and padding.', 'The system allows editing of tokens, specifying types such as color, size, and alias, with the options to add hex, opacity, and description.', 'Typography fields include font, family weight, size, and description, with the ability to edit and add relevant tags.']}, {'end': 1257.062, 'start': 1161.766, 'title': 'Design tokens and component implementation', 'summary': 'Explains the concept of design tokens and their role in identifying visual aesthetics for component implementation, using an example to demonstrate the process of adding a token to a particular component.', 'duration': 95.296, 'highlights': ['The purpose of design tokens is to specify the visual aesthetics used to create a particular component, aiding front-end developers in implementing HTML, CSS, or JavaScript (Count: 1)', 'Demonstrated the process of adding a token to a component, emphasizing the importance of documentation and providing code snippets for component implementation (Count: 1)']}], 'duration': 273.446, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5MhfwvlGkfA/pics/5MhfwvlGkfA983616.jpg', 'highlights': ['Including relevant and pertinent information for developers and designers is important for the design system, such as principles and structure, to create a robust documentation.', 'The introduction is structured through Markdown, providing an easy way to create style for plain text documents, popularly used for GitHub readme pages.', 'Markdown allows for easy styling of otherwise basic plain text documents, which is popularly used for GitHub readme pages.', 'Design tokens encompass physical characteristics like colors, fonts, weights, and scale, as well as margins and padding.', 'The system allows editing of tokens, specifying types such as color, size, and alias, with the options to add hex, opacity, and description.', 'Typography fields include font, family weight, size, and description, with the ability to edit and add relevant tags.', 'The purpose of design tokens is to specify the visual aesthetics used to create a particular component, aiding front-end developers in implementing HTML, CSS, or JavaScript (Count: 1)', 'Demonstrated the process of adding a token to a component, emphasizing the importance of documentation and providing code snippets for component implementation (Count: 1)']}, {'end': 1795.304, 'segs': [{'end': 1462.796, 'src': 'embed', 'start': 1397.313, 'weight': 0, 'content': [{'end': 1400.195, 'text': "And it's based on the name that we gave it.", 'start': 1397.313, 'duration': 2.882}, {'end': 1410.26, 'text': 'so if we go over into the disk directory in the css, we can click on variables and we can see where it says i root.', 'start': 1401.076, 'duration': 9.184}, {'end': 1418.683, 'text': 'and this is applying all of our different css variables based on the design tokens that were created.', 'start': 1410.26, 'duration': 8.423}, {'end': 1420.504, 'text': 'very, very cool stuff.', 'start': 1418.683, 'duration': 1.821}, {'end': 1437.415, 'text': "so before we get a little bit further, let's create an actual index.html on the project root And let's link up our design system variable CSS file.", 'start': 1420.504, 'duration': 16.911}, {'end': 1439.675, 'text': 'So let me make this a little bit bigger.', 'start': 1437.915, 'duration': 1.76}, {'end': 1451.158, 'text': "So for our link href, we're gonna put in design course and there's a style dictionary folder.", 'start': 1441.316, 'duration': 9.842}, {'end': 1457.499, 'text': 'And inside of here is a CSS variables.css file.', 'start': 1453.058, 'duration': 4.441}, {'end': 1462.796, 'text': "Next, let's shift alt and down arrow key to replicate that.", 'start': 1459.373, 'duration': 3.423}], 'summary': 'Using design tokens to apply css variables, linking css file to index.html.', 'duration': 65.483, 'max_score': 1397.313, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5MhfwvlGkfA/pics/5MhfwvlGkfA1397313.jpg'}, {'end': 1604.405, 'src': 'embed', 'start': 1577.835, 'weight': 3, 'content': [{'end': 1587.877, 'text': "Let's write out some initial CSS to recreate that element using that design system package in the way that you're intended to use.", 'start': 1577.835, 'duration': 10.042}, {'end': 1590.278, 'text': "First, we're going to have our container.", 'start': 1588.357, 'duration': 1.921}, {'end': 1594.359, 'text': "I'm going to put this here as an overall container to hold everything.", 'start': 1590.298, 'duration': 4.061}, {'end': 1598.58, 'text': 'We have our H1 element, a superior experience.', 'start': 1594.979, 'duration': 3.601}, {'end': 1603.384, 'text': "We also have our paragraph and we'll call this lorem25.", 'start': 1599.841, 'duration': 3.543}, {'end': 1604.405, 'text': 'All right.', 'start': 1603.965, 'duration': 0.44}], 'summary': 'Writing initial css to recreate element using design system package.', 'duration': 26.57, 'max_score': 1577.835, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5MhfwvlGkfA/pics/5MhfwvlGkfA1577835.jpg'}, {'end': 1804.635, 'src': 'embed', 'start': 1773.64, 'weight': 1, 'content': [{'end': 1781.181, 'text': 'And then that way they would know for sure for a headline, primary color is a token that would be associated with it and used.', 'start': 1773.64, 'duration': 7.541}, {'end': 1785.702, 'text': 'You could also outline this stuff in your documentation as well.', 'start': 1782.562, 'duration': 3.14}, {'end': 1792.183, 'text': "So there's a lot of areas that could provide context and information and guidance, essentially to a front end developer,", 'start': 1786.162, 'duration': 6.021}, {'end': 1794.224, 'text': 'about what things should be named.', 'start': 1792.183, 'duration': 2.041}, {'end': 1795.304, 'text': "So we'll do var.", 'start': 1794.624, 'duration': 0.68}, {'end': 1804.635, 'text': "primary color here and then we'll do a font size four m units and just a margin bottom.", 'start': 1796.044, 'duration': 8.591}], 'summary': "Documentation can provide guidance to front-end developers with naming conventions and specific measurements, such as using 'var.primary color' and 'font size: 4m'.", 'duration': 30.995, 'max_score': 1773.64, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5MhfwvlGkfA/pics/5MhfwvlGkfA1773640.jpg'}], 'start': 1257.082, 'title': 'Design system implementation process', 'summary': 'Delves into implementing a design system, covering the creation of design tokens, linking css files, using sas, and addressing issues with css variables and live server for efficient coding.', 'chapters': [{'end': 1372.675, 'start': 1257.082, 'title': 'Snippet trigger for html gallery', 'summary': 'Discusses using a snippet trigger in html to quickly insert code for a gallery, allowing for efficient coding and includes details about selecting the language, adding css, and the limitations of the editor.', 'duration': 115.593, 'highlights': ["The snippet trigger 'gallery' in HTML allows for efficient coding by quickly inserting predefined code for a gallery, enhancing productivity during coding.", 'Selecting the language, such as HTML or CSS, is necessary for using the snippet trigger effectively to generate the desired code for the gallery.', "The editor's limitation is highlighted as it lacks features like Emmet, which are available in Visual Studio code, impacting the coding experience."]}, {'end': 1554.536, 'start': 1374.153, 'title': 'Design system implementation process', 'summary': 'Describes the process of implementing a design system, including creating design tokens, linking css files, using sas, and resolving issues with css variables and live server.', 'duration': 180.383, 'highlights': ['Creating design tokens and applying CSS variables based on the design tokens The process involves compiling tokens and applying CSS variables based on the design tokens created, demonstrating the practical application of the design system.', "Linking the design system variable CSS file to index.html The steps include linking the design system variable CSS file to the project root's index.html, ensuring the integration of design system variables into the project.", 'Using SAS for creating a CSS file and utilizing the live SAS compiler plugin The implementation involves using SAS for creating a CSS file, accompanied by utilizing the live SAS compiler plugin for efficient development.', 'Resolving issues with CSS variables and live server integration The demonstration includes resolving issues related to CSS variables and live server integration, showcasing troubleshooting and problem-solving skills in the design system implementation process.']}, {'end': 1795.304, 'start': 1554.836, 'title': 'Using design system packages with css', 'summary': 'Explains how to use design system packages in css to create consistent designs, including using tokens for colors, creating code snippets for components, and providing guidance for front end developers.', 'duration': 240.468, 'highlights': ['Using tokens for colors in design system packages, such as defining primary color for components, provides consistency and guidance for front end developers.', 'Demonstrating the use of code snippets for components, like the gallery, and customizing the prefix in the DSP settings, allows for easy implementation of predefined HTML and CSS code.', 'Utilizing design system packages to define styles, such as width and color, ensures consistent design implementation and provides guidance for front end developers.', 'Providing comprehensive documentation and context for design system packages, including token associations and naming conventions, aids front end developers in using the packages effectively.']}], 'duration': 538.222, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5MhfwvlGkfA/pics/5MhfwvlGkfA1257082.jpg', 'highlights': ['Creating design tokens and applying CSS variables based on the design tokens.', 'Using tokens for colors in design system packages, such as defining primary color for components, provides consistency and guidance for front end developers.', 'Linking the design system variable CSS file to index.html, ensuring the integration of design system variables into the project.', 'Utilizing design system packages to define styles, such as width and color, ensures consistent design implementation and provides guidance for front end developers.', 'Resolving issues with CSS variables and live server integration, showcasing troubleshooting and problem-solving skills in the design system implementation process.']}, {'end': 2400.932, 'segs': [{'end': 1981.079, 'src': 'embed', 'start': 1889.261, 'weight': 0, 'content': [{'end': 1892.244, 'text': 'We also have placeholder.', 'start': 1889.261, 'duration': 2.983}, {'end': 1898.65, 'text': "So if we just type in place, we'll see all this coming up, text field, placeholder.", 'start': 1892.784, 'duration': 5.866}, {'end': 1902.198, 'text': "Now we wanna make sure we're using the right, tokens here.", 'start': 1898.71, 'duration': 3.488}, {'end': 1907.261, 'text': "So placeholder, there's a character style called placeholder, simply placeholder.", 'start': 1902.338, 'duration': 4.923}, {'end': 1910.644, 'text': "So I'll click add there.", 'start': 1908.282, 'duration': 2.362}, {'end': 1917.669, 'text': 'We also have the color of the type, which that is placeholder.', 'start': 1912.405, 'duration': 5.264}, {'end': 1918.49, 'text': 'Sorry about that.', 'start': 1917.809, 'duration': 0.681}, {'end': 1922.493, 'text': 'And I think that would be pretty good.', 'start': 1919.23, 'duration': 3.263}, {'end': 1924.114, 'text': 'Text field border as well.', 'start': 1922.933, 'duration': 1.181}, {'end': 1933.237, 'text': 'So text field, and where are you? right there, alright.', 'start': 1924.154, 'duration': 9.083}, {'end': 1940.162, 'text': "so if we click that, we'll see that we have all this information that lets us know how to I properly construct this.", 'start': 1933.237, 'duration': 6.925}, {'end': 1942.584, 'text': 'so we have I a white background.', 'start': 1940.162, 'duration': 2.422}, {'end': 1950.71, 'text': 'we have the, the font family, the font weight, the size on and also the token for the text field border.', 'start': 1942.584, 'duration': 8.126}, {'end': 1952.512, 'text': "so that's pretty much everything that we would need.", 'start': 1950.71, 'duration': 1.802}, {'end': 1955.795, 'text': 'So now add any documentation if you wish.', 'start': 1953.092, 'duration': 2.703}, {'end': 1960.08, 'text': 'Um, we could also add our code snippets.', 'start': 1956.556, 'duration': 3.524}, {'end': 1960.641, 'text': 'All right.', 'start': 1960.34, 'duration': 0.301}, {'end': 1968.85, 'text': "So for the text field, let's go ahead and add the snippet trigger.", 'start': 1960.681, 'duration': 8.169}, {'end': 1973.716, 'text': "We'll call this gallery language, HTML.", 'start': 1969.571, 'duration': 4.145}, {'end': 1975.693, 'text': 'All right.', 'start': 1975.393, 'duration': 0.3}, {'end': 1981.079, 'text': 'So for our text field, let me reference the reference monitor real quickly.', 'start': 1975.793, 'duration': 5.286}], 'summary': 'Configuring text field properties including placeholder, color, border, and documentation.', 'duration': 91.818, 'max_score': 1889.261, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5MhfwvlGkfA/pics/5MhfwvlGkfA1889261.jpg'}, {'end': 2389.506, 'src': 'embed', 'start': 2341.422, 'weight': 3, 'content': [{'end': 2349.764, 'text': "so now all the tokens are updated as well, and if we go back over here, Let's see here.", 'start': 2341.422, 'duration': 8.342}, {'end': 2358.086, 'text': 'And you may have to click start editing and then like finish editing real quick in order for it to update the CSS variable.', 'start': 2349.784, 'duration': 8.302}, {'end': 2361.588, 'text': "or maybe it already did that, but the browser just wasn't catching it.", 'start': 2358.086, 'duration': 3.502}, {'end': 2364.549, 'text': 'So what you can do is go back.', 'start': 2362.608, 'duration': 1.941}, {'end': 2367.95, 'text': 'I had to refresh this and then it showed the updated colors.', 'start': 2365.029, 'duration': 2.921}, {'end': 2371.593, 'text': 'So all in all, awesome stuff.', 'start': 2368.85, 'duration': 2.743}, {'end': 2386.785, 'text': 'Very excited that it basically makes the process of dealing with a UI designer and the communication between a UI designer and a front-end developer a lot easier and now a lot more integrated with this extension.', 'start': 2371.953, 'duration': 14.832}, {'end': 2388.426, 'text': 'All right, so hopefully you enjoyed that.', 'start': 2387.065, 'duration': 1.361}, {'end': 2389.506, 'text': 'Let me know what you think.', 'start': 2388.506, 'duration': 1}], 'summary': 'Updating tokens and css variables makes ui development easier and more integrated with the extension, improving communication between ui designer and front-end developer.', 'duration': 48.084, 'max_score': 2341.422, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5MhfwvlGkfA/pics/5MhfwvlGkfA2341422.jpg'}], 'start': 1796.044, 'title': 'Text field styling and adobe xd integration', 'summary': 'Covers styling text field and paragraph components with font size, font family, line height, and tokens. it also demonstrates integrating adobe xd extension with visual studio code for efficient communication between ui designer and front-end developer.', 'chapters': [{'end': 2035.892, 'start': 1796.044, 'title': 'Styling text field and paragraph', 'summary': 'Covers styling the text field and paragraph components, including font size, font family, line height, and adding tokens such as background color and placeholder, along with code snippets for html and css.', 'duration': 239.848, 'highlights': ['Styling the text field and paragraph components, including font size, font family, and line height.', 'Adding tokens for background color and placeholder, ensuring the use of correct tokens.', 'Including code snippets for HTML and CSS to demonstrate the implementation of the text field.']}, {'end': 2400.932, 'start': 2037.874, 'title': 'Adobe xd extension integration', 'summary': 'Demonstrates the process of integrating adobe xd extension with visual studio code, making the communication between ui designer and front-end developer more efficient and integrated.', 'duration': 363.058, 'highlights': ['The process of integrating Adobe XD extension with Visual Studio Code The chapter provides a step-by-step demonstration of integrating Adobe XD extension with Visual Studio Code, showcasing the seamless collaboration between UI designer and front-end developer.', 'Efficiency in communication between UI designer and front-end developer The integration of Adobe XD extension with Visual Studio Code streamlines the communication between UI designer and front-end developer, enhancing the efficiency and integration of the workflow.', 'Demonstration of updating CSS variables and refreshing browser for color changes The demonstration includes the process of updating CSS variables and refreshing the browser to showcase color changes, highlighting the practical implementation of design modifications within the development environment.']}], 'duration': 604.888, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/5MhfwvlGkfA/pics/5MhfwvlGkfA1796044.jpg', 'highlights': ['Styling the text field and paragraph components, including font size, font family, and line height.', 'Adding tokens for background color and placeholder, ensuring the use of correct tokens.', 'Including code snippets for HTML and CSS to demonstrate the implementation of the text field.', 'The process of integrating Adobe XD extension with Visual Studio Code showcasing the seamless collaboration between UI designer and front-end developer.', 'Efficiency in communication between UI designer and front-end developer through the integration of Adobe XD extension with Visual Studio Code.', 'Demonstration of updating CSS variables and refreshing browser for color changes, highlighting the practical implementation of design modifications within the development environment.']}], 'highlights': ['70% increase in investment in interactive prototyping According to a study by Design Week, 70% of respondents mentioned that their company is investing more in interactive prototyping, emphasizing the growing importance of this skill in the design industry.', 'New Adobe XD Visual Studio Code plugin The Adobe XD Visual Studio Code plugin is discussed, highlighting its role in creating design system packages and improving communication between UI designers and front-end developers.', 'Benefits of the Adobe XD plugin for front-end developers The plugin is highlighted for its ability to create organized design system packages, making it easier for front-end developers to create components and necessary CSS and HTML snippets, ultimately streamlining the development process.', 'Importance of Adobe XD in creating design tokens and assets The tutorial emphasizes the role of Adobe XD in creating design tokens and assets in the assets panel, showcasing its significance in the design process.', 'The chapter covers the step-by-step process of designing UI elements, such as creating containers, adding background colors, selecting border widths, naming and organizing colors and design tokens, creating components, and generating a design system package for integration with Visual Studio Code.', 'Demonstrates the ability to customize and edit design tokens and components within the design system package to align with specific project requirements for a personalized UI design system.', 'Explains the process of importing design elements and tokens into Visual Studio Code for a seamless workflow, including naming conventions, component creation, and saving the design system package.', 'Emphasizes the importance of naming conventions and character styles for consistency and collaboration.', 'Including relevant and pertinent information for developers and designers is important for the design system, such as principles and structure, to create a robust documentation.', 'The introduction is structured through Markdown, providing an easy way to create style for plain text documents, popularly used for GitHub readme pages.', 'Design tokens encompass physical characteristics like colors, fonts, weights, and scale, as well as margins and padding.', 'The system allows editing of tokens, specifying types such as color, size, and alias, with the options to add hex, opacity, and description.', 'Typography fields include font, family weight, size, and description, with the ability to edit and add relevant tags.', 'Creating design tokens and applying CSS variables based on the design tokens.', 'Using tokens for colors in design system packages, such as defining primary color for components, provides consistency and guidance for front end developers.', 'Linking the design system variable CSS file to index.html, ensuring the integration of design system variables into the project.', 'Styling the text field and paragraph components, including font size, font family, and line height.', 'Adding tokens for background color and placeholder, ensuring the use of correct tokens.', 'Including code snippets for HTML and CSS to demonstrate the implementation of the text field.', 'The process of integrating Adobe XD extension with Visual Studio Code showcasing the seamless collaboration between UI designer and front-end developer.', 'Efficiency in communication between UI designer and front-end developer through the integration of Adobe XD extension with Visual Studio Code.']}