imnotashrimp / copythat-airtable-figma Goto Github PK

I'm having some issues with the plugin. It worked fine in my proof-of-concept tests, but when I started to build the "production" usage tests, it fails inconsistently.

The Airtable connection works, and the plugin successfully retrieves the new text (this is small sample with no proprietary information):

Working on "Airtable tests ▸ Print page with notes ▸ Phone base layout ▸ Phone Layout ▸ Layout ▸ Main ▸ buttons ▸ 0 hero / default - text | hero-button-univ ▸ 0 hero / default - icon_text | hero-button-univ ▸ .*/univ/enclosed-button-univ ▸ Options ▸ .*/univ/content/text ▸ .*/univ/content/text_icon ▸ {{5-13-6.0}}"... figma_app.592c5e6288ca461d485d7d3985c7c5bd.min.js:575 Replacing copy... figma_app.592c5e6288ca461d485d7d3985c7c5bd.min.js:575 Original: 'PRIMARY BUTTON' , New: 'Placeholder Text' figma_app.592c5e6288ca461d485d7d3985c7c5bd.min.js:575 Working on "Airtable tests ▸ Print page with notes ▸ Phone base layout ▸ Phone Layout ▸ Layout ▸ Main ▸ buttons ▸ 2 secondary / pressed - mb - text | secondary-button-univ ▸ 2 secondary / pressed - mb - icon_text | secondary-button-univ ▸ .*/univ/enclosed-button-univ ▸ Options ▸ .*/univ/content/text ▸ .*/univ/content/text_icon ▸ {{5-13-7.0}}"... figma_app.592c5e6288ca461d485d7d3985c7c5bd.min.js:575 Replacing copy... figma_app.592c5e6288ca461d485d7d3985c7c5bd.min.js:575 Original: 'Secondary Button' , New: 'Placeholder Text'

However, the text in the Figma file does not actually change. (There seems to be some issue returning the text back to the node, maybe?) I get different errors (including 422) periodically, but this batch seems to be most useful:

0x6716d0 1 0* 0x5541b8 Promise { }. jsvm-cpp.js.br:8 0x7330a8 1 0* 0x518958 Error { message: 1"in set_characters: Expected \"characters\" to have type string but got array instead", stack: 1" at f (PLUGIN_3_SOURCE)\n at <anonymous> (PLUGIN_3_SOURCE)\n at next (native)\n at <anonymous> (PLUGIN_3_SOURCE)\n at Promise (native)\n at s (PLUGIN_3_SOURCE)\n at <anonymous> (PLUGIN_3_SOURCE)\n at forEach (native)\n at <anonymous> (PLUGIN_3_SOURCE)\n at next (native)\n at <anonymous> (PLUGIN_3_SOURCE)\n at Promise (native)\n at h (PLUGIN_3_SOURCE)\n at <anonymous> (PLUGIN_3_SOURCE)\n" }. jsvm-cpp.js.br:8 0x670628 1 0* 0x5541b8 Promise { }. jsvm-cpp.js.br:8 0x72f420 1 0* 0x518958 Error { message: 1"in set_characters: Expected \"characters\" to have type string but got array instead", stack: 1" at f (PLUGIN_3_SOURCE)\n at <anonymous> (PLUGIN_3_SOURCE)\n at next (native)\n at <anonymous> (PLUGIN_3_SOURCE)\n at Promise (native)\n at s (PLUGIN_3_SOURCE)\n at <anonymous> (PLUGIN_3_SOURCE)\n at forEach (native)\n at <anonymous> (PLUGIN_3_SOURCE)\n at next (native)\n at <anonymous> (PLUGIN_3_SOURCE)\n at Promise (native)\n at h (PLUGIN_3_SOURCE)\n at <anonymous> (PLUGIN_3_SOURCE)\n" }. jsvm-cpp.js.br:8

(The Airtable field is a long text type, and I've used long text type in the proof-of-concept file. I also tested everything I could think of on the Airtable side--table name format, field name formats, data types, key field construction, sorting, number of records, etc.)

I would appreciate any help you can give me. This plug-in is so close to solving a major process issue we're struggling with!

Thanks,
Dorothy

Today, the plugin looks for double curly brackets ({{ and }}) around variables. Without these, it doesn't recognize a string as a variable.

Do people already use double curly brackets in their designs, and would have to change them for the plugin? If they do, maybe it would help to let users define the surrounding symbols.

• missing required information

• not connecting to airtable: If the plugin can't connect to airtable, it needs to throw an error and close

Right now, I have to add credentials to each design I want to sync. A better solution would be to allow syncing from a master doc, or a previously-defined doc that has the right credentials, which can then be copied to this doc.

Or, alternatively- just use them from the other doc, without having to sync them to this doc.

Or, alternatively- have a toggle where I get to decide on a doc-by-doc basis.

Part of #22

Related to #22

If I do something like this, there's no problem:

And this is not a problem:

But if I do something like this:

...then it doesn't get replaced.

Also doesn't get caught by the report, so user has no indication text wasn't replaced. Definitely needs to be addressed in next release.

Currently, plugin replaces all strings in the design doc.

Does it need a feature to replace only the strings on this page, or the strings contained in this node, or just the strings in a selection?

Create a function to strip whitespace from beginning & end of strings.

Make this work with:

• Figma text node names
• Airtable strings

Related to #22

Add support for bold, italics, link.

Should be simple enough with a regex on each string.

I think support for basic markdown/HTML should work here. Plugin should strip the markup and leave only the text

• Bold
  • **text**, or __text__
  • <b>text</b>
• Italics
  • _text_ or *text*
  • <i>text</i>
• Links - strip the URL, leave only the placeholder
  • [text](https://whatever)
  • <a href="http://whatever data-other-attributes='also-whatever'>text</a>
• Code
  • `text`
  • <code>text</code>

Open questions

• How are we to handle things like using stars as decoration and not as markup? e.g., ***********
• Probably worth using a library.
• Commonmark only. No special markdown requirements.

Decisions that should be left out for now

• Leave color handling out. There are lots of questions for this one, and I think I should wait for actual requests to come in before thinking through this one.

MVP decisions

• Bold & italic only. Leave code and links for future release.

A "last sync" text box above each page

Closed by #16

Show/hide status indicators over affected text boxes. For example, a green dot = text was synced, red = failed sync.

See #22

I think I'd like a way to hand off all the copy applicable to a certain design in the design itself.

For my use case, this is because not all the strings make their way into the design (error messages, validation messages, notifications, etc.) but dev needs these strings in order to complete a feature. If I can pull them into the design, I don't have to ask dev look at Airtable and guess.

One way to do this might be to let the user set a filter or a view, and then pull all the strings into a new page or new text node.

airtableConfig is an object that is... less than optimal. You need to set individual values by reading from the doc, every time a value is updated.

Better practice is to make a function that just reads the config values back from the doc, rather than having to pass through an object.

Currently, the plugin requests all strings from Airtable for every sync. It's fine for the 135 I have, but probably an issue when you get to the thousands.

Possible solution:

1. Gather array of all text nodes with variables in the name
2. Create an Airtable filter from the array
3. Include the filter in the Airtable request