Agriculture Design System
Design System for the Export Service

Using Figma

How to access the AgDS design files.

Figma is an interface design tool that allows you to create, test, and iterate on your designs collaboratively. It is used by the Design System team to create and maintain the AgDS, and is the tool of choice for designing and prototyping applications for the Export Service.

A Figma account will be created for you as part of your onboading process with the Department. It will match your agriculture email address. This account will be added to our DAFF Figma organisation, which will give you access to the AgDS library and Design file.

For assistance with Figma accounts, please contact the Research Operations team.

Get started

To start using the AgDS Design System in Figma, you will need to enable the AgDS Figma Component Library in your team’s project file. This will give you access to all of the components and tokens in AgDS. The component library is available in any Figma file you create in the DAFF Figma organisation. Simply select the latest version and activate it to enable all current components in any file.

Once the library is enabled, you can copy the compositions in the Gallery and Templates pages of the AgDS Design file, and compose them to create interfaces for your product.

Alternatively, you can drag and drop components straight from the published library in the assets panel into your project file.

Our components are built using the same properties as the React components, so developers can use the Figma components as a reference when building React applications.

Figma properties panel

About the Figma files

The AgDS Figma File contains all of the components, colours, icons, and font-styles needed to build applications for the Export Service. It also contains a gallery of examples of common components variants, and general design guidance for using the components. This file is also where the AgDS Figma Component Library is published from.

The AgDS Component development and testing file is the Design System Team’s working file. All new components, bug fixes and patterns are developed here. Please get in touch if you would like to contribute.