InstaRelinker

<p><strong>If you ever needed to replace all instances of a remote main component with its local equivalent, you know exactly how painful that can be, especially at scale</strong>.</p><p><br></p><p>The manual&nbsp;finding and swapping&nbsp;of&nbsp;instances and replacing remote styles with local styles&nbsp;can be very tedious.&nbsp;</p><p>&nbsp;</p><p>The default&nbsp;<em>*Copy/Paste*</em>&nbsp;functionality in Figma creates new top-level components in the destination file but keeps nested instances as instances of the main components in the origin file.&nbsp;A shortcoming of this approach is that it fails to&nbsp;relink all nested instances to the local main components.&nbsp;</p><p><br></p><p>But sweat no more—meet&nbsp;<strong>InstaRelinker</strong>&nbsp;by the&nbsp;Progress&nbsp;<a href="https://www.figma.com/community/plugin/969582819918741496/Unite-UX" rel="noreferrer noopener nofollow ugc" target="_blank">Unite&nbsp;UX Team</a>.</p><p><br></p><p>Check out <a href="https://www.youtube.com/watch?v=uKEvcwOQAnw" rel="noreferrer noopener nofollow ugc" target="_blank">👀 </a> <a href="https://youtu.be/hGicyhYLBeQ" rel="noreferrer noopener nofollow ugc" target="_blank">Introductory video</a> (4:02)</p><p><br></p><p>We&nbsp;built&nbsp;this plugin&nbsp;to complement the continuous&nbsp;evolution&nbsp;of the&nbsp;<a href="https://www.figma.com/community/search?model_type=hub_files&amp;q=kendo" rel="noreferrer noopener nofollow ugc" target="_blank">Telerik and&nbsp;Kendo UI Kits for&nbsp;Figma</a>. As new&nbsp;UI&nbsp;components are added regularly&nbsp;to our libraries, we faced the need to replicate&nbsp;them&nbsp;between the multiple kits we support.&nbsp;Additionally,&nbsp;our&nbsp;users&nbsp;faced the need&nbsp;to upgrade to newer versions of the Telerik and Kendo UI&nbsp;kits, while&nbsp;preserving&nbsp;any&nbsp;modifications&nbsp;they had&nbsp;already&nbsp;made to their version.&nbsp;&nbsp;</p><p><br></p><p><strong>What the&nbsp;Plugin&nbsp;Does</strong>&nbsp;</p><p>The plugin enables nested&nbsp;<em>*remote*</em>&nbsp;instances and styles within selected&nbsp;<em>*local*</em>&nbsp;main components to be relinked to their local equivalents. When the plugin runs, it will scan the current Figma file for&nbsp;<em>*local*</em>&nbsp;main components and automatically relink any remote instance for which&nbsp;a&nbsp;local main component is matched by name. If no match is&nbsp;found,&nbsp;then the plugin will allow users to manually select&nbsp;the&nbsp;local main component for each remote&nbsp;instance and&nbsp;relink it. The same process is applied for&nbsp;remote&nbsp;styles.&nbsp;</p><p><br></p><p><strong>How&nbsp;It’s&nbsp;Done&nbsp;</strong>&nbsp;</p><p>The plugin relies on Figma's built-in&nbsp;Copy-Paste functionality to&nbsp;move&nbsp;main components from one file to another.&nbsp;</p><p>&nbsp;</p><p><strong>Replicate Components and Run the Plugin:</strong>&nbsp;</p><p><strong>1.</strong>&nbsp;Open the file&nbsp;containing&nbsp;the main components.&nbsp;This is the origin (or source) file.&nbsp;</p><p><strong>2.&nbsp;</strong>Select the main components or component sets to be replicated.&nbsp;</p><p><strong>3.&nbsp;</strong>Use&nbsp;copy&nbsp;to put them in the clipboard.&nbsp;</p><p><strong>4.</strong>&nbsp;Open the file where&nbsp;you want to replicate&nbsp;the main components.&nbsp;This is the destination (or target) file.&nbsp;</p><p><strong>5.</strong>&nbsp;Paste the components into the file.&nbsp;</p><p><strong>6.</strong>&nbsp;Make sure the pasted main components are selected and run&nbsp;<strong>InstaRelinker</strong>.&nbsp;</p><p><strong>7.&nbsp;</strong>The plugin will scan the selection for remote instances and styles.&nbsp;</p><p>&nbsp;</p><p><strong>Note:</strong>&nbsp;<em>For complex components with many nested instances,&nbsp;this may&nbsp;take&nbsp;a&nbsp;few&nbsp;seconds to complete.&nbsp;</em></p><p><strong>8.</strong><em>&nbsp;It will then scan for matching local components.&nbsp;</em></p><p>&nbsp;</p><p><strong>Note:</strong>&nbsp;<em>For large files with thousands of main components,&nbsp;this may take some time,&nbsp;typically several&nbsp;seconds,&nbsp;to complete.&nbsp;</em></p><p><br></p><p><strong>9.</strong>&nbsp;Once&nbsp;the&nbsp;scanning is complete, the plugin will pop.&nbsp;</p><p><strong>Resolve&nbsp;No-Match Local Components:</strong>&nbsp;</p><p>When&nbsp;a&nbsp;matching local component is found for a remote instance, it is automatically relinked to it. When no match is found,&nbsp;then the plugin&nbsp;will ask you to point to the&nbsp;matching local component for each unresolved instance.&nbsp;</p><p>&nbsp;</p><p><strong>1.</strong>&nbsp;Use the "Search for local component" button to display&nbsp;a&nbsp;searchable list with all local components:&nbsp;</p><p>&nbsp;</p><p><strong>Note:</strong>&nbsp;<em>When a component is selected from the list, the plugin will automatically navigate&nbsp;to&nbsp;and select the component within Figma's document.&nbsp;</em></p><p>&nbsp;</p><p><strong>2.</strong>&nbsp;Select the desired local component and press the "Relink" button on the right:&nbsp;</p><p>&nbsp;</p><p><strong>Note:</strong>&nbsp;<em>You can manually change the currently selected component within&nbsp;the&nbsp;Figma file&nbsp;and the change will be reflected&nbsp;in the currently selected list item&nbsp;in&nbsp;the plugin.&nbsp;</em></p><p>&nbsp;</p><p><strong>3.&nbsp;</strong>Repeat&nbsp;for all conflicts.&nbsp;</p><p><strong>Resolve&nbsp;No-Match Local Styles:</strong>&nbsp;</p><p>When&nbsp;a&nbsp;local style is&nbsp;matched&nbsp;to&nbsp;a remote style, it is automatically relinked to it. When no match&nbsp;is found,&nbsp;then&nbsp;you will&nbsp;need&nbsp;to&nbsp;match&nbsp;or link&nbsp;the styles&nbsp;manually.&nbsp;</p><p><br></p><p>There are two options:&nbsp;</p><p>&nbsp;</p><ul><li>Search&nbsp;for&nbsp;and relink to&nbsp;a&nbsp;local style&nbsp;</li><li>Clone the remote style as local&nbsp;</li></ul><p><br></p><p><strong>Relink to&nbsp;a&nbsp;Local Style</strong>&nbsp;</p><p><strong>1.</strong>&nbsp;Use the "Search for local styles" button to display&nbsp;a&nbsp;searchable list with all local styles. Items in the dropdown will be filtered by the style type—paint,&nbsp;effect&nbsp;or text.&nbsp;</p><p><strong>2.</strong>&nbsp;Select the desired local style from the dropdown list and it will become the relink target for the current remote style.&nbsp;</p><p><strong>3.</strong>&nbsp;Repeat the above steps for all conflicts.&nbsp;</p><p>&nbsp;</p><p><strong>Clone&nbsp;a&nbsp;Remote Style as Local</strong>&nbsp;</p><p>If there is no appropriate local style for a remote one, you can clone it&nbsp;and save it&nbsp;as local by pressing the "Plus" button&nbsp;located&nbsp;on&nbsp;the right&nbsp;of each list item.&nbsp;</p><p>&nbsp;</p><p><strong>Detach from Component/Style</strong>&nbsp;</p><p>In case the auto-mapping of component/style is&nbsp;incorrect, or you have manually linked the wrong local component, use the "Detach from Component/Style" button on the right of an already linked item.&nbsp;</p><p>&nbsp;</p><p><strong>Apply Selection</strong>&nbsp;</p><p>When you’re&nbsp;done selecting local components and styles,&nbsp;press the "Apply Selection" button&nbsp;at&nbsp;the bottom right of the&nbsp;plugin.&nbsp;</p>