GeekyAnts ਨੇ ਇੱਕ React-Fiber-ਅਧਾਰਤ ਪਲਗਇਨ ਪੇਸ਼ ਕੀਤਾ ਹੈ ਜੋ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਲਾਈਵ React components ਨੂੰ ਸਿੱਧਾ ਐਡਿਟ ਕਰਨ ਯੋਗ Figma ਫਾਈਲਾਂ ਵਿੱਚ ਲਿਆਉਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ, ਜੋ ਕੋਡ ਅਤੇ ਡਿਜ਼ਾਈਨ ਵਿਚਕਾਰ ਇੱਕ ਅਸਲ ਰੌਂਡ-ਟ੍ਰਿਪ (round-trip) ਦਾ ਵਾਅਦਾ ਕਰਦਾ ਹੈ। ਇਹ ਟੂਲ ਵਧ ਰਹੇ "design-code drift" ਨੂੰ ਹੱਲ ਕਰਦਾ ਹੈ ਜੋ ਟੀਮਾਂ ਨੂੰ ਉਦੋਂ ਕੰਮ ਦੁਬਾਰਾ ਕਰਨ ਲਈ ਮਜਬੂਰ ਕਰਦਾ ਹੈ ਜਦੋਂ UI ਤਬਦੀਲੀਆਂ ਡਿਜ਼ਾਈਨਰ-ਡਿਵੈਲਪਰ ਦੀ ਸੀਮਾ ਨੂੰ ਪਾਰ ਕਰਦੀਆਂ ਹਨ।

ਪੁਰਾਣਾ DOM-ਪਹਿਲਾਂ ਵਾਲਾ ਤਰੀਕਾ ਕਿਉਂ ਅਸਫਲ ਰਹਿੰਦਾ ਹੈ

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

ਕੰਪੋਨੈਂਟ ਇੰਟੈਲੀਜੈਂਸ ਦੀ ਉਹ ਕਮੀ 'ਡਿਜ਼ਾਈਨ ਡੈਟ' (design debt) ਪੈਦਾ ਕਰਦੀ ਹੈ। ਹਰ ਵਾਰ ਜਦੋਂ ਕੋਡ ਵਿੱਚ ਕੋਈ UI ਐਲੀਮੈਂਟ ਬਦਲਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਉਸ ਦੇ ਨਾਲ ਸੰਬੰਧਿਤ Figma ਫਾਈਲ ਨੂੰ ਮੈਨੂਅਲੀ ਅਪਡੇਟ ਕਰਨਾ ਪੈਂਦਾ ਹੈ, ਨਹੀਂ ਤਾਂ ਦੋਵਾਂ ਰੂਪਾਂ ਵਿੱਚ ਅੰਤਰ ਆ ਜਾਂਦਾ ਹੈ। ਇਹ ਅੰਤਰ ਰੱਖ-ਰਖਾਅ ਦੇ ਖਰਚਿਆਂ ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ।

React Fiber: ਇੱਕ ਗੁੰਮ ਹੋਈ ਕੜੀ ਵਜੋਂ

React Fiber ਉਹ ਅੰਦਰੂਨੀ ਰੀਕੰਸਲੀਏਸ਼ਨ ਇੰਜਣ (reconciliation engine) ਹੈ ਜੋ ਰੈਂਡਰਾਂ ਦੌਰਾਨ ਕੰਪੋਨੈਂਟ ਦੇ ਨਾਮ, ਹਾਇਰਾਰਕੀ (hierarchy) ਅਤੇ ਸਟੇਟ (state) ਨੂੰ ਟ੍ਰੈਕ ਕਰਦਾ ਹੈ। DOM ਦੇ ਉਲਟ, Fiber ਹਰ UI ਹਿੱਸੇ ਦੇ ਅਰਥਾਂ (semantic meaning) ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਦਾ ਹੈ। HTML ਆਉਟਪੁੱਟ ਦੀ ਬਜਾਏ Fiber ਟ੍ਰੀ ਨੂੰ ਪੜ੍ਹ ਕੇ, ਇੱਕ ਟੂਲ ਇੱਕ <Button> ਕੰਪੋਨੈਂਟ ਨੂੰ ਸਿੱਧਾ Figma ਕੰਪੋਨੈਂਟ ਨਾਲ ਮੈਪ ਕਰ ਸਕਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਅਸਲ ਡਿਜ਼ਾਈਨ ਟੋਕਨ ਨਾਲ ਲਿੰਕ ਬਣਿਆ ਰਹਿੰਦਾ ਹੈ।

