Figma files
These are the official ADEK Figma libraries - the design source of truth behind every token and component on this site. Click a card to open the file in Figma.
ADEK Design System Figma
Two libraries cover the whole system: core tokens and base components, and the application component set.
Icons
The full icon library lives on the Icons page of the Core file; the set shipped with the code packages is documented on this site.
FAQs
I can't open the Figma files. How do I get access?
The libraries live in the ADEK Figma workspace and require a department seat. Email design@adek.gov.ae with your role and the file you need; view access is usually granted the same day.
Can I duplicate the files into my own drafts?
View and comment freely, but do not duplicate the libraries - duplicated copies drift from the published tokens. If you need editable sandboxes for exploration, ask the design team for a branch.
How do the Figma variables relate to this site?
One to one. The variables in the Core file are exported into tokens.css, and every component page here reads those tokens. If a value looks different from Figma, the token file needs a sync - report it to the design team.
How do I request a new component?
Raise it with the design team first. Components are designed in Figma, added to the library, and only then implemented here in React and Angular - that order keeps design and code aligned.
Are the icons in a separate file?
The icon library lives inside the Core file on its own Icons page. The subset shipped in the code packages is documented on the Icons resource page.