Figma to Website
Best Practices
To get the best results during export and import, follow these guidelines when working with Figma:
-
About Frame
- The smallest unit of Figma elements when imported into Daruma is the Frame.
- If there is no Frame at the top level during export, Daruma will automatically nest a Frame around the top-level elements.
- Although Daruma can convert Section into Frame, it is recommended to use Frame for top-level nodes to maintain clarity and organization after the page is exported.
- Among multiple Frames exported, the first Frame will be set to the default display state.
-
About Component
- Daruma supports the export of Figma components as Symbols, allowing each instance of a Figma component to be exported as a Symbol Instance.
- Daruma supports component variants, allowing you to explore different design states.
-
About Layout & Constraint
- Daruma supports the Figma Auto-layout feature. It is recommended to use Auto-layout only on layers that require it to avoid issues that may arise from complex hierarchy relationships.
- Daruma supports the Figma Constraint feature.
-
It is recommended to use descriptive and unique layer names when exporting to avoid duplication. This practice helps maintain a clear layer structure and facilitates a better export outcome.
-
If custom fonts are used in the design within Figma, these fonts need to be added as assets to Daruma. This ensures that the fonts are correctly displayed when previewing and deploying the UI.
To learn how to use Daruma for Figma, please visit the Quick Start.
Exportable Elements and Their Support Status
✅ Supported
⭕️ Partially supported & WIP
❌ Currently not supported
| Exportable Elements | Explanation | Status | ||
|---|---|---|---|---|
| Layers | Frame | Figma's unique framework type is used to store design elements, which may be interpreted as Frame in Daruma. | ✅ | |
| Section | Figma's unique content management and categorization area, which may be interpreted as Frame in Daruma. | ✅ | ||
| Group | Group refers to the act of combining multiple layers or objects together to form a single entity. | ✅ | ||
| Mask | • Outline mask✅ • Alpha mask✅ • Luminosity mask❌ | Mask is a mechanism used to control the visibility of layers or objects. By combining a layer or object with a mask layer, you can control the display or hiding of underlying content based on the shape and transparency of the mask. | ⭕️ | |
| Rotation | Rotation refers to the operation of rotating a layer or object around a certain center point by a certain angle. | ✅ | ||
| Overflow | • Clip • Visible | Overflow refers to the way content is handled when a container cannot fully display its contents. The overflow property can be used to control whether scrollbars are displayed or content is clipped when it overflows. | ✅ | |
| Boolean | • Union • Subtract • Intersect • Exclude | Boolean is commonly used to refer to boolean operations between graphic objects. | ✅ | |
| Components | • Main component • Component instance | Components refer to reusable visual elements or modules. | ✅ | |
| Vector layer | Vector layer refers to a layer based on vector graphics. | ✅ | ||
| Opacity | Opacity refers to the degree of transparency of a layer or object. | ✅ | ||
| Blend mode | • Pass through • Normal • Darken • Multiply • Color burn • Lighten • Screen • Color dodge • Overlay • Soft light • Hard light • Difference • Exclusion • Hue • Saturation • Color • Luminosity • Plus darker❌ • Plus lighter❌ | Blend mode refers to the algorithm for blending or combining colors between layers. | ✅ | |
| Radius | The term "Radius" refers to the value of the radius of a rounded corner. | ✅ | ||
| Flip | Flip refers to the operation of mirroring a layer or object horizontally or vertically. | ✅ | ||
| Shapes | Basic shape and path shape | • Rectangle • Line • Ellipse • Polygon • Star • Vector path • Arrow❌ | The basic shape refers to pre-defined simple geometric figures, such as rectangles, circles, ellipses, etc. Path shape is a custom shape composed of a series of straight line segments and curve segments. | ✅ |
| Open path & Close path | An open path refers to a state where the starting and ending points of a path are not connected. A closed path refers to a state where the starting and ending points of a path are connected by line segments or curves, forming a closed shape. | ✅ | ||
| Compound Path | A compound path is a single shape formed by combining multiple path shapes. | ✅ | ||
| Bézier curve | Bézier curve is a mathematical curve defined by a starting point, an endpoint, and control points to determine its shape. | ✅ | ||
| Texts | Text Layer | Text layers are used to add and edit text content. | ✅ | |
| Basic Metadata and styles | • Basic styling (font, size, weight, color)✅ • Text decoration lines✅ • Text case transformation❌ | It refers to the basic information and style attributes applied to the text layer. | ⭕️ | |
| Paragraph Property | • Line height(line-spacing)✅ • Paragraph spacing❌ | The paragraph attribute is used to control the layout and formatting of paragraphs in a text layer. | ⭕️ | |
| Text Layer Resize | • Fixed • Auto width • Auto height | Text layer resizing refers to the operation of changing the size of a text box to fit the content of the text. | ✅ | |
| Open Type features | • Variable font weight✅ • Variable font width✅ • misc❌ | OpenType is a font file format that supports many advanced font features. | ✅ | |
| Emoji | Emoticons are graphic symbols used to represent emotions, objects, or concepts. | ✅ | ||
| List style | The list style is used to control the appearance and layout of lists in a text layer. | ❌ | ||
| Images | Image fill type | • Fill • Fit • Crop • Tile | Allows users to fill a shape or area with a repeating pattern instead of a solid color or gradient. | ✅ |
| Image filters | • Exposure✅ • Contrast✅ • Saturation✅ • Temperature✅ • Tint⭕️ • Highlights⭕️ • Shadows⭕️ | Image filters are tools that apply special effects or adjustments to images. | ⭕️ | |
| Layouts | Auto layout | Auto layout is a design feature that automates the arrangement and resizing of elements within a user interface, ensuring that they adapt and respond to changes in content or screen size. | ✅ | |
| Constraints | • Horizontal • Vertical | Constraints are used to make the design more flexible and adaptable across various screen sizes. These have two dimensions - vertical and horizontal. Both of these in turn have different options such as - left, right, bottom, center, scale and top & bottom. | ✅ | |
| Styles | Fill | • Color✅ • Image✅ • Linear gradient✅ • Radial gradient✅ • Angular gradient✅ • Diamond gradient✅ • Pattern✅ • Gif✅ • Video❌ | Filling refers to the process of filling the interior area of a shape or path with color, gradient, texture, and other methods. | ⭕️ |
| Closed path fill | It refers to the ability to fill colors within individual closed paths. | ✅ | ||
| Stroke | • Color✅ • Fill✅ • Position✅ • Stroke width✅ • Mixed width for rectangle❌ • Stroke style✅ • Join type✅ • Marker type❌ • Miter angle✅ | Stroking refers to applying a line on the boundary of a shape or path, used to define the outline of the shape or path. | ⭕️ | |
| Shadow | • Drop shadow • Inner shadow • Shadow blur • Shadow spread | Shadow is a visual effect created behind graphic elements or text to simulate the shadow effect under light illumination. | ✅ | |
| Blur | • Layer blur • Background blur | Blur is an effect that reduces the sharpness and details of an image or graphic element, making it appear blurry or softened. | ✅ |