Design with UX4G
Access foundations, tokens, and the Figma design kit to create consistent government digital services.
Before you begin
UX4G is built around Indian government service-design guidelines and best practices. Before you start designing, make sure you're familiar with these — they inform every decision in the system.
Are you familiar with government UX guidelines?
The UX4G website has resources to get you up to speed — including the UX4G Handbook and case studies from real government service implementations across ministries and state portals.
Explore resourcesGet the Figma file
The UX4G Design System file is published on Figma Community. It includes all components, patterns, design tokens, and documentation.
- 1
Find the file
Search for “UX4G Design System” on Figma Community, or use the direct link below.
Open UX4G on Figma Community - 2
Duplicate to your drafts
Click Duplicate to your drafts — Figma creates a local copy in your drafts.
The file opens as a draft — don't work from drafts directly. - 3
Move to your project
Move the duplicated file from your drafts into your team project so your team has access and changes are tracked.
How to moveRight-click file in draftsMove to ProjectSelect your project
Set up your file
Once the file is in your project, publish the library so your team can use UX4G components across their design files.
- 1
Publish the library
From inside the UX4G design file you just moved:
PathOpen the fileAssets panelBook iconPublish library - 2
Enable in your design files
In any design file where you want to use UX4G components:
PathAssetsLibrariesEnable UX4G Design System
Customise with Themecraft
UX4G ships with a default government brand. If your service has its own brand guidelines, use the UX4G Theme Craft Figma plugin to customise the token values without touching the components themselves.
What you can customise
Primary colour
Used across all components wherever the brand colour appears — buttons, active states, links, progress indicators, and focus rings.
Secondary colour
Available as a token for your design workflows and mockups. Not used by any UX4G component directly.
Tertiary colour
Same as secondary — available for your design work, not applied to components.
Typography
Font families and weights mapped to the type-scale tokens used throughout the system.
Heads up about secondary and tertiary colours
Secondary and tertiary colours will not affect any components after customisation. UX4G components only use the primary brand colour. These tokens are provided for your design workflow — use them in mockups and layouts where needed.
After customising
Open the Variables panel in Figma (right sidebar → Local variables) and review all token values to make sure nothing is missing or incorrect before you start designing.
Start designing
With your file set up and tokens customised, you're ready to design. A few things to keep in mind as you work:
Follow component and pattern guidelines
Every component and pattern on the UX4G site has documented states, edge cases, and usage rules. Check these before designing with any component.
Check the Figma file documentation
The design-system Figma file includes per-component documentation. Read the notes on any component you use — they may include government-specific constraints not obvious from the visual alone.
Design for real constraints
UX4G components are built for Indian government service contexts — low-literacy users, VLE kiosks, 2G networks, and 22 scheduled languages. Design with these in mind, not just the happy path.
Icons
UX4G uses Material Design Icons as its default icon library, sized at 24px to match component slots.
Replacing icons with your own library
If your project uses a different icon library and it's published in your team project, you can swap icons using Figma's instance-swap feature.
Select icon instanceRight sidebar · InstanceSwap to equivalent in your library