FigmaToCode icon indicating copy to clipboard operation
FigmaToCode copied to clipboard

Published 20 hours ago • verified publisher icon bernaferrari

react-native / react-figma / react-primitives supporting

Open ilyalesik opened this issue 4 years ago • 10 comments

Proposal: react-native / react-figma / react-primitives supporting

The react-primitives family has several universal interfaces:

  • View
  • Text
  • StyleSheet (with Yoga Layout-like properties)
  • Platform

ilyalesik avatar Nov 20 '20 10:11 ilyalesik

My biggest issue is that I don't know react native. How do I make rectangles, flex, etc in it? If you are willing to help, we can do it. It is not hard, there are just too many details.

bernaferrari avatar Nov 20 '20 14:11 bernaferrari

Sure, I'm very interested. I already made a little demo, the proof-of-concept of how it can works. I think that your plugin is most advanced right now, so extending them looks most reasonable.

ilyalesik avatar Nov 21 '20 10:11 ilyalesik

I can make a branch with a wrong conversion and you can point everything that's wrong, what do you think?

On Sat, Nov 21, 2020, 07:51 Ilya Lesik [email protected] wrote:

Sure, I'm very interested. I already made a little demo https://github.com/react-figma/code-generator, the proof-of-concept of how it can works. I think that your plugin is most advanced right now, so extending them looks most reasonable.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/bernaferrari/FigmaToCode/issues/11#issuecomment-731562271, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACVXFJRXLAYT2CKR5VCVZLSQ6LRRANCNFSM4T4TWBQQ .

bernaferrari avatar Nov 21 '20 13:11 bernaferrari

@bernaferrari, it's a great idea! You can start a branch; I'll look at the result and start correcting.

ilyalesik avatar Nov 21 '20 16:11 ilyalesik

I have added HTML support to the main branch. Do you think it is something that can replace <div> with <View> or should it be treated as a whole new language?

bernaferrari avatar Dec 13 '20 03:12 bernaferrari

@bernaferrari also styles supporting needed. React Native doesn't support CSS classes; there are their own styles instead: https://reactnative.dev/docs/style.

ilyalesik avatar Dec 13 '20 11:12 ilyalesik

Is there no inline styling? Should we export the layer as a component?

bernaferrari avatar Dec 13 '20 14:12 bernaferrari

React Native supports inline styling

ilyalesik avatar Dec 15 '20 15:12 ilyalesik

So, the difference is just div -> View and p to Text? I support JSX already.

bernaferrari avatar Dec 20 '20 00:12 bernaferrari

So, the difference is just div -> View and p to Text? I support JSX already.

Yes, that's effectively it. Another thing to consider is that the View layout only supports flexbox-like layouts. I think your implementation already relies on flexbox, so this probably won't be an issue

DaleWebb avatar May 01 '22 14:05 DaleWebb