AI ਕੁਝ ਹੀ ਸਕਿੰਟਾਂ ਵਿੱਚ ਇੱਕ ਕੰਮ ਕਰ ਰਹੀ React ਐਪ ਤਿਆਰ ਕਰ ਸਕਦਾ ਹੈ, ਅਤੇ GeekyAnts ਵਰਗੇ ਟੂਲ ਵਾਅਦਾ ਕਰਦੇ ਹਨ ਕਿ ਉਹ ਉਸ ਨਵੇਂ ਤਿਆਰ ਕੀਤੇ ਕੋਡ ਨੂੰ ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ ਦੀ ਬਣਤਰ ਨੂੰ ਖਰਾਬ ਕੀਤੇ ਬਿਨਾਂ ਵਾਪਸ Figma ਵਿੱਚ ਲਿਆ ਸਕਦੇ ਹਨ। ਇਹ ਦਾਅਵਾ ਮਹੱਤਵਪੂਰਨ ਹੈ ਕਿਉਂਕਿ ਜਦੋਂ ਵੀ AI-ਲਿਖਿਆ ਕੋਡ ਸਾਹਮਣੇ ਆਉਂਦਾ ਹੈ, ਤਾਂ ਡਿਜ਼ਾਈਨ ਟੀਮਾਂ ਨੂੰ ਸ਼ੁਰੂ ਤੋਂ ਦੁਬਾਰਾ ਕੰਮ ਸ਼ੁਰੂ ਕਰਨ ਲਈ ਮਜਬੂਰ ਹੋਣਾ ਪੈਂਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਰੀ-ਡਿਜ਼ਾਈਨ ਦਾ ਸਮਾਂ ਅਤੇ ਲਾਗਤ ਵਧ ਜਾਂਦੀ ਹੈ।

ਸਾਲਾਂ ਤੋਂ, ਕੰਮ ਦਾ ਤਬਾਦਲਾ ਕਾਗਜ਼ 'ਤੇ ਸਧਾਰਨ ਲੱਗਦਾ ਸੀ: ਡਿਜ਼ਾਈਨਰਾਂ ਨੇ Figma ਵਿੱਚ ਸਕ੍ਰੀਨਾਂ ਤਿਆਰ ਕੀਤੀਆਂ, ਡਿਵੈਲਪਰਾਂ ਨੇ ਉਹਨਾਂ ਸਕ੍ਰੀਨਾਂ ਨੂੰ ਕੋਡ ਵਿੱਚ ਦੁਬਾਰਾ ਲਿਖਿਆ, ਅਤੇ ਹਰੇਕ ਪਾਸੇ ਲੇਆਉਟ ਦੀ ਆਪਣੀ ਕਾਪੀ ਰੱਖੀ। AI-ਅਧਾਰਿਤ ਕੋਡ ਜਨਰੇਟਰਾਂ ਨੇ ਉਸ ਲੈਅ ਨੂੰ ਤੋੜ ਦਿੱਤਾ ਹੈ। ਇੱਕ AI ਇੰਜਣ ਇੱਕ ਤਿਆਰ-to-run React ਪ੍ਰੋਜੈਕਟ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਪਰ ਨਤੀਜੇ ਵਜੋਂ ਬਣੇ ਕੰਪੋਨੈਂਟਸ ਨੂੰ ਵਾਪਸ ਅਸਲ ਡਿਜ਼ਾਈਨ ਫਾਈਲ ਵਿੱਚ ਇੰਪੋਰਟ ਕਰਨ ਦਾ ਕੋਈ ਸਿੱਧਾ ਤਰੀਕਾ ਨਹੀਂ ਹੈ। ਇਸ ਦਾ ਨਤੀਜਾ "ਪਹਿਲਾਂ ਕੋਡ, ਫਿਰ ਡਿਜ਼ਾਈਨ" ਦਾ ਇੱਕ ਦੁਖਦਾਈ ਚੱਕਰ ਹੈ ਜੋ ਸਾਂਝੀ ਡਿਜ਼ਾਈਨ ਭਾਸ਼ਾ ਨੂੰ ਖਤਮ ਕਰਦਾ ਹੈ ਅਤੇ ਰੱਖ-ਰਖਾਅ ਦੇ ਭਾਰ ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ।

DOM ਕਿਉਂ ਅਸਫਲ ਰਹਿੰਦਾ ਹੈ

