Motivation

<aside> 💡 Share file access to members outside design team for UX writing / Content Writing always end up making file messy

</aside>

Context Switch lets people maintain the texting outside the Figma files and directly import the context into the text elements that need to update.

with Context Switch, your team can even maintain multiple state: internationalization: EN 🇺🇸, JP 🇯🇵, TW 🇹🇼 / condition: Normal 🙂, Deep Dive 👩🏻‍💻 at once! and the best of all, Designer control when to update the content and don't need to update content manually, plugin helps you do the works!

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ca8b5acd-d783-4b6d-b6e9-061d5667f5ec/Screen_Recording_2020-06-18_at_12.29.20_AM.mov

Steps

<aside> ⏰ It takes about 5 ~ 8 min to setup all the stuff (Airtable, Figma)

</aside>

Airtable

  1. Setup Airtable Account & Find Access Token

    1. Create an account here: https://airtable.com
    2. After create account, goto: https://airtable.com/account and create Access token (copy and paste it somewhere, we will use the token later)

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f4e9d3e8-abda-4722-a9d0-8e1fd4803fc6/Screen_Recording_2020-06-18_at_12.51.33_AM.mov

  2. Create a Base

    1. goto: https://airtable.com/ and create a Base

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/69af9232-075b-4320-ae72-cf98f70b1f57/Screen_Recording_2020-06-18_at_12.57.44_AM.mov

    1. goto: https://airtable.com/api find the base you just create, enter the doc and you can get the base key (copy and paste it somewhere, we will use the token later)

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4929f26e-2472-4585-994f-d277d297e187/Screen_Recording_2020-06-18_at_1.02.34_AM.mov

  3. Create a Table

    1. Set the first column's key as langkey, and the rest columns can have any name you prefer, see the following example:

    https://airtable.com/shriRMUUd1Qtm2qWg

    Figma plugin: Context Switch Demo

    link for the demo airtable base

Figma

  1. Download Figma plugin: Context Switch

    1. download it here: https://www.figma.com/community/plugin/855144415496096302
    2. navigate to a file and open the plugin, paste in the access token, base key, table name you just copied.

  2. Edit your text element's name following the langkey on the Airtable

    for example, update the Text element's name into comment.cat in Figma, this key maintain the relationship between Airtable and Figma's text element.

  3. select option in the dropdown and watch the magic!

    1. Context switch will update content only in current page
    2. You can also only update elements you selected (ex: one frame, one text element)

<aside> 🚧 We will be supporting for Import content from Google Spreadsheet in the near future!

</aside>