AI ಕ್ಷಣಾರ್ಧದಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ React ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಸಿದ್ಧಪಡಿಸಬಹುದು, ಮತ್ತು GeekyAnts ನಂತಹ ಪರಿಕರಗಳು ಡಿಸೈನ್ ಸಿಸ್ಟಮ್‌ನ ರಚನೆಯನ್ನು ಕಳೆದುಕೊಳ್ಳದೆ, ಈ ಹೊಸದಾಗಿ ಸೃಷ್ಟಿಸಿದ ಕೋಡ್ ಅನ್ನು Figma ಗೆ ಮರಳಿ ತರಲು ಭರವಸೆ ನೀಡುತ್ತವೆ. ಈ ಪ್ರತಿಪಾದನೆಯು ಬಹಳ ಮುಖ್ಯವಾಗಿದೆ, ಏಕೆಂದರೆ AI-ಬರೆದ ಕೋಡ್ ಬಂದಾಗಲೆಲ್ಲಾ ಡಿಸೈನ್ ತಂಡಗಳು ಮೊದಲಿನಿಂದಲೇ ಪ್ರಾರಂಭಿಸಬೇಕಾದ ಅನಿವಾರ್ಯತೆ ಇರುತ್ತದೆ, ಇದು ಮರು-ವಿನ್ಯಾಸದ ಸಮಯ ಮತ್ತು ವೆಚ್ಚವನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.

ವರ್ಷोंಗಳಿಂದ, ಹ್ಯಾಂಡ್-ಆಫ್ (hand-off) ಪ್ರಕ್ರಿಯೆಯು ಕಾಗದದ ಮೇಲೆ ಸರಳವಾಗಿ ಕಾಣುತ್ತಿತ್ತು: ಡಿಸೈನರ್‌ಗಳು Figma ನಲ್ಲಿ ಸ್ಕ್ರೀನ್‌ಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುತ್ತಿದ್ದರು, ಡೆವಲಪರ್‌ಗಳು ಆ ಸ್ಕ್ರೀನ್‌ಗಳನ್ನು ಕೋಡ್‌ನಲ್ಲಿ ಮತ್ತೆ ಬರೆಯುತ್ತಿದ್ದರು, ಮತ್ತು ಪ್ರತಿಯೊಂದು ಕಡೆಯೂ ಲೇಔಟ್‌ನ ತನ್ನದೇ ಆದ ಪ್ರತಿಯನ್ನು ಹೊಂದಿದ್ದವು. AI-ಚಾಲಿತ ಕೋಡ್ ಜನರೇಟರ್‌ಗಳು ಆ ಲಯವನ್ನು ಹಾಳುಮಾಡಿದವು. ಒಂದು AI ಇಂಜಿನ್ ಸಿದ್ಧವಾಗಿರುವ React ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ನೀಡುತ್ತದೆ, ಆದರೆ ಅದರ ಪರಿಣಾಮವಾಗಿ ಬರುವ ಘಟಕಗಳನ್ನು (components) ಮೂಲ ಡಿಸೈನ್ ಫೈಲ್‌ಗೆ ಮರಳಿ ಇಂಪೋರ್ಟ್ ಮಾಡಲು ಯಾವುದೇ ನೇರವಾದ ಮಾರ್ಗವಿಲ್ಲ. ಇದರ ಪರಿಣಾಮವಾಗಿ "ಮೊದಲು ಕೋಡ್, ನಂತರ ಡಿಸೈನ್" (code-first, design-later) ಎಂಬ ನೋವಿನ ಚಕ್ರ ಉಂಟಾಗುತ್ತದೆ, ಇದು ಹಂಚಿಕೆಯ ಡಿಸೈನ್ ಭಾಷೆಯನ್ನು ಕುಸಿಯುವಂತೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ನಿರ್ವಹಣಾ ವೆಚ್ಚವನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.

DOM ಏಕೆ ಸಾಲದು