ਜ਼ਿਆਦਾਤਰ ਰਿਵਰਸ-ਇੰਜੀਨੀਅਰਿੰਗ ਟੂਲ Document Object Model (DOM) ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ, ਜੋ HTML ਐਲੀਮੈਂਟਸ ਦਾ ਬ੍ਰਾਊਜ਼ਰ ਰੂਪ ਹੈ। DOM ਹਰ ਵਿਜ਼ੂਅਲ ਹਿੱਸੇ ਨੂੰ ਇੱਕ ਆਮ <div ਜਾਂ <span ਵਜੋਂ ਮੰਨਦਾ ਹੈ। ਇਹ ਇੱਕ ਬਟਨ ਅਤੇ ਇੱਕ ਕਾਰਡ ਵਿੱਚ ਫਰਕ ਨਹੀਂ ਕਰ ਸਕਦਾ, ਅਤੇ ਨਾ ਹੀ ਇਸਨੂੰ ਪਤਾ ਹੁੰਦਾ ਹੈ ਕਿ ਐਲੀਮੈਂਟਸ ਦਾ ਇੱਕ ਸਮੂਹ ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ ਵਿੱਚ ਕਿਸੇ ਮਾਸਟਰ ਕੰਪੋਨੈਂਟ ਨਾਲ ਸਬੰਧਤ ਹੈ। ਜਦੋਂ ਇੱਕ ਪੇਜ ਵਿੱਚ ਦਸ ਬਟਨ ਹੁੰਦੇ ਹਨ, ਤਾਂ DOM ਸਿਰਫ਼ ਦਸ ਅਣਪਛਾਤੇ ਲੇਅਰਾਂ ਦੀ ਰਿਪੋਰਟ ਕਰਦਾ ਹੈ। ਅਸਲ ਕੰਪੋਨੈਂਟ ਲਾਇਬ੍ਰੇਰੀ ਨਾਲ ਸਬੰਧ ਖਤਮ ਹੋ ਜਾਂਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਡਿਜ਼ਾਈਨਰਾਂ ਕੋਲ ਬਿਨਾਂ ਗਰੁੱਪ ਕੀਤੇ ਆਕਾਰਾਂ ਦਾ ਇੱਕ ਉਲਝਿਆ ਹੋਇਆ ਮੇਲ ਰਹਿ ਜਾਂਦਾ ਹੈ, ਜਿਸ ਨੂੰ ਸਾਫ਼ ਕਰਨ ਲਈ ਅਕਸਰ ਸਕ੍ਰੀਨ ਨੂੰ ਸ਼ੁਰੂ ਤੋਂ ਬਣਾਉਣ ਨਾਲੋਂ ਵੀ ਜ਼ਿਆਦਾ ਕੰਮ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।

React Fiber ਇੱਕ ਵਧੇਰੇ ਵਿਸਤ੍ਰਿਤ ਨਕਸ਼ਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ

React ਦਾ ਅੰਦਰੂਨੀ ਸ਼ੈਡਿਊਲਰ, ਜਿਸ ਨੂੰ Fiber ਕਿਹਾ ਜਾਂਦਾ ਹੈ, ਕੰਪੋਨੈਂਟਸ ਦਾ ਇੱਕ ਟ੍ਰੀ ਬਣਾਈ ਰੱਖਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਨਾਮ, ਪੇਰੈਂਟ-ਚਾਈਲਡ ਰਿਸ਼ਤੇ, ਅਤੇ ਪ੍ਰਾਪਰਟੀ ਬੈਗਸ (property bags) ਸ਼ਾਮਲ ਹੁੰਦੇ ਹਨ। ਰੈਂਡਰ ਕੀਤੇ HTML ਦੀ ਬਜਾਏ Fiber ਬਣਤਰ ਨੂੰ ਪੜ੍ਹ ਕੇ, ਇੱਕ ਰਿਵਰਸ-ਇੰਜੀਨੀਅਰਿੰਗ ਟੂਲ ਇਹ ਪਛਾਣ ਸਕਦਾ ਹੈ ਕਿ ਇੱਕ ਖਾਸ <div ਅਸਲ ਵਿੱਚ ਇੱਕ PrimaryButton ਕੰਪੋਨੈਂਟ ਹੈ, ਕਿ ਇਹ ਇੱਕ Header ਕੰਪੋਨੈਂਟ ਦੇ ਅੰਦਰ ਹੈ, ਅਤੇ ਇਹ ਆਪਣੀ ਸਟੇਟ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਵਾਲੇ ਪ੍ਰੌਪਸ (props) ਦਾ ਇੱਕ ਸਮੂਹ ਰੱਖਦਾ ਹੈ। ਇਹ ਜਾਣਕਾਰੀ ਉਸ ਉਦੇਸ਼ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਦੀ ਹੈ ਜੋ ਅਸਲ ਡਿਵੈਲਪਰ—ਜਾਂ ਕੋਡ ਤਿਆਰ ਕਰਨ ਵਾਲੇ 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 ਪੈਰਾਮੀਟਰਾਂ 'ਤੇ ਮੈਪ ਕਰਦੀ ਹੈ, ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਸਪੇਸਿੰਗ, ਰੀਸਾਈਜ਼ਿੰਗ ਵਿਵਹਾਰ, ਅਤੇ ਅਲਾਈਨਮੈਂਟ round-trip ਦੌਰਾਨ ਬਰਕਰਾਰ ਰਹਿੰਦੇ ਹਨ। ਡਿਜ਼ਾਈਨਰਾਂ ਨੂੰ ਹੁਣ ਗੁੰਝਲਦਾਰ ਫਲੈਕਸ ਕੰਟੇਨਰਾਂ ਨੂੰ ਹੱਥ ਨਾਲ ਦੁਬਾਰਾ ਬਣਾਉਣ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ।

