google-sheets-sync-figma icon indicating copy to clipboard operation
google-sheets-sync-figma copied to clipboard

Error setting component variants across libraries

Open skyw4kr opened this issue 1 year ago • 0 comments

Describe the bug When importing a component asset with variants from an external library into a local component instance Google Sheets Sync would not apply the assigned variants that correspond to the spreadsheet. Only the single instance of the asset (whichever I set the default variant state) would appear in any of the local component instances. I only discovered a fix when I decided to copy an additional instance into my local library and set a different variant when thinking I hadn't built the component correctly. (then those 2 variants where now displaying correctly)

To Reproduce (assume I've already created the appropriate spreadsheet and connected it to "My Design" file)

  1. Create a component with 6 variants (called "schools" with variant states labeled "logos" - each containing a different label and image for each variant) in a Figma design file (lets name this "Resource Library").
  2. Save and publish "Resource Library".
  3. Create a new Figma design file (let's call this "My Design")
  4. Add "Resource Library" to "My Design" via the library tool
  5. Select the "Assets" tab in "My Design", search for and add to your page the "schools" asset.
  6. Now create a component (named "Event") with a text field for "school_name" and another text field with "event_date", and finally add your "schools" asset into the component.
  7. Assign all the field layer names to the corresponding column header in the spreadsheet, with a # of course.
  8. Do the same for the "schools" component
  9. Layout a grid using the "Event" component of say 5-6 instances
  10. Run the Google Sheets Sync tool
  11. Notice that the only school logo displaying is the one embedded in the local component.
  12. Now, drag onto the page the "school" asset - do it for as many variants as the component has, and make sure to change the "logos" variant so that each version is now displayed properly. Just put them anywhere, they don't have to be nested in any other components or in any designs, just on the stage.
  13. Re-run Google Sheets Sync
  14. Notice that all the school variants show up properly in your local layout grid of "Event" components.

Expected behavior Users want the ability to use components with variants from an external library within their design, and with that they want the ability to set a state of that variant using Google Sheets Sync in a manner that works just as if the component existed in the local Figma library.

Additional context I also tried adding the external assets to a different local page in the hopes to have a kind of asset resource page, but after testing it would only work if I copied the component variants to the page where I was synching the data in a layout.

skyw4kr avatar Aug 01 '24 23:08 skyw4kr