Divkit Figma Plugin
DivKit Figma Plugin

DivKit Figma Plugin

The DivKit Figma plugin is a tool that enables designers and developers to get the JSON code of their application in just a few clicks.
How it works
1
Fill out the form and get an email with the plugin
2
Design your application in Figma
3
Get a JSON file with your UI
1
Fill out the form and get an email with the plugin
2
Design your application in Figma
3
Get a JSON file with your UI

Plugin request form

From app design to complete UI code in just a few clicks
Get Plugin
Plugin installation
  1. Open the Figma desktop app
  2. Open the account menu in the top-right corner.
  3. Select Plugins to open your plugin management modal.
  4. Under In Development, click .
    • Select New Pluginto create a plugin using a plugin template
    • Select Import new plugin from manifest if you already have your source code created on your computer.

  5. Follow the prompts provided to create your widget.
  6. Once you've created your plugin, you'll find it listed under the In Development section of your plugin management modal.

Once you have the Development tab available in the Plugins modal, you can click on  in the top right corner to create a new plugin. Click  next to a plugin to Publish or select Reveal in Finder to view plugin code.
Working with the plugin
To get started with the plugin, choose a node (frame) with child objects (children) in the layout.
You can mark other elements as images in the Mark as image section.
When you click «Generate», DivJson will be generated and a preview section will appear. You can open DivJson in the playground.
By default, previously uploaded images are saved in the plugin. To generate and upload images again, set the «Re-upload images» flag. Images are stored on Figma servers for the internal version and in internal s3 for the external version for 30 days.
Previously generated DivJsons are saved in the plugin. You can switch between them by selecting elements in the layout.
For the plugin to generate DivJson with the palette, open the file with the style library and save the styles to the plugin on the settings screen. By default, styles for light and dark themes have the [Light] or [Dark] prefix, respectively.
To get started with the plugin, choose a node (frame) with child objects (children) in the layout.
You can mark other elements as images in the Mark as image section.
When you click «Generate», DivJson will be generated and a preview section will appear. You can open DivJson in the playground.
By default, previously uploaded images are saved in the plugin. To generate and upload images again, set the «Re-upload images» flag. Images are stored on Figma servers for the internal version and in internal s3 for the external version for 30 days.
Previously generated DivJsons are saved in the plugin. You can switch between them by selecting elements in the layout.
For the plugin to generate DivJson with the palette, open the file with the style library and save the styles to the plugin on the settings screen. By default, styles for light and dark themes have the [Light] or [Dark] prefix, respectively.

Layout design rules

Element layout
For an adaptive layout, you have to explicitly set the element size to Fill if you want it to stretch, Hug to resize according to its contents, and Fixed to stay a specific size
We recommend setting the margins between elements using the auto-layout parameters instead of using artificial empty transparent blocks in the layout
Supported node types
Vector and image nodes (converted to PNG)
Frame nodes (autolayout and non-autolayout)
Text nodes
Component nodes, component instances
Group nodes
DivKit limitations
Spacing mode with the Space between value isn’t supported
Gradients of the Angular and Diamond types aren’t supported
Shapes, such as Ellipse and Polygon, aren’t supported
Thu Jun 22 2023 18:45:13 GMT+0300 (Moscow Standard Time)