GeekyAnts ਦਾ ਪਲਗਇਨ ਇਸੇ ਜਾਣਕਾਰੀ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਇਹ ਲਾਈਵ ਕੋਡ ਨੂੰ ਐਡਿਟ ਕਰਨ ਯੋਗ Figma ਫਾਈਲਾਂ ਵਿੱਚ ਲਿਆਉਣ ਲਈ React Fiber ਨੂੰ ਪੜ੍ਹਦਾ ਹੈ। ਇਸ ਦਾ ਨਤੀਜਾ ਲੇਅਰਾਂ ਦਾ ਇੱਕ ਅਜਿਹਾ ਸਮੂਹ ਹੈ ਜੋ ਆਪਣੇ ਅਸਲ ਵੇਰੀਐਂਟ ਰਿਲੇਸ਼ਨਸ਼ਿਪਸ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਦਾ ਹੈ।

ਪਾਈਪਲਾਈਨ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀ ਹੈ

ਇੰਪੋਰਟ ਪ੍ਰਕਿਰਿਆ ਤਿੰਨ ਵੱਖ-ਵੱਖ ਪੜਾਵਾਂ ਦੀ ਪਾਲਣਾ ਕਰਦੀ ਹੈ:

  • Variant Expander – ਸਟੇਟ ਡੈਫੀਨੇਸ਼ਨਾਂ (hover, disabled, active) ਲਈ ਕੰਪੋਨੈਂਟ ਕੋਡ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ ਅਤੇ ਵਿਜ਼ੂਅਲ ਵੇਰੀਐਂਟਸ ਦਾ ਇੱਕ ਪੂਰਾ ਸੈੱਟ ਤਿਆਰ ਕਰਦਾ ਹੈ। ਇਹ Figma Component Sets ਵਿੱਚ ਇਕੱਠੇ ਹੋ ਜਾਂਦੇ ਹਨ, ਤਾਂ ਜੋ ਡਿਜ਼ਾਈਨਰ ਫਾਈਲ ਨੂੰ ਛੱਡੇ ਬਿਨਾਂ ਸਟੇਟਸ ਨੂੰ ਬਦਲ ਸਕਣ।
  • Layout Mapping – CSS Flexbox ਨਿਯਮਾਂ ਨੂੰ Figma Auto Layout ਕੰਸਟ੍ਰੇਨਟਸ ਵਿੱਚ ਬਦਲਦਾ ਹੈ। ਇਹ ਰਿਸਪੌਂਸਿਵ ਵਿਵਹਾਰ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਦਾ ਹੈ ਅਤੇ ਡਿਜ਼ਾਈਨਰਾਂ ਨੂੰ UI ਐਡੀਟਰ ਵਿੱਚ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਸਪੇਸਿੰਗ ਨੂੰ ਐਡਜਸਟ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।
  • State Triggering – ਉਹ ਕੋਡ ਪਾਥਾਂ ਨੂੰ ਚਲਾਉਂਦਾ ਹੈ ਜੋ ਮੋਡਲ (modals), ਡ੍ਰੌਪਡਾਊਨ ਜਾਂ ਹੋਰ ਡਾਇਨਾਮਿਕ UI ਐਲੀਮੈਂਟਸ ਨੂੰ ਖੋਲ੍ਹਦੇ ਹਨ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦੇ ਹੋਏ ਕਿ ਪਲਗਇਨ ਹਰ ਸੰਭਵ ਵਿਊ (view) ਨੂੰ ਕੈਪਚਰ ਕਰੇ।

ਇਹ ਸਾਰੇ ਪੜਾਅ ਮਿਲ ਕੇ ਲਾਈਵ UI ਦੀ ਇੱਕ ਸਹੀ ਅਤੇ ਐਡਿਟ ਕਰਨ ਯੋਗ ਨਕਲ ਤਿਆਰ ਕਰਦੇ ਹਨ, ਨਾ ਕਿ ਸਿਰਫ਼ ਇੱਕ ਸਟੈਟਿਕ ਸਕ੍ਰੀਨਸ਼ੌਟ।

ਉੱਭਰ ਰਿਹਾ ਈਕੋਸਿਸਟਮ

