General

icon picker
Import Figma File

Last edited 31 days ago by MyCondy
info

This functionality is only available in PRO version

more info about PRO version find
This NEW feature is unique. Thanks to Microsoft DevOps pipeline you can export your Figma file to JSON via Figma REST API. Means, that you can make your design system in Figma file, export it via DevOps pipeline to your GIT, and import it to any Figma account through the DesignKit 2.5.
Let me show you the steps:
Firstly, you need to create your agent to your notebook/desktop.
Screenshot 2024-07-13 at 19.41.07.png
2. Secondly, you need to create GIT repository
Screenshot 2024-07-13 at 19.42.29.png
It does not matter, how your output JSON file is named. I am using "output.json".
3. Thirdly, create your pipeline in DevOps with a particular Figma page ID.
Screenshot 2024-07-13 at 19.45.30.png
I have saved my concrete Figma page ID under a variables. My page contains canvas components, but it is up to you, what kind of components you will have saved.
Why is the features awesome? If your team uses Figma daily in your company, it is a big chance that somebody could break your design up. Another situation could be that somebody loose a Figma account, where your design was saved.
If you backup your design system via DevOps pipeline to a JSON file on your GIT, you will be able to return to any previous version and import it via DesignKit 2.5 under every user account.
Imported Figma file is able to recognise if your original file includes component properties, variants, or located under Frame.
Or you can use feature.

Example of supported Components

Option 1 - Component(s) under Page node
Screenshot 2024-08-07 at 12.02.05.png
Option 2 - Component(s) under Frame node
Screenshot 2024-08-07 at 12.02.53.png
Option 3 - Component(s) with properties
Screenshot 2024-08-07 at 12.04.27.png
Option 4 - Component(s) with Nested instance(s)
Screenshot 2024-08-07 at 12.07.56.png

Demo



Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.