The Australian Government coat of Arms

Communities of practice

Communities of practice

Design library

Hey everyone we have sketch files available for the design system. Feel free to check them out:

You can get the sf pro display system font here:
https://developer.apple.com/fonts/

It is also on sketch cloud here:
https://sketch.cloud/s/edgZz

4 Likes

His all,

I was just wondering if anyone knows of an Axure widget library of Design System components available anywhere, and if not, would that be a useful thing for anyone?

Hi @stephenwho, currently we don’t have an axure port of the design system components.

Having a quick google you may be able to convert the above sketch file into a usable axure file, using this tool.

Realy nice work!

Can the document be placed also on Sketch Cloud?
It has value even for people who don’t have Sketch app.

That is a great idea. I don’t have the latest version of sketch right now. I’ll see what I can do :+1:

Here is a link, I also added it to the first comment. Let me know if you can not use it or have any problems!

https://sketch.cloud/s/edgZz

Working fine.
Only one problem spotted about overflowing text content. Most obvious on the examples at menu names.

Same happen for me, but I have not yet installed the provided font.

Yeah I have noticed these this morning when I uploaded. They look okay locally to me. I will have to have a look into fixing that up at a later date, I have put a link to the font family in the first comment as well.

https://developer.apple.com/fonts/

Hi @stephenwho, we’re actually working on DTA system components for Axure currently. Whilst its in the early stages, I’m happy to pass on what we’ve completed.

1 Like

Great. Would like to see what you have.

I’m working on an Axure library for our Pena-Based applications and it would be good to be able to have something similar for feeding I to our Intranet project.

1 Like

Hey @alex.page!

Curious to see whether there have been any updates to the Sketch files for the Design System. Seems as though the latest update was September last year — but I think there have been a number of updates to the actual Design System since?

Also I was wondering if you were using Abstract for this project — I would be happy to be a contributor if that were the case. We’re currently building out our own design system and there’d be a lot of transferrable knowledge to make the Sketch file work harder.

Cheers,
Rich

1 Like

Hey @richardsison,

Thanks for bringing this up!
Yes there has been many updates to the design system since then. I’d say very few (if any) were visual updates that would be reflected in the sketch file. I’ll investigate any potential changes we need to make and load an updated sketch file if need be!

I’m not a designer or anything but I have seen a demo of abstract. I agree thought it’s definitely worth looking into and will help us version control our sketch files and make things easier for the community/contributors. We are also currently looking using our react components to generate and version control our sketch files. Watch this space!

Hey @sukhraj.ghuman! Thanks for getting back to me.

A new version would be great to see. I’m mainly curious to see if all of the components from the Design System are available in the Sketch file.

I can confirm all of the components are in the sketch file :slight_smile:

Hey @sukhraj.ghuman, don’t suppose there’s any movement on whether files may be version-controlled in Abstract? It’d be a faster solution to implement and possibly a safer approach overall. My concern with anything “generated” is that even if we get it to work, it relies too heavily on Sketch not making any drastic changes. Would this approach make it so designers wouldn’t be able to contribute to the Sketch files?

Cheers,
Richard

Hey @richardsison We had a demo of another software that generates sketch files based off react components but it’s probably not ready for production as of yet. I’d be in favour of using abstract for sure. We are an extremely small team right now so we haven’t had the chance to get around to it. However this is in our roadmap and we do see the value in it. You can also look at what we are working on in our current and upcoming sprints in our project board.

1 Like

@sukhraj.ghuman just wondering if there is any chance of creating a Framer X library of the DTA design system components? This would be extremely helpful for designers using the DTA DS…

1 Like

HI @laurenburley! Welcome to the community!

A quick read through some of the material around Framer X API suggests that this could be technically possible. The Design System team doesn’t work with Framer X directly, but we’d be interested to hear about:

  1. anyone’s experience with importing the React components from the Design System into Framer X, and
  2. how widely Framer X may be used by our design audience…

Suggested further reading:

Hey @gordon.grace

Ive actually just found this and have managed to get a component in, but getting react errors.

Adding Libraries

What’s exceptional about Framer is that it’s built on top of React, which means that you can use thousands of community-made libraries.

To install libraries to your Framer project, go to File > Show Project Folder . This will open the folder in Finder. From there, switch to the columns mode and find the parent folder called container .

You can drag and drop the container folder to the [VSCode] icon in your dock. Inside VScode, open the Integrated Terminal by pressing on Ctrl + `. In the terminal, type this command and press Enter . This can also be done inside your Terminal .

That sounds like some encouraging progress, @laurenburley.

If you have a walkthrough to share, feel free to post it here.

We try to provide detailed onboarding steps for the common tools used by our users - it’s possible that we could leverage your work to supplement “Getting Started” tutorials like: https://designsystem.gov.au/get-started/design-assets/