Variables → Selection

About this plugin

Replace static values with variablesHave you ever struggled manually replacing designs with static property values with variables? Now you can automate and precisely control what gets updated and from where.How to use the pluginSelect something in the canvasSelect the scope of your variables, color or numberSelect any collection as a sourceOptional: provide the path to specific groups of variablesOptional: ignore nested instances, which will prevent overriding properties set in your componentsOptional: ignore zero values, which will prevent variables with a zero value from being applied to properties with a 0ApplyAdditional featuresAutomatically maps scoped variables to where they can be appliedSupport for external librariesBased on selection, so you can control exactly what gets updated. From simple components to complex sets of variantsSupportsVariables types: colors, numbers, stringsColor properties: fill, stroke, effectColor type: fill, stroke, opacity, gradientNumber properties: padding, gap, height & width, min/max height & width, stroke weight, radius, opacity, effectsEffect properties: position, blur, spreadEffect type: drop shadow, inner shadow, background blur, layer blurText properties: font family, font weight, font size, line height, letter spacing, paragraph spacingDetach existing variablesHave you ever struggles to remove old variables in order to replace them with new ones? Now you can strip them out with a single click.How to use the detach featureSelect something in the canvasOptional: ignore nested instances, which will prevent overriding properties set in your componentsDetachLimitationsStrings can be used for font family and font weightText styles are ignored. You should use and manage text styles separately. You may find the plugin Variables -> Text Styles useful.NotesThe larger your selection, the longer this process may take. It's recommended to scope your updates to components then to layouts.