ਡਿਜ਼ਾਈਨ-ਕੋਡ ਲੂਪ ਨੂੰ ਖਤਮ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਵਿੱਚ GeekyAnts ਇਕੱਲਾ ਨਹੀਂ ਹੈ:

  • Anima ਉਲਟ ਦਿਸ਼ਾ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰਦਾ ਹੈ, ਜੋ Figma ਡਿਜ਼ਾਈਨਾਂ ਨੂੰ React ਜਾਂ Vue ਕੋਡ ਵਿੱਚ ਬਦਲਦਾ ਹੈ।
  • Locofy.ai ਡਿਜ਼ਾਈਨ ਫਾਈਲਾਂ ਤੋਂ ਰਿਸਪੌਂਸਿਵ ਕੋਡ ਦੇ AI-ਅਧਾਰਤ ਜਨਰੇਸ਼ਨ ਨੂੰ ਜੋੜਦਾ ਹੈ।
  • Builder.io ਇੱਕ HTML-to-Figma ਇੰਪੋਰਟ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦਾ ਹੈ ਜੋ ਅਜੇ ਵੀ DOM 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ, ਅਤੇ ਇਸ ਦੀਆਂ ਸੀਮਾਵਾਂ ਨੂੰ ਵੀ ਢੋਂਦਾ ਹੈ।
  • Codia AI ਵੈੱਬ ਐਲੀਮੈਂਟਸ ਨੂੰ ਸੰਰਚਨਾਤਮਕ Figma ਫਾਈਲਾਂ ਵਿੱਚ ਬਦਲਦਾ ਹੈ।

ਜੋ ਚੀਜ਼ Fiber-ਅਧਾਰਤ ਪਹੁੰਚ ਨੂੰ ਵੱਖਰਾ ਬਣਾਉਂਦੀ ਹੈ, ਉਹ ਹੈ ਕੰਪੋਨੈਂਟ ਸੈਮੈਂਟਿਕਸ (component semantics) ਦੀ ਜਾਗਰੂਕਤਾ, ਜਿਸ ਦੀ DOM-ਕੇਂਦਰਿਤ ਟੂਲਸ ਵਿੱਚ ਕਮੀ ਹੈ।

ਕੌਣ ਜਿੱਤਦਾ ਹੈ, ਕੌਣ ਹਾਰਦਾ ਹੈ

ਇੱਕ ਆਟੋਮੇਟਡ ਪਹੁੰਚ ਜੋ ਕੰਪੋਨੈਂਟਸ ਦਾ ਸਨਮਾਨ ਕਰਦੀ ਹੈ, ਡਿਜ਼ਾਈਨ ਡੈਟ ਨੂੰ ਘਟਾਉਂਦੀ ਹੈ।

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

ਮੁੱਖ ਵਾਅਦਾ ਸਪੱਸ਼ਟ ਹੈ: ਇੰਪੋਰਟ ਦਾ ਫੋਕਸ DOM ਤੋਂ ਹਟਾ ਕੇ React Fiber 'ਤੇ ਲਿਆ ਕੇ, GeekyAnts ਵਰਗੇ ਪਲਗਇਨ ਡਿਜ਼ਾਈਨਰਾਂ ਨੂੰ ਪ੍ਰੋਡਕਸ਼ਨ UI ਦਾ ਇੱਕ ਲਾਈਵ, ਕੰਪੋਨੈਂਟ-ਜਾਗਰੂਕ ਵਿਊ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ। ਇਹ ਤਬਦੀਲੀ ਅੰਤ ਵਿੱਚ ਡਿਜ਼ਾਈਨ ਅਤੇ ਕੋਡ ਵਿਚਕਾਰ ਲੰਬੇ ਸਮੇਂ ਤੋਂ ਚੱਲ ਰਹੇ ਪਾੜੇ ਨੂੰ ਮਿਟਾ ਸਕਦੀ ਹੈ, ਜਿਸ ਨਾਲ ਇੱਕ ਖਰਚਾਪੂਰਨ ਅਤੇ ਗਲਤੀ-ਪੂਰਨ ਹੈਂਡ-ਆਫ (hand-off) ਨੂੰ ਇੱਕ ਸੁਚਾਰੂ, ਦੋ-ਮੁਖੀ ਵਰਕਫਲੋ (bidirectional workflow) ਵਿੱਚ ਬਦਲਿਆ ਜਾ ਸਕਦਾ ਹੈ।