Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Text change events #298

Open
macintoshhelper opened this issue May 15, 2020 · 2 comments
Open

Text change events #298

macintoshhelper opened this issue May 15, 2020 · 2 comments
Labels
type: feature or enhancement New feature or request

Comments

@macintoshhelper
Copy link
Contributor

Hi, I'm wondering whether it would be possible to use the Figma API to implement more interactive events, such as onChangeText for <Text> components?

Maybe something like this would be possible with some runtime loop cycle, if Figma doesn't provide events.

@ilyalesik ilyalesik added the type: feature or enhancement New feature or request label May 15, 2020
@ilyalesik
Copy link
Member

It’s sounds interesting! Can you describe a use case for this feature, please?

@macintoshhelper
Copy link
Contributor Author

macintoshhelper commented May 15, 2020

I haven't had much time to think about all the use cases for it yet, it's an idea that just popped into my head, but the initial idea is that this would allow for the development of <TextInput> components, either in react-figma, or an external package. As there is access to runtime events with react-reconciler, there's a lot of possibilities for new workflows and apps that can be built inside of Figma.

This could be a nice escape hatch too for avoiding use of the Figma UI API (e.g. for performance to avoid the use of a WebSocket bridge).

It could be really interesting to have "temporary" parts of a design such as checkboxes, buttons, text inputs that are rendered by a react-figma plugin/runtime, and can be removed when the plugin is closed, to allow for adding an API route for data (e.g. putting in GitHub usernames to get profile data from the API, etc). While this could be done with the Figma UI API with a socket bridge, I think having it as part of the same DOM as the Figma document would be amazing.

One idea, is that in code, you could have a system to help people populate mock-data into the document, where when you manually change the text to 2010-10-10 in the Figma UI, it auto-formats it with moment for you, like this pseudo-code:

const TextPlaceholder = () => {
  const [date, setDate] = useState('Enter date here');
  return (
    <Text onChangeText={(text) => setDate(moment(text).format())>
      {date}
    </Text>
  );
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: feature or enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants