LogoLogo
  • Release Notes
  • Downloads
  • Frequently Asked Questions
  • Developers
    • Introduction
    • Color Variables
    • Font Family
    • Vanilla JS
    • React
    • Vue
    • Angular
    • RTL Support
    • Light Mode/Dark Mode
  • Foundations
    • Typography
    • Colors
    • Icons & Visuals
    • Images
    • Layout & Breakpoints
    • Utils
    • Usability Guidelines
  • Components
    • Accordions
      • Accordion
      • Accordion Groups
    • Alert
    • Attach File
    • Avatar
    • Banner Cards
    • Breadcrumbs
    • Buttons
      • Button
      • Icon Button
      • Link Button
      • Social Media Buttons
      • Split Button
    • Checkbox
      • Checkbox Input
      • Checkbox Groups
    • Chips
    • Credit Card
    • Credit Card Input Field
    • Header
    • Interactive Banner
    • Number Field
    • Menu
    • Pagination
    • Phone Number Field
    • Progress Indicators
      • Expectation Levels
      • Progress Bar
      • Progress Circle
      • Progress Semi-Circle
    • Quick Select Field
    • Radio Buttons
      • Radio Input
      • Radio Buttons Groups
    • Search Input Field
    • Segmentation
      • Segmented Controls
      • Segmented Tabs
    • Select Input Field
    • Slider
    • Steps
      • Stepper
      • Step Indicator
    • Sticky Bar
    • Tabs
    • Text Area Field
    • Text Field
    • Toggle Switch
    • Tooltip
Powered by GitBook
On this page
  • HTML Templates
  • Figma UI Library
  • 1. Download Figma Library
  • 2. Add Library
  • 3. Updating the Library
  • DubaiAI
  • Happiness Meter
  • Web:
  • Mobile App:
  • Tablet - Service Center:
Export as PDF

Downloads

PreviousRelease NotesNextFrequently Asked Questions

Last updated 12 days ago

HTML Templates

Figma UI Library

Note: Figma does not currently support automatic library updates to external teams.

1. Download Figma Library

For access to the Figma file, please contact us at

2. Add Library

After downloading the library, you must then upload the .fig file into your team's projects. To do this, open Figma (in-app or browser) and drag the file into the Figma window. Alternatively, you may click on the "Import File" button and select the correct file from your local directory. Once imported, you should within your team.

3. Updating the Library

Due to the above-noted limitation of Figma, updates to the library must be manually accomplished. Please routinely check this page for future updates to the UI Library. Additionally, we will notify you of any updates to the library.


DubaiAI

For DubaiAI design guidelines and the logo, please refer back to the Figma file.

URLs for DubaiAI Chatbot Landing Page:

Entities can use the following URLs to access the DubaiAI chatbot landing page. Each entity should append their unique code at the end of the URL to direct users to their specific landing pages:

  • English (EN):

  • Arabic (AR):

For example, for MBRHE, the URLs would be:

  • English (EN):

  • Arabic (AR):

Entities should replace "[entity code]" in the URLs with their specific identifier. If you don't know what your identifier is, please refer back to the Excel sheet attached to ensure users are directed to the appropriate landing page within the DubaiAI chatbot platform.


Happiness Meter

Web:

Mobile App:

Tablet - Service Center:

To update your library, repeat steps 1 & 2 with the latest version of the library. Once the updated version is added to your team, use the in Figma, which will allow you to replace the old library with the latest one without disconnecting any instances of the library you may have used in your designs.

[entity code]

[entity code]

Happiness Meter Web Widget Integration and Development : A document that outlines and explains the required development activities for departments to integrate with the Happiness Meter on the web.

Happiness Meter .Net Sample Web : Example implementation of the happiness widget on the web using .Net language.

Happiness Meter Java Sample Web : Example implementation of the happiness widget on the web using Java language.

Happiness Web Test Cases : A list of test cases that departments need to execute and share with Digital Dubai Government Establishment to certify the web implementation.

Happiness Meter Inquiry Service Specification : A document describing the “Happiness Index Vote Inquiry” Web Service specification, designed to enable departments to inquire about the votes.

Happiness Meter Mobile App Integration and Development : A document that describes and explains the necessary development activities for departments to integrate with the Happiness Meter on mobile apps.

Happiness Meter iOS Sample App : Example iOS application of happiness widget on Mobile in iOS language.

Happiness Meter Android Sample App : Sample Android application of happiness widget on mobile in Android language.

Happiness Mobile Test Cases : A list of test cases that departments need to execute and share with Digital Dubai Government to certify the implementation on mobile apps.

New Service Centers Request Form : A form to be filled out with the service center details where the Happiness Meter will be implemented.

Happiness Meter iOS Tablet Sample App : Example iOS application of the happiness widget on tablets using iOS language.

Happiness Meter Android Tablet Sample App : Sample Android application of happiness widget on Tablets in Android language.

swap libraries feature
https://chat.dubai.ae/?lang=en-US&mode=modal&source=
https://chat.dubai.ae/?lang=ar-SA&mode=modal&source=
https://chat.dubai.ae/?lang=en-US&mode=modal&source=mbrhe
https://chat.dubai.ae/?lang=ar-SA&mode=modal&source=mbrhe
Guide
Guide
Guide
Guide
Guide
Guide
Guide
Guide
Guide
Guide
Guide
Guide
saleh.lootah@digitaldubai.ae
publish the library
2MB
templates.zip
archive
Common page templates
11MB
DDA-SampleSite.zip
archive
Sample Website Template
11KB
Entities_names_codes.xlsx