ಹೆಚ್ಚಿನ ರಿವರ್ಸ್-ಇಂಜಿನಿಯರಿಂಗ್ ಪರಿಕರಗಳು ಡಾಕ್ಯುಮೆಂಟ್ ಆಬ್ಜೆಕ್ಟ್ ಮಾಡೆಲ್ (DOM) ನಿಂದ ಪ್ರಾರಂಭವಾಗುತ್ತವೆ, ಇದು HTML ಎಲಿಮೆಂಟ್‌ಗಳ ಬ್ರೌಸರ್ ಪ್ರಾತಿನಿಧ್ಯವಾಗಿದೆ. DOM ಪ್ರತಿಯೊಂದು ದೃಶ್ಯ ಭಾಗವನ್ನು ಒಂದು ಸಾಮಾನ್ಯ <div> ಅಥವಾ <span> ಆಗಿ ಪರಿಗಣಿಸುತ್ತದೆ. ಇದು ಬಟನ್ ಮತ್ತು ಕಾರ್ಡ್ ನಡುವಿನ ವ್ಯತ್ಯಾಸವನ್ನು ಗುರುತಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ, ಅಥವಾ ಎಲಿಮೆಂಟ್‌ಗಳ ಒಂದು ಸೆಟ್ ಡಿಸೈನ್ ಸಿಸ್ಟಮ್‌ನ ಮಾಸ್ಟರ್ ಕಾಂಪೊನೆಂಟ್‌ಗೆ ಸೇರಿದ್ದೇ ಎಂದು ಅದಕ್ಕೆ ತಿಳಿದಿರುವುದಿಲ್ಲ. ಒಂದು ಪೇಜ್‌ನಲ್ಲಿ ಹತ್ತು ಬಟನ್‌ಗಳಿದ್ದಾಗ, DOM ಕೇವಲ ಹತ್ತು ಅನಾಮಧೇಯ ಲೇಯರ್‌ಗಳನ್ನು ವರದಿ ಮಾಡುತ್ತದೆ. ಮೂಲ ಕಾಂಪೊನೆಂಟ್ ಲೈಬ್ರರಿಯೊಂದಿಗಿನ ಸಂಪರ್ಕವು ಇಲ್ಲವಾಗುತ್ತದೆ, ಇದು ಡಿಸೈನರ್‌ಗಳಿಗೆ ಗುಂಪು ಮಾಡದ ಆಕಾರಗಳ ಗೊಂದಲಮಯ ರಾಶಿಯನ್ನು ಬಿಟ್ಟುಹೋಗುತ್ತದೆ, ಇದನ್ನು ಸರಿಪಡಿಸಲು ಸ್ಕ್ರೀನ್ ಅನ್ನು ಮೊದಲಿನಿಂದಲೇ ಮರುನಿರ್ಮಿಸುವುದಕ್ಕಿಂತ ಹೆಚ್ಚು ಕೆಲಸ ಬೇಕಾಗಬಹುದು.

React Fiber ಹೆಚ್ಚು ಸಮಗ್ರವಾದ ನಕ್ಷೆಯನ್ನು ನೀಡುತ್ತದೆ

React ನ ಆಂತರಿಕ ಶೆಡ್ಯೂಲರ್, ಇದನ್ನು Fiber ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ, ಇದು ಹೆಸರುಗಳು, ಪೋಷಕ-ಮಕ್ಕಳ ಸಂಬಂಧಗಳು (parent-child relationships) ಮತ್ತು ಪ್ರಾಪರ್ಟಿ ಬ್ಯಾಗ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಮರವನ್ನು (tree) ನಿರ್ವಹಿಸುತ್ತದೆ. ರೆಂಡರ್ ಆದ HTML ಬದಲಿಗೆ Fiber ರಚನೆಯನ್ನು ಓದುವ ಮೂಲಕ, ರಿವರ್ಸ್-ಇಂಜಿನಿಯರಿಂಗ್ ಪರಿಕರವು ಒಂದು ನಿರ್ದಿಷ್ಟ <div> ವಾಸ್ತವವಾಗಿ ಒಂದು PrimaryButton ಕಾಂಪೊನೆಂಟ್ ಆಗಿದೆ, ಅದು Header ಕಾಂಪೊನೆಂಟ್‌ನ ಒಳಗಿದೆ ಮತ್ತು ಅದು ತನ್ನ ಸ್ಥಿತಿಯನ್ನು (state) ವ್ಯಾಖ್ಯಾನಿಸುವ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಹೊಂದಿದೆ ಎಂದು ಗುರುತಿಸಬಹುದು. ಈ ಒಳನೋಟವು ಮೂಲ ಡೆವಲಪರ್—ಅಥವಾ ಕೋಡ್ ಅನ್ನು ಸೃಷ್ಟಿಸಿದ AI—UI ಮೇಲೆ ಹೇರಿದ ಉದ್ದೇಶವನ್ನು ಉಳಿಸಿಕೊಳ್ಳುತ್ತದೆ.

