{"type":"video","version":"1.0","html":"<iframe src=\"https://www.loom.com/embed/4e5bf53567fc4da69f46d09e2f100621\" frameborder=\"0\" width=\"1920\" height=\"1440\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>","height":1440,"width":1920,"provider_name":"Loom","provider_url":"https://www.loom.com","thumbnail_height":1440,"thumbnail_width":1920,"thumbnail_url":"https://cdn.loom.com/sessions/thumbnails/4e5bf53567fc4da69f46d09e2f100621-90ff61ca72e20f4c.gif","duration":453.86,"title":"DS 2025: Large and small screen variable modes in Figma","description":"Introduction\n\nThe 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.\n\nAlthough 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.\n\n\nWhy is this beneficial? \n\nIt enables product designers to quickly adapt designs to various screen sizes. \nThe variables used in Figma are directly linked to the tokens used by developers, eliminating the need to provide detailed layout markups to your developers.\n\nIn this demo you will see examples of a page design, using ‘Product-Large’ and ‘Product-Small’ variables to adjust font sizes, spacing, and dimensions."}