video1.0<iframe src="https://www.loom.com/embed/4e5bf53567fc4da69f46d09e2f100621" frameborder="0" width="1920" height="1440" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>14401920Loomhttps://www.loom.com14401920https://cdn.loom.com/sessions/thumbnails/4e5bf53567fc4da69f46d09e2f100621-90ff61ca72e20f4c.gif453.86Introduction The new DS Figma libraries are designed to work seamlessly with both large and small screen layouts. The libraries have the 'Product-Large' variable mode already applied. To tailor your designs for small screens, the 'Product-Small' variables should be applied. This will help optimize your designs for smaller screens. Although some manual adjustments may be required, such as resizing the overall page or selecting different breakpoint variants for specific components, you won't need to adjust font sizes, spacing between elements, or dimensions. The variables will take care of these aspects for you. Why is this beneficial? It enables product designers to quickly adapt designs to various screen sizes. The variables used in Figma are directly linked to the tokens used by developers, eliminating the need to provide detailed layout markups to your developers. In this demo you will see examples of a page design, using ‘Product-Large’ and ‘Product-Small’ variables to adjust font sizes, spacing, and dimensions.