Lumos Figma File

Note: This style guide uses Figma variables which require a paid Figma plan.

Benefits

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Global design updates

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Ensures visual consistency

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Unified style names for designers & devs

</aside>

Duplicating the file

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Open the style guide in Figma

</aside>

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Under your “Recents” tab, right click on the file and duplicate it to start editing.

</aside>

Tokens Studio

Text styles are not currently supported by Figma variables. This style guide uses the Tokens Studio plugin to manage text styles until Figma adds native support.

<aside> <img src="/icons/checkmark_purple.svg" alt="/icons/checkmark_purple.svg" width="40px" /> Run the Tokens Studio plugin

</aside>