GeekyAnts ಲೈವ್ ಕೋಡ್ ಅನ್ನು ಎಡಿಟ್ ಮಾಡಬಹುದಾದ Figma ಫೈಲ್‌ಗಳಿಗೆ ತರಲು React Fiber extraction ಅನ್ನು ಬಳಸುತ್ತದೆ.

ಹೊಸ ವರ್ಕ್‌ಫ್ಲೋ ಹೇಗೆ ನೈಜ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸುತ್ತದೆ

ವೇರಿಯಂಟ್ ವಿಸ್ತರಣೆ (Variant expansion)

ಸಾಂಪ್ರದಾಯಿಕ ಕ್ಯಾಪ್ಚರ್ ವಿಧಾನಗಳು ಕಾಂಪೊನೆಂಟ್‌ನ ಕೇವಲ ಕಾಣಿಸುವ ಸ್ಥಿತಿಯ ಸ್ನ್ಯಾಪ್‌ಶಾಟ್ ಅನ್ನು ಮಾತ್ರ ತೆಗೆದುಕೊಳ್ಳುತ್ತವೆ—ಉದಾಹರಣೆಗೆ, ಬಟನ್‌ನ ಡಿಫಾಲ್ಟ್ ಹವರ್-ಆಫ್ (hover-off) ಸ್ಥಿತಿ. Fiber ಮರದಲ್ಲಿನ ಕಾಂಪೊನೆಂಟ್ ವ್ಯಾಖ್ಯಾನವನ್ನು ಪರಿಶೀಲಿಸುವ ಮೂಲಕ, ಈ ಪರಿಕರವು ಮೂಲ ಕೋಡ್‌ನಲ್ಲಿ ಘೋಷಿಸಲಾದ ಪ್ರತಿಯೊಂದು ವೇರಿಯಂಟ್‌ಗಳನ್ನು ಪಟ್ಟಿ ಮಾಡುತ್ತದೆ: hover, focused, disabled, loading, ಇತ್ಯಾದಿ. ನಂತರ ಇದು ಎಲ್ಲಾ ಸ್ಥಿತಿಗಳನ್ನು ಒಟ್ಟಿಗೆ ಸೇರಿಸುವ ಒಂದು Figma Component Set ಅನ್ನು ರಚಿಸುತ್ತದೆ, ಇದು ಮ್ಯಾನುಯಲ್ ಡೂಪ್ಲಿಕೇಶನ್ ಇಲ್ಲದೆ ಡಿಸೈನ್ ಸಿಸ್ಟಮ್‌ನ ಉದ್ದೇಶವನ್ನು ಪ್ರತಿಬಿಂಬಿಸುತ್ತದೆ.

ಲೇಔಟ್ ಮ್ಯಾಪಿಂಗ್ (Layout mapping)

ವೆಬ್ ಲೇಔಟ್‌ಗಳು CSS Flexbox ಮೇಲೆ ಹೆಚ್ಚು ಅವಲಂಬಿತವಾಗಿವೆ, ಆದರೆ Figma ನ ಸಮಾನವಾದದ್ದು Auto Layout ಆಗಿದೆ. Flexbox ಪ್ರಾಪರ್ಟಿಗಳನ್ನು (direction, justification, alignment, gaps) ನೇರವಾಗಿ Auto Layout ಪ್ಯಾರಾಮೀಟರ್‌ಗಳಿಗೆ ಮ್ಯಾಪ್ ಮಾಡುವ ಅನುವಾದಕ ಪದರವು (translation layer), ಸ್ಪೇಸಿಂಗ್, ರಿಸೈಸಿಂಗ್ ವರ್ತನೆ ಮತ್ತು ಅಲೈನ್‌ಮೆಂಟ್ ಅನ್ನು ಮರುಸೃಷ್ಟಿಯ ಸಮಯದಲ್ಲಿ ಉಳಿಸಿಕೊಳ್ಳುವಂತೆ ಮಾಡುತ್ತದೆ. ಡಿಸೈನರ್‌ಗಳು ಇನ್ನು ಮುಂದೆ ಸಂಕೀರ್ಣವಾದ ಫ್ಲೆಕ್ಸ್ ಕಂಟೇನರ್‌ಗಳನ್ನು ಕೈಯಿಂದ ಮರುನಿರ್ಮಿಸುವ ಅಗತ್ಯವಿಲ್ಲ.

ಸ್ಟೇಟ್ ಟ್ರಿಗ್ಗರಿಂಗ್ (State triggering)

ಅನೇಕ UI ಭಾಗಗಳು—ಮಾಡಲ್‌ಗಳು, ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು, ಅಕಾರ್ಡಿಯನ್‌ಗಳು—JavaScript ಸ್ಥಿತಿಯನ್ನು ಬದಲಾಯಿಸುವವರೆಗೆ DOM ನಲ್ಲಿ ಅಡಗಿದಿರುತ್ತವೆ. Fiber ಮರವು ಆ ಲಾಜಿಕ್ ಅನ್ನು ದಾಖಲಿಸುವುದರಿಂದ, ರಿವರ್ಸ್-ಇಂಜಿನಿಯರಿಂಗ್ ಪರಿಕರವು ಆ ಸ್ಥಿತಿಗಳನ್ನು ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ ಆಗಿ ಟ್ರಿಗ್ಗರ್ ಮಾಡಬಹುದು, ಅಡಗಿರುವ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಹೊರತರಬಹುದು ಮತ್ತು ಅವುಗಳನ್ನು ಡಿಸೈನ್ ಆಬ್ಜೆಕ್ಟ್‌ಗಳಾಗಿ ಕ್ಯಾಪ್ಚರ್ ಮಾಡಬಹುದು. ಇದರ ಪರಿಣಾಮವಾಗಿ ಲೈವ್ ಆಗಿ ಕಾಣಿಸುವ ಭಾಗಗಳನ್ನು ಮಾತ್ರವಲ್ಲದೆ, ಪ್ರತಿಯೊಂದು ಇಂಟರಾಕ್ಟಿವ್ ಭಾಗವನ್ನು ಒಳಗೊಂಡ ಸಂಪೂರ್ಣ ಡಿಸೈನ್ ಫೈಲ್ ಲಭ್ಯವಾಗುತ್ತದೆ.