ਸਟੇਟ ਟ੍ਰਿਗਰਿੰਗ (State triggering)

ਬਹੁਤ ਸਾਰੇ UI ਹਿੱਸੇ—ਮੋਡਲਜ਼, ਡ੍ਰੌਪਡਾਊਨਜ਼, ਅਕੋਰਡੀਅਨਜ਼—DOM ਵਿੱਚ ਉਦੋਂ ਤੱਕ ਲੁਕੇ ਰਹਿੰਦੇ ਹਨ ਜਦੋਂ ਤੱਕ JavaScript ਸਟੇਟ ਨਹੀਂ ਬਦਲਦੀ। ਕਿਉਂਕਿ Fiber ਟ੍ਰੀ ਉਸ ਲੌਜਿਕ ਨੂੰ ਰਿਕਾਰਡ ਕਰਦਾ ਹੈ, ਰਿਵਰਸ-ਇੰਜੀਨੀਅਰਿੰਗ ਟੂਲ ਪ੍ਰੋਗਰਾਮੈਟਿਕਲੀ ਉਹਨਾਂ ਸਟੇਟਾਂ ਨੂੰ ਟ੍ਰਿਗਰ ਕਰ ਸਕਦਾ ਹੈ, ਲੁਕੇ ਹੋਏ ਐਲੀਮੈਂਟਸ ਨੂੰ ਸਾਹਮਣੇ ਲਿਆ ਸਕਦਾ ਹੈ, ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਡਿਜ਼ਾਈਨ ਆਬਜੈਕਟਾਂ ਵਜੋਂ ਕੈਪਚਰ ਕਰ ਸਕਦਾ ਹੈ। ਨਤੀਜਾ ਇੱਕ ਸੰਪੂਰਨ ਡਿਜ਼ਾਈਨ ਫਾਈਲ ਹੈ ਜਿਸ ਵਿੱਚ ਹਰ ਇੰਟਰਐਕਟਿਵ ਹਿੱਸਾ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ, ਨਾ ਕਿ ਸਿਰਫ਼ ਉਹ ਜੋ ਸ਼ੁਰੂ ਵਿੱਚ ਲੋਡ ਹੋਣ ਸਮੇਂ ਦਿਖਾਈ ਦੇ ਰਿਹਾ ਸੀ।

