Add auto-layout to vf-link in Figma

[Adedoyinebi]

Add auto layout functionality to the vf-link component in figma

Current state

The VF link in figma is created using frames and does not:

• Adjust the frame’s size (Height and length) when the text is updated. This has to be done manually and could lead to inconsistent designs.
• Wrap the text to the next line when the frame is adjusted, this has to be done by creating a new paragraph, which modifies the text’s content in a case where it is copied directly for development or other use cases.

Desired state

Add auto layout to the link component in figma to enable:

• Frame to resize when the text is updated
• Text wrapping to the next line when the frame is adjusted

Cautionary note should be added when publishing that explains that the update could alter the layout of existing designs.

[Adedoyinebi]

Updates have been made to the VF-link component in figma, this changes affect the use of the component only in figma, to help create more consistent designs easily. The UI element and states of the VF-link component remain unchanged with the current update.

Updates made

Auto layout added to the vf-link component in figma to allow:

• Frame to resize when the text is updated
• Text wrapping to the next line when the frame is adjusted

 How to wrap texts

• Highlight the links text
• Change the “Text resizing” setting from “Auto width” to “Auto height”

• Update text’s frame’s layout from “Fixed” to “Fill container”
• Adjust the link component's frame’s width as needed.
• Text wraps to the next line!

Limitations

• Text does not wrap by default.
• The layout of existing designs might be altered in some cases by the update. To reduce possibility of changes to existing design layout, the component is set to not wrap by default (Similar to how the component worked initially). Check instances in which the vf-link component has been used in your designs to address any change in the layout.