ಉದಯೋನ್ಮುಖ ಪರಿಕರಗಳ ಪಟ್ಟಿ (The emerging toolbox)

  • GeekyAnts – ಕಾಂಪೊನೆಂಟ್ ಮಿತಿಗಳನ್ನು ಗೌರವಿಸುವ ಲೈವ್, ಎಡಿಟಬಲ್ Figma ಫೈಲ್‌ಗಳನ್ನು ತಯಾರಿಸಲು React Fiber ಅನ್ನು ಹೊರತೆಗೆಯುತ್ತದೆ.
  • Anima – ಫಾರ್ವರ್ಡ್ ಪಾತ್ ಮೇಲೆ ಗಮನ ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ, Figma ಡಿಸೈನ್‌ಗಳನ್ನು React ಅಥವಾ Vue ಕೋಡ್ ಆಗಿ ಪರಿವರ್ತಿಸುತ್ತದೆ.
  • Locofy.ai – ವೇಗಕ್ಕೆ ಒತ್ತು ನೀಡುತ್ತಾ, Figma ಲೇಔಟ್‌ಗಳನ್ನು ರೆಸ್ಪಾನ್ಸಿವ್ ಕೋಡ್ ಆಗಿ ಪರಿವರ್ತಿಸಲು AI ಬಳಸುತ್ತದೆ.
  • Builder.io – HTML ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು Figma ಗೆ ಮರಳಿ ತರುತ್ತದೆ.
  • Codia AI – ಸ್ಕ್ರೀನ್‌ಶಾಟ್‌ಗಳನ್ನು ರಚನಾತ್ಮಕ Figma ಫೈಲ್‌ಗಳಾಗಿ ಪರಿವರ್ತಿಸುತ್ತದೆ.

ತಂಡಗಳು ಮತ್ತು ಬಜೆಟ್‌ಗಳ ಮೇಲಿನ ಪರಿಣಾಮಗಳು

ಡಿಸೈನ್ ಮತ್ತು ಡೆವಲಪ್‌ಮೆಂಟ್ ನಡುವೆ ಅಂತರ ಉಂಟಾದಾಗ, ಅಸಂಗತತೆಗಳನ್ನು ಸರಿಪಡಿಸುವುದು ಶೀಘ್ರದಲ್ಲೇ ದುಬಾರಿಯಾಗುತ್ತದೆ.

ವಿರೋಧಾತ್ಮಕ ವಾದಗಳು ಮತ್ತು ಮಿತಿಗಳು

(ಈ ವಿಭಾಗವನ್ನು ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಖಾಲಿ ಬಿಡಲಾಗಿದೆ)

ಮುಂದೆ ಗಮನಿಸಬೇಕಾದವುಗಳು

(ಈ ವಿಭಾಗವನ್ನು ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಖಾಲಿ ಬಿಡಲಾಗಿದೆ)

ಸಾರಾಂಶ (Takeaway)

ಮೇಲ್ಮೈ ಮಟ್ಟದ DOM ಬದಲಿಗೆ React ನ ಆಂತರಿಕ Fiber tree ಅನ್ನು ಓದುವುದರಿಂದ, ಕಷ್ಟಕರವಾದ "ಮೊದಲು ಕೋಡ್, ನಂತರ ವಿನ್ಯಾಸ" (code-first, design-later) ಎಂಬ ಚಕ್ರವು ಒಂದು ದ್ವಿಮುಖ ಮಾರ್ಗವಾಗಿ ಬದಲಾಗುತ್ತದೆ. AI-ಸೃಷ್ಟಿತ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಈಗ ಅವುಗಳ ಘಟಕದ ರಚನೆಯನ್ನು (component structure) ಕಳೆದುಕೊಳ್ಳದೆ ಮತ್ತೆ Figma ಗೆ ತರಬಹುದು. ವಿನ್ಯಾಸದ ವ್ಯತ್ಯಾಸ (design drift) ಮತ್ತು ಹೆಚ್ಚುತ್ತಿರುವ ನಿರ್ವಹಣಾ ವೆಚ್ಚಗಳೊಂದಿಗೆ ಹೋರಾಡುತ್ತಿರುವ ತಂಡಗಳಿಗೆ, ಈ ಬದಲಾವಣೆಯು ಗೊಂದಲಮಯ ಮರುವಿನ್ಯಾಸದ ಸ್ಪ್ರಿಂಟ್ ಮತ್ತು ಶಿಸ್ತುಬದ್ಧವಾದ, ಘಟಕ-ಮೊದಲ ಕಾರ್ಯಪ್ರವಾಹದ (component-first workflow) ನಡುವಿನ ವ್ಯತ್ಯಾಸವನ್ನು ನಿರ್ಧರಿಸಬಹುದು.