ਉੱਭਰ ਰਿਹਾ ਟੂਲਬਾਕਸ

  • GeekyAnts – ਕੰਪੋਨੈਂਟ ਦੀਆਂ ਸੀਮਾਵਾਂ ਦਾ ਸਤਿਕਾਰ ਕਰਦੇ ਹੋਏ ਲਾਈਵ, ਐਡਿਟ ਕਰਨ ਯੋਗ Figma ਫਾਈਲਾਂ ਬਣਾਉਣ ਲਈ React Fiber ਨੂੰ ਐਕਸਟਰੈਕਟ ਕਰਦਾ ਹੈ।
  • Anima – ਫਾਰਵਰਡ ਪਾਥ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰਦਾ ਹੈ, Figma ਡਿਜ਼ਾਈਨਾਂ ਨੂੰ React ਜਾਂ Vue ਕੋਡ ਵਿੱਚ ਬਦਲਦਾ ਹੈ।
  • Locofy.ai – ਰਿਸਪੌਂਸਿਵ ਕੋਡ ਵਿੱਚ Figma ਲੇਆਉਟਾਂ ਨੂੰ ਬਦਲਣ ਲਈ AI ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਜੋ ਗਤੀ 'ਤੇ ਜ਼ੋਰ ਦਿੰਦਾ ਹੈ।
  • Builder.io – HTML ਕੰਪੋਨੈਂਟਸ ਨੂੰ ਵਾਪਸ Figma ਵਿੱਚ ਲਿਆਉਂਦਾ ਹੈ।
  • Codia AI – ਸਕ੍ਰੀਨਸ਼ੌਟਸ ਨੂੰ ਸੰਰਚਨਾਤਮਕ Figma ਫਾਈਲਾਂ ਵਿੱਚ ਬਦਲਦਾ ਹੈ।

ਟੀਮਾਂ ਅਤੇ ਬਜਟਾਂ ਲਈ ਜੋਖਮ

ਜਦੋਂ ਡਿਜ਼ਾਈਨ ਅਤੇ ਡਿਵੈਲਪਮੈਂਟ ਇੱਕ ਦੂਜੇ ਤੋਂ ਵੱਖ ਹੋ ਜਾਂਦੇ ਹਨ, ਤਾਂ ਅਸੰਗਤਤਾਵਾਂ ਨੂੰ ਠੀਕ ਕਰਨਾ ਜਲਦੀ ਹੀ ਮਹਿੰਗਾ ਹੋ ਜਾਂਦਾ ਹੈ।

ਵਿਰੋਧੀ ਦਲੀਲਾਂ ਅਤੇ ਸੀਮਾਵਾਂ

(ਸੈਕਸ਼ਨ ਜਾਣਬੁੱਝ ਕੇ ਖਾਲੀ ਛੱਡਿਆ ਗਿਆ ਹੈ)

ਅੱਗੇ ਕੀ ਦੇਖਣਾ ਹੈ

(ਸੈਕਸ਼ਨ ਜਾਣਬੁੱਝ ਕੇ ਖਾਲੀ ਛੱਡਿਆ ਗਿਆ ਹੈ)

ਮੁੱਖ ਨਿਸ਼ਕਰਸ਼

ਸਤਹ-ਪੱਧਰੀ DOM ਦੀ ਬਜਾਏ React ਦੇ ਅੰਦਰੂਨੀ Fiber tree ਨੂੰ ਪੜ੍ਹਨਾ, ਇੱਕ ਦਰਦਨਾਕ “code-first, design-later” ਲੂਪ ਨੂੰ ਦੋ-ਪਾਸੇ ਦੇ ਰਸਤੇ ਵਿੱਚ ਬਦਲ ਦਿੰਦਾ ਹੈ। AI-ਨਿਰਮਿਤ ਐਪਸ ਨੂੰ ਹੁਣ ਕੰਪੋਨੈਂਟ ਸਟ੍ਰਕਚਰ ਗੁਆਏ ਬਿਨਾਂ ਵਾਪਸ Figma ਵਿੱਚ ਲਿਆਂਦਾ ਜਾ ਸਕਦਾ ਹੈ। ਡਿਜ਼ਾਈਨ ਡ੍ਰਿਫਟ ਅਤੇ ਵਧਦੀ ਰੱਖ-ਰਖਾਅ ਦੀ ਲਾਗਤ ਨਾਲ ਜੂਝ ਰਹੀਆਂ ਟੀਮਾਂ ਲਈ, ਇਹ ਬਦਲਾਅ ਇੱਕ ਅਵਿਵਸਥਿਤ ਰੀਡਿਜ਼ਾਈਨ ਸਪ੍ਰਿੰਟ ਅਤੇ ਇੱਕ ਅਨੁਸ਼ਾਸਿਤ, ਕੰਪੋਨੈਂਟ-ਪਹਿਲਾਂ ਵਰਕਫਲੋ ਦੇ ਵਿਚਕਾਰ ਫਰਕ ਹੋ ਸਕਦਾ ਹੈ।