From 547affc8c11cc95e997aa5109584889798a08556 Mon Sep 17 00:00:00 2001 From: Sergey Mikolaitis Date: Fri, 27 Mar 2026 00:03:17 +0300 Subject: [PATCH] update free format, re-generate llms.txt --- docs/creating_private_cloud.md | 180 ------ docs/free-format.md | 1007 +++++++++++++++++++++----------- docs/llms-full.txt | 430 ++++++++++---- docs/llms.txt | 4 +- docs/raw/components.md | 206 ++++--- docs/raw/export.md | 2 +- docs/raw/faq.md | 44 ++ docs/raw/free-format.md | 989 ++++++++++++++++++++----------- docs/raw/layers.md | 26 +- docs/raw/layerstyles.md | 54 +- docs/raw/mcp.md | 97 +++ docs/raw/release-notes.md | 233 ++++++-- docs/raw/rn_before_v10.md | 78 +-- docs/raw/tools.md | 2 +- docs/rn_private_cloud.md | 35 -- scripts/Program.cs | 4 +- 16 files changed, 2153 insertions(+), 1238 deletions(-) delete mode 100644 docs/creating_private_cloud.md create mode 100644 docs/raw/mcp.md delete mode 100644 docs/rn_private_cloud.md diff --git a/docs/creating_private_cloud.md b/docs/creating_private_cloud.md deleted file mode 100644 index fc908df..0000000 --- a/docs/creating_private_cloud.md +++ /dev/null @@ -1,180 +0,0 @@ ---- -# Page settings -layout: default -keywords: -comments: false - -# Hero section -title: Creating a private Lunacy cloud -description: For clients with internet connection and local data storage -icon: 'document-body' - -# Micro navigation -micro_nav: false - -# Page navigation -page_nav: - next: - content: - url: - prev: - content: - url: ---- - -## Prerequisites - -You should have Docker installed on your system. You can download it [here](https://docs.docker.com/get-docker/). - -## System requirements - -- 2-4 CPU cores -- 2-8 GB of RAM (based on users count) -- 50-100GB of disk space if connected to cloud storage, or 1TB+ if all data is stored on a single server - -## **Installation** - -**1. Create a Docker compose file** - -If you’re going to store your design data locally, create a file named compose.yaml with the following content: - -```yaml - services: - db: - image: postgres:17 - restart: always - environment: - POSTGRES_USER: postgres - POSTGRES_PASSWORD: 123 - POSTGRES_PORT: 5432 - volumes: - - data:/var/lib/postgresql/data - networks: - - lunacy-net - app: - image: lunacyd - environment: - FORCE_HTTPS: false - ports: - - "5555:80" - volumes: - - bucket:/root/bucket - - changes:/root/wwwroot/DocumentsChanges - networks: - - lunacy-net - depends_on: - - db - restart: always - volumes: - data: - bucket: - changes: - networks: - lunacy-net: {} -``` -If you prefer to store data in AWS S3 instead of locally, use the following compose.yaml file: - -```yaml - services: - db: - image: postgres:17 - restart: always - environment: - POSTGRES_USER: postgres - POSTGRES_PASSWORD: 123 - POSTGRES_PORT: 5432 - volumes: - - data:/var/lib/postgresql/data - networks: - - lunacy-net - app: - image: lunacyd - environment: - FORCE_HTTPS: false - S3_ENDPOINT: "" - S3_APPKEY: "" - S3_KEYID: "" - ports: - - "5555:80" - volumes: - - bucket:/root/bucket - - changes:/root/wwwroot/DocumentsChanges - networks: - - lunacy-net - depends_on: - - db - restart: always - volumes: - data: - bucket: - changes: - networks: - lunacy-net: {} -``` -If you will use a domain name for your server with enabled TLS - set `FORCE_HTTPS` to true. - -**2. Deploy Lunacy cloud** - -In the compose.yaml file directory, run the following command: - -``` - docker compose up -``` -The server will start and register with the licensing server. - -**3. Contact Icons8** - -Contact us at sales@icons8.com after the server is up and running, and we will provide you with a license. - -## **Initial server setup** - -**1. Access the server** - -Navigate to `http://localhost:5555/` in your web browser. - -**2. Register an Administrator account** - -Create an administrator account. This account is separate from the Lunacy user accounts and is used only for administrative purposes. - -**3. Create Lunacy users** - -Go to the **Users** tab and create user accounts for Lunacy. -You can now connect to the dedicated server from the Lunacy app. - -**4. Configure firewall** - -Allow connection to the Lunacy License Server from your intranet `https://lu.icons8.com` `116.203.33.165:443`. - -
-

Note: The Lunacy dedicated server must be connected to the License server for several purposes:

-
    -
  1. Check License information
    2. -
  2. Check Cloud Server updates
    3. -
  3. Check Lunacy updates
    4. -
  4. Ensure 24/7 in-app support
    5. -
-

All data is encrypted and transmitted through a single endpoint, using a single data stream/connection. Updates are downloaded and applied only after the administrator's approval.

-
- - -## **Connecting Lunacy to the server** - -**1. Open Lunacy** - -**2. Log Out** - -If you are currently logged in, log out of your Icons8 account. - -**3. Connect to the server** - -Navigate to **Home** > **Log in** > **Dedicated** and enter the following details: - -- `http:\\[your_ip_address]:5555` OR `https://your_domain.com/` (if you’ve configured a domain name) -- username configured in the previous step -- password - -Click **Connect**. Lunacy will connect to the private cloud. - - - - diff --git a/docs/free-format.md b/docs/free-format.md index d46a742..0bf623a 100644 --- a/docs/free-format.md +++ b/docs/free-format.md @@ -1,25 +1,4 @@ ---- -# Page settings -layout: default -keywords: -comments: false - -# Hero section -title: Free format -description: Details of the .free format for developers -icon: 'file' - -# Micro navigation -micro_nav: false - -# Page navigation -page_nav: - prev: - content: Release history - url: '/release-notes' - - ---- +# Free Format FREE is an open source format for vector graphic files designed to be compact, human-readable, back-compatible, and optimized for multithreaded parsing. @@ -118,7 +97,7 @@ We didn't rush the development and release of this format. We worked on it for a ## Key differences from the Sketch format * All fields have short, understandable names. For example, ``"hidden": true``. -* The object type field is given a concise name, ``"_t,"`` and is only specified where necessary, which is in just three places: layer type, grid layout type, and layout type. +* The object type field is given a concise name, ``"_t,"`` and is only specified where necessary, which is in just three places: layer type, layout guide type, and layout type. * If a value is default, it is simply omitted from the file, even for complex objects. * All GUIDs are written as ShortGUIDs, which are the base64 serialization of the byte data of the GUID. They retain all the GUID data but occupy 39% less space: @@ -300,15 +279,15 @@ Assume that we have a red rectangle on the canvas. In Sketch, it would result in } ``` -In Lunacy's FREE format the same will take only **110 characters**. A 15-fold difference. +In Lunacy's FREE format the same will take only **91 characters**. A 18-fold difference. ```json { "_t": "RECT", "id": "IqTyX1bJek-eScKV2wCk2Q", - "transform": [1887,-751], + "pos": [1887,-751], "size": [431,428], - "fills": [{"color":"F00"}] + "fill": "F00" } ``` ## Plans @@ -324,20 +303,130 @@ Free format is NULL-free, NaN-free and Infinity-free - if any of this values are * byte - 8-bit unsigned integer * bool - Boolean (true or false) value * string - text as a sequence of UTF-8 code units -* GUID - globally unique identifier, with base64 encryption +* GUID - globally unique identifier, with base64 encryption, Examples: `R1o2w3_4D5i6n7g8_000AA`, `N1a2m3-4C5o6n7t8_910AA`, `reY4TrsLHUeFk-E0CtyS5A`. ## Layers +### Layer +Base class for any layer on a canvas. + +* _t: [string](#string) = `COMPONENT` - object type. Required to be first. +* Id: [GUID](#GUID) - unique layer identifier. +* Name: [string](#string) - defines layer name. +* BoolOp: [BoolOp](#BoolOp) = `Union` - defines the boolean operation applied to the layer. +* Locked: [bool](#bool) = `false` - defines whether the layer is locked for editing. +* Hidden: [bool](#bool) = `false` - defines whether the layer is hidden. +* IsTemplate: [bool](#bool) = `false` - defines whether tha layer is marked as a template. +* Expand: [bool](#bool) = `false` - defines whether the layer is expanded in Layer List. +* Trim: [bool](#bool) = `false` - when enabled, trims empty pixels in exported images. +* Export: [ExportOption[]](#ExportOption) - export options of the layer. +* Constraints: [string](#string) = `LTWH` - defines constraint settings of the layer. String with chars where every char means a flag: L - left, T - top, R - right, B - bottom, W - fix width, H - fix height. +* Transform: [Matrix](#Matrix) = `[1,0,0,0,1,0]` - position, rotation, skew and flips of an object, stored in a single 3x2 matrix, as 6 floats array. +* Pos: [Point](#Point) = `[0,0]` - defines position. Overrides Transform field. +* Size: [Size](#Size) = `[100,100]` - defines the layer size. +* Frame: [Rect](#Rect) = `[0,0,100,100]` - defines position and size with one field. Overrides Transform, Pos and Size fields. +* LockAspect: [bool](#bool) = `false` - defines whether the layer's aspect ratio should remain unchanged upon resizing. +* Mask: [bool](#bool) = `false` - defines whether the layer is used as a mask. +* BreakMask: [bool](#bool) = `false` - defines if the layer is set to ignore the mask. +* MaskType: [MaskType](#MaskType) = `Vector` - type of the Mask - Vector, Alpha or Luminance. +* KeepScroll: [bool](#bool) = `false` - if the *Keep scroll position* option is enabled (prototyping). +* ScrollBehavior: [FlowScrollBehavior](#FlowScrollBehavior) = `Scroll` - defines scroll behavior (prototyping). +* ScrollOverflow: [FlowScrollOverflow](#FlowScrollOverflow) = `NoScrolling` - defines scroll overflow (prototyping). +* Flows: [Flow[]](#Flow) - defines flows (prototyping). +* MinWidth: [float](#float) = `0` - defines the minimum layer width (auto layout). +* MinHeight: [float](#float) = `0` - defines the minimum layer height (auto layout). +* MaxWidth: [float](#float) = `0` - defines the maximum layer width (auto layout). +* MaxHeight: [float](#float) = `0` - defines the maximum layer height (auto layout). +* StretchWidth: [bool](#bool) = `false` - determines if the layer should stretch width (auto layout). +* StretchHeight: [bool](#bool) = `false` - determines whether a layer should stretch height (auto layout). +* AbsolutePos: [bool](#bool) = `false` - enables absolute position for the layer (auto layout). +* Custom: [[string,string]](#[string,string) - key/Value map for custom properties of a layer. Similar to UserInfo is Sketch and PluginData in Figma. +* Themes: [ThemeSelection[]](#ThemeSelection) - variable themes selections. +* Binds: [Bind[]](#Bind) - binds of variables to target fields like: fontSize, cornerRadius, thickness, etc. +* FillsId: [GUID](#GUID) - color style id for fills. +* BordersId: [GUID](#GUID) - color style id for borders. +* EffectsId: [GUID](#GUID) - effect style id. +* Opacity: [float](#float) = `1` - opacity value. +* BlendMode: [BlendMode](#BlendMode) = `Normal` - blend mode. +* Winding: [PathFillType](#PathFillType) = `EvenOdd` - defines the filling options for overlapping paths. +* Fill: [Color](#Color) = `00000000` - if there is a single color fill - use this, otherwise use Fills field. +* Border: [Color](#Color) = `00000000` - if there is a single color border - use this, otherwise use Borders field. +* Fills: [Fill[]](#Fill) - list of fills. +* Borders: [Fill[]](#Fill) - list of borders. +* Thickness: [float](#float) = `0` - defines border thickness. +* CustomThickness: [Thickness](#Thickness) = `[0,0,0,0]` - defines custom border thickness. +* LinePos: [LinePosition](#LinePosition) = `Center` - defines border position. +* LineCap: [LineCap](#LineCap) = `Butt` - defines the shape of line caps. +* LineJoin: [LineJoin](#LineJoin) = `Miter` - defines the appearance of line folds. +* Dash: [float[]](#float) - defines the size of dashes. +* Shadows: [ShadowEffect[]](#ShadowEffect) - list of shadows. +* InnerShadows: [ShadowEffect[]](#ShadowEffect) - list of inner shadows. +* Blur: [BlurEffect](#BlurEffect) - information about blurs. +* ImageFilters: [ImageFilters](#ImageFilters) - filters applied to an image (hue, saturartion, etc.), if any. +* CornerRadius: [float[]](#float) = `float[4]` - sets the corner radius of the frame/instance/component/states/section. +* SmoothCorners: [bool](#bool) = `false` - enables smooth rounded corners like in iOS interfaces. + +
+Lunacy specific + +* PhotoId: [string](#string) - identifier of a photo from the Lunacy gallery. +* IllustrationId: [string](#string) - identifier of an illustraion from the Lunacy gallery. +* IconId: [string](#string) - identifier of an icon from the Lunacy gallery. +* AvatarId: [string](#string) - identifier of a Lunacy-generated avatar. +* Data: [DataInfo](#DataInfo) - information about auto generated texts. +* Upscaled: [bool](#bool) = `false` - if the image has been upscaled in Lunacy. +* BackgroundRemove: [BackgroundRemovalState](#BackgroundRemovalState) = `None` - background removal procedure info. +
+ +### Frame +A frame is a special type of layers that serves as a container for other layers or layer groups. Frames are a must for auto-layout and prototypes. + +Has all properties of [`Layer`](#Layer), plus: + +* _t: [string](#string) = `FRAME` - object type. +* ClipContent: [bool](#bool) = `true` - when enabled, hides the content outside the frame boundaries. +* FlowHome: [bool](#bool) = `false` - sets the frame as a prototype starting point. +* Viewport: [PrototypeViewport](#PrototypeViewport) - defines the area that should be displayed on a prototype, when the frame is resized to ensure scrolling effect. +* ResizesContent: [bool](#bool) = `false` - enables adjusting and resizing the frame content as the frame is resized. +* AutoLayout: [AutoLayout](#AutoLayout) - auto Layout Properties +* Layouts: [LayoutGuideBase[]](#LayoutGuideBase) - grid, Row and Column layouts of the frame. +* GridsId: [GUID](#GUID) - grid Layout style id. +* Rulers: [Rulers](#Rulers) - rulers and guidelines info. +* Layers: [Layer[]](#Layer) - list of layers on the frame. + +### Path +A vector path determines the outline and form of a vector object. A path is made up of points and segments. + +Has all properties of [`Layer`](#Layer), plus: + +* _t: [string](#string) = `PATH` - object type. +* StartMarker: [Arrowhead](#Arrowhead) = `None` - determines the appearance of the tail of an open path drawn with the Line, Arrow, or Pen/Pencil tool. +* EndMarker: [Arrowhead](#Arrowhead) = `None` - determines the appearance of the head of an open path drawn with the Line, Arrow, or Pen/Pencil tool. +* MiterLimit: [float](#float) = `10` - limit on the ratio of the miter length to the stroke-width used to draw a miter joint. When the limit is exceeded, the joint is converted from miter to beveled. +* Edited: [bool](#bool) = `false` - if the shape is edited in the path editor. +* Open: [bool](#bool) = `false` - indicates whether the path is open. +* Points: [Vertex[]](#Vertex) - list of path's points. +* PathData: [string](#string) - optional Field. SVG path data. Overrides Points. Only for LLM and Plugins. + ### Component -A component is a reusable groups of layers. +A component is a reusable frame of layers. Has all properties of [`Frame`](#Frame), plus: * _t: [string](#string) = `COMPONENT` - object type. * ComponentId: [GUID](#GUID) - unique component identifier. -* Predefined: [bool](#bool) = `False` - indicates that the component belongs to the Lunacy default component library (see the Component Tool on the Toolbar) +* Predefined: [bool](#bool) = `false` - indicates that the component belongs to the Lunacy default component library (see the Component Tool on the Toolbar) * ComponentType: [ComponentType](#ComponentType) = `None` - reserved for future use. Will be used for component filters. * FigmaId: [string](#string) - unique Figma Component Id. Used to connect shared libraries and documents imported from figma. +* Properties: [ComponentPropertyBase[]](#ComponentPropertyBase) - component properties. +* States: [StateBind[]](#StateBind) - component states definition values. + +### Line +A line is a shape drawn on the canvas with the Line tool. + +Has all properties of [`Path`](#Path), plus: + +* _t: [string](#string) = `LINE` - object type. ### Oval An oval is a shape drawn on the canvas with the Oval tool. @@ -363,7 +452,14 @@ A rectangle is a shape drawn on the canvas with the Rectangle tool. Has all properties of [`Path`](#Path), plus: * _t: [string](#string) = `RECT` - object type. -* SmoothCorners: [bool](#bool) = `False` - if the smooth corners option is enabled. Works only if the rectangle is not edited. +* SmoothCorners: [bool](#bool) = `false` - if the smooth corners option is enabled. Works only if the rectangle is not edited. + +### Slot +Slot inside component. + +Has all properties of [`Frame`](#Frame), plus: + +* _t: [string](#string) = `SLOT` ### Star A star is a shape drawn on the canvas with the Star tool. @@ -380,6 +476,7 @@ Set of a states of the component. Has all properties of [`Frame`](#Frame), plus: * _t: [string](#string) = `STATES` +* Properties: [ComponentPropertyBase[]](#ComponentPropertyBase) - component properties of states. ### Triangle A triangle is a shape drawn on the canvas with the Triangle tool. @@ -391,176 +488,347 @@ Has all properties of [`Path`](#Path), plus:
Sketch compatibility -* Equilateral: [bool](#bool) = `False` - if the triangle is equilateral. +* Equilateral: [bool](#bool) = `false` - if the triangle is equilateral.
-### Frame -A frame is a special type of layers that serves as a container for other layers or layer groups. Frames are a must for prototypes. +### Connector +Connectors are lines and arrows used for annotations. -Has all properties of [`Styled`](#Styled), plus: +Has all properties of [`Layer`](#Layer), plus: -* _t: [string](#string) = `FRAME` - object type. -* ClipContent: [bool](#bool) = `False` - when enabled, hides the content outside the frame boundaries. -* FlowHome: [bool](#bool) = `False` - sets the frame as a prototype starting point. -* Viewport: [PrototypeViewport](#PrototypeViewport) - defines the area that should be displayed on a prototype, when the frame is resized to ensure scrolling effect. -* ResizesContent: [bool](#bool) = `False` - enables adjusting and resizing the frame content as the frame is resized. -* Layouts: [LayoutContainerBase[]](#LayoutContainerBase) - grid, Row and Column layouts of the frame. -* Rulers: [Rulers](#Rulers) - rulers and guidelines info. -* Layers: [Layer[]](#Layer) - list of layers on the frame. +* _t: [string](#string) = `CONNECTOR` - object type. +* Start: [GUID?](#GUID) - tail Layer Id +* End: [GUID?](#GUID) - head Layer Id +* StartPos: [Point](#Point) = `[0,0]` - normalized position in the tail layer. From 0 to 1. +* EndPos: [Point](#Point) = `[0,0]` - normalized position in the head layer. From 0 to 1. +* StartMarker: [Arrowhead](#Arrowhead) = `None` - determines the appearance of the tail. +* EndMarker: [Arrowhead](#Arrowhead) = `None` - determines the appearance of the head. +* MiterLimit: [float](#float) = `10` - limit on the ratio of the miter length to the stroke-width used to draw a miter joint. When the limit is exceeded, the joint is converted from miter to beveled. ### Group A layer group is two or more layers unified into a single entity that can be manipulated, organized, and treated as a single layer. -Has all properties of [`Styled`](#Styled), plus: +Has all properties of [`Layer`](#Layer), plus: * _t: [string](#string) = `GROUP` - object type. -* SkipSelect: [bool](#bool) = `False` - when enabled, users can select group items without first selecting the group. +* SkipSelect: [bool](#bool) = `false` - when enabled, users can select group items without first selecting the group. * Layers: [Layer[]](#Layer) - list of layers within the group.
Sketch compatibility -* SkipConstraints: [bool](#bool) = `False` - serves for constraints compatibility with Sketch. If the file is imported from the Sketch format, the parameter should be set to false to handle constraints properly. +* SkipConstraints: [bool](#bool) = `false` - serves for constraints compatibility with Sketch. If the file is imported from the Sketch format, the parameter should be set to false to handle constraints properly.
### Instance -An instance is a copy of the main component. With instances, you can reuse the same design element in multiple places in your project while retaining a connection to the main component. +An instance is a linked copy of the component. With instances, you can reuse the same design element in multiple places in your project while retaining a connection to the component. -Has all properties of [`Styled`](#Styled), plus: +Has all properties of [`Layer`](#Layer), plus: * _t: [string](#string) = `INSTANCE` - object type. * Scale: [float](#float) = `0` - scale of the instance. * ComponentId: [GUID](#GUID) - unique component identifier. +* AutoLayout: [AutoLayout](#AutoLayout) - auto Layout Properties * Overrides: [Override[]](#Override) - defines the overrides applied to the instance. -### Path -A vector path determines the outline and form of a vector object. A path is made up of points and segments. - -Has all properties of [`Styled`](#Styled), plus: - -* _t: [string](#string) = `PATH` - object type. -* Edited: [bool](#bool) = `False` - if the shape is edited in the path editor. -* Open: [bool](#bool) = `False` - indicates whether the path is open. -* Points: [Vertex[]](#Vertex) - list of path's points. - ### Section -Root group of layers. Can be a child of a page or another section. -Does not support rotation, flips, effects. +Root group of layers. Can be a child of a page or another section. Does not support rotation, flips, effects. -Has all properties of [`Styled`](#Styled), plus: +Has all properties of [`Layer`](#Layer), plus: * _t: [string](#string) = `SECTION` * Layers: [Layer[]](#Layer) - list of layers within the section. ### Shape -A shape is a rectangle, oval, polygon, triangle, or star drawn with the respective shape tool. You can draw a triangle, rectangle, etc. with the Pen tool, but they won't be treated as shapes. +Group of path's -Has all properties of [`Styled`](#Styled), plus: +Has all properties of [`Layer`](#Layer), plus: * _t: [string](#string) = `SHAPE` - object type. +* StartMarker: [Arrowhead](#Arrowhead) = `None` - determines the appearance of the tail of an open path drawn with the Line, Arrow, or Pen/Pencil tool. +* EndMarker: [Arrowhead](#Arrowhead) = `None` - determines the appearance of the head of an open path drawn with the Line, Arrow, or Pen/Pencil tool. +* MiterLimit: [float](#float) = `10` - limit on the ratio of the miter length to the stroke-width used to draw a miter joint. When the limit is exceeded, the joint is converted from miter to beveled. * Layers: [Layer[]](#Layer) - list of layers.
Sketch compatibility -* SkipConstraints: [bool](#bool) = `False` - serves for constraints compatibility with Sketch. If the file is imported from the Sketch format, the parameter should be set to false to handle constraints properly. +* SkipConstraints: [bool](#bool) = `false` - serves for constraints compatibility with Sketch. If the file is imported from the Sketch format, the parameter should be set to false to handle constraints properly.
-### Text -Text is a block or line of text on the canvas. - -Has all properties of [`Styled`](#Styled), plus: - -* _t: [string](#string) = `TEXT` - object type. -* text: [string](#string) - content of the text layer. -* TextStyle: [TextStyle](#TextStyle) - style applied to the text. -* Inlines: [InlineStyle[]](#InlineStyle) - styling options applied to the text within a text block. -* Behavior: [TextBehavior](#TextBehavior) = `Flexible` - behavior of the text layer size on text value change: flexible, fixed-width, or fixed. -* ClipContent: [bool](#bool) = `True` - valid for files imported from Figma. Defines whether to truncate text content. -* Truncate: [bool](#bool) = `False` - trim text with triple dots in the end if content overlaps fixed layer size bounds. -* MaxLines: [byte](#byte) = `0` - count of lines allowed. If the limit is exceeded, the text will be truncated. -* DrawOnPath: [bool](#bool) = `False` - defines whether text draws on the underlying path. -* Warp: [bool](#bool) = `False` - defines whether text warps when drawn on the underlying path. - ### Slice A slice is a special type of layers used for exporting certaing parts of designs. Has all properties of [`Layer`](#Layer), plus: * _t: [string](#string) = `SLICE` - object type. -* HasBackground: [bool](#bool) = `False` - defines whether the slice includes background. +* HasBackground: [bool](#bool) = `false` - defines whether the slice includes background. * Background: [Color](#Color) = `00000000` - defines the background color. * BackgroundId: [GUID?](#GUID) - unique color variable ID. -### Styled -A styled layer is a layer that has layer styling options. +### Text +Text is a block or line of text on the canvas. Has all properties of [`Layer`](#Layer), plus: -* StyleId: [GUID](#GUID) - unique style identifier. -* MiterLimit: [float](#float) = `10` - limit on the ratio of the miter length to the stroke-width used to draw a miter joint. When the limit is exceeded, the joint is converted from miter to beveled. -* Opacity: [float](#float) = `1` - opacity value. -* BlendMode: [BlendMode](#BlendMode) = `Normal` - blend mode. -* StartMarker: [Arrowhead](#Arrowhead) = `None` - determines the appearance of the tail of an open path drawn with the Line, Arrow, or Pen/Pencil tool. -* EndMarker: [Arrowhead](#Arrowhead) = `None` - determines the appearance of the head of an open path drawn with the Line, Arrow, or Pen/Pencil tool. -* Winding: [PathFillType](#PathFillType) = `EvenOdd` - defines the filling options for overlapping paths. -* Fills: [Fill[]](#Fill) - list of fills. -* Borders: [Border[]](#Border) - list of borders. -* Shadows: [ShadowEffect[]](#ShadowEffect) - list of shadows. -* InnerShadows: [ShadowEffect[]](#ShadowEffect) - list of inner shadows. -* Blur: [BlurEffect](#BlurEffect) - information about blurs. -* BorderOptions: [BorderOptions](#BorderOptions) - information about border options. -* ImageFilters: [ImageFilters](#ImageFilters) - filters applied to an image (hue, saturartion, etc.), if any. -* CornerRadius: [float[]](#float) = `float[4]` - sets the corner radius of the frame/instance/component/states/section. -* SmoothCorners: [bool](#bool) = `False` - enables smooth rounded corners like in iOS interfaces. +* _t: [string](#string) = `TEXT` - object type. +* text: [string](#string) - content of the text layer. +* Font: [string](#string) = `Inter-Regular` - text font. +* FontSize: [float](#float) = `12` - text size. +* ParagraphSpacing: [float](#float) = `0` - paragraph spacing. +* Kerning: [float](#float) = `0` - letter spacing. +* BaselineOffset: [float](#float) = `0` - text offset from the baseline. +* LineHeight: [float?](#float) - line spacing. +* Casing: [CharacterCasing](#CharacterCasing) = `Normal` - character case. +* Align: [TextHorizontalAlignment](#TextHorizontalAlignment) = `Left` - horizontal alignment applied to the text. +* Valign: [TextVerticalAlignment](#TextVerticalAlignment) = `Top` - vertical alignment applied to the text. +* List: [ListMarkerType](#ListMarkerType) = `None` - list type: numbered, bulleted, none. +* Rtl: [bool](#bool) = `false` - if the text is RTL. +* Underline: [bool](#bool) = `false` - if the text is underlined. +* Strikethrough: [bool](#bool) = `false` - if the strikethrough option is applied to the text. +* BaselinePos: [BaselinePosition](#BaselinePosition) = `Normal` - text position against the baseline. +* Inlines: [InlineStyle[]](#InlineStyle) - styling options applied to the text within a text block. +* Behavior: [TextBehavior](#TextBehavior) = `Flexible` - behavior of the text layer size on text value change: flexible, fixed-width, or fixed. +* ClipContent: [bool](#bool) = `true` - valid for files imported from Figma. Defines whether to truncate text content. +* Truncate: [bool](#bool) = `false` - trim text with triple dots in the end if content overlaps fixed layer size bounds. +* MaxLines: [byte](#byte) = `0` - count of lines allowed. If the limit is exceeded, the text will be truncated. +* DrawOnPath: [bool](#bool) = `false` - defines whether text draws on the underlying path. +* Warp: [bool](#bool) = `false` - defines whether text warps when drawn on the underlying path. +* VerticalTrim: [bool](#bool) = `false` - removes extra space on top and bottom of the text layer. +* TextStyleId: [GUID](#GUID) - text style id. -### Layer -A layer is any ungrouped element available on the canvas. +### BoolVariable +Variable with a boolean value. -* _t: [string](#string) = `COMPONENT` - object type. -* Id: [GUID](#GUID) - unique layer identifier. -* Name: [string](#string) - defines layer name. -* NameIsFixed: [bool](#bool) = `False` - name can be auto-generated or user-specified. User-specified fixed names will not be renamed after some operations. -* BooleanOp: [BoolOp](#BoolOp) = `Union` - defines the boolean operation applied to the layer. -* Fixed: [bool](#bool) = `False` - if the *Fix position* option is enabled: the layer preserves its position when you scroll a prototype (for instance, a floating button). -* Locked: [bool](#bool) = `False` - defines whether the layer is locked for editing. -* Hidden: [bool](#bool) = `False` - defines whether the layer is hidden. -* IsTemplate: [bool](#bool) = `False` - defines whether tha layer is marked as a template. -* Expand: [bool](#bool) = `False` - defines whether the layer is expanded in Layer List. -* Trim: [bool](#bool) = `False` - when enabled, trims empty pixels in exported images. -* Export: [ExportOption[]](#ExportOption) - export options of the layer. -* Constraints: [string](#string) = `LTWH` - defines constraint settings of the layer. String with chars where every char means a flag: - L - left, T - top, R - right, B - bottom, W - fix width, H - fix height. -* Transform: [Matrix](#Matrix) = `Free.Schema.Matrix` - position, rotation and flips of an object, stored in a single 3x2 matrix. -* Size: [Size](#Size) = `[100,100]` - defines the layer size. -* LockAspect: [bool](#bool) = `False` - defines whether the layer's aspect ratio should be remain unchanged upon resizing. -* Mask: [bool](#bool) = `False` - defines whether the layer is used as a mask. -* BreakMask: [bool](#bool) = `False` - defines if the layer is set to ignore the mask. -* MaskType: [MaskType](#MaskType) = `Vector` - type of the Mask - Vector, Alpha or Luminance. -* KeepScroll: [bool](#bool) = `False` - if the *Keep scroll position* option is enabled (prototyping). -* ScrollBehavior: [FlowScrollBehavior](#FlowScrollBehavior) = `Scroll` - defines scroll behavior (prototyping). -* Flows: [Flow[]](#Flow) - defines flows (prototyping). -* MinWidth: [float](#float) = `0` - defines the minimum layer width (auto layout). -* MinHeight: [float](#float) = `0` - defines the minimum layer height (auto layout). -* MaxWidth: [float](#float) = `0` - defines the maximum layer width (auto layout). -* MaxHeight: [float](#float) = `0` - defines the maximum layer height (auto layout). -* LayoutStretch: [bool](#bool) = `False` - determines if the layer should stretch along the parent’s counter axis (auto layout). -* LayoutGrowStretch: [bool](#bool) = `False` - determines whether a layer should stretch along the parent’s primary axis (auto layout). -* LayoutFixPos: [bool](#bool) = `False` - enables absolute position for the layer (auto layout). -* Custom: [[string,string]](#[string,string) - key/Value map for custom properties of a layer. Similar to UserInfo is Sketch and PluginData in Figma. +Has all properties of [`Variable`](#Variable), plus: + +* _t: [string](#string) = `BOOL` - variable type. +* Values: [BoolValue[]](#BoolValue) - list of values for each theme in collection. + +### ColorVariable +Variable with a color value. + +Has all properties of [`Variable`](#Variable), plus: + +* _t: [string](#string) = `COLOR` - variable type. +* Values: [ColorValue[]](#ColorValue) - list of values for each theme in collection. + +### FloatVariable +Variable with a float value. + +Has all properties of [`Variable`](#Variable), plus: + +* _t: [string](#string) = `FLOAT` - variable type. +* Values: [FloatValue[]](#FloatValue) - list of values for each theme in collection. + +### StringVariable +Variable with a string value. + +Has all properties of [`Variable`](#Variable), plus: + +* _t: [string](#string) = `TEXT` - variable type. +* Values: [stringValue[]](#stringValue) - list of values for each theme in collection. + +### BoolValue +Value of a boolean variable. + +* ThemeId: [GUID](#GUID) - theme unique identifier of a Value. +* Value: [bool](#bool) = `false` - boolean value. +* ValueId: [GUID](#GUID) - boolean variable ID. + +### ColorValue +Value of a color variable. + +* ThemeId: [GUID](#GUID) - theme unique identifier of a Value. +* Value: [Color](#Color) = `00000000` - color value. +* ValueId: [GUID](#GUID) - color variable ID. + +### FloatValue +Value of a float variable + +* ThemeId: [GUID](#GUID) - theme unique identifier of a Value. +* Value: [float](#float) = `0` - float value. +* ValueId: [GUID](#GUID) - float variable ID. + +### StringValue +Value of a string variable + +* ThemeId: [GUID](#GUID) - theme unique identifier of a Value. +* Value: [string](#string) - string value. +* ValueId: [GUID](#GUID) - string variable ID. + +### Variable +Base class of variable. + +* _t: [string](#string) = `COLOR` - variable type. +* Id: [GUID](#GUID) - unique variable ID. +* Name: [string](#string) - variable name. +* Version: [int](#int) = `0` - variable version. + +### VariableCollection +Collection of variables. + +* Id: [GUID](#GUID) - unique identifier. +* Name: [string](#string) - name of variable collection. +* Themes: [VariableTheme[]](#VariableTheme) - list of variable theme names in this collection. +* Variables: [Variable[]](#Variable) - list of variables inside collection. +* Version: [int](#int) = `0` - version of collection. + +### VariableTheme +Theme of variables. Used to switch all variable values inside specific collection. + +* Id: [GUID](#GUID) - unique identifier. +* Name: [string](#string) - name of the theme. + +### BoolComponentProperty +Defines boolean component property of components and states. + +Has all properties of [`ComponentPropertyBase`](#ComponentPropertyBase), plus: + +* _t: [string](#string) = `BOOL` - object type. +* Value: [bool](#bool) = `false` - initial Value. +* ValueId: [GUID](#GUID) - boolean variable ID. + +### SlotComponentProperty +Defines slot component property of components and states. + +Has all properties of [`ComponentPropertyBase`](#ComponentPropertyBase), plus: + +* _t: [string](#string) = `SLOT` - object type. +* Value: [GUID](#GUID) - initial Slot ID. +* Values: [GUID[]](#GUID) - preferred Components Values. + +### StateComponentProperty +Defines state(variant) component property of components and states. Can be assigned to states layer only. + +Has all properties of [`ComponentPropertyBase`](#ComponentPropertyBase), plus: + +* _t: [string](#string) = `STATE` - object type. +* Value: [string](#string) - initial Value. +* ValueId: [GUID](#GUID) - string variable ID. +* Values: [string[]](#string) - preferred Values. + +### SwapComponentProperty +Defines swap component property of components and states. + +Has all properties of [`ComponentPropertyBase`](#ComponentPropertyBase), plus: + +* _t: [string](#string) = `SWAP` - object type. +* Value: [GUID](#GUID) - initial Value. +* Values: [GUID[]](#GUID) - preferred Values. + +### TextComponentProperty +Defines text component property of components and states. + +Has all properties of [`ComponentPropertyBase`](#ComponentPropertyBase), plus: + +* _t: [string](#string) = `TEXT` - object type. +* Value: [string](#string) - initial Value. +* ValueId: [GUID](#GUID) - string variable ID. + +### ComponentPropertyBase +Defines component property of components and states. + +* _t: [string](#string) = `BOOL` - variable type. +* Id: [GUID](#GUID) - unique property ID. +* Name: [string](#string) - property name. +* Dead: [bool](#bool) = `false` - is already deleted. + +### ColorStyle +Style of fills. Can be set to borders and fills. + +Has all properties of [`StyleBase`](#StyleBase), plus: + +* Fill: [Color](#Color) = `00000000` - if there is a single color fill - use this, otherwise use Fills field. +* Fills: [Fill[]](#Fill) - list of fills applied to a style. + +### EffectStyle + +Has all properties of [`StyleBase`](#StyleBase), plus: + +* Shadows: [ShadowEffect[]](#ShadowEffect) - list of shadows of the style. +* InnerShadows: [ShadowEffect[]](#ShadowEffect) - list of inner shadows of the style. +* Blur: [BlurEffect](#BlurEffect) - definition of the blur effect of the style. + +### GuideStyle + +Has all properties of [`StyleBase`](#StyleBase), plus: + +* Layouts: [LayoutGuideBase[]](#LayoutGuideBase) - grid, Row and Column layouts of the style. + +### TextStyle +Text Style + +Has all properties of [`StyleBase`](#StyleBase), plus: + +* Font: [string](#string) = `Inter-Regular` - text font. +* FontSize: [float](#float) = `12` - text size. +* ParagraphSpacing: [float](#float) = `0` - paragraph spacing. +* Kerning: [float](#float) = `0` - letter spacing. +* BaselineOffset: [float](#float) = `0` - text offset from the baseline. +* LineHeight: [float?](#float) - line spacing. +* Underline: [bool](#bool) = `false` - if the text is underlined. +* Strikethrough: [bool](#bool) = `false` - if the strikethrough option is applied to the text. +* Casing: [CharacterCasing](#CharacterCasing) = `Normal` - character case. + +### StyleBase +Base class for a shared style + +* Id: [GUID](#GUID) - unique style ID. +* Name: [string](#string) - style name. +* Version: [int](#int) = `0` - style version. +* FigmaId: [string](#string) - unique Figma Style Id. Used to connect shared libraries and documents imported from figma. + +### Columns +Defines column settings in a layout guide. + +Has all properties of [`LayoutGuideBase`](#LayoutGuideBase), plus: + +* _t: [string](#string) = `COLS` - object type. +* Enabled: [bool](#bool) = `false` - if columnns are enabled. +* Align: [LayoutHorizontalAlignment](#LayoutHorizontalAlignment) = `Left` - horizontal alignment settings. +* Offset: [int](#int) = `0` - offset value. +* Count: [int](#int) = `0` - number of columns. +* Gutter: [int](#int) = `0` - gutter value. +* Width: [int](#int) = `0` - column width. +* Color: [Color](#Color) = `00000000` - column color. + +### Grid +Defines square grid settings for a frame. + +Has all properties of [`LayoutGuideBase`](#LayoutGuideBase), plus: + +* _t: [string](#string) = `GRID` - object type. +* Enabled: [bool](#bool) = `false` - if the square grid is enabled. +* Color: [Color](#Color) = `00000000` - grid color. +* Size: [int](#int) = `10` - size of grid cells.
-Lunacy specific +Sketch compatibility -* PhotoId: [string](#string) - identifier of a photo from the Lunacy gallery. -* IllustrationId: [string](#string) - identifier of an illustraion from the Lunacy gallery. -* IconId: [string](#string) - identifier of an icon from the Lunacy gallery. -* AvatarId: [string](#string) - identifier of a Lunacy-generated avatar. -* Data: [DataInfo](#DataInfo) - information about auto generated texts. -* Upscaled: [bool](#bool) = `False` - if the image has been upscaled in Lunacy. -* BackgroundRemove: [BackgroundRemovalState](#BackgroundRemovalState) = `None` - background removal procedure info. +* ThickTimes: [int](#int) = `10` - every N line should be thick.
+### Rows +Defines row settings in a layout guide. + +Has all properties of [`LayoutGuideBase`](#LayoutGuideBase), plus: + +* _t: [string](#string) = `ROWS` - object type. +* Enabled: [bool](#bool) = `false` - if rows are enabled. +* Align: [LayoutVerticalAlignment](#LayoutVerticalAlignment) = `Top` - vertical alignment settings. +* Offset: [int](#int) = `0` - offset value. +* Count: [int](#int) = `0` - number of rows. +* Gutter: [int](#int) = `0` - gutter value. +* Width: [int](#int) = `0` - row width. +* Color: [Color](#Color) = `00000000` - row color. + +### LayoutGuideBase +Defines layout guide settings for a frame. + +* _t: [string](#string) - object type. +* Enabled: [bool](#bool) = `false` - if layout guide is enabled. + ### BackAction Action to go to previous frame. @@ -576,6 +844,16 @@ Has all properties of [`FlowAction`](#FlowAction), plus: * _t: [string](#string) = `CLOSE_OVERLAY` - object type. +### ConditionalAction +Set variable theme for a variable collection + +Has all properties of [`FlowAction`](#FlowAction), plus: + +* _t: [string](#string) = `CONDITION` - object type. +* Condition: [Argument](#Argument) - condition. Usually an expression, but can be a value or variable. +* True: [FlowAction[]](#FlowAction) - actions to perform if condition result is true. +* False: [FlowAction[]](#FlowAction) - actions to perform if condition result is false. + ### NavigateToAction Action to navigate to target frame. @@ -595,8 +873,8 @@ Has all properties of [`FlowAction`](#FlowAction), plus: * Animation: [FlowAnimation](#FlowAnimation) = `Free.Schema.FlowAnimation` - action animation. * Position: [FlowOverlayPosition](#FlowOverlayPosition) = `Centered` - startup location of overlay. * Offset: [Vector2](#Vector2) = `<0, 0>` - offset from startup location. -* CloseByClick: [bool](#bool) = `False` - close by any click. -* HasBackground: [bool](#bool) = `False` - defines whether the overlay has background. +* CloseByClick: [bool](#bool) = `false` - close by any click. +* HasBackground: [bool](#bool) = `false` - defines whether the overlay has background. * Background: [Color](#Color) = `00000000` - overlay background color. ### OpenUrlAction @@ -616,6 +894,24 @@ Has all properties of [`FlowAction`](#FlowAction), plus: * Target: [GUID?](#GUID) - id of the target layer. * Animation: [FlowAnimation](#FlowAnimation) = `Free.Schema.FlowAnimation` - action animation. +### SetThemeAction +Set variable theme for a variable collection + +Has all properties of [`FlowAction`](#FlowAction), plus: + +* _t: [string](#string) = `THEME` - object type. +* Target: [GUID?](#GUID) - variable Collection Id +* ThemeId: [GUID](#GUID) - variable Theme Id + +### SetVariableAction +Action to go to previous frame. + +Has all properties of [`FlowAction`](#FlowAction), plus: + +* _t: [string](#string) = `SET` - object type. +* Target: [GUID](#GUID) - variable Id +* Value: [Argument](#Argument) - value to set. + ### SwapOverlayAction Action to swap current overlay to target overlay. @@ -720,110 +1016,59 @@ Base object of prototyping trigger. * _t: [string](#string) = `CLICK` - object type. -### AutoLayoutContainer +### Argument +Expression Argument. Value or Variable or Expression. + +* Bool: [bool?](#bool) - boolean value +* Number: [float?](#float) - number value +* Text: [string](#string) - text value +* Id: [GUID?](#GUID) - id of a variable. Should be used with a bool/float/string value before id. +* Func: [ExpressionFunction?](#ExpressionFunction) - expression Function. Use only with Args. + +### AutoLayout Defines auto layout settings. -Has all properties of [`LayoutContainerBase`](#LayoutContainerBase), plus: - -* _t: [string](#string) = `AUTO` - object type. -* Orientation: [LayoutOrientation](#LayoutOrientation) = `Horizontal` - layout orientation: horizontal or vertical. +* Vertical: [bool](#bool) = `false` - is vertical orientation. * Spacing: [float](#float) = `0` - spacing value * WrapSpacing: [float](#float) = `0` - spacing between rows of wrapped content. * Padding: [Thickness](#Thickness) = `[0,0,0,0]` - padding value. * Align: [HorizontalAlignment](#HorizontalAlignment) = `Left` - horizontal children alignment * Valign: [VerticalAlignment](#VerticalAlignment) = `Top` - vertical children alignment -* Sizing: [SizingMode](#SizingMode) = `Auto` - horizontal resizing mode: fixed or hug. -* Vsizing: [SizingMode](#SizingMode) = `Auto` - vertical resizing mode: fixed or hug. -* TextBaseline: [bool](#bool) = `False` - if text baseline alignment is enabled. -* StrokesIncluded: [bool](#bool) = `False` - if the Include Borders option is enabled. -* ReverseZIndex: [bool](#bool) = `False` - if the Last on Top option is enabled. -* Wrap: [bool](#bool) = `False` - if wrapping is enabled. -* WrapDistribute: [bool](#bool) = `False` - if auto distribute is enabled for wrapped content. +* FixWidth: [bool](#bool) = `false` - is width fixed. False = hug or fill if StretchWidth is true. +* FixHeight: [bool](#bool) = `false` - is height fixed. False = hug or fill if StretchHeight is true. +* TextBaseline: [bool](#bool) = `false` - if text baseline alignment is enabled. +* StrokesIncluded: [bool](#bool) = `false` - if the Include Borders option is enabled. +* ReverseZIndex: [bool](#bool) = `false` - if the Last on Top option is enabled. +* Wrap: [bool](#bool) = `false` - if wrapping is enabled. -### Border -Defines the appearance of borders. +### Bind +Bind of a variable into layer property. -Has all properties of [`Fill`](#Fill), plus: - -* Thickness: [Thickness](#Thickness) = `[0,0,0,0]` - defines border thickness. -* Pos: [BorderPosition](#BorderPosition) = `Center` - defines border position. - -### Columns -Defines column settings in a layout grid. - -Has all properties of [`GridLayoutBase`](#GridLayoutBase), plus: - -* _t: [string](#string) = `COLS` - object type. -* Enabled: [bool](#bool) = `False` - if columnns are enabled. -* Align: [LayoutHorizontalAlignment](#LayoutHorizontalAlignment) = `Left` - horizontal alignment settings. -* Offset: [int](#int) = `0` - offset value. -* Count: [int](#int) = `0` - number of columns. -* Gutter: [int](#int) = `0` - gutter value. -* Width: [int](#int) = `0` - column width. -* Color: [Color](#Color) = `00000000` - column color. - -### Grid -Defines square grid settings for a frame. - -Has all properties of [`GridLayoutBase`](#GridLayoutBase), plus: - -* _t: [string](#string) = `GRID` - object type. -* Enabled: [bool](#bool) = `False` - if the square grid is enabled. -* Color: [Color](#Color) = `00000000` - grid color. -* Size: [int](#int) = `10` - size of grid cells. - -
-Sketch compatibility - -* ThickTimes: [int](#int) = `10` - every N line should be thick. -
- -### Rows -Defines row settings in a layout grid. - -Has all properties of [`GridLayoutBase`](#GridLayoutBase), plus: - -* _t: [string](#string) = `ROWS` - object type. -* Enabled: [bool](#bool) = `False` - if rows are enabled. -* Align: [LayoutVerticalAlignment](#LayoutVerticalAlignment) = `Top` - vertical alignment settings. -* Offset: [int](#int) = `0` - offset value. -* Count: [int](#int) = `0` - number of rows. -* Gutter: [int](#int) = `0` - gutter value. -* Width: [int](#int) = `0` - row width. -* Color: [Color](#Color) = `00000000` - row color. +* Field: [BindField](#BindField) = `Unknown` - target field +* Value: [Argument](#Argument) - bind Value ### BlurEffect Defines the settings of the blur effect. * Saturation: [float](#float) = `1` - saturation. Only for background blur. * Radius: [float](#float) = `10` - blur Radius. -* Enabled: [bool](#bool) = `False` - if the blur is enabled. +* Enabled: [bool](#bool) = `false` - if the blur is enabled. * Type: [BlurType](#BlurType) = `Gaussian` - sets the blur type. -### BorderOptions -Defines the advanced options of borders, arrows, lines, and paths drawn with the Pen or Pencil tools. - -* LineCap: [LineCap](#LineCap) = `Butt` - defines the shape of line caps. -* LineJoin: [LineJoin](#LineJoin) = `Miter` - defines the appearance of line folds. -* Dash: [float[]](#float) - defines the size of dashes. - -### ColorVariable -Color variables stored in the document. - -* Id: [GUID](#GUID) - unique color variable ID. -* Name: [string](#string) - color variable name. -* Value: [Color](#Color) = `00000000` - color value of the variable. - ### Document The document's .json structure. * Id: [GUID](#GUID) - unique document ID. * Nudge: [Point](#Point) = `[1,10]` - nudge Amount. X - small nudge. Y = large nudge. -* FromFigma: [bool](#bool) = `False` - if the document is imported from Figma. +* FromFigma: [bool](#bool) = `false` - if the document is imported from Figma. * CurrentPageIndex: [int](#int) = `0` - index of the currently open page. * Fonts: [Font[]](#Font) - embedded fonts stored in the document. -* ColorVariables: [ColorVariable[]](#ColorVariable) - color variables stored in the document. -* Styles: [SharedStyle[]](#SharedStyle) - styles stored in the document. +* VariableCollections: [VariableCollection[]](#VariableCollection) - variable collections stored in the document. +* FillStyles: [ColorStyle[]](#ColorStyle) - fill styles stored in the document. +* EffectStyles: [EffectStyle[]](#EffectStyle) - effect styles stored in the document. +* TextStyles: [TextStyle[]](#TextStyle) - text styles stored in the document. +* GuideStyles: [GuideStyle[]](#GuideStyle) - guide layout styles stored in the document. +* Slots: [Slot[]](#Slot) - slots of the document. * Pages: [GUID[]](#GUID) - list of document pages.
@@ -835,17 +1080,16 @@ The document's .json structure. ### ExportOption Export settings. -* Size: [float](#float) = `0` - defines the width/height of the exported object. Valid only when ScaleType is *Width* or *Height*. -* Format: [string](#string) = `png` - export format. Default: PNG. +* Format: [string](#string) = `PNG` - export format. Default: PNG. +* Type: [ScaleType](#ScaleType) = `Scale` - defines the scale type: Scale/Width/Height. The Width and Height types are currently not supported. +* Size: [float](#float) = `0` - defines the width/height/scale of the exported object. Dependent on the type of the scale. * Name: [string](#string) - user-defined suffix/preffix (string) added to the export file name. Default: empty. * Naming: [NamingScheme](#NamingScheme) = `Suffix` - defines whether a suffix or preffix will be added to the export files name. Default: suffix. -* Scale: [float](#float) = `1` - defines the scale used when exporting an object. Valid only when ScaleType is set to *Scale*. -* Type: [ScaleType](#ScaleType) = `Scale` - defines the scale type: Scale(px)/Width/Height. The Width and Height types are currently not supported. ### Fill Defines the fill applied to a layer. -* Enabled: [bool](#bool) = `False` - if a fill is added. +* Enabled: [bool](#bool) = `false` - if a fill is added. * Color: [Color](#Color) = `00000000` - fill color. * ColorId: [GUID?](#GUID) - color variable ID. * Type: [FillType](#FillType) = `Color` - defines the fill type. @@ -858,7 +1102,7 @@ Defines the fill applied to a layer. Prototyping interaction element * Trigger: [FlowTrigger](#FlowTrigger) - trigger that will fire an action. Examples: CLICK, DRAG, HOLD. -* Action: [FlowAction](#FlowAction) - action. Examples: NAVIGATE, SCROLL, URL, BACK. +* Actions: [FlowAction[]](#FlowAction) - list of Actions. Examples: NAVIGATE, SCROLL, URL, BACK. ### Font Embedded fonts stored in the document. @@ -881,18 +1125,13 @@ An object that represents a gradient. A position-color pair representing a gradient stop. * Pos: [float](#float) = `0` - value between 0 and 1 representing a position along gradient axis. -* Color: [Color](#Color) = `ffffffff` - color attached to a corresponding position. - -### GridLayoutBase -Defines layout grid settings for a frame. - -* _t: [string](#string) - object type. -* Enabled: [bool](#bool) = `False` - if layout grid is enabled. +* Color: [Color](#Color) = `00000000` - color attached to a corresponding position. +* ColorId: [GUID?](#GUID) - color variable ID. ### ImageFilters Defines filters that can be applied to images. -* Enabled: [bool](#bool) = `False` - if a filter is applied to the image layer. +* Enabled: [bool](#bool) = `false` - if a filter is applied to the image layer. * Brightness: [float](#float) = `0` - brightness filter. * Contrast: [float](#float) = `1` - contrast filter. * Hue: [float](#float) = `0` - hue filter. @@ -903,12 +1142,24 @@ Style (bold, italic, etc.) applied to a part of text or single word within a tex * Start: [int](#int) = `0` - position where the style starts. * Length: [int](#int) = `0` - length of the selection. -* Style: [TextStyle](#TextStyle) - style applied to the selection. - -### LayoutContainerBase -Defines a container layout. - -* _t: [string](#string) - object type. +* FillsId: [GUID](#GUID) - color Style Id. +* TextStyleId: [GUID](#GUID) - text style id. +* Fill: [Color](#Color) = `00000000` - if there is a single color fill - use this, otherwise use Fills field. +* Fills: [Fill[]](#Fill) - list of fills. +* Font: [string](#string) = `Inter-Regular` - text font. +* FontSize: [float](#float) = `12` - text size. +* ParagraphSpacing: [float](#float) = `0` - paragraph spacing. +* Kerning: [float](#float) = `0` - letter spacing. +* BaselineOffset: [float](#float) = `0` - text offset from the baseline. +* LineHeight: [float?](#float) - line spacing. +* Casing: [CharacterCasing](#CharacterCasing) = `Normal` - character case. +* Align: [TextHorizontalAlignment](#TextHorizontalAlignment) = `Left` - horizontal alignment applied to the text. +* Valign: [TextVerticalAlignment](#TextVerticalAlignment) = `Top` - vertical alignment applied to the text. +* List: [ListMarkerType](#ListMarkerType) = `None` - list type: numbered, bulleted, none. +* Rtl: [bool](#bool) = `false` - if the text is RTL. +* Underline: [bool](#bool) = `false` - if the text is underlined. +* Strikethrough: [bool](#bool) = `false` - if the strikethrough option is applied to the text. +* BaselinePos: [BaselinePosition](#BaselinePosition) = `Normal` - text position against the baseline. ### Meta Contains metadata about the document. @@ -938,18 +1189,21 @@ Defines overrides for components. * StyleId: [GUID?](#GUID) - identifier of the style applied to a layer. * Tint: [Color?](#Color) - defines the tint color. * TintId: [GUID?](#GUID) - tint identifier. -* BorderOptions: [BorderOptions](#BorderOptions) - definition of border options. +* Thickness: [Thickness](#Thickness) = `[0,0,0,0]` - defines border thickness. +* CustomThickness: [Thickness](#Thickness) = `[0,0,0,0]` - defines custom border thickness. +* LinePos: [LinePosition](#LinePosition) = `Center` - defines border position. +* LineCap: [LineCap](#LineCap) = `Butt` - defines the shape of line caps. +* LineJoin: [LineJoin](#LineJoin) = `Miter` - defines the appearance of line folds. * Blur: [BlurEffect](#BlurEffect) - information about blurs. * ImageFilters: [ImageFilters](#ImageFilters) - filters applied to an image (hue, saturartion, etc.), if any. * Opacity: [float?](#float) - opacity value. * BlendMode: [BlendMode?](#BlendMode) - blend mode. -* StartArrowhead: [Arrowhead?](#Arrowhead) - determines the appearance of the tail of an open path drawn with the Line, Arrow, or Pen/Pencil tool. -* EndArrowhead: [Arrowhead?](#Arrowhead) - determines the appearance of the head of an open path drawn with the Line, Arrow, or Pen/Pencil tool. +* StartMarker: [Arrowhead?](#Arrowhead) - determines the appearance of the tail of an open path drawn with the Line, Arrow, or Pen/Pencil tool. +* EndMarker: [Arrowhead?](#Arrowhead) - determines the appearance of the head of an open path drawn with the Line, Arrow, or Pen/Pencil tool. * Text: [string](#string) - content of the text layer. -* TextStyle: [TextStyle](#TextStyle) - style applied to the text * TextBehavior: [TextBehavior?](#TextBehavior) - behavior of the text layer size on text value change: flexible, fixed-width, or fixed. * Size: [Size?](#Size) - text size. -* Orientation: [LayoutOrientation?](#LayoutOrientation) - layout orientation: horizontal or vertical. +* Vertical: [bool?](#bool) - is vertical autolayout * Spacing: [float?](#float) - spacing value * WrapSpacing: [float?](#float) - spacing between rows of wrapped content. * MinWidth: [float?](#float) - defines the minimum layer width (auto layout). @@ -959,15 +1213,14 @@ Defines overrides for components. * Padding: [Thickness?](#Thickness) - padding value. * Align: [HorizontalAlignment?](#HorizontalAlignment) - horizontal children alignment. * VAlign: [VerticalAlignment?](#VerticalAlignment) - vertical children alignment. -* Sizing: [SizingMode?](#SizingMode) - horizontal resizing mode: fixed or hug. -* VSizing: [SizingMode?](#SizingMode) - vertical resizing mode: fixed or hug. +* FixWidth: [bool](#bool) = `false` - is width fixed. False = hug or fill if StretchWidth is true. +* FixHeight: [bool](#bool) = `false` - is height fixed. False = hug or fill if StretchHeight is true. * TextBaseline: [bool?](#bool) - if text baseline alignment is enabled. * StrokesIncluded: [bool?](#bool) - if the Include Borders option is enabled. * ReverseZIndex: [bool?](#bool) - if the Last on Top option is enabled. -* Stretch: [bool?](#bool) - determines if the layer should stretch along the parent’s counter axis (auto layout). -* GrowStretch: [bool?](#bool) - determines whether a layer should stretch along the parent’s primary axis (auto layout). -* Wrap: [bool?](#bool) - if wrapping is enabled. -* WrapDistribute: [bool?](#bool) - if auto distribute is enabled for wrapped content. +* StretchWidth: [bool](#bool) = `false` - determines if the layer should stretch height (auto layout). +* StretchHeight: [bool](#bool) = `false` - determines whether a layer should stretch width (auto layout). +* Wrap: [bool?](#bool) - if text wrapping is enabled. * Truncate: [bool?](#bool) - trim text with triple dots in the end if content overlaps fixed layer size bounds. * MaxLines: [byte](#byte) = `0` - count of lines allowed. If the limit is exceeded, the text will be truncated. * KeepScroll: [bool?](#bool) - if the *Keep scroll position* option is enabled (prototyping). @@ -987,7 +1240,7 @@ Document page properties. * Id: [GUID](#GUID) - unique page ID. * Name: [string](#string) - page name. * Background: [Color](#Color) = `00000000` - canvas color. -* IsComponentPage: [bool](#bool) = `False` - if the page is used to store components. +* IsComponentPage: [bool](#bool) = `false` - if the page is used to store components. * Rulers: [Rulers](#Rulers) - rulers applied by the user. * Origin: [Point](#Point) = `[0,0]` - point where the user left off the page. * Zoom: [float](#float) = `0` - zoom scale last applied to the page. @@ -1025,7 +1278,7 @@ An object containing ruler origins and guideline positions. ### ShadowEffect Defines the shadow options. -* Enabled: [bool](#bool) = `True` - if a shadow effect is enabled. +* Enabled: [bool](#bool) = `true` - if a shadow effect is enabled. * Radius: [float](#float) = `0` - radius of the shadow blur. * Color: [Color](#Color) = `00000000` - shadow color. * ColorId: [GUID?](#GUID) - color variable ID. @@ -1034,59 +1287,29 @@ Defines the shadow options. * BlendMode: [BlendMode](#BlendMode) = `Normal` - shadow blend mode. ### SharedLibrary -Contains components, styles and variables from external library that is used in current document. -Every file in the shared folder is Shared Library. +Contains components, styles and variables from external library that is used in current document. Every file in the shared folder is Shared Library. * Id: [GUID](#GUID) - unique library document identifier. -* ColorVariables: [ColorVariable[]](#ColorVariable) - color variables from a shared library. -* Styles: [SharedStyle[]](#SharedStyle) - styles from a shared library. +* Variables: [VariableCollection[]](#VariableCollection) - variable collections from a shared library. +* FillStyles: [ColorStyle[]](#ColorStyle) - fill styles stored in the document. +* EffectStyles: [EffectStyle[]](#EffectStyle) - effect styles stored in the document. +* TextStyles: [TextStyle[]](#TextStyle) - text styles stored in the document. +* GuideStyles: [GuideStyle[]](#GuideStyle) - guide layout styles stored in the document. * Components: [Component[]](#Component) - components from a shared library. +* Slots: [Slot[]](#Slot) - slots from a shared library. -### SharedStyle -Style saved in the document. +### StateBind +Bind of component property of a states layer to the state name of component. -* Id: [GUID](#GUID) - unique style ID. -* Name: [string](#string) - style name. -* Style: [Style](#Style) - layer style settings. +* Id: [GUID](#GUID) - component Property Id +* Name: [string](#string) - state Name +* NameId: [GUID?](#GUID) - id of string variable with a value -### Style -Defines a set of properties that make up a style. +### ThemeSelection +Theme Selection of a layer and it's children for a specific theme. -* MiterLimit: [int](#int) = `10` - defining a limit on the ratio of the miter length to the border thickness used to draw a miter join. -* Opacity: [float](#float) = `1` - opacity of a layer. -* BlendMode: [BlendMode](#BlendMode) = `Normal` - blend mode: how a layer blends with the layers behind it. -* StartMarker: [Arrowhead](#Arrowhead) = `None` - defines the appearance of the starting point for arrows, lines, and open paths. -* EndMarker: [Arrowhead](#Arrowhead) = `None` - defines the appearance of the end point for arrows, lines, and open paths. -* Winding: [PathFillType](#PathFillType) = `EvenOdd` - fill options for overlapping paths: non-zero or even-odd. -* Fills: [Fill[]](#Fill) - list of fills applied to a layer. -* Borders: [Border[]](#Border) - list of borders applied to a layer. -* Shadows: [ShadowEffect[]](#ShadowEffect) - list of shadows applied to a layer. -* InnerShadows: [ShadowEffect[]](#ShadowEffect) - list of inner shadows applied to a layer. -* Blur: [BlurEffect](#BlurEffect) - definition of the blur effect applied to a layer. -* BorderOptions: [BorderOptions](#BorderOptions) - definition of border options. -* ImageFilters: [ImageFilters](#ImageFilters) - image filters applied to a layer. -* CornerRadius: [float[]](#float) = `float[4]` - sets the corner radius of the frame/instance/component/states/section. -* SmoothCorners: [bool](#bool) = `False` - enables smooth rounded corners like in iOS interfaces. - -### TextStyle -Defines a set of properties that make up a text style. - -* Color: [Color](#Color) = `ff000000` - text color. -* ColorId: [GUID?](#GUID) - color variable ID. -* Font: [string](#string) = `Inter` - text font. -* Size: [float](#float) = `12` - text size. -* ParagraphSpacing: [float](#float) = `0` - paragraph spacing. -* Kerning: [float](#float) = `0` - letter spacing. -* BaselineOffset: [float](#float) = `0` - text offset from the baseline. -* LineHeight: [float?](#float) - line spacing. -* Casing: [CharacterCasing](#CharacterCasing) = `Normal` - character case. -* Align: [TextHorizontalAlignment](#TextHorizontalAlignment) = `Left` - horizontal alignment applied to the text. -* Valign: [TextVerticalAlignment](#TextVerticalAlignment) = `Top` - vertical alignment applied to the text. -* List: [ListMarkerType](#ListMarkerType) = `None` - list type: numbered, bulleted, none. -* RTL: [bool](#bool) = `False` - if the text is RTL. -* Underline: [bool](#bool) = `False` - if the text is underlined. -* Strikethrough: [bool](#bool) = `False` - if the strikethrough option is applied to the text. -* BaselinePos: [BaselinePosition](#BaselinePosition) = `Normal` - text position against the baseline. +* Id: [GUID](#GUID) - unique identifier of the collection. +* ThemeId: [GUID](#GUID) - unique identifier of the theme. ### Color Struct 32-bit ARGB unpremultiplied color value. @@ -1099,33 +1322,22 @@ Defines a set of properties that make up a text style. ### FlowAnimation Struct Prototyping action animation. -* Enabled: [bool](#bool) = `False` - if animation is enabled. +* Enabled: [bool](#bool) = `false` - if animation is enabled. * Type: [FlowAnimationType](#FlowAnimationType) = `Instant` - animation type. * Effect: [FlowAnimationEffect](#FlowAnimationEffect) = `Linear` - animation effect. * Direction: [FlowAnimationDirection](#FlowAnimationDirection) = `Left` - animation direction. * Duration: [int](#int) - animation duration in ms. * Curve: [Point[]](#Point) - animation curve point array. Array length is always 2. Point values are between 0 and 1. +* Spring: [Spring?](#Spring) - spring animation parameters. ### Matrix Struct -A transformation matrix is standard way in computer graphics to represent translation and rotation. -These are the top two rows of a 3x3 matrix. The bottom row of the matrix is assumed to be [0, 0, 1]. -This is known as an affine transform and is enough to represent translation, rotation, and skew. -The identity transform is [1, 0, 0, 0, 1, 0]. -A translation matrix will typically look like: [1, 0, tx, 0, 1, ty] -and a rotation matrix will typically look like: [cos(angle), -sin(angle), 0, sin(angle), cos(angle), 0] -If a matrix contains only translation it will be printed like point [0,5] +A transformation matrix is standard way in computer graphics to represent translation and rotation. These are the top two rows of a 3x3 matrix. The bottom row of the matrix is assumed to be [0, 0, 1]. This is known as an affine transform and is enough to represent translation, rotation, and skew. The identity transform is [1, 0, 0, 0, 1, 0]. A translation matrix will typically look like: [1, 0, tx, 0, 1, ty] and a rotation matrix will typically look like: [cos(angle), -sin(angle), 0, sin(angle), cos(angle), 0] -* ScaleX: [float](#float) - scale by x-coord. Usually should be 1. - If it's -1 - the layer is flipped horizontally. - If it's some random number - it's a cos(angle). -* SkewX: [float](#float) - skew by x-coord. Usually should be 0. - If it's some random number - it's a -sin(angle). +* ScaleX: [float](#float) - scale by x-coord. Usually should be 1. If it's -1 - the layer is flipped horizontally. If it's some random number - it's a cos(angle). +* SkewX: [float](#float) - skew by x-coord. Usually should be 0. If it's some random number - it's a -sin(angle). * TransX: [float](#float) - translation by x-coord. -* SkewY: [float](#float) - skew by y-coord. Usually should be 0. - If it's some random number - it's a sin(angle). -* ScaleY: [float](#float) - scale by y-coord. Usually should be 1. - If it's -1 - the layer is flipped vertically. - If it's some random number - it's a cos(angle). +* SkewY: [float](#float) - skew by y-coord. Usually should be 0. If it's some random number - it's a sin(angle). +* ScaleY: [float](#float) - scale by y-coord. Usually should be 1. If it's -1 - the layer is flipped vertically. If it's some random number - it's a cos(angle). * TransY: [float](#float) - translation by y-coord. ### Point Struct @@ -1148,11 +1360,23 @@ A utility class to represent layer size. * Width: [float](#float) - layer width. * Height: [float](#float) - layer height. +### Spring Struct +Spring animation parameters + +* Dumping: [float](#float) - spring Dumping, Min 0.01, Max=10000. +* Mass: [float](#float) - spring Mass, Min 0.01, Max=1000. +* Stiffness: [float](#float) - spring Stiffness, Min=0.01, Max=1000000. + ### Thickness Struct Thickness struct. Used for Border thickness and Padding values +* Left: [float](#float) - left thickness. +* Top: [float](#float) - top thickness. +* Right: [float](#float) - right thickness. +* Bottom: [float](#float) - bottom thickness. + ### Vertex Struct -A utility class to represent a vertex. +The Vertex data type, which defines path points, and has several notation options. It's simply an array of numbers and can include up to eight values: ``[x, y, mode, radius, fromX, fromY, toX, toY]``. If the points on the right end of the array have default values, they are omitted. So, if toX, toY, fromX, fromY are all zeros, the array will look like ``[x,y,mode,radius]``. And if mode and radius are zeros, it becomes ``[x, y]`` * Point: [Point](#Point) = `[0,0]` - base point of a vertex * From: [Point](#Point) = `[0,0]` - first control point, curve from. @@ -1175,9 +1399,47 @@ Defines the appearance of arrowheads. ### BaselinePosition Enum Defines text position against the baseline. +* `-1` Subscript - text is lowered below the baseline. * `0` Normal - text is aligned with the baseline. * `1` Superscript - text is raised above the baseline. -* `-1` Subscript - text is lowered below the baseline. + +### BindField Enum + +* `0` Unknown +* `1` Visibility +* `2` Opacity +* `10` Width +* `11` Height +* `12` MinWidth +* `13` MinHeight +* `14` MaxWidth +* `15` MaxHeight +* `20` CornerRadiusLeft +* `21` CornerRadiusTop +* `22` CornerRadiusRight +* `23` CornerRadiusBottom +* `30` ThicknessLeft +* `31` ThicknessTop +* `32` ThicknessRight +* `33` ThicknessBottom +* `40` PaddingLeft +* `41` PaddingTop +* `42` PaddingRight +* `43` PaddingBottom +* `44` SpacingHorizontal +* `45` SpacingVertical +* `50` ParagraphSpacing +* `51` ParagraphIndent +* `52` LineHeight +* `53` LetterSpacing +* `54` FontFamily +* `55` FontStyle +* `56` FontSize +* `57` FontVariations +* `58` Text +* `100` ComponentId +* `101` InstanceVariant +* `102` Hyperlink ### BlendMode Enum Defines the type of blend mode applied to a layer. @@ -1216,13 +1478,6 @@ Types of boolean operations used to combine shapes. * `2` Intersect - the resulting shape only includes the area where all selected shapes overlap. * `3` Difference - the opposite of Intersect. Creates a shape from the areas where the selected shapes do not overlap. -### BorderPosition Enum -Defines the border postion. - -* `0` Center - center. -* `1` Inside - inside. -* `2` Outside - outside. - ### CharacterCasing Enum Defines letter case. @@ -1328,6 +1583,28 @@ Defines the types of points on Bézier curves. * `4` OnlyFrom - only From branch. * `5` OnlyTo - only To branch. +### ExpressionFunction Enum + +* `0` Add +* `1` Subtract +* `2` Multiply +* `3` Divide +* `10` Equals +* `11` NotEqual +* `12` LessThan +* `13` LessThanOrEqual +* `14` GreaterThan +* `15` GreaterThanOrEqual +* `20` And +* `21` Or +* `22` Not +* `23` Negate +* `24` Ternary +* `25` IsTruthy +* `30` Stringify +* `100` ResolveState +* `101` ThemeLookup + ### FillType Enum Defines the fill type. @@ -1391,6 +1668,14 @@ Prototyping scroll behavior of a layer. * `1` Fixed - fixed position on scroll. * `2` Sticky - stick to the edge on scroll. +### FlowScrollOverflow Enum +Prototyping scroll overflow of a layer. + +* `0` NoScrolling +* `1` Horizontal +* `2` Vertical +* `3` Both + ### GradientType Enum List of Gradient types. @@ -1407,21 +1692,15 @@ Defines how a set of layers is aligned horizontally. * `3` Distribute - layers are horizontally justified. ### LayoutHorizontalAlignment Enum -Defines horizontal alignment settings in layout grids. +Defines horizontal alignment settings in layout guide. * `0` Left * `1` Center * `2` Right * `3` Stretch -### LayoutOrientation Enum -Orientation of an auto layout. - -* `0` Horizontal - horizontal orientation. -* `1` Vertical - vertical orientation. - ### LayoutVerticalAlignment Enum -Defines vertical alignment settings in layout grids. +Defines vertical alignment settings in layout guides. * `0` Top * `1` Middle @@ -1442,6 +1721,13 @@ Defines the appearance of the corners for arrows and paths with corners drawn wi * `1` Round - rounded. * `2` Bevel - bevelled. +### LinePosition Enum +Defines the border position. + +* `0` Center - center. +* `1` Inside - inside. +* `2` Outside - outside. + ### ListMarkerType Enum Defines the type of a text list. @@ -1478,18 +1764,12 @@ Defines the scale type for exported objects. * `1` Width * `2` Height -### SizingMode Enum -Defines the behavior of auto layout containers as their content is changed. - -* `0` Auto - the container adjusts to the size of the content (hug). -* `1` Fixed - the container has a fixed size (fix). - ### TextBehavior Enum Defines textbox behavior options. +* `0` Flexible - both the width and height of the textbox automatically adjusts to fit its content. Characters do not wrap. * `1` AutoHeight - the width of the textbox is fixed. Characters wrap to fit in the textbox. The height of the textbox automatically adjusts to fit its content. * `2` Fixed - the size of the textbox is fixed and is independent of its content. -* `0` Flexible ### TextHorizontalAlignment Enum Defines how a text is aligned horizontally. @@ -1627,7 +1907,23 @@ Controls the use of suffixes/prefixes in the names of export files. _//Sketch Co ## Changelog -### Version 5 - 14.04.2025 +### Version 8 15.03.2026 +* Added `SlotComponentProperty`. +* Added `Slot` layer and `Slots` property to `Document` and `SharedLibrary`. +* Added `StateBind` list to `Component`. +* Added `Expression`, `ExpressionFunction`, `Argument`. Also added `Bind` list to `Layer`. +* New flow actions: `ConditionalAction`, `SetVariableAction`, `SetThemeAction`. + +### Version 7 20.02.2026 +* `FixedHorizontal` and `FixedVertical` are replaced by `FixWidth` and `FixHeight`. +* `StretchHorizontal` and `StretchVertical` are replaced by `StretchWidth` and `StretchHeight`. + +### Version 6 - 18.02.2026 + +* Added `Pos` and `Frame` fields to simplify `Transform` field in usual cases. +* Added `Fill` and `Border` fields to simplify usual case of single color fills and borders. + +### Version 5 - 11.07.2025 * New layer types: `Section` and `States`. * `Hotspot` layer type is removed. @@ -1637,6 +1933,27 @@ Controls the use of suffixes/prefixes in the names of export files. _//Sketch Co * `Component` now can be inside any group/frame/section. * `CornerRadius` and `SmoothCorners` fields are now in `Style` and `Styled` layers. * Also we are dropping support for `Frame` fields: `HasBackgound`, `Background`, `BackgroundInExport`, `BackgroundInInstance`. +* `Flow` now contains not one, but a list of actions. +* `Border` and `Fill` now sharing the same `Fill` object. `Thickness` and `LinePos` now in the `Layer`. `BorderOptions` are inside `Layer` too. +* `SharedStyle` and `Style` objects is removed. `FillStyle`, `TextStyle`, `EffectStyle`, `GridLayoutStyle` objects are added instead. +* `StyleId` is removed from `Layer`. `FillsId`, `BordersId`, `EffectsId` properties are added to a `Layer`, `GridsId` to `Frame` and `TextStyleId` to `Text` instead. +* New variable types: `BoolVariable`, `StringVariable`, `FloatVariable`. `ColorVariables` properties of a `Document` and `Library` are renamed to `Variables` and now contain a list of `VariableCollection`. +* `Component` and `States` now have `Properties`. `Instance` also has `Assigns` to component properties. +* `TextProperties` `Color` and `ColorId` is replaces with array of `Fill`. +* `InlineStyle` now has `FillsId` and `TextStyleId` fields. +* `LINE` layer type is added. Previously it was saved as `PATH`. +* Added `Connectors`. +* `Container` renamed to `AutoLayout`. +* `Sizing` and `VSizing` are replaced by `FixedHorizontal` and `FixedVertical`. +* `Orientation` replaced by `Vertical` boolean. +* `LayoutStretch` renamed to `StretchHorizontally`. +* `LayoutGrowStretch` renamed to `StretchVertically`. +* `LayoutFixPos` renamed to `FixPos`. +* Added `FlowScrollOverflow`. +* Added `Spring` animation parameters. +* `TextProperties` removed. Now this properties are inside `Text` layer and `InlineStyle`. +* `Size` renamed to `FontSize` where font size is set. +* `Fixed` replaced by `ScrollBehavior`. ### Version 4 - 20.01.2025 @@ -1656,4 +1973,6 @@ Controls the use of suffixes/prefixes in the names of export files. _//Sketch Co ### Version 1 - 19.03.2024 -* Initial Version \ No newline at end of file +* Initial Version + +by Icons8 LLC 2026 \ No newline at end of file diff --git a/docs/llms-full.txt b/docs/llms-full.txt index 1a7b32b..b4cc31a 100644 --- a/docs/llms-full.txt +++ b/docs/llms-full.txt @@ -1053,19 +1053,29 @@ The main advantage of using components is that you can edit multiple instances o +

Note: If a component has multiple states, any changes you make apply only to instances of the same state. Instances of other states will not be affected.

+ ## [Component basics](component-basics) These are the basic terms related to components and their functions: -* **Main component**. The original layer that you convert into a component. +* **Main component**. The original element that you convert into a component. * **Component instance**. You create a component **instance** any time you duplicate a main component. When you edit a main component, the changes apply to all of its instances at once. * **Override**. When you modify an instance, you create an **override**. The main component won't be affected, and if you edit it later, the changes won't apply to instances with overrides. -* **Component page**. A dedicated document page used for storing main components. Lunacy adds it automatically when you create a component. +* **Component page**. A dedicated document page used for storing main components. Lunacy adds it automatically. -* **Component state**. Components from the same category or subcategory are called **component states**. They define the different styles for one component. +
+

Note: Starting from v.12, the Component page appears only in two cases:

+
    +
  • When you copy a component from another file to a local file
    • +
  • When you drop on the canvas an element from the GUI tool (button, checkbox, etc.)
    • +
+
+ +* **Component state**. A component can have different variants (Default, Hovered, Pressed, etc.). These variants are called [component states](#component-states). * **Nested components**. You can nest several components in a more complex component. This gives you the most freedom and flexibility in editing your designs, and it’s an even more powerful feature when coupled with nested auto layouts. @@ -1073,12 +1083,12 @@ These are the basic terms related to components and their functions: To **create a component**: -1. Select the layer you want to convert into a component. -2. Click `+` in the **Component** section of the right panel or press `Ctrl + Alt + K` / `⌘ + ⌥ + K`. +1. Select the element you want to convert into a component. +2. Click in the context toolbar at the top of the canvas or press `Ctrl + Alt + K` / `⌘ + ⌥ + K`. - + -You can also select a layer and click in the context toolbar at the top of the canvas or select the **Create component** option on the context menu. + + #### Components and instances in the Layer list - + -Main components are bold and colored pink () in the Layer list, and there’s a component symbol () in front of their name. + +Main components are bold and colored pink in the Layer list, and there’s a component symbol () in front of their name. + +Сomponents with more than one [state](#component-states) come with a dashed border around the symbol. Component instance names aren’t bold but have the instance symbol () and the same pink color. When they’re selected, their properties and options appear in the **Component** section of the right panel. @@ -1104,11 +1119,14 @@ Component instance names aren’t bold but have the instance symbol ( +- Drag it from the **Components tab** to where you want to place it. +- Duplicate the existing instance on the canvas. -Right-click a component in the left panel to bring up the context menu with these options: + + +Right-click a component in the **Components tab** to bring up the context menu with these options: - Rename component - Edit component @@ -1118,7 +1136,13 @@ Right-click a component in the left panel to bring up the context menu with thes - Expand all - Collapse all -

Note: If you used any components from built-in or manually created UI kits, they will also appear in the Components tab.

+ + + +

Note: If you created any elements using the GUI tool, they will also appear in the Components tab in the group named Web.

+ + + + ## [Component states](#component-states) -You can create several **states** for a component and switch between them as needed in the **right panel**. +You can create multiple states for a component and switch between them as needed. States let you define variations like *Default*, *Hover*, or *Pressed*. To **create a component state**: -1. Select a component instance. -2. Click `+` in the **Component** section of the **right panel** or press `Ctrl + Alt + P` / `⌘ + ⌥ + P`. -3. Adjust your component for the new state and name it. -4. Click on any empty area on the canvas. +1. Select a component. +2. Click in the context tool bar or press `Ctrl + Alt + P` / `⌘ + ⌥ + P`. A dashed frame will appear around the component, and the new state will be added below the original. +3. Make the required changes to the new state. +4. To create additional states, select the original component or any existing state and click `+` again. - -A new component will appear near the default main component, defining the new component state. +Lunacy automatically assigns names to states (Default, Hover, Pressed, etc.). -Lunacy also changes the name of components when you create new states, automatically placing them into [categories](#organizing-components). You can edit categories anytime in the **Components tab**. +To **rename a state**: -New component states for a distinct component will be displayed in the right panel as you select the component’s instances. +1. Select the state. +2. Press F2 and type the new state name after the slash (for example, `Button / Hover` > `Button / Disabled`). + +**Alternative workflow** + +You can also create a new component state from any instance on the canvas. + +See both methods in the video below. + + To **switch through component states**: 1. Select a component instance. 2. Choose the new component state in the **right panel**. - + -

Note: Switching component states doesn’t affect overrides. This means that if you change the component state for an instance with overrides, the overrides you created will stay unchanged.

+

Note: Switching component states doesn’t affect overrides.

+ + -Delete main components from the **Components tab** (using the [context menu](#components-tab-context-menu)) or the **Components page** (simply delete the component frame). -When you delete a component, all of its instances turn into frames. ## [Editing components](#editing-components) -You can **edit a main component**: +You can **edit a component**: +- Right on the canvas like any other design element. This is the most straightforward and convenient way to edit components. - In the **Component editor**. -- Directly in the **Components page**. +- On the **Components page**. #### Making edits in the Component editor 1. Select a component instance and press `Enter` or choose **Edit component** in the context menu. -2. The main component will appear over the selected instance, while the rest of the canvas will be dimmed. The contents of the component will appear in the **Layer list**. -3. Edit the component. -4. Click on the context toolbar, click anywhere over the dimmed area, or press `Esc` to exit the component editor. +2. You'll see a pink frame around the canvas and the contents of the component will appear in the **Layer list**. +3. Use the right panel to make the required changes. +4. Click anywhere over the canvas, or press `Esc` to exit the component editor. - + -#### Making edits in the Components page +#### Making edits on the Components page -1. Right-click on an instance and select **Go to Main Component** in the **right panel** or manually switch to the **Components page**. +
+

Note: Starting from v.12, the Component page appears only in two cases:

+
    +
  • When you copy a component from another file to a local file
    • +
  • When you drop on the canvas an element from the GUI tool (button, checkbox, etc.)
    • +
+
+ +1. Right-click on an instance and select **Go to Component** in the **right panel** or manually switch to the **Components page**. 2. Edit the required component. 3. Once you’re done: - - If you used the **Go to Main Component** option, click the **Back to instance** button at the top left corner of the canvas. + - If you used the **Go to Component** option, click the **Back to instance** button at the top left corner of the canvas. - If you manually opened the Components page, simply switch back to the previous page to continue working with the document. - - ## [Swapping components](#swapping-components) -Use the **Components tab** or the **right panel** swap between instances from entirely different components. Simply select an instance you want to replace and use one of the following methods. +You can swap between instances of different components. Simply select an instance you want to replace and use one of the following methods. **Method 1**: 1. Go to the **Components tab**. 2. Find the required component and click next to it: - + **Method 2**: -1. Open the **component state menu** in the **Component** section of the right panel. -2. Select the required category and component state. - +1. In the right panel, open the Component list. +2. Select the required component (and its state). + +The video below shows both these merthods. + + + + + +#### Deleting components + +Delete components from the **Components tab** (using the [context menu](#components-tab-context-menu)) or the **Components page** (simply delete the component frame). + +When you delete a component, all of its instances turn into frames. ## [Managing instances](#managing-instances) -We already covered how to create component instances to the canvas from the **Components tab**. You can also duplicate or copy/paste instances directly onto the canvas. -With a main component or instance selected: +### Creating instances -- Press `Ctrl + D` or `Ctrl + C → Ctrl + V`. -- Hold down `Alt`, then drag to place an instance on the canvas. +To **add a component instance** to the canvas, you can: -#### Component instance properties +- Drag it from the **Components tab** to where you want to place it. +- Duplicate the existing instance on the canvas. -For a component instance, the **Component** section in the **right panel** will look like this: +See the video in the [Reusing components](#reusing-components) section. - +### Instance properties -#### Component state menu +When you select a component instance, the right panel shows an additional section that looks like this: -A dropdown menu displaying the current state of the component. When open, it shows all other components and UI kits available in the document. - -If you didn’t create any component states, this property will read **Default State**. - -#### Component states - -Select one of the presets to organize your components by type. Changing this for a component instance will affect its main component and vice versa. - -#### Detach from component - -Detach the instance from its main component or press `Ctrl + Alt + D` / `⌘ + ⌥ + B`. - -#### Reset instance size - -If you resized the instance, click this button to revert it to the size of the main component. - -#### Go to main component - -Redirects you to the instance's main component. - -#### Component type - -See the corresponding [main component property](#main-component-properties). - -Once you modify an instance, the button appears in this section, indicating that the instance has an override: - - - -Click it to **reset the override** and revert the instance back to the style of the main component. + -## Creating overrides +- **Component list**. A dropdown menu displaying the name of the component. When open, it shows all other components available in the document. By choosing items in the list you can [swap components](#swapping-components). +- **Component states**. Previews of all availalable [component states](#component-states). +- **Detach from component**. Use this button (or `Ctrl + Alt + D` / `⌘ + ⌥ + B`) to detach an instance from its component. Once detached, the instance will no longer reflect changes made to the original component. +- **Go to Component**. This button will bring you to the instance's main component. +- **Reset overrides**. Use this button to remove all [overrides](#overrides) and restore the instance to the component’s original appearance. +- **Component type**. This setting currently has no visible effect. + +## Overrides To reiterate, an override is any edit you make to a component instance. Let's go over them in detail. @@ -1315,11 +1345,11 @@ Click `▾` next to the title of a component instance in the Layer list to expan Some basic overrides you can make are changes to layer color, text, or image content. -Below, we have a simple example of a card component consisted of an image (an oval with an **Image** fill) and a labeled button. We make three types of overrides to the card, changing the **button color**, the **button label**, and the **image**. +Here’s a simple example of a card component made up of an image (an oval with an **Image** fill) and a labeled button. We applied three overrides: changed the **button color**, updated the **button label**, and replaced the **image**. -You can easily reset all of these overrides by pressing in the **Component** section, like in the demo above. +You can easily reset all of these overrides by pressing in the instance properties. Here’s a full list of layers and properties you can create overrides for: @@ -1330,6 +1360,8 @@ Here’s a full list of layers and properties you can create overrides for: - Tints - Hotspots + + ## Component-related shortcuts and menu options To recap, here’s a list of context menu options and shortcuts you can use to work with components, along with corresponding shortcuts, if available. @@ -1726,7 +1760,7 @@ With a single export operation, you can get multiple files of different formats | Format type | Supported formats | | ----------- | ---------------------------------- | -| Raster | `PNG`, `JPG`, `ICO`, `WEBP`, `GIF` | +| Raster | `PNG`, `JPG`, `ICO`, `WEBP`, `TIFF`, `BMP` | | Vector | `SVG`, `PDF` | You can save exported files **to your computer** and also [upload your layers](#cloud-export) to **Lunacy Cloud**, generating a shareable link right to the layer in the document. @@ -2034,6 +2068,50 @@ Contact us via our feedback form: **Long answer:** We realize this would speed up the development process, however, it would also slow us down in some ways, too. Sometimes, a small team can advance faster than a large community. We may reconsider in the future. +### How can I install Lunacy Beta on Flatpack + +You can install Lunacy either as a stable release or as a beta version via Flatpak. The beta version lets you try new features earlier, but only one version (stable or beta) can be installed at a time. + +Both versions share the same application ID: `com.icons8.Lunacy`. + +#### Installing Lunacy Beta (from scratch) + +1. Add the Flathub Beta repository (if not already added): + + ```bash + flatpak remote-add --if-not-exists flathub-beta https://flathub.org/beta-repo/flathub-beta.flatpakrepo + ``` +2. Install Lunacy Beta: + + ```bash + flatpak install flathub-beta com.icons8.Lunacy + ``` +#### Switching from Stable to Beta + +1. Uninstall the stable version: + + ```bash + flatpak uninstall com.icons8.Lunacy + ``` +2. Add the Flathub Beta repository (if not already added): + + ```bash + flatpak remote-add --if-not-exists flathub-beta https://flathub.org/beta-repo/flathub-beta.flatpakrepo + ``` +3. Install the beta version: + + ```bash + flatpak install flathub-beta com.icons8.Lunacy + ``` + +#### Running Lunacy + +To run Lunacy (both stable and beta), use the same command: + +```bash +flatpak run com.icons8.Lunacy +``` + ## Questions about features Questions about existing or upcoming Lunacy features. @@ -2635,7 +2713,8 @@ There are several types of layers in Lunacy: * Components and component instances * Icons * Hotspots -* Slices +* Slices +* [Sections](#sections) Follow the links above to learn how to work with specific layers in detail. In this section, we’ll go over the basics: how to create, edit, and organize layers on the canvas and the Layer list. @@ -3053,63 +3132,88 @@ You can adjust the individual resizing behavior for each layer in the **Constrai
Resizing auto layout elements -# Layer and text styles +## Sections + +Sections are a special layer type that helps you keep related objects together and organize your canvas. They work like visual containers for grouping content. + +With sections, you can: + +- Give them custom names for better navigation +- Set a fill color to distinguish different areas of your design +- Move sections across the canvas along with all their contents +- Nest sections inside one another to create a clear hierarchy + + + +### Working with sections + +- To create a section, click + on the toolbar or press `Shift+S`. +- To select a section, click its label at the top-left corner. +- Once selected, you can move or resize the section. +- All objects inside a section move along with it. + +# Styles Source: https://lunacy.docs.icons8.com/raw/layerstyles.md -Learn how to speed up your work with layer and text styles +Learn how to speed up your work with styles -Layer and text styles are sets of predefined properties (fills, borders, effects) that you can use to speed up your design workflow and ensure a consistent look throughout your projects. When you update a style, all associated layers automatically reflect the changes. +Styles are sets of predefined properties (fills, effects) that you can use to speed up your design workflow and ensure a consistent look throughout your projects. When you edit a style, all associated layers update automatically. -The only difference between layer and text styles is that the latter also include typography properties like font, size, line spacing, etc. +Lunacy supports the following style types: + +- **Color styles** — for fills and borders + +- **Effect styles** — for shadows and blurs + +- **Text styles** — for fonts, sizes, line spacing, and other text properties + +- **Layout grid styles** — for layout guides applied to frames You can manage and organize styles in the **Styles** tab. + + + ### Creating styles There are two ways of creating styles. -**Way 1.** Select a layer with the properties you're likely to reuse and save them as a style. +**Way 1.** + +1. Select a layer with the properties you're likely to reuse. +2. Go to the **Styles** tab and click `+` next to the type of style you're going to create. +3. Type the new new style name and press `Enter` or click anywhere over the canvas. **Way 2.** Click `+` in the **Styles** list and define all the required properties. - + + + ### Applying styles Select the required layer or several layers, then choose the style you want to apply from the right panel. -Optionally, you can apply styles using the left panel (watch the video above). + -### Modifying a layer style -There are two ways to modify a style. +### Modifying a style -**Way 1.** - -1. Switch to the **Styles** tab, then click the style you want to modify +1. Switch to the **Styles** tab, hover over the style you want to modify, then click . 2. In the displayed panel, make the required changes. 3. Close the panel to apply changes. -**Way 2.** -1. Select a layer using the style you want to modify. -2. Make the required changes in the right panel. When you are done, you will see an asterisk (*) next to the style name in the right panel. It indicates that changes have been made to the style. + - - - -3. Use one of the following options: - - * **Update Style** (): Saves the changes to the existing style. - * **Create New Layer Style** (): Saves the changes to a new style. - * **Reset Style** () : Discards all changes that you have made. ### Detaching a style Select the required layer and click the **Detach style** button shown below. - + The appearance of the layer remains the same, but it is no longer associated with the style and further changes to the style will not affect the layer. @@ -3118,7 +3222,7 @@ The appearance of the layer remains the same, but it is no longer associated wit It is a good practice to organize styles into groups similar to those shown in the figure below. - + To organize your styles into groups, consider the following format of style names: @@ -3325,6 +3429,104 @@ Here's how you can apply changes to a live webpage: In your browser, reload the page by pressing `Ctrl + F5`/ `⌘ ⌥ R` to make sure that any cached content is cleared. +# LLM Integration +Source: https://lunacy.docs.icons8.com/raw/mcp.md + +using Model Context Protocol (MCP) + +## What is MCP? + +The Model Context Protocol (MCP) is an open standard that enables AI assistants to securely connect with external data sources and tools. It provides a standardized way for AI models to access and interact with various applications, databases, and services while maintaining security and user control. + +MCP acts as a bridge between AI assistants like Claude and your local applications, allowing them to work together seamlessly. Instead of manually copying and pasting information between applications, MCP enables direct communication and data exchange. + +## How MCP Works in Lunacy + +Lunacy implements MCP through a local server that runs alongside your Lunacy application. This server provides secure access to your Lunacy projects, allowing AI assistants to: + +* Access information about selected objects in your designs +* Retrieve color variables from your design system +* Get details about components and their properties +* Access images and other design assets + +The MCP server launches automatically when enabled and runs locally on your machine, ensuring your design data remains secure and private. + +## Enabling MCP in Lunacy + +To start using MCP with Lunacy: + + +1. Open Lunacy +2. Navigate to the main menu +3. Select **AI → Model Context Protocol → MCP Server Enabled** +4. The MCP server will start running locally and be ready to accept connections + +## Connecting Claude to Lunacy's MCP Server + +To connect Claude Desktop to your Lunacy MCP server: + +### Step 1: Install Claude Desktop + +Download and install Claude Desktop from + +### Step 2: Get MCP Configuration + +In Lunacy, you have two options: + +**Option A: Full Configuration (Recommended for new setups)** + +* Go to **AI → Model Context Protocol → Copy MCP Servers File** +* This copies a complete JSON configuration file + +**Option B: Single Server Entry (For existing MCP setups)** + +* Go to **AI → Model Context Protocol → Copy MCP Server Entry** +* This copies just the Lunacy server configuration line + +### Step 3: Configure Claude Desktop + + +1. Open Claude Desktop +2. Open the Settings menu (press Ctrl+, on Windows or Cmd+, on macOS) +3. Navigate to the **Developer** tab +4. Click **Edit Config** - this will open your file manager with the `claude_desktop_config.json` file highlighted +5. Open the highlighted `claude_desktop_config.json` file in any text editor +6. If using Option A: Replace the entire file contents with the copied JSON configuration +7. If using Option B: Add the copied server entry to your existing `mcpServers` section, maintaining valid JSON structure +8. Save the file and restart Claude Desktop completely + +Once configured, Claude will be able to interact directly with your Lunacy projects and access design information in real-time. + +## Creative Use Cases + +The real power of MCP integration comes from combining Lunacy's design data with other MCP servers to create seamless, automated workflows: + +**AI-Powered Design-to-Code Pipeline** Select a complex dashboard layout in Lunacy and ask Claude to generate a complete React application with TypeScript, including component structure, state management, API integration points, and even mock data that matches your design specifications. Claude can analyze your color variables and component hierarchy to create a fully functional prototype. + +**Intelligent Design System Documentation** Combine Lunacy MCP with file system access to automatically generate comprehensive design system documentation. Claude can analyze your components, extract design patterns, document usage guidelines, and create markdown files with embedded design tokens and component examples - all while maintaining your existing folder structure. + +**Cross-Platform Design Consistency** Use multiple MCP servers to ensure design consistency across platforms. Claude can compare your Lunacy designs with existing mobile apps (via screenshots), web implementations (via web scraping), and documentation (via file system access) to identify inconsistencies and suggest improvements. + +**Automated Asset Optimization Workflow** Connect Lunacy with file system and image processing MCP servers. Claude can analyze your selected designs, export optimized assets in multiple formats, automatically organize them into proper folder structures, and even generate the corresponding CSS sprites or icon fonts. + +**Dynamic Content-Aware Design** Combine Lunacy data with database or API MCP servers to create designs that adapt to real content. Claude can analyze your layout components, fetch actual data from your systems, and suggest design modifications based on content length, image aspect ratios, or data complexity. + +**Smart Design Review and Feedback** Use Lunacy MCP with communication tools (Slack, email) and project management systems. Claude can analyze your selected designs, compare them against design guidelines, generate detailed review reports, and automatically distribute them to stakeholders with embedded design previews and actionable feedback. + +**Intelligent Brand Compliance Checking** Connect Lunacy with document analysis MCP servers to automatically verify brand guideline compliance. Claude can analyze your designs against brand documentation, check color usage, typography consistency, spacing rules, and generate compliance reports with specific recommendations. + +**Automated Handoff Documentation** Combine Lunacy data with development tools MCP servers to create comprehensive developer handoffs. Claude can generate technical specifications, component props documentation, animation guidelines, responsive behavior notes, and integration instructions - all tailored to your specific tech stack. + +## Benefits of MCP Integration + +* **Seamless Workflow**: No need to manually export or copy design information +* **Real-time Access**: Claude always works with your current project state +* **Enhanced Productivity**: Get instant analysis and suggestions for your designs +* **Secure Connection**: All data remains local and private +* **Context-Aware Assistance**: Claude understands your specific design context + +The MCP integration transforms how you work with AI assistance in your design process, making it more efficient and contextually relevant to your actual projects. + # Private Cloud Source: https://lunacy.docs.icons8.com/raw/private_cloud.md @@ -5336,7 +5538,7 @@ Below is a brief description of all available tools, which we will then go over | | **Text tool.** Add text layers to the document. Comes with an on-canvas text generation option.| `T` | | | **Pen tool.** Used for creating custom vectors or shapes.| `P` | | | **Image tool.** Use it for importing images. | `M` | -| | **GUI tools.** A set of basic interface element components from UI kits (buttons, checkboxes, radio buttons, and so on) that you can quickly add to your designs. | `B` — button
`D` — text input field
`F` — checkbox
`Y` — radio button
`J` — toggle
`W` — dropdown | +| | **GUI tool.** A set of basic interface element components from UI kits (buttons, checkboxes, radio buttons, and so on) that you can quickly add to your designs. | `B` — button
`D` — text input field
`F` — checkbox
`Y` — radio button
`J` — toggle
`W` — dropdown | | | **Icon tool.** Keeps recently used icons at hand. | `X` | | | **Comment tool.** Activate it to leave comments anywhere on the canvas (only available in cloud documents).| `C` | | | **Scale tool.** Proportionally change the size of the elements on the canvas. | `K` | diff --git a/docs/llms.txt b/docs/llms.txt index 64d1a6c..e9b510a 100644 --- a/docs/llms.txt +++ b/docs/llms.txt @@ -17,9 +17,10 @@ - [Images](https://lunacy.docs.icons8.com/raw/images.md): Optimize your work with images in Lunacy. - [Interface](https://lunacy.docs.icons8.com/raw/interface.md): Explore the Lunacy interface. - [Layers](https://lunacy.docs.icons8.com/raw/layers.md): Learn how to work with different types of layers in Lunacy. -- [Layer and text styles](https://lunacy.docs.icons8.com/raw/layerstyles.md): Learn how to speed up your work with layer and text styles. +- [Styles](https://lunacy.docs.icons8.com/raw/layerstyles.md): Learn how to speed up your work with styles. - [Built-in graphics](https://lunacy.docs.icons8.com/raw/libraries.md): How to make use of our built-in icons, photos, images and UI kits. - [Linked design](https://lunacy.docs.icons8.com/raw/linked_design.md): How to update live webpages directly from Lunacy. +- [LLM Integration](https://lunacy.docs.icons8.com/raw/mcp.md): using Model Context Protocol (MCP). - [Private Cloud](https://lunacy.docs.icons8.com/raw/private_cloud.md): How to collaborate in total privacy. - [Prototyping](https://lunacy.docs.icons8.com/raw/prototyping.md): Learn how to create interactive prototypes in Lunacy. - [Shared libraries](https://lunacy.docs.icons8.com/raw/sharedlibraries.md): How to reuse components and styles from other files. @@ -35,7 +36,6 @@ ## Optional - [Contacts](https://lunacy.docs.icons8.com/raw/contact.md): Reach out to us on any of our platforms. -- [Free format](https://lunacy.docs.icons8.com/raw/free-format.md): Details of the .free format for developers. - [Localization](https://lunacy.docs.icons8.com/raw/localization.md): Help us localize Lunacy to your language. - [Release History](https://lunacy.docs.icons8.com/raw/release-notes.md): New features and fixes for each version of Lunacy. - [Legacy Release History](https://lunacy.docs.icons8.com/raw/rn_before_v10.md): New features and fixes for each version of Lunacy. diff --git a/docs/raw/components.md b/docs/raw/components.md index 2019a88..182c6ed 100644 --- a/docs/raw/components.md +++ b/docs/raw/components.md @@ -9,19 +9,29 @@ The main advantage of using components is that you can edit multiple instances o +

Note: If a component has multiple states, any changes you make apply only to instances of the same state. Instances of other states will not be affected.

+ ## [Component basics](component-basics) These are the basic terms related to components and their functions: -* **Main component**. The original layer that you convert into a component. +* **Main component**. The original element that you convert into a component. * **Component instance**. You create a component **instance** any time you duplicate a main component. When you edit a main component, the changes apply to all of its instances at once. * **Override**. When you modify an instance, you create an **override**. The main component won't be affected, and if you edit it later, the changes won't apply to instances with overrides. -* **Component page**. A dedicated document page used for storing main components. Lunacy adds it automatically when you create a component. +* **Component page**. A dedicated document page used for storing main components. Lunacy adds it automatically. -* **Component state**. Components from the same category or subcategory are called **component states**. They define the different styles for one component. +
+

Note: Starting from v.12, the Component page appears only in two cases:

+
    +
  • When you copy a component from another file to a local file
    • +
  • When you drop on the canvas an element from the GUI tool (button, checkbox, etc.)
    • +
+
+ +* **Component state**. A component can have different variants (Default, Hovered, Pressed, etc.). These variants are called [component states](#component-states). * **Nested components**. You can nest several components in a more complex component. This gives you the most freedom and flexibility in editing your designs, and it’s an even more powerful feature when coupled with nested auto layouts. @@ -29,12 +39,12 @@ These are the basic terms related to components and their functions: To **create a component**: -1. Select the layer you want to convert into a component. -2. Click `+` in the **Component** section of the right panel or press `Ctrl + Alt + K` / `⌘ + ⌥ + K`. +1. Select the element you want to convert into a component. +2. Click in the context toolbar at the top of the canvas or press `Ctrl + Alt + K` / `⌘ + ⌥ + K`. - + -You can also select a layer and click in the context toolbar at the top of the canvas or select the **Create component** option on the context menu. + + #### Components and instances in the Layer list - + -Main components are bold and colored pink () in the Layer list, and there’s a component symbol () in front of their name. + +Main components are bold and colored pink in the Layer list, and there’s a component symbol () in front of their name. + +Сomponents with more than one [state](#component-states) come with a dashed border around the symbol. Component instance names aren’t bold but have the instance symbol () and the same pink color. When they’re selected, their properties and options appear in the **Component** section of the right panel. @@ -60,11 +75,14 @@ Component instance names aren’t bold but have the instance symbol ( +- Drag it from the **Components tab** to where you want to place it. +- Duplicate the existing instance on the canvas. -Right-click a component in the left panel to bring up the context menu with these options: + + +Right-click a component in the **Components tab** to bring up the context menu with these options: - Rename component - Edit component @@ -74,7 +92,13 @@ Right-click a component in the left panel to bring up the context menu with thes - Expand all - Collapse all -

Note: If you used any components from built-in or manually created UI kits, they will also appear in the Components tab.

+ + + +

Note: If you created any elements using the GUI tool, they will also appear in the Components tab in the group named Web.

+ + + + ## [Component states](#component-states) -You can create several **states** for a component and switch between them as needed in the **right panel**. +You can create multiple states for a component and switch between them as needed. States let you define variations like *Default*, *Hover*, or *Pressed*. To **create a component state**: -1. Select a component instance. -2. Click `+` in the **Component** section of the **right panel** or press `Ctrl + Alt + P` / `⌘ + ⌥ + P`. -3. Adjust your component for the new state and name it. -4. Click on any empty area on the canvas. +1. Select a component. +2. Click in the context tool bar or press `Ctrl + Alt + P` / `⌘ + ⌥ + P`. A dashed frame will appear around the component, and the new state will be added below the original. +3. Make the required changes to the new state. +4. To create additional states, select the original component or any existing state and click `+` again. - -A new component will appear near the default main component, defining the new component state. +Lunacy automatically assigns names to states (Default, Hover, Pressed, etc.). -Lunacy also changes the name of components when you create new states, automatically placing them into [categories](#organizing-components). You can edit categories anytime in the **Components tab**. +To **rename a state**: -New component states for a distinct component will be displayed in the right panel as you select the component’s instances. +1. Select the state. +2. Press F2 and type the new state name after the slash (for example, `Button / Hover` > `Button / Disabled`). + +**Alternative workflow** + +You can also create a new component state from any instance on the canvas. + +See both methods in the video below. + + To **switch through component states**: 1. Select a component instance. 2. Choose the new component state in the **right panel**. - + -

Note: Switching component states doesn’t affect overrides. This means that if you change the component state for an instance with overrides, the overrides you created will stay unchanged.

+

Note: Switching component states doesn’t affect overrides.

+ + -Delete main components from the **Components tab** (using the [context menu](#components-tab-context-menu)) or the **Components page** (simply delete the component frame). -When you delete a component, all of its instances turn into frames. ## [Editing components](#editing-components) -You can **edit a main component**: +You can **edit a component**: +- Right on the canvas like any other design element. This is the most straightforward and convenient way to edit components. - In the **Component editor**. -- Directly in the **Components page**. +- On the **Components page**. #### Making edits in the Component editor 1. Select a component instance and press `Enter` or choose **Edit component** in the context menu. -2. The main component will appear over the selected instance, while the rest of the canvas will be dimmed. The contents of the component will appear in the **Layer list**. -3. Edit the component. -4. Click on the context toolbar, click anywhere over the dimmed area, or press `Esc` to exit the component editor. +2. You'll see a pink frame around the canvas and the contents of the component will appear in the **Layer list**. +3. Use the right panel to make the required changes. +4. Click anywhere over the canvas, or press `Esc` to exit the component editor. - + -#### Making edits in the Components page +#### Making edits on the Components page -1. Right-click on an instance and select **Go to Main Component** in the **right panel** or manually switch to the **Components page**. +
+

Note: Starting from v.12, the Component page appears only in two cases:

+
    +
  • When you copy a component from another file to a local file
    • +
  • When you drop on the canvas an element from the GUI tool (button, checkbox, etc.)
    • +
+
+ +1. Right-click on an instance and select **Go to Component** in the **right panel** or manually switch to the **Components page**. 2. Edit the required component. 3. Once you’re done: - - If you used the **Go to Main Component** option, click the **Back to instance** button at the top left corner of the canvas. + - If you used the **Go to Component** option, click the **Back to instance** button at the top left corner of the canvas. - If you manually opened the Components page, simply switch back to the previous page to continue working with the document. - - ## [Swapping components](#swapping-components) -Use the **Components tab** or the **right panel** swap between instances from entirely different components. Simply select an instance you want to replace and use one of the following methods. +You can swap between instances of different components. Simply select an instance you want to replace and use one of the following methods. **Method 1**: 1. Go to the **Components tab**. 2. Find the required component and click next to it: - + **Method 2**: -1. Open the **component state menu** in the **Component** section of the right panel. -2. Select the required category and component state. - +1. In the right panel, open the Component list. +2. Select the required component (and its state). + +The video below shows both these merthods. + + + + + +#### Deleting components + +Delete components from the **Components tab** (using the [context menu](#components-tab-context-menu)) or the **Components page** (simply delete the component frame). + +When you delete a component, all of its instances turn into frames. ## [Managing instances](#managing-instances) -We already covered how to create component instances to the canvas from the **Components tab**. You can also duplicate or copy/paste instances directly onto the canvas. -With a main component or instance selected: +### Creating instances -- Press `Ctrl + D` or `Ctrl + C → Ctrl + V`. -- Hold down `Alt`, then drag to place an instance on the canvas. +To **add a component instance** to the canvas, you can: -#### Component instance properties +- Drag it from the **Components tab** to where you want to place it. +- Duplicate the existing instance on the canvas. -For a component instance, the **Component** section in the **right panel** will look like this: +See the video in the [Reusing components](#reusing-components) section. - +### Instance properties -#### Component state menu +When you select a component instance, the right panel shows an additional section that looks like this: -A dropdown menu displaying the current state of the component. When open, it shows all other components and UI kits available in the document. - -If you didn’t create any component states, this property will read **Default State**. - -#### Component states - -Select one of the presets to organize your components by type. Changing this for a component instance will affect its main component and vice versa. - -#### Detach from component - -Detach the instance from its main component or press `Ctrl + Alt + D` / `⌘ + ⌥ + B`. - -#### Reset instance size - -If you resized the instance, click this button to revert it to the size of the main component. - -#### Go to main component - -Redirects you to the instance's main component. - -#### Component type - -See the corresponding [main component property](#main-component-properties). - -Once you modify an instance, the button appears in this section, indicating that the instance has an override: - - - -Click it to **reset the override** and revert the instance back to the style of the main component. + -## Creating overrides +- **Component list**. A dropdown menu displaying the name of the component. When open, it shows all other components available in the document. By choosing items in the list you can [swap components](#swapping-components). +- **Component states**. Previews of all availalable [component states](#component-states). +- **Detach from component**. Use this button (or `Ctrl + Alt + D` / `⌘ + ⌥ + B`) to detach an instance from its component. Once detached, the instance will no longer reflect changes made to the original component. +- **Go to Component**. This button will bring you to the instance's main component. +- **Reset overrides**. Use this button to remove all [overrides](#overrides) and restore the instance to the component’s original appearance. +- **Component type**. This setting currently has no visible effect. + +## Overrides To reiterate, an override is any edit you make to a component instance. Let's go over them in detail. @@ -271,11 +301,11 @@ Click `▾` next to the title of a component instance in the Layer list to expan Some basic overrides you can make are changes to layer color, text, or image content. -Below, we have a simple example of a card component consisted of an image (an oval with an **Image** fill) and a labeled button. We make three types of overrides to the card, changing the **button color**, the **button label**, and the **image**. +Here’s a simple example of a card component made up of an image (an oval with an **Image** fill) and a labeled button. We applied three overrides: changed the **button color**, updated the **button label**, and replaced the **image**. -You can easily reset all of these overrides by pressing in the **Component** section, like in the demo above. +You can easily reset all of these overrides by pressing in the instance properties. Here’s a full list of layers and properties you can create overrides for: @@ -286,6 +316,8 @@ Here’s a full list of layers and properties you can create overrides for: - Tints - Hotspots + + ## Component-related shortcuts and menu options To recap, here’s a list of context menu options and shortcuts you can use to work with components, along with corresponding shortcuts, if available. diff --git a/docs/raw/export.md b/docs/raw/export.md index c7f181e..62c683b 100644 --- a/docs/raw/export.md +++ b/docs/raw/export.md @@ -23,7 +23,7 @@ With a single export operation, you can get multiple files of different formats | Format type | Supported formats | | ----------- | ---------------------------------- | -| Raster | `PNG`, `JPG`, `ICO`, `WEBP`, `GIF` | +| Raster | `PNG`, `JPG`, `ICO`, `WEBP`, `TIFF`, `BMP` | | Vector | `SVG`, `PDF` | You can save exported files **to your computer** and also [upload your layers](#cloud-export) to **Lunacy Cloud**, generating a shareable link right to the layer in the document. diff --git a/docs/raw/faq.md b/docs/raw/faq.md index 4273214..e40589c 100644 --- a/docs/raw/faq.md +++ b/docs/raw/faq.md @@ -74,6 +74,50 @@ Contact us via our feedback form: **Long answer:** We realize this would speed up the development process, however, it would also slow us down in some ways, too. Sometimes, a small team can advance faster than a large community. We may reconsider in the future. +### How can I install Lunacy Beta on Flatpack + +You can install Lunacy either as a stable release or as a beta version via Flatpak. The beta version lets you try new features earlier, but only one version (stable or beta) can be installed at a time. + +Both versions share the same application ID: `com.icons8.Lunacy`. + +#### Installing Lunacy Beta (from scratch) + +1. Add the Flathub Beta repository (if not already added): + + ```bash + flatpak remote-add --if-not-exists flathub-beta https://flathub.org/beta-repo/flathub-beta.flatpakrepo + ``` +2. Install Lunacy Beta: + + ```bash + flatpak install flathub-beta com.icons8.Lunacy + ``` +#### Switching from Stable to Beta + +1. Uninstall the stable version: + + ```bash + flatpak uninstall com.icons8.Lunacy + ``` +2. Add the Flathub Beta repository (if not already added): + + ```bash + flatpak remote-add --if-not-exists flathub-beta https://flathub.org/beta-repo/flathub-beta.flatpakrepo + ``` +3. Install the beta version: + + ```bash + flatpak install flathub-beta com.icons8.Lunacy + ``` + +#### Running Lunacy + +To run Lunacy (both stable and beta), use the same command: + +```bash +flatpak run com.icons8.Lunacy +``` + ## Questions about features Questions about existing or upcoming Lunacy features. diff --git a/docs/raw/free-format.md b/docs/raw/free-format.md index 5d492f8..0bf623a 100644 --- a/docs/raw/free-format.md +++ b/docs/raw/free-format.md @@ -1,7 +1,4 @@ -# Free format - -> Details of the .free format for developers - +# Free Format FREE is an open source format for vector graphic files designed to be compact, human-readable, back-compatible, and optimized for multithreaded parsing. @@ -100,7 +97,7 @@ We didn't rush the development and release of this format. We worked on it for a ## Key differences from the Sketch format * All fields have short, understandable names. For example, ``"hidden": true``. -* The object type field is given a concise name, ``"_t,"`` and is only specified where necessary, which is in just three places: layer type, grid layout type, and layout type. +* The object type field is given a concise name, ``"_t,"`` and is only specified where necessary, which is in just three places: layer type, layout guide type, and layout type. * If a value is default, it is simply omitted from the file, even for complex objects. * All GUIDs are written as ShortGUIDs, which are the base64 serialization of the byte data of the GUID. They retain all the GUID data but occupy 39% less space: @@ -282,15 +279,15 @@ Assume that we have a red rectangle on the canvas. In Sketch, it would result in } ``` -In Lunacy's FREE format the same will take only **110 characters**. A 15-fold difference. +In Lunacy's FREE format the same will take only **91 characters**. A 18-fold difference. ```json { "_t": "RECT", "id": "IqTyX1bJek-eScKV2wCk2Q", - "transform": [1887,-751], + "pos": [1887,-751], "size": [431,428], - "fills": [{"color":"F00"}] + "fill": "F00" } ``` ## Plans @@ -306,20 +303,130 @@ Free format is NULL-free, NaN-free and Infinity-free - if any of this values are * byte - 8-bit unsigned integer * bool - Boolean (true or false) value * string - text as a sequence of UTF-8 code units -* GUID - globally unique identifier, with base64 encryption +* GUID - globally unique identifier, with base64 encryption, Examples: `R1o2w3_4D5i6n7g8_000AA`, `N1a2m3-4C5o6n7t8_910AA`, `reY4TrsLHUeFk-E0CtyS5A`. ## Layers +### Layer +Base class for any layer on a canvas. + +* _t: [string](#string) = `COMPONENT` - object type. Required to be first. +* Id: [GUID](#GUID) - unique layer identifier. +* Name: [string](#string) - defines layer name. +* BoolOp: [BoolOp](#BoolOp) = `Union` - defines the boolean operation applied to the layer. +* Locked: [bool](#bool) = `false` - defines whether the layer is locked for editing. +* Hidden: [bool](#bool) = `false` - defines whether the layer is hidden. +* IsTemplate: [bool](#bool) = `false` - defines whether tha layer is marked as a template. +* Expand: [bool](#bool) = `false` - defines whether the layer is expanded in Layer List. +* Trim: [bool](#bool) = `false` - when enabled, trims empty pixels in exported images. +* Export: [ExportOption[]](#ExportOption) - export options of the layer. +* Constraints: [string](#string) = `LTWH` - defines constraint settings of the layer. String with chars where every char means a flag: L - left, T - top, R - right, B - bottom, W - fix width, H - fix height. +* Transform: [Matrix](#Matrix) = `[1,0,0,0,1,0]` - position, rotation, skew and flips of an object, stored in a single 3x2 matrix, as 6 floats array. +* Pos: [Point](#Point) = `[0,0]` - defines position. Overrides Transform field. +* Size: [Size](#Size) = `[100,100]` - defines the layer size. +* Frame: [Rect](#Rect) = `[0,0,100,100]` - defines position and size with one field. Overrides Transform, Pos and Size fields. +* LockAspect: [bool](#bool) = `false` - defines whether the layer's aspect ratio should remain unchanged upon resizing. +* Mask: [bool](#bool) = `false` - defines whether the layer is used as a mask. +* BreakMask: [bool](#bool) = `false` - defines if the layer is set to ignore the mask. +* MaskType: [MaskType](#MaskType) = `Vector` - type of the Mask - Vector, Alpha or Luminance. +* KeepScroll: [bool](#bool) = `false` - if the *Keep scroll position* option is enabled (prototyping). +* ScrollBehavior: [FlowScrollBehavior](#FlowScrollBehavior) = `Scroll` - defines scroll behavior (prototyping). +* ScrollOverflow: [FlowScrollOverflow](#FlowScrollOverflow) = `NoScrolling` - defines scroll overflow (prototyping). +* Flows: [Flow[]](#Flow) - defines flows (prototyping). +* MinWidth: [float](#float) = `0` - defines the minimum layer width (auto layout). +* MinHeight: [float](#float) = `0` - defines the minimum layer height (auto layout). +* MaxWidth: [float](#float) = `0` - defines the maximum layer width (auto layout). +* MaxHeight: [float](#float) = `0` - defines the maximum layer height (auto layout). +* StretchWidth: [bool](#bool) = `false` - determines if the layer should stretch width (auto layout). +* StretchHeight: [bool](#bool) = `false` - determines whether a layer should stretch height (auto layout). +* AbsolutePos: [bool](#bool) = `false` - enables absolute position for the layer (auto layout). +* Custom: [[string,string]](#[string,string) - key/Value map for custom properties of a layer. Similar to UserInfo is Sketch and PluginData in Figma. +* Themes: [ThemeSelection[]](#ThemeSelection) - variable themes selections. +* Binds: [Bind[]](#Bind) - binds of variables to target fields like: fontSize, cornerRadius, thickness, etc. +* FillsId: [GUID](#GUID) - color style id for fills. +* BordersId: [GUID](#GUID) - color style id for borders. +* EffectsId: [GUID](#GUID) - effect style id. +* Opacity: [float](#float) = `1` - opacity value. +* BlendMode: [BlendMode](#BlendMode) = `Normal` - blend mode. +* Winding: [PathFillType](#PathFillType) = `EvenOdd` - defines the filling options for overlapping paths. +* Fill: [Color](#Color) = `00000000` - if there is a single color fill - use this, otherwise use Fills field. +* Border: [Color](#Color) = `00000000` - if there is a single color border - use this, otherwise use Borders field. +* Fills: [Fill[]](#Fill) - list of fills. +* Borders: [Fill[]](#Fill) - list of borders. +* Thickness: [float](#float) = `0` - defines border thickness. +* CustomThickness: [Thickness](#Thickness) = `[0,0,0,0]` - defines custom border thickness. +* LinePos: [LinePosition](#LinePosition) = `Center` - defines border position. +* LineCap: [LineCap](#LineCap) = `Butt` - defines the shape of line caps. +* LineJoin: [LineJoin](#LineJoin) = `Miter` - defines the appearance of line folds. +* Dash: [float[]](#float) - defines the size of dashes. +* Shadows: [ShadowEffect[]](#ShadowEffect) - list of shadows. +* InnerShadows: [ShadowEffect[]](#ShadowEffect) - list of inner shadows. +* Blur: [BlurEffect](#BlurEffect) - information about blurs. +* ImageFilters: [ImageFilters](#ImageFilters) - filters applied to an image (hue, saturartion, etc.), if any. +* CornerRadius: [float[]](#float) = `float[4]` - sets the corner radius of the frame/instance/component/states/section. +* SmoothCorners: [bool](#bool) = `false` - enables smooth rounded corners like in iOS interfaces. + +
+Lunacy specific + +* PhotoId: [string](#string) - identifier of a photo from the Lunacy gallery. +* IllustrationId: [string](#string) - identifier of an illustraion from the Lunacy gallery. +* IconId: [string](#string) - identifier of an icon from the Lunacy gallery. +* AvatarId: [string](#string) - identifier of a Lunacy-generated avatar. +* Data: [DataInfo](#DataInfo) - information about auto generated texts. +* Upscaled: [bool](#bool) = `false` - if the image has been upscaled in Lunacy. +* BackgroundRemove: [BackgroundRemovalState](#BackgroundRemovalState) = `None` - background removal procedure info. +
+ +### Frame +A frame is a special type of layers that serves as a container for other layers or layer groups. Frames are a must for auto-layout and prototypes. + +Has all properties of [`Layer`](#Layer), plus: + +* _t: [string](#string) = `FRAME` - object type. +* ClipContent: [bool](#bool) = `true` - when enabled, hides the content outside the frame boundaries. +* FlowHome: [bool](#bool) = `false` - sets the frame as a prototype starting point. +* Viewport: [PrototypeViewport](#PrototypeViewport) - defines the area that should be displayed on a prototype, when the frame is resized to ensure scrolling effect. +* ResizesContent: [bool](#bool) = `false` - enables adjusting and resizing the frame content as the frame is resized. +* AutoLayout: [AutoLayout](#AutoLayout) - auto Layout Properties +* Layouts: [LayoutGuideBase[]](#LayoutGuideBase) - grid, Row and Column layouts of the frame. +* GridsId: [GUID](#GUID) - grid Layout style id. +* Rulers: [Rulers](#Rulers) - rulers and guidelines info. +* Layers: [Layer[]](#Layer) - list of layers on the frame. + +### Path +A vector path determines the outline and form of a vector object. A path is made up of points and segments. + +Has all properties of [`Layer`](#Layer), plus: + +* _t: [string](#string) = `PATH` - object type. +* StartMarker: [Arrowhead](#Arrowhead) = `None` - determines the appearance of the tail of an open path drawn with the Line, Arrow, or Pen/Pencil tool. +* EndMarker: [Arrowhead](#Arrowhead) = `None` - determines the appearance of the head of an open path drawn with the Line, Arrow, or Pen/Pencil tool. +* MiterLimit: [float](#float) = `10` - limit on the ratio of the miter length to the stroke-width used to draw a miter joint. When the limit is exceeded, the joint is converted from miter to beveled. +* Edited: [bool](#bool) = `false` - if the shape is edited in the path editor. +* Open: [bool](#bool) = `false` - indicates whether the path is open. +* Points: [Vertex[]](#Vertex) - list of path's points. +* PathData: [string](#string) - optional Field. SVG path data. Overrides Points. Only for LLM and Plugins. + ### Component -A component is a reusable groups of layers. +A component is a reusable frame of layers. Has all properties of [`Frame`](#Frame), plus: * _t: [string](#string) = `COMPONENT` - object type. * ComponentId: [GUID](#GUID) - unique component identifier. -* Predefined: [bool](#bool) = `False` - indicates that the component belongs to the Lunacy default component library (see the Component Tool on the Toolbar) +* Predefined: [bool](#bool) = `false` - indicates that the component belongs to the Lunacy default component library (see the Component Tool on the Toolbar) * ComponentType: [ComponentType](#ComponentType) = `None` - reserved for future use. Will be used for component filters. * FigmaId: [string](#string) - unique Figma Component Id. Used to connect shared libraries and documents imported from figma. +* Properties: [ComponentPropertyBase[]](#ComponentPropertyBase) - component properties. +* States: [StateBind[]](#StateBind) - component states definition values. + +### Line +A line is a shape drawn on the canvas with the Line tool. + +Has all properties of [`Path`](#Path), plus: + +* _t: [string](#string) = `LINE` - object type. ### Oval An oval is a shape drawn on the canvas with the Oval tool. @@ -345,7 +452,14 @@ A rectangle is a shape drawn on the canvas with the Rectangle tool. Has all properties of [`Path`](#Path), plus: * _t: [string](#string) = `RECT` - object type. -* SmoothCorners: [bool](#bool) = `False` - if the smooth corners option is enabled. Works only if the rectangle is not edited. +* SmoothCorners: [bool](#bool) = `false` - if the smooth corners option is enabled. Works only if the rectangle is not edited. + +### Slot +Slot inside component. + +Has all properties of [`Frame`](#Frame), plus: + +* _t: [string](#string) = `SLOT` ### Star A star is a shape drawn on the canvas with the Star tool. @@ -362,6 +476,7 @@ Set of a states of the component. Has all properties of [`Frame`](#Frame), plus: * _t: [string](#string) = `STATES` +* Properties: [ComponentPropertyBase[]](#ComponentPropertyBase) - component properties of states. ### Triangle A triangle is a shape drawn on the canvas with the Triangle tool. @@ -373,176 +488,347 @@ Has all properties of [`Path`](#Path), plus:
Sketch compatibility -* Equilateral: [bool](#bool) = `False` - if the triangle is equilateral. +* Equilateral: [bool](#bool) = `false` - if the triangle is equilateral.
-### Frame -A frame is a special type of layers that serves as a container for other layers or layer groups. Frames are a must for prototypes. +### Connector +Connectors are lines and arrows used for annotations. -Has all properties of [`Styled`](#Styled), plus: +Has all properties of [`Layer`](#Layer), plus: -* _t: [string](#string) = `FRAME` - object type. -* ClipContent: [bool](#bool) = `False` - when enabled, hides the content outside the frame boundaries. -* FlowHome: [bool](#bool) = `False` - sets the frame as a prototype starting point. -* Viewport: [PrototypeViewport](#PrototypeViewport) - defines the area that should be displayed on a prototype, when the frame is resized to ensure scrolling effect. -* ResizesContent: [bool](#bool) = `False` - enables adjusting and resizing the frame content as the frame is resized. -* Layouts: [LayoutContainerBase[]](#LayoutContainerBase) - grid, Row and Column layouts of the frame. -* Rulers: [Rulers](#Rulers) - rulers and guidelines info. -* Layers: [Layer[]](#Layer) - list of layers on the frame. +* _t: [string](#string) = `CONNECTOR` - object type. +* Start: [GUID?](#GUID) - tail Layer Id +* End: [GUID?](#GUID) - head Layer Id +* StartPos: [Point](#Point) = `[0,0]` - normalized position in the tail layer. From 0 to 1. +* EndPos: [Point](#Point) = `[0,0]` - normalized position in the head layer. From 0 to 1. +* StartMarker: [Arrowhead](#Arrowhead) = `None` - determines the appearance of the tail. +* EndMarker: [Arrowhead](#Arrowhead) = `None` - determines the appearance of the head. +* MiterLimit: [float](#float) = `10` - limit on the ratio of the miter length to the stroke-width used to draw a miter joint. When the limit is exceeded, the joint is converted from miter to beveled. ### Group A layer group is two or more layers unified into a single entity that can be manipulated, organized, and treated as a single layer. -Has all properties of [`Styled`](#Styled), plus: +Has all properties of [`Layer`](#Layer), plus: * _t: [string](#string) = `GROUP` - object type. -* SkipSelect: [bool](#bool) = `False` - when enabled, users can select group items without first selecting the group. +* SkipSelect: [bool](#bool) = `false` - when enabled, users can select group items without first selecting the group. * Layers: [Layer[]](#Layer) - list of layers within the group.
Sketch compatibility -* SkipConstraints: [bool](#bool) = `False` - serves for constraints compatibility with Sketch. If the file is imported from the Sketch format, the parameter should be set to false to handle constraints properly. +* SkipConstraints: [bool](#bool) = `false` - serves for constraints compatibility with Sketch. If the file is imported from the Sketch format, the parameter should be set to false to handle constraints properly.
### Instance -An instance is a copy of the main component. With instances, you can reuse the same design element in multiple places in your project while retaining a connection to the main component. +An instance is a linked copy of the component. With instances, you can reuse the same design element in multiple places in your project while retaining a connection to the component. -Has all properties of [`Styled`](#Styled), plus: +Has all properties of [`Layer`](#Layer), plus: * _t: [string](#string) = `INSTANCE` - object type. * Scale: [float](#float) = `0` - scale of the instance. * ComponentId: [GUID](#GUID) - unique component identifier. +* AutoLayout: [AutoLayout](#AutoLayout) - auto Layout Properties * Overrides: [Override[]](#Override) - defines the overrides applied to the instance. -### Path -A vector path determines the outline and form of a vector object. A path is made up of points and segments. - -Has all properties of [`Styled`](#Styled), plus: - -* _t: [string](#string) = `PATH` - object type. -* Edited: [bool](#bool) = `False` - if the shape is edited in the path editor. -* Open: [bool](#bool) = `False` - indicates whether the path is open. -* Points: [Vertex[]](#Vertex) - list of path's points. - ### Section -Root group of layers. Can be a child of a page or another section. -Does not support rotation, flips, effects. +Root group of layers. Can be a child of a page or another section. Does not support rotation, flips, effects. -Has all properties of [`Styled`](#Styled), plus: +Has all properties of [`Layer`](#Layer), plus: * _t: [string](#string) = `SECTION` * Layers: [Layer[]](#Layer) - list of layers within the section. ### Shape -A shape is a rectangle, oval, polygon, triangle, or star drawn with the respective shape tool. You can draw a triangle, rectangle, etc. with the Pen tool, but they won't be treated as shapes. +Group of path's -Has all properties of [`Styled`](#Styled), plus: +Has all properties of [`Layer`](#Layer), plus: * _t: [string](#string) = `SHAPE` - object type. +* StartMarker: [Arrowhead](#Arrowhead) = `None` - determines the appearance of the tail of an open path drawn with the Line, Arrow, or Pen/Pencil tool. +* EndMarker: [Arrowhead](#Arrowhead) = `None` - determines the appearance of the head of an open path drawn with the Line, Arrow, or Pen/Pencil tool. +* MiterLimit: [float](#float) = `10` - limit on the ratio of the miter length to the stroke-width used to draw a miter joint. When the limit is exceeded, the joint is converted from miter to beveled. * Layers: [Layer[]](#Layer) - list of layers.
Sketch compatibility -* SkipConstraints: [bool](#bool) = `False` - serves for constraints compatibility with Sketch. If the file is imported from the Sketch format, the parameter should be set to false to handle constraints properly. +* SkipConstraints: [bool](#bool) = `false` - serves for constraints compatibility with Sketch. If the file is imported from the Sketch format, the parameter should be set to false to handle constraints properly.
-### Text -Text is a block or line of text on the canvas. - -Has all properties of [`Styled`](#Styled), plus: - -* _t: [string](#string) = `TEXT` - object type. -* text: [string](#string) - content of the text layer. -* TextStyle: [TextStyle](#TextStyle) - style applied to the text. -* Inlines: [InlineStyle[]](#InlineStyle) - styling options applied to the text within a text block. -* Behavior: [TextBehavior](#TextBehavior) = `Flexible` - behavior of the text layer size on text value change: flexible, fixed-width, or fixed. -* ClipContent: [bool](#bool) = `True` - valid for files imported from Figma. Defines whether to truncate text content. -* Truncate: [bool](#bool) = `False` - trim text with triple dots in the end if content overlaps fixed layer size bounds. -* MaxLines: [byte](#byte) = `0` - count of lines allowed. If the limit is exceeded, the text will be truncated. -* DrawOnPath: [bool](#bool) = `False` - defines whether text draws on the underlying path. -* Warp: [bool](#bool) = `False` - defines whether text warps when drawn on the underlying path. - ### Slice A slice is a special type of layers used for exporting certaing parts of designs. Has all properties of [`Layer`](#Layer), plus: * _t: [string](#string) = `SLICE` - object type. -* HasBackground: [bool](#bool) = `False` - defines whether the slice includes background. +* HasBackground: [bool](#bool) = `false` - defines whether the slice includes background. * Background: [Color](#Color) = `00000000` - defines the background color. * BackgroundId: [GUID?](#GUID) - unique color variable ID. -### Styled -A styled layer is a layer that has layer styling options. +### Text +Text is a block or line of text on the canvas. Has all properties of [`Layer`](#Layer), plus: -* StyleId: [GUID](#GUID) - unique style identifier. -* MiterLimit: [float](#float) = `10` - limit on the ratio of the miter length to the stroke-width used to draw a miter joint. When the limit is exceeded, the joint is converted from miter to beveled. -* Opacity: [float](#float) = `1` - opacity value. -* BlendMode: [BlendMode](#BlendMode) = `Normal` - blend mode. -* StartMarker: [Arrowhead](#Arrowhead) = `None` - determines the appearance of the tail of an open path drawn with the Line, Arrow, or Pen/Pencil tool. -* EndMarker: [Arrowhead](#Arrowhead) = `None` - determines the appearance of the head of an open path drawn with the Line, Arrow, or Pen/Pencil tool. -* Winding: [PathFillType](#PathFillType) = `EvenOdd` - defines the filling options for overlapping paths. -* Fills: [Fill[]](#Fill) - list of fills. -* Borders: [Border[]](#Border) - list of borders. -* Shadows: [ShadowEffect[]](#ShadowEffect) - list of shadows. -* InnerShadows: [ShadowEffect[]](#ShadowEffect) - list of inner shadows. -* Blur: [BlurEffect](#BlurEffect) - information about blurs. -* BorderOptions: [BorderOptions](#BorderOptions) - information about border options. -* ImageFilters: [ImageFilters](#ImageFilters) - filters applied to an image (hue, saturartion, etc.), if any. -* CornerRadius: [float[]](#float) = `float[4]` - sets the corner radius of the frame/instance/component/states/section. -* SmoothCorners: [bool](#bool) = `False` - enables smooth rounded corners like in iOS interfaces. +* _t: [string](#string) = `TEXT` - object type. +* text: [string](#string) - content of the text layer. +* Font: [string](#string) = `Inter-Regular` - text font. +* FontSize: [float](#float) = `12` - text size. +* ParagraphSpacing: [float](#float) = `0` - paragraph spacing. +* Kerning: [float](#float) = `0` - letter spacing. +* BaselineOffset: [float](#float) = `0` - text offset from the baseline. +* LineHeight: [float?](#float) - line spacing. +* Casing: [CharacterCasing](#CharacterCasing) = `Normal` - character case. +* Align: [TextHorizontalAlignment](#TextHorizontalAlignment) = `Left` - horizontal alignment applied to the text. +* Valign: [TextVerticalAlignment](#TextVerticalAlignment) = `Top` - vertical alignment applied to the text. +* List: [ListMarkerType](#ListMarkerType) = `None` - list type: numbered, bulleted, none. +* Rtl: [bool](#bool) = `false` - if the text is RTL. +* Underline: [bool](#bool) = `false` - if the text is underlined. +* Strikethrough: [bool](#bool) = `false` - if the strikethrough option is applied to the text. +* BaselinePos: [BaselinePosition](#BaselinePosition) = `Normal` - text position against the baseline. +* Inlines: [InlineStyle[]](#InlineStyle) - styling options applied to the text within a text block. +* Behavior: [TextBehavior](#TextBehavior) = `Flexible` - behavior of the text layer size on text value change: flexible, fixed-width, or fixed. +* ClipContent: [bool](#bool) = `true` - valid for files imported from Figma. Defines whether to truncate text content. +* Truncate: [bool](#bool) = `false` - trim text with triple dots in the end if content overlaps fixed layer size bounds. +* MaxLines: [byte](#byte) = `0` - count of lines allowed. If the limit is exceeded, the text will be truncated. +* DrawOnPath: [bool](#bool) = `false` - defines whether text draws on the underlying path. +* Warp: [bool](#bool) = `false` - defines whether text warps when drawn on the underlying path. +* VerticalTrim: [bool](#bool) = `false` - removes extra space on top and bottom of the text layer. +* TextStyleId: [GUID](#GUID) - text style id. -### Layer -A layer is any ungrouped element available on the canvas. +### BoolVariable +Variable with a boolean value. -* _t: [string](#string) = `COMPONENT` - object type. -* Id: [GUID](#GUID) - unique layer identifier. -* Name: [string](#string) - defines layer name. -* NameIsFixed: [bool](#bool) = `False` - name can be auto-generated or user-specified. User-specified fixed names will not be renamed after some operations. -* BooleanOp: [BoolOp](#BoolOp) = `Union` - defines the boolean operation applied to the layer. -* Fixed: [bool](#bool) = `False` - if the *Fix position* option is enabled: the layer preserves its position when you scroll a prototype (for instance, a floating button). -* Locked: [bool](#bool) = `False` - defines whether the layer is locked for editing. -* Hidden: [bool](#bool) = `False` - defines whether the layer is hidden. -* IsTemplate: [bool](#bool) = `False` - defines whether tha layer is marked as a template. -* Expand: [bool](#bool) = `False` - defines whether the layer is expanded in Layer List. -* Trim: [bool](#bool) = `False` - when enabled, trims empty pixels in exported images. -* Export: [ExportOption[]](#ExportOption) - export options of the layer. -* Constraints: [string](#string) = `LTWH` - defines constraint settings of the layer. String with chars where every char means a flag: - L - left, T - top, R - right, B - bottom, W - fix width, H - fix height. -* Transform: [Matrix](#Matrix) = `Free.Schema.Matrix` - position, rotation and flips of an object, stored in a single 3x2 matrix. -* Size: [Size](#Size) = `[100,100]` - defines the layer size. -* LockAspect: [bool](#bool) = `False` - defines whether the layer's aspect ratio should be remain unchanged upon resizing. -* Mask: [bool](#bool) = `False` - defines whether the layer is used as a mask. -* BreakMask: [bool](#bool) = `False` - defines if the layer is set to ignore the mask. -* MaskType: [MaskType](#MaskType) = `Vector` - type of the Mask - Vector, Alpha or Luminance. -* KeepScroll: [bool](#bool) = `False` - if the *Keep scroll position* option is enabled (prototyping). -* ScrollBehavior: [FlowScrollBehavior](#FlowScrollBehavior) = `Scroll` - defines scroll behavior (prototyping). -* Flows: [Flow[]](#Flow) - defines flows (prototyping). -* MinWidth: [float](#float) = `0` - defines the minimum layer width (auto layout). -* MinHeight: [float](#float) = `0` - defines the minimum layer height (auto layout). -* MaxWidth: [float](#float) = `0` - defines the maximum layer width (auto layout). -* MaxHeight: [float](#float) = `0` - defines the maximum layer height (auto layout). -* LayoutStretch: [bool](#bool) = `False` - determines if the layer should stretch along the parent’s counter axis (auto layout). -* LayoutGrowStretch: [bool](#bool) = `False` - determines whether a layer should stretch along the parent’s primary axis (auto layout). -* LayoutFixPos: [bool](#bool) = `False` - enables absolute position for the layer (auto layout). -* Custom: [[string,string]](#[string,string) - key/Value map for custom properties of a layer. Similar to UserInfo is Sketch and PluginData in Figma. +Has all properties of [`Variable`](#Variable), plus: + +* _t: [string](#string) = `BOOL` - variable type. +* Values: [BoolValue[]](#BoolValue) - list of values for each theme in collection. + +### ColorVariable +Variable with a color value. + +Has all properties of [`Variable`](#Variable), plus: + +* _t: [string](#string) = `COLOR` - variable type. +* Values: [ColorValue[]](#ColorValue) - list of values for each theme in collection. + +### FloatVariable +Variable with a float value. + +Has all properties of [`Variable`](#Variable), plus: + +* _t: [string](#string) = `FLOAT` - variable type. +* Values: [FloatValue[]](#FloatValue) - list of values for each theme in collection. + +### StringVariable +Variable with a string value. + +Has all properties of [`Variable`](#Variable), plus: + +* _t: [string](#string) = `TEXT` - variable type. +* Values: [stringValue[]](#stringValue) - list of values for each theme in collection. + +### BoolValue +Value of a boolean variable. + +* ThemeId: [GUID](#GUID) - theme unique identifier of a Value. +* Value: [bool](#bool) = `false` - boolean value. +* ValueId: [GUID](#GUID) - boolean variable ID. + +### ColorValue +Value of a color variable. + +* ThemeId: [GUID](#GUID) - theme unique identifier of a Value. +* Value: [Color](#Color) = `00000000` - color value. +* ValueId: [GUID](#GUID) - color variable ID. + +### FloatValue +Value of a float variable + +* ThemeId: [GUID](#GUID) - theme unique identifier of a Value. +* Value: [float](#float) = `0` - float value. +* ValueId: [GUID](#GUID) - float variable ID. + +### StringValue +Value of a string variable + +* ThemeId: [GUID](#GUID) - theme unique identifier of a Value. +* Value: [string](#string) - string value. +* ValueId: [GUID](#GUID) - string variable ID. + +### Variable +Base class of variable. + +* _t: [string](#string) = `COLOR` - variable type. +* Id: [GUID](#GUID) - unique variable ID. +* Name: [string](#string) - variable name. +* Version: [int](#int) = `0` - variable version. + +### VariableCollection +Collection of variables. + +* Id: [GUID](#GUID) - unique identifier. +* Name: [string](#string) - name of variable collection. +* Themes: [VariableTheme[]](#VariableTheme) - list of variable theme names in this collection. +* Variables: [Variable[]](#Variable) - list of variables inside collection. +* Version: [int](#int) = `0` - version of collection. + +### VariableTheme +Theme of variables. Used to switch all variable values inside specific collection. + +* Id: [GUID](#GUID) - unique identifier. +* Name: [string](#string) - name of the theme. + +### BoolComponentProperty +Defines boolean component property of components and states. + +Has all properties of [`ComponentPropertyBase`](#ComponentPropertyBase), plus: + +* _t: [string](#string) = `BOOL` - object type. +* Value: [bool](#bool) = `false` - initial Value. +* ValueId: [GUID](#GUID) - boolean variable ID. + +### SlotComponentProperty +Defines slot component property of components and states. + +Has all properties of [`ComponentPropertyBase`](#ComponentPropertyBase), plus: + +* _t: [string](#string) = `SLOT` - object type. +* Value: [GUID](#GUID) - initial Slot ID. +* Values: [GUID[]](#GUID) - preferred Components Values. + +### StateComponentProperty +Defines state(variant) component property of components and states. Can be assigned to states layer only. + +Has all properties of [`ComponentPropertyBase`](#ComponentPropertyBase), plus: + +* _t: [string](#string) = `STATE` - object type. +* Value: [string](#string) - initial Value. +* ValueId: [GUID](#GUID) - string variable ID. +* Values: [string[]](#string) - preferred Values. + +### SwapComponentProperty +Defines swap component property of components and states. + +Has all properties of [`ComponentPropertyBase`](#ComponentPropertyBase), plus: + +* _t: [string](#string) = `SWAP` - object type. +* Value: [GUID](#GUID) - initial Value. +* Values: [GUID[]](#GUID) - preferred Values. + +### TextComponentProperty +Defines text component property of components and states. + +Has all properties of [`ComponentPropertyBase`](#ComponentPropertyBase), plus: + +* _t: [string](#string) = `TEXT` - object type. +* Value: [string](#string) - initial Value. +* ValueId: [GUID](#GUID) - string variable ID. + +### ComponentPropertyBase +Defines component property of components and states. + +* _t: [string](#string) = `BOOL` - variable type. +* Id: [GUID](#GUID) - unique property ID. +* Name: [string](#string) - property name. +* Dead: [bool](#bool) = `false` - is already deleted. + +### ColorStyle +Style of fills. Can be set to borders and fills. + +Has all properties of [`StyleBase`](#StyleBase), plus: + +* Fill: [Color](#Color) = `00000000` - if there is a single color fill - use this, otherwise use Fills field. +* Fills: [Fill[]](#Fill) - list of fills applied to a style. + +### EffectStyle + +Has all properties of [`StyleBase`](#StyleBase), plus: + +* Shadows: [ShadowEffect[]](#ShadowEffect) - list of shadows of the style. +* InnerShadows: [ShadowEffect[]](#ShadowEffect) - list of inner shadows of the style. +* Blur: [BlurEffect](#BlurEffect) - definition of the blur effect of the style. + +### GuideStyle + +Has all properties of [`StyleBase`](#StyleBase), plus: + +* Layouts: [LayoutGuideBase[]](#LayoutGuideBase) - grid, Row and Column layouts of the style. + +### TextStyle +Text Style + +Has all properties of [`StyleBase`](#StyleBase), plus: + +* Font: [string](#string) = `Inter-Regular` - text font. +* FontSize: [float](#float) = `12` - text size. +* ParagraphSpacing: [float](#float) = `0` - paragraph spacing. +* Kerning: [float](#float) = `0` - letter spacing. +* BaselineOffset: [float](#float) = `0` - text offset from the baseline. +* LineHeight: [float?](#float) - line spacing. +* Underline: [bool](#bool) = `false` - if the text is underlined. +* Strikethrough: [bool](#bool) = `false` - if the strikethrough option is applied to the text. +* Casing: [CharacterCasing](#CharacterCasing) = `Normal` - character case. + +### StyleBase +Base class for a shared style + +* Id: [GUID](#GUID) - unique style ID. +* Name: [string](#string) - style name. +* Version: [int](#int) = `0` - style version. +* FigmaId: [string](#string) - unique Figma Style Id. Used to connect shared libraries and documents imported from figma. + +### Columns +Defines column settings in a layout guide. + +Has all properties of [`LayoutGuideBase`](#LayoutGuideBase), plus: + +* _t: [string](#string) = `COLS` - object type. +* Enabled: [bool](#bool) = `false` - if columnns are enabled. +* Align: [LayoutHorizontalAlignment](#LayoutHorizontalAlignment) = `Left` - horizontal alignment settings. +* Offset: [int](#int) = `0` - offset value. +* Count: [int](#int) = `0` - number of columns. +* Gutter: [int](#int) = `0` - gutter value. +* Width: [int](#int) = `0` - column width. +* Color: [Color](#Color) = `00000000` - column color. + +### Grid +Defines square grid settings for a frame. + +Has all properties of [`LayoutGuideBase`](#LayoutGuideBase), plus: + +* _t: [string](#string) = `GRID` - object type. +* Enabled: [bool](#bool) = `false` - if the square grid is enabled. +* Color: [Color](#Color) = `00000000` - grid color. +* Size: [int](#int) = `10` - size of grid cells.
-Lunacy specific +Sketch compatibility -* PhotoId: [string](#string) - identifier of a photo from the Lunacy gallery. -* IllustrationId: [string](#string) - identifier of an illustraion from the Lunacy gallery. -* IconId: [string](#string) - identifier of an icon from the Lunacy gallery. -* AvatarId: [string](#string) - identifier of a Lunacy-generated avatar. -* Data: [DataInfo](#DataInfo) - information about auto generated texts. -* Upscaled: [bool](#bool) = `False` - if the image has been upscaled in Lunacy. -* BackgroundRemove: [BackgroundRemovalState](#BackgroundRemovalState) = `None` - background removal procedure info. +* ThickTimes: [int](#int) = `10` - every N line should be thick.
+### Rows +Defines row settings in a layout guide. + +Has all properties of [`LayoutGuideBase`](#LayoutGuideBase), plus: + +* _t: [string](#string) = `ROWS` - object type. +* Enabled: [bool](#bool) = `false` - if rows are enabled. +* Align: [LayoutVerticalAlignment](#LayoutVerticalAlignment) = `Top` - vertical alignment settings. +* Offset: [int](#int) = `0` - offset value. +* Count: [int](#int) = `0` - number of rows. +* Gutter: [int](#int) = `0` - gutter value. +* Width: [int](#int) = `0` - row width. +* Color: [Color](#Color) = `00000000` - row color. + +### LayoutGuideBase +Defines layout guide settings for a frame. + +* _t: [string](#string) - object type. +* Enabled: [bool](#bool) = `false` - if layout guide is enabled. + ### BackAction Action to go to previous frame. @@ -558,6 +844,16 @@ Has all properties of [`FlowAction`](#FlowAction), plus: * _t: [string](#string) = `CLOSE_OVERLAY` - object type. +### ConditionalAction +Set variable theme for a variable collection + +Has all properties of [`FlowAction`](#FlowAction), plus: + +* _t: [string](#string) = `CONDITION` - object type. +* Condition: [Argument](#Argument) - condition. Usually an expression, but can be a value or variable. +* True: [FlowAction[]](#FlowAction) - actions to perform if condition result is true. +* False: [FlowAction[]](#FlowAction) - actions to perform if condition result is false. + ### NavigateToAction Action to navigate to target frame. @@ -577,8 +873,8 @@ Has all properties of [`FlowAction`](#FlowAction), plus: * Animation: [FlowAnimation](#FlowAnimation) = `Free.Schema.FlowAnimation` - action animation. * Position: [FlowOverlayPosition](#FlowOverlayPosition) = `Centered` - startup location of overlay. * Offset: [Vector2](#Vector2) = `<0, 0>` - offset from startup location. -* CloseByClick: [bool](#bool) = `False` - close by any click. -* HasBackground: [bool](#bool) = `False` - defines whether the overlay has background. +* CloseByClick: [bool](#bool) = `false` - close by any click. +* HasBackground: [bool](#bool) = `false` - defines whether the overlay has background. * Background: [Color](#Color) = `00000000` - overlay background color. ### OpenUrlAction @@ -598,6 +894,24 @@ Has all properties of [`FlowAction`](#FlowAction), plus: * Target: [GUID?](#GUID) - id of the target layer. * Animation: [FlowAnimation](#FlowAnimation) = `Free.Schema.FlowAnimation` - action animation. +### SetThemeAction +Set variable theme for a variable collection + +Has all properties of [`FlowAction`](#FlowAction), plus: + +* _t: [string](#string) = `THEME` - object type. +* Target: [GUID?](#GUID) - variable Collection Id +* ThemeId: [GUID](#GUID) - variable Theme Id + +### SetVariableAction +Action to go to previous frame. + +Has all properties of [`FlowAction`](#FlowAction), plus: + +* _t: [string](#string) = `SET` - object type. +* Target: [GUID](#GUID) - variable Id +* Value: [Argument](#Argument) - value to set. + ### SwapOverlayAction Action to swap current overlay to target overlay. @@ -702,110 +1016,59 @@ Base object of prototyping trigger. * _t: [string](#string) = `CLICK` - object type. -### AutoLayoutContainer +### Argument +Expression Argument. Value or Variable or Expression. + +* Bool: [bool?](#bool) - boolean value +* Number: [float?](#float) - number value +* Text: [string](#string) - text value +* Id: [GUID?](#GUID) - id of a variable. Should be used with a bool/float/string value before id. +* Func: [ExpressionFunction?](#ExpressionFunction) - expression Function. Use only with Args. + +### AutoLayout Defines auto layout settings. -Has all properties of [`LayoutContainerBase`](#LayoutContainerBase), plus: - -* _t: [string](#string) = `AUTO` - object type. -* Orientation: [LayoutOrientation](#LayoutOrientation) = `Horizontal` - layout orientation: horizontal or vertical. +* Vertical: [bool](#bool) = `false` - is vertical orientation. * Spacing: [float](#float) = `0` - spacing value * WrapSpacing: [float](#float) = `0` - spacing between rows of wrapped content. * Padding: [Thickness](#Thickness) = `[0,0,0,0]` - padding value. * Align: [HorizontalAlignment](#HorizontalAlignment) = `Left` - horizontal children alignment * Valign: [VerticalAlignment](#VerticalAlignment) = `Top` - vertical children alignment -* Sizing: [SizingMode](#SizingMode) = `Auto` - horizontal resizing mode: fixed or hug. -* Vsizing: [SizingMode](#SizingMode) = `Auto` - vertical resizing mode: fixed or hug. -* TextBaseline: [bool](#bool) = `False` - if text baseline alignment is enabled. -* StrokesIncluded: [bool](#bool) = `False` - if the Include Borders option is enabled. -* ReverseZIndex: [bool](#bool) = `False` - if the Last on Top option is enabled. -* Wrap: [bool](#bool) = `False` - if wrapping is enabled. -* WrapDistribute: [bool](#bool) = `False` - if auto distribute is enabled for wrapped content. +* FixWidth: [bool](#bool) = `false` - is width fixed. False = hug or fill if StretchWidth is true. +* FixHeight: [bool](#bool) = `false` - is height fixed. False = hug or fill if StretchHeight is true. +* TextBaseline: [bool](#bool) = `false` - if text baseline alignment is enabled. +* StrokesIncluded: [bool](#bool) = `false` - if the Include Borders option is enabled. +* ReverseZIndex: [bool](#bool) = `false` - if the Last on Top option is enabled. +* Wrap: [bool](#bool) = `false` - if wrapping is enabled. -### Border -Defines the appearance of borders. +### Bind +Bind of a variable into layer property. -Has all properties of [`Fill`](#Fill), plus: - -* Thickness: [Thickness](#Thickness) = `[0,0,0,0]` - defines border thickness. -* Pos: [BorderPosition](#BorderPosition) = `Center` - defines border position. - -### Columns -Defines column settings in a layout grid. - -Has all properties of [`GridLayoutBase`](#GridLayoutBase), plus: - -* _t: [string](#string) = `COLS` - object type. -* Enabled: [bool](#bool) = `False` - if columnns are enabled. -* Align: [LayoutHorizontalAlignment](#LayoutHorizontalAlignment) = `Left` - horizontal alignment settings. -* Offset: [int](#int) = `0` - offset value. -* Count: [int](#int) = `0` - number of columns. -* Gutter: [int](#int) = `0` - gutter value. -* Width: [int](#int) = `0` - column width. -* Color: [Color](#Color) = `00000000` - column color. - -### Grid -Defines square grid settings for a frame. - -Has all properties of [`GridLayoutBase`](#GridLayoutBase), plus: - -* _t: [string](#string) = `GRID` - object type. -* Enabled: [bool](#bool) = `False` - if the square grid is enabled. -* Color: [Color](#Color) = `00000000` - grid color. -* Size: [int](#int) = `10` - size of grid cells. - -
-Sketch compatibility - -* ThickTimes: [int](#int) = `10` - every N line should be thick. -
- -### Rows -Defines row settings in a layout grid. - -Has all properties of [`GridLayoutBase`](#GridLayoutBase), plus: - -* _t: [string](#string) = `ROWS` - object type. -* Enabled: [bool](#bool) = `False` - if rows are enabled. -* Align: [LayoutVerticalAlignment](#LayoutVerticalAlignment) = `Top` - vertical alignment settings. -* Offset: [int](#int) = `0` - offset value. -* Count: [int](#int) = `0` - number of rows. -* Gutter: [int](#int) = `0` - gutter value. -* Width: [int](#int) = `0` - row width. -* Color: [Color](#Color) = `00000000` - row color. +* Field: [BindField](#BindField) = `Unknown` - target field +* Value: [Argument](#Argument) - bind Value ### BlurEffect Defines the settings of the blur effect. * Saturation: [float](#float) = `1` - saturation. Only for background blur. * Radius: [float](#float) = `10` - blur Radius. -* Enabled: [bool](#bool) = `False` - if the blur is enabled. +* Enabled: [bool](#bool) = `false` - if the blur is enabled. * Type: [BlurType](#BlurType) = `Gaussian` - sets the blur type. -### BorderOptions -Defines the advanced options of borders, arrows, lines, and paths drawn with the Pen or Pencil tools. - -* LineCap: [LineCap](#LineCap) = `Butt` - defines the shape of line caps. -* LineJoin: [LineJoin](#LineJoin) = `Miter` - defines the appearance of line folds. -* Dash: [float[]](#float) - defines the size of dashes. - -### ColorVariable -Color variables stored in the document. - -* Id: [GUID](#GUID) - unique color variable ID. -* Name: [string](#string) - color variable name. -* Value: [Color](#Color) = `00000000` - color value of the variable. - ### Document The document's .json structure. * Id: [GUID](#GUID) - unique document ID. * Nudge: [Point](#Point) = `[1,10]` - nudge Amount. X - small nudge. Y = large nudge. -* FromFigma: [bool](#bool) = `False` - if the document is imported from Figma. +* FromFigma: [bool](#bool) = `false` - if the document is imported from Figma. * CurrentPageIndex: [int](#int) = `0` - index of the currently open page. * Fonts: [Font[]](#Font) - embedded fonts stored in the document. -* ColorVariables: [ColorVariable[]](#ColorVariable) - color variables stored in the document. -* Styles: [SharedStyle[]](#SharedStyle) - styles stored in the document. +* VariableCollections: [VariableCollection[]](#VariableCollection) - variable collections stored in the document. +* FillStyles: [ColorStyle[]](#ColorStyle) - fill styles stored in the document. +* EffectStyles: [EffectStyle[]](#EffectStyle) - effect styles stored in the document. +* TextStyles: [TextStyle[]](#TextStyle) - text styles stored in the document. +* GuideStyles: [GuideStyle[]](#GuideStyle) - guide layout styles stored in the document. +* Slots: [Slot[]](#Slot) - slots of the document. * Pages: [GUID[]](#GUID) - list of document pages.
@@ -817,17 +1080,16 @@ The document's .json structure. ### ExportOption Export settings. -* Size: [float](#float) = `0` - defines the width/height of the exported object. Valid only when ScaleType is *Width* or *Height*. -* Format: [string](#string) = `png` - export format. Default: PNG. +* Format: [string](#string) = `PNG` - export format. Default: PNG. +* Type: [ScaleType](#ScaleType) = `Scale` - defines the scale type: Scale/Width/Height. The Width and Height types are currently not supported. +* Size: [float](#float) = `0` - defines the width/height/scale of the exported object. Dependent on the type of the scale. * Name: [string](#string) - user-defined suffix/preffix (string) added to the export file name. Default: empty. * Naming: [NamingScheme](#NamingScheme) = `Suffix` - defines whether a suffix or preffix will be added to the export files name. Default: suffix. -* Scale: [float](#float) = `1` - defines the scale used when exporting an object. Valid only when ScaleType is set to *Scale*. -* Type: [ScaleType](#ScaleType) = `Scale` - defines the scale type: Scale(px)/Width/Height. The Width and Height types are currently not supported. ### Fill Defines the fill applied to a layer. -* Enabled: [bool](#bool) = `False` - if a fill is added. +* Enabled: [bool](#bool) = `false` - if a fill is added. * Color: [Color](#Color) = `00000000` - fill color. * ColorId: [GUID?](#GUID) - color variable ID. * Type: [FillType](#FillType) = `Color` - defines the fill type. @@ -840,7 +1102,7 @@ Defines the fill applied to a layer. Prototyping interaction element * Trigger: [FlowTrigger](#FlowTrigger) - trigger that will fire an action. Examples: CLICK, DRAG, HOLD. -* Action: [FlowAction](#FlowAction) - action. Examples: NAVIGATE, SCROLL, URL, BACK. +* Actions: [FlowAction[]](#FlowAction) - list of Actions. Examples: NAVIGATE, SCROLL, URL, BACK. ### Font Embedded fonts stored in the document. @@ -863,18 +1125,13 @@ An object that represents a gradient. A position-color pair representing a gradient stop. * Pos: [float](#float) = `0` - value between 0 and 1 representing a position along gradient axis. -* Color: [Color](#Color) = `ffffffff` - color attached to a corresponding position. - -### GridLayoutBase -Defines layout grid settings for a frame. - -* _t: [string](#string) - object type. -* Enabled: [bool](#bool) = `False` - if layout grid is enabled. +* Color: [Color](#Color) = `00000000` - color attached to a corresponding position. +* ColorId: [GUID?](#GUID) - color variable ID. ### ImageFilters Defines filters that can be applied to images. -* Enabled: [bool](#bool) = `False` - if a filter is applied to the image layer. +* Enabled: [bool](#bool) = `false` - if a filter is applied to the image layer. * Brightness: [float](#float) = `0` - brightness filter. * Contrast: [float](#float) = `1` - contrast filter. * Hue: [float](#float) = `0` - hue filter. @@ -885,12 +1142,24 @@ Style (bold, italic, etc.) applied to a part of text or single word within a tex * Start: [int](#int) = `0` - position where the style starts. * Length: [int](#int) = `0` - length of the selection. -* Style: [TextStyle](#TextStyle) - style applied to the selection. - -### LayoutContainerBase -Defines a container layout. - -* _t: [string](#string) - object type. +* FillsId: [GUID](#GUID) - color Style Id. +* TextStyleId: [GUID](#GUID) - text style id. +* Fill: [Color](#Color) = `00000000` - if there is a single color fill - use this, otherwise use Fills field. +* Fills: [Fill[]](#Fill) - list of fills. +* Font: [string](#string) = `Inter-Regular` - text font. +* FontSize: [float](#float) = `12` - text size. +* ParagraphSpacing: [float](#float) = `0` - paragraph spacing. +* Kerning: [float](#float) = `0` - letter spacing. +* BaselineOffset: [float](#float) = `0` - text offset from the baseline. +* LineHeight: [float?](#float) - line spacing. +* Casing: [CharacterCasing](#CharacterCasing) = `Normal` - character case. +* Align: [TextHorizontalAlignment](#TextHorizontalAlignment) = `Left` - horizontal alignment applied to the text. +* Valign: [TextVerticalAlignment](#TextVerticalAlignment) = `Top` - vertical alignment applied to the text. +* List: [ListMarkerType](#ListMarkerType) = `None` - list type: numbered, bulleted, none. +* Rtl: [bool](#bool) = `false` - if the text is RTL. +* Underline: [bool](#bool) = `false` - if the text is underlined. +* Strikethrough: [bool](#bool) = `false` - if the strikethrough option is applied to the text. +* BaselinePos: [BaselinePosition](#BaselinePosition) = `Normal` - text position against the baseline. ### Meta Contains metadata about the document. @@ -920,18 +1189,21 @@ Defines overrides for components. * StyleId: [GUID?](#GUID) - identifier of the style applied to a layer. * Tint: [Color?](#Color) - defines the tint color. * TintId: [GUID?](#GUID) - tint identifier. -* BorderOptions: [BorderOptions](#BorderOptions) - definition of border options. +* Thickness: [Thickness](#Thickness) = `[0,0,0,0]` - defines border thickness. +* CustomThickness: [Thickness](#Thickness) = `[0,0,0,0]` - defines custom border thickness. +* LinePos: [LinePosition](#LinePosition) = `Center` - defines border position. +* LineCap: [LineCap](#LineCap) = `Butt` - defines the shape of line caps. +* LineJoin: [LineJoin](#LineJoin) = `Miter` - defines the appearance of line folds. * Blur: [BlurEffect](#BlurEffect) - information about blurs. * ImageFilters: [ImageFilters](#ImageFilters) - filters applied to an image (hue, saturartion, etc.), if any. * Opacity: [float?](#float) - opacity value. * BlendMode: [BlendMode?](#BlendMode) - blend mode. -* StartArrowhead: [Arrowhead?](#Arrowhead) - determines the appearance of the tail of an open path drawn with the Line, Arrow, or Pen/Pencil tool. -* EndArrowhead: [Arrowhead?](#Arrowhead) - determines the appearance of the head of an open path drawn with the Line, Arrow, or Pen/Pencil tool. +* StartMarker: [Arrowhead?](#Arrowhead) - determines the appearance of the tail of an open path drawn with the Line, Arrow, or Pen/Pencil tool. +* EndMarker: [Arrowhead?](#Arrowhead) - determines the appearance of the head of an open path drawn with the Line, Arrow, or Pen/Pencil tool. * Text: [string](#string) - content of the text layer. -* TextStyle: [TextStyle](#TextStyle) - style applied to the text * TextBehavior: [TextBehavior?](#TextBehavior) - behavior of the text layer size on text value change: flexible, fixed-width, or fixed. * Size: [Size?](#Size) - text size. -* Orientation: [LayoutOrientation?](#LayoutOrientation) - layout orientation: horizontal or vertical. +* Vertical: [bool?](#bool) - is vertical autolayout * Spacing: [float?](#float) - spacing value * WrapSpacing: [float?](#float) - spacing between rows of wrapped content. * MinWidth: [float?](#float) - defines the minimum layer width (auto layout). @@ -941,15 +1213,14 @@ Defines overrides for components. * Padding: [Thickness?](#Thickness) - padding value. * Align: [HorizontalAlignment?](#HorizontalAlignment) - horizontal children alignment. * VAlign: [VerticalAlignment?](#VerticalAlignment) - vertical children alignment. -* Sizing: [SizingMode?](#SizingMode) - horizontal resizing mode: fixed or hug. -* VSizing: [SizingMode?](#SizingMode) - vertical resizing mode: fixed or hug. +* FixWidth: [bool](#bool) = `false` - is width fixed. False = hug or fill if StretchWidth is true. +* FixHeight: [bool](#bool) = `false` - is height fixed. False = hug or fill if StretchHeight is true. * TextBaseline: [bool?](#bool) - if text baseline alignment is enabled. * StrokesIncluded: [bool?](#bool) - if the Include Borders option is enabled. * ReverseZIndex: [bool?](#bool) - if the Last on Top option is enabled. -* Stretch: [bool?](#bool) - determines if the layer should stretch along the parent’s counter axis (auto layout). -* GrowStretch: [bool?](#bool) - determines whether a layer should stretch along the parent’s primary axis (auto layout). -* Wrap: [bool?](#bool) - if wrapping is enabled. -* WrapDistribute: [bool?](#bool) - if auto distribute is enabled for wrapped content. +* StretchWidth: [bool](#bool) = `false` - determines if the layer should stretch height (auto layout). +* StretchHeight: [bool](#bool) = `false` - determines whether a layer should stretch width (auto layout). +* Wrap: [bool?](#bool) - if text wrapping is enabled. * Truncate: [bool?](#bool) - trim text with triple dots in the end if content overlaps fixed layer size bounds. * MaxLines: [byte](#byte) = `0` - count of lines allowed. If the limit is exceeded, the text will be truncated. * KeepScroll: [bool?](#bool) - if the *Keep scroll position* option is enabled (prototyping). @@ -969,7 +1240,7 @@ Document page properties. * Id: [GUID](#GUID) - unique page ID. * Name: [string](#string) - page name. * Background: [Color](#Color) = `00000000` - canvas color. -* IsComponentPage: [bool](#bool) = `False` - if the page is used to store components. +* IsComponentPage: [bool](#bool) = `false` - if the page is used to store components. * Rulers: [Rulers](#Rulers) - rulers applied by the user. * Origin: [Point](#Point) = `[0,0]` - point where the user left off the page. * Zoom: [float](#float) = `0` - zoom scale last applied to the page. @@ -1007,7 +1278,7 @@ An object containing ruler origins and guideline positions. ### ShadowEffect Defines the shadow options. -* Enabled: [bool](#bool) = `True` - if a shadow effect is enabled. +* Enabled: [bool](#bool) = `true` - if a shadow effect is enabled. * Radius: [float](#float) = `0` - radius of the shadow blur. * Color: [Color](#Color) = `00000000` - shadow color. * ColorId: [GUID?](#GUID) - color variable ID. @@ -1016,59 +1287,29 @@ Defines the shadow options. * BlendMode: [BlendMode](#BlendMode) = `Normal` - shadow blend mode. ### SharedLibrary -Contains components, styles and variables from external library that is used in current document. -Every file in the shared folder is Shared Library. +Contains components, styles and variables from external library that is used in current document. Every file in the shared folder is Shared Library. * Id: [GUID](#GUID) - unique library document identifier. -* ColorVariables: [ColorVariable[]](#ColorVariable) - color variables from a shared library. -* Styles: [SharedStyle[]](#SharedStyle) - styles from a shared library. +* Variables: [VariableCollection[]](#VariableCollection) - variable collections from a shared library. +* FillStyles: [ColorStyle[]](#ColorStyle) - fill styles stored in the document. +* EffectStyles: [EffectStyle[]](#EffectStyle) - effect styles stored in the document. +* TextStyles: [TextStyle[]](#TextStyle) - text styles stored in the document. +* GuideStyles: [GuideStyle[]](#GuideStyle) - guide layout styles stored in the document. * Components: [Component[]](#Component) - components from a shared library. +* Slots: [Slot[]](#Slot) - slots from a shared library. -### SharedStyle -Style saved in the document. +### StateBind +Bind of component property of a states layer to the state name of component. -* Id: [GUID](#GUID) - unique style ID. -* Name: [string](#string) - style name. -* Style: [Style](#Style) - layer style settings. +* Id: [GUID](#GUID) - component Property Id +* Name: [string](#string) - state Name +* NameId: [GUID?](#GUID) - id of string variable with a value -### Style -Defines a set of properties that make up a style. +### ThemeSelection +Theme Selection of a layer and it's children for a specific theme. -* MiterLimit: [int](#int) = `10` - defining a limit on the ratio of the miter length to the border thickness used to draw a miter join. -* Opacity: [float](#float) = `1` - opacity of a layer. -* BlendMode: [BlendMode](#BlendMode) = `Normal` - blend mode: how a layer blends with the layers behind it. -* StartMarker: [Arrowhead](#Arrowhead) = `None` - defines the appearance of the starting point for arrows, lines, and open paths. -* EndMarker: [Arrowhead](#Arrowhead) = `None` - defines the appearance of the end point for arrows, lines, and open paths. -* Winding: [PathFillType](#PathFillType) = `EvenOdd` - fill options for overlapping paths: non-zero or even-odd. -* Fills: [Fill[]](#Fill) - list of fills applied to a layer. -* Borders: [Border[]](#Border) - list of borders applied to a layer. -* Shadows: [ShadowEffect[]](#ShadowEffect) - list of shadows applied to a layer. -* InnerShadows: [ShadowEffect[]](#ShadowEffect) - list of inner shadows applied to a layer. -* Blur: [BlurEffect](#BlurEffect) - definition of the blur effect applied to a layer. -* BorderOptions: [BorderOptions](#BorderOptions) - definition of border options. -* ImageFilters: [ImageFilters](#ImageFilters) - image filters applied to a layer. -* CornerRadius: [float[]](#float) = `float[4]` - sets the corner radius of the frame/instance/component/states/section. -* SmoothCorners: [bool](#bool) = `False` - enables smooth rounded corners like in iOS interfaces. - -### TextStyle -Defines a set of properties that make up a text style. - -* Color: [Color](#Color) = `ff000000` - text color. -* ColorId: [GUID?](#GUID) - color variable ID. -* Font: [string](#string) = `Inter` - text font. -* Size: [float](#float) = `12` - text size. -* ParagraphSpacing: [float](#float) = `0` - paragraph spacing. -* Kerning: [float](#float) = `0` - letter spacing. -* BaselineOffset: [float](#float) = `0` - text offset from the baseline. -* LineHeight: [float?](#float) - line spacing. -* Casing: [CharacterCasing](#CharacterCasing) = `Normal` - character case. -* Align: [TextHorizontalAlignment](#TextHorizontalAlignment) = `Left` - horizontal alignment applied to the text. -* Valign: [TextVerticalAlignment](#TextVerticalAlignment) = `Top` - vertical alignment applied to the text. -* List: [ListMarkerType](#ListMarkerType) = `None` - list type: numbered, bulleted, none. -* RTL: [bool](#bool) = `False` - if the text is RTL. -* Underline: [bool](#bool) = `False` - if the text is underlined. -* Strikethrough: [bool](#bool) = `False` - if the strikethrough option is applied to the text. -* BaselinePos: [BaselinePosition](#BaselinePosition) = `Normal` - text position against the baseline. +* Id: [GUID](#GUID) - unique identifier of the collection. +* ThemeId: [GUID](#GUID) - unique identifier of the theme. ### Color Struct 32-bit ARGB unpremultiplied color value. @@ -1081,33 +1322,22 @@ Defines a set of properties that make up a text style. ### FlowAnimation Struct Prototyping action animation. -* Enabled: [bool](#bool) = `False` - if animation is enabled. +* Enabled: [bool](#bool) = `false` - if animation is enabled. * Type: [FlowAnimationType](#FlowAnimationType) = `Instant` - animation type. * Effect: [FlowAnimationEffect](#FlowAnimationEffect) = `Linear` - animation effect. * Direction: [FlowAnimationDirection](#FlowAnimationDirection) = `Left` - animation direction. * Duration: [int](#int) - animation duration in ms. * Curve: [Point[]](#Point) - animation curve point array. Array length is always 2. Point values are between 0 and 1. +* Spring: [Spring?](#Spring) - spring animation parameters. ### Matrix Struct -A transformation matrix is standard way in computer graphics to represent translation and rotation. -These are the top two rows of a 3x3 matrix. The bottom row of the matrix is assumed to be [0, 0, 1]. -This is known as an affine transform and is enough to represent translation, rotation, and skew. -The identity transform is [1, 0, 0, 0, 1, 0]. -A translation matrix will typically look like: [1, 0, tx, 0, 1, ty] -and a rotation matrix will typically look like: [cos(angle), -sin(angle), 0, sin(angle), cos(angle), 0] -If a matrix contains only translation it will be printed like point [0,5] +A transformation matrix is standard way in computer graphics to represent translation and rotation. These are the top two rows of a 3x3 matrix. The bottom row of the matrix is assumed to be [0, 0, 1]. This is known as an affine transform and is enough to represent translation, rotation, and skew. The identity transform is [1, 0, 0, 0, 1, 0]. A translation matrix will typically look like: [1, 0, tx, 0, 1, ty] and a rotation matrix will typically look like: [cos(angle), -sin(angle), 0, sin(angle), cos(angle), 0] -* ScaleX: [float](#float) - scale by x-coord. Usually should be 1. - If it's -1 - the layer is flipped horizontally. - If it's some random number - it's a cos(angle). -* SkewX: [float](#float) - skew by x-coord. Usually should be 0. - If it's some random number - it's a -sin(angle). +* ScaleX: [float](#float) - scale by x-coord. Usually should be 1. If it's -1 - the layer is flipped horizontally. If it's some random number - it's a cos(angle). +* SkewX: [float](#float) - skew by x-coord. Usually should be 0. If it's some random number - it's a -sin(angle). * TransX: [float](#float) - translation by x-coord. -* SkewY: [float](#float) - skew by y-coord. Usually should be 0. - If it's some random number - it's a sin(angle). -* ScaleY: [float](#float) - scale by y-coord. Usually should be 1. - If it's -1 - the layer is flipped vertically. - If it's some random number - it's a cos(angle). +* SkewY: [float](#float) - skew by y-coord. Usually should be 0. If it's some random number - it's a sin(angle). +* ScaleY: [float](#float) - scale by y-coord. Usually should be 1. If it's -1 - the layer is flipped vertically. If it's some random number - it's a cos(angle). * TransY: [float](#float) - translation by y-coord. ### Point Struct @@ -1130,11 +1360,23 @@ A utility class to represent layer size. * Width: [float](#float) - layer width. * Height: [float](#float) - layer height. +### Spring Struct +Spring animation parameters + +* Dumping: [float](#float) - spring Dumping, Min 0.01, Max=10000. +* Mass: [float](#float) - spring Mass, Min 0.01, Max=1000. +* Stiffness: [float](#float) - spring Stiffness, Min=0.01, Max=1000000. + ### Thickness Struct Thickness struct. Used for Border thickness and Padding values +* Left: [float](#float) - left thickness. +* Top: [float](#float) - top thickness. +* Right: [float](#float) - right thickness. +* Bottom: [float](#float) - bottom thickness. + ### Vertex Struct -A utility class to represent a vertex. +The Vertex data type, which defines path points, and has several notation options. It's simply an array of numbers and can include up to eight values: ``[x, y, mode, radius, fromX, fromY, toX, toY]``. If the points on the right end of the array have default values, they are omitted. So, if toX, toY, fromX, fromY are all zeros, the array will look like ``[x,y,mode,radius]``. And if mode and radius are zeros, it becomes ``[x, y]`` * Point: [Point](#Point) = `[0,0]` - base point of a vertex * From: [Point](#Point) = `[0,0]` - first control point, curve from. @@ -1157,9 +1399,47 @@ Defines the appearance of arrowheads. ### BaselinePosition Enum Defines text position against the baseline. +* `-1` Subscript - text is lowered below the baseline. * `0` Normal - text is aligned with the baseline. * `1` Superscript - text is raised above the baseline. -* `-1` Subscript - text is lowered below the baseline. + +### BindField Enum + +* `0` Unknown +* `1` Visibility +* `2` Opacity +* `10` Width +* `11` Height +* `12` MinWidth +* `13` MinHeight +* `14` MaxWidth +* `15` MaxHeight +* `20` CornerRadiusLeft +* `21` CornerRadiusTop +* `22` CornerRadiusRight +* `23` CornerRadiusBottom +* `30` ThicknessLeft +* `31` ThicknessTop +* `32` ThicknessRight +* `33` ThicknessBottom +* `40` PaddingLeft +* `41` PaddingTop +* `42` PaddingRight +* `43` PaddingBottom +* `44` SpacingHorizontal +* `45` SpacingVertical +* `50` ParagraphSpacing +* `51` ParagraphIndent +* `52` LineHeight +* `53` LetterSpacing +* `54` FontFamily +* `55` FontStyle +* `56` FontSize +* `57` FontVariations +* `58` Text +* `100` ComponentId +* `101` InstanceVariant +* `102` Hyperlink ### BlendMode Enum Defines the type of blend mode applied to a layer. @@ -1198,13 +1478,6 @@ Types of boolean operations used to combine shapes. * `2` Intersect - the resulting shape only includes the area where all selected shapes overlap. * `3` Difference - the opposite of Intersect. Creates a shape from the areas where the selected shapes do not overlap. -### BorderPosition Enum -Defines the border postion. - -* `0` Center - center. -* `1` Inside - inside. -* `2` Outside - outside. - ### CharacterCasing Enum Defines letter case. @@ -1310,6 +1583,28 @@ Defines the types of points on Bézier curves. * `4` OnlyFrom - only From branch. * `5` OnlyTo - only To branch. +### ExpressionFunction Enum + +* `0` Add +* `1` Subtract +* `2` Multiply +* `3` Divide +* `10` Equals +* `11` NotEqual +* `12` LessThan +* `13` LessThanOrEqual +* `14` GreaterThan +* `15` GreaterThanOrEqual +* `20` And +* `21` Or +* `22` Not +* `23` Negate +* `24` Ternary +* `25` IsTruthy +* `30` Stringify +* `100` ResolveState +* `101` ThemeLookup + ### FillType Enum Defines the fill type. @@ -1373,6 +1668,14 @@ Prototyping scroll behavior of a layer. * `1` Fixed - fixed position on scroll. * `2` Sticky - stick to the edge on scroll. +### FlowScrollOverflow Enum +Prototyping scroll overflow of a layer. + +* `0` NoScrolling +* `1` Horizontal +* `2` Vertical +* `3` Both + ### GradientType Enum List of Gradient types. @@ -1389,21 +1692,15 @@ Defines how a set of layers is aligned horizontally. * `3` Distribute - layers are horizontally justified. ### LayoutHorizontalAlignment Enum -Defines horizontal alignment settings in layout grids. +Defines horizontal alignment settings in layout guide. * `0` Left * `1` Center * `2` Right * `3` Stretch -### LayoutOrientation Enum -Orientation of an auto layout. - -* `0` Horizontal - horizontal orientation. -* `1` Vertical - vertical orientation. - ### LayoutVerticalAlignment Enum -Defines vertical alignment settings in layout grids. +Defines vertical alignment settings in layout guides. * `0` Top * `1` Middle @@ -1424,6 +1721,13 @@ Defines the appearance of the corners for arrows and paths with corners drawn wi * `1` Round - rounded. * `2` Bevel - bevelled. +### LinePosition Enum +Defines the border position. + +* `0` Center - center. +* `1` Inside - inside. +* `2` Outside - outside. + ### ListMarkerType Enum Defines the type of a text list. @@ -1460,18 +1764,12 @@ Defines the scale type for exported objects. * `1` Width * `2` Height -### SizingMode Enum -Defines the behavior of auto layout containers as their content is changed. - -* `0` Auto - the container adjusts to the size of the content (hug). -* `1` Fixed - the container has a fixed size (fix). - ### TextBehavior Enum Defines textbox behavior options. +* `0` Flexible - both the width and height of the textbox automatically adjusts to fit its content. Characters do not wrap. * `1` AutoHeight - the width of the textbox is fixed. Characters wrap to fit in the textbox. The height of the textbox automatically adjusts to fit its content. * `2` Fixed - the size of the textbox is fixed and is independent of its content. -* `0` Flexible ### TextHorizontalAlignment Enum Defines how a text is aligned horizontally. @@ -1609,7 +1907,23 @@ Controls the use of suffixes/prefixes in the names of export files. _//Sketch Co ## Changelog -### Version 5 - 14.04.2025 +### Version 8 15.03.2026 +* Added `SlotComponentProperty`. +* Added `Slot` layer and `Slots` property to `Document` and `SharedLibrary`. +* Added `StateBind` list to `Component`. +* Added `Expression`, `ExpressionFunction`, `Argument`. Also added `Bind` list to `Layer`. +* New flow actions: `ConditionalAction`, `SetVariableAction`, `SetThemeAction`. + +### Version 7 20.02.2026 +* `FixedHorizontal` and `FixedVertical` are replaced by `FixWidth` and `FixHeight`. +* `StretchHorizontal` and `StretchVertical` are replaced by `StretchWidth` and `StretchHeight`. + +### Version 6 - 18.02.2026 + +* Added `Pos` and `Frame` fields to simplify `Transform` field in usual cases. +* Added `Fill` and `Border` fields to simplify usual case of single color fills and borders. + +### Version 5 - 11.07.2025 * New layer types: `Section` and `States`. * `Hotspot` layer type is removed. @@ -1619,6 +1933,27 @@ Controls the use of suffixes/prefixes in the names of export files. _//Sketch Co * `Component` now can be inside any group/frame/section. * `CornerRadius` and `SmoothCorners` fields are now in `Style` and `Styled` layers. * Also we are dropping support for `Frame` fields: `HasBackgound`, `Background`, `BackgroundInExport`, `BackgroundInInstance`. +* `Flow` now contains not one, but a list of actions. +* `Border` and `Fill` now sharing the same `Fill` object. `Thickness` and `LinePos` now in the `Layer`. `BorderOptions` are inside `Layer` too. +* `SharedStyle` and `Style` objects is removed. `FillStyle`, `TextStyle`, `EffectStyle`, `GridLayoutStyle` objects are added instead. +* `StyleId` is removed from `Layer`. `FillsId`, `BordersId`, `EffectsId` properties are added to a `Layer`, `GridsId` to `Frame` and `TextStyleId` to `Text` instead. +* New variable types: `BoolVariable`, `StringVariable`, `FloatVariable`. `ColorVariables` properties of a `Document` and `Library` are renamed to `Variables` and now contain a list of `VariableCollection`. +* `Component` and `States` now have `Properties`. `Instance` also has `Assigns` to component properties. +* `TextProperties` `Color` and `ColorId` is replaces with array of `Fill`. +* `InlineStyle` now has `FillsId` and `TextStyleId` fields. +* `LINE` layer type is added. Previously it was saved as `PATH`. +* Added `Connectors`. +* `Container` renamed to `AutoLayout`. +* `Sizing` and `VSizing` are replaced by `FixedHorizontal` and `FixedVertical`. +* `Orientation` replaced by `Vertical` boolean. +* `LayoutStretch` renamed to `StretchHorizontally`. +* `LayoutGrowStretch` renamed to `StretchVertically`. +* `LayoutFixPos` renamed to `FixPos`. +* Added `FlowScrollOverflow`. +* Added `Spring` animation parameters. +* `TextProperties` removed. Now this properties are inside `Text` layer and `InlineStyle`. +* `Size` renamed to `FontSize` where font size is set. +* `Fixed` replaced by `ScrollBehavior`. ### Version 4 - 20.01.2025 @@ -1638,4 +1973,6 @@ Controls the use of suffixes/prefixes in the names of export files. _//Sketch Co ### Version 1 - 19.03.2024 -* Initial Version \ No newline at end of file +* Initial Version + +by Icons8 LLC 2026 \ No newline at end of file diff --git a/docs/raw/layers.md b/docs/raw/layers.md index 51ab2b4..df6ee54 100644 --- a/docs/raw/layers.md +++ b/docs/raw/layers.md @@ -14,7 +14,8 @@ There are several types of layers in Lunacy: * Components and component instances * Icons * Hotspots -* Slices +* Slices +* [Sections](#sections) Follow the links above to learn how to work with specific layers in detail. In this section, we’ll go over the basics: how to create, edit, and organize layers on the canvas and the Layer list. @@ -430,4 +431,25 @@ You can adjust the individual resizing behavior for each layer in the **Constrai **See also:**
-Resizing auto layout elements \ No newline at end of file +Resizing auto layout elements + +## Sections + +Sections are a special layer type that helps you keep related objects together and organize your canvas. They work like visual containers for grouping content. + +With sections, you can: + +- Give them custom names for better navigation +- Set a fill color to distinguish different areas of your design +- Move sections across the canvas along with all their contents +- Nest sections inside one another to create a clear hierarchy + + + +### Working with sections + +- To create a section, click + on the toolbar or press `Shift+S`. +- To select a section, click its label at the top-left corner. +- Once selected, you can move or resize the section. +- All objects inside a section move along with it. \ No newline at end of file diff --git a/docs/raw/layerstyles.md b/docs/raw/layerstyles.md index aab62d8..e420f9d 100644 --- a/docs/raw/layerstyles.md +++ b/docs/raw/layerstyles.md @@ -1,60 +1,64 @@ -# Layer and text styles +# Styles -> Learn how to speed up your work with layer and text styles +> Learn how to speed up your work with styles -Layer and text styles are sets of predefined properties (fills, borders, effects) that you can use to speed up your design workflow and ensure a consistent look throughout your projects. When you update a style, all associated layers automatically reflect the changes. +Styles are sets of predefined properties (fills, effects) that you can use to speed up your design workflow and ensure a consistent look throughout your projects. When you edit a style, all associated layers update automatically. -The only difference between layer and text styles is that the latter also include typography properties like font, size, line spacing, etc. +Lunacy supports the following style types: + +- **Color styles** — for fills and borders + +- **Effect styles** — for shadows and blurs + +- **Text styles** — for fonts, sizes, line spacing, and other text properties + +- **Layout grid styles** — for layout guides applied to frames You can manage and organize styles in the **Styles** tab. + + + ### Creating styles There are two ways of creating styles. -**Way 1.** Select a layer with the properties you're likely to reuse and save them as a style. +**Way 1.** + +1. Select a layer with the properties you're likely to reuse. +2. Go to the **Styles** tab and click `+` next to the type of style you're going to create. +3. Type the new new style name and press `Enter` or click anywhere over the canvas. **Way 2.** Click `+` in the **Styles** list and define all the required properties. - + + + ### Applying styles Select the required layer or several layers, then choose the style you want to apply from the right panel. -Optionally, you can apply styles using the left panel (watch the video above). + -### Modifying a layer style -There are two ways to modify a style. +### Modifying a style -**Way 1.** - -1. Switch to the **Styles** tab, then click the style you want to modify +1. Switch to the **Styles** tab, hover over the style you want to modify, then click . 2. In the displayed panel, make the required changes. 3. Close the panel to apply changes. -**Way 2.** -1. Select a layer using the style you want to modify. -2. Make the required changes in the right panel. When you are done, you will see an asterisk (*) next to the style name in the right panel. It indicates that changes have been made to the style. + - - - -3. Use one of the following options: - - * **Update Style** (): Saves the changes to the existing style. - * **Create New Layer Style** (): Saves the changes to a new style. - * **Reset Style** () : Discards all changes that you have made. ### Detaching a style Select the required layer and click the **Detach style** button shown below. - + The appearance of the layer remains the same, but it is no longer associated with the style and further changes to the style will not affect the layer. @@ -63,7 +67,7 @@ The appearance of the layer remains the same, but it is no longer associated wit It is a good practice to organize styles into groups similar to those shown in the figure below. - + To organize your styles into groups, consider the following format of style names: diff --git a/docs/raw/mcp.md b/docs/raw/mcp.md new file mode 100644 index 0000000..a24f35c --- /dev/null +++ b/docs/raw/mcp.md @@ -0,0 +1,97 @@ +# LLM Integration + +> using Model Context Protocol (MCP) + + +## What is MCP? + +The Model Context Protocol (MCP) is an open standard that enables AI assistants to securely connect with external data sources and tools. It provides a standardized way for AI models to access and interact with various applications, databases, and services while maintaining security and user control. + +MCP acts as a bridge between AI assistants like Claude and your local applications, allowing them to work together seamlessly. Instead of manually copying and pasting information between applications, MCP enables direct communication and data exchange. + +## How MCP Works in Lunacy + +Lunacy implements MCP through a local server that runs alongside your Lunacy application. This server provides secure access to your Lunacy projects, allowing AI assistants to: + +* Access information about selected objects in your designs +* Retrieve color variables from your design system +* Get details about components and their properties +* Access images and other design assets + +The MCP server launches automatically when enabled and runs locally on your machine, ensuring your design data remains secure and private. + +## Enabling MCP in Lunacy + +To start using MCP with Lunacy: + + +1. Open Lunacy +2. Navigate to the main menu +3. Select **AI → Model Context Protocol → MCP Server Enabled** +4. The MCP server will start running locally and be ready to accept connections + +## Connecting Claude to Lunacy's MCP Server + +To connect Claude Desktop to your Lunacy MCP server: + +### Step 1: Install Claude Desktop + +Download and install Claude Desktop from + +### Step 2: Get MCP Configuration + +In Lunacy, you have two options: + +**Option A: Full Configuration (Recommended for new setups)** + +* Go to **AI → Model Context Protocol → Copy MCP Servers File** +* This copies a complete JSON configuration file + +**Option B: Single Server Entry (For existing MCP setups)** + +* Go to **AI → Model Context Protocol → Copy MCP Server Entry** +* This copies just the Lunacy server configuration line + +### Step 3: Configure Claude Desktop + + +1. Open Claude Desktop +2. Open the Settings menu (press Ctrl+, on Windows or Cmd+, on macOS) +3. Navigate to the **Developer** tab +4. Click **Edit Config** - this will open your file manager with the `claude_desktop_config.json` file highlighted +5. Open the highlighted `claude_desktop_config.json` file in any text editor +6. If using Option A: Replace the entire file contents with the copied JSON configuration +7. If using Option B: Add the copied server entry to your existing `mcpServers` section, maintaining valid JSON structure +8. Save the file and restart Claude Desktop completely + +Once configured, Claude will be able to interact directly with your Lunacy projects and access design information in real-time. + +## Creative Use Cases + +The real power of MCP integration comes from combining Lunacy's design data with other MCP servers to create seamless, automated workflows: + +**AI-Powered Design-to-Code Pipeline** Select a complex dashboard layout in Lunacy and ask Claude to generate a complete React application with TypeScript, including component structure, state management, API integration points, and even mock data that matches your design specifications. Claude can analyze your color variables and component hierarchy to create a fully functional prototype. + +**Intelligent Design System Documentation** Combine Lunacy MCP with file system access to automatically generate comprehensive design system documentation. Claude can analyze your components, extract design patterns, document usage guidelines, and create markdown files with embedded design tokens and component examples - all while maintaining your existing folder structure. + +**Cross-Platform Design Consistency** Use multiple MCP servers to ensure design consistency across platforms. Claude can compare your Lunacy designs with existing mobile apps (via screenshots), web implementations (via web scraping), and documentation (via file system access) to identify inconsistencies and suggest improvements. + +**Automated Asset Optimization Workflow** Connect Lunacy with file system and image processing MCP servers. Claude can analyze your selected designs, export optimized assets in multiple formats, automatically organize them into proper folder structures, and even generate the corresponding CSS sprites or icon fonts. + +**Dynamic Content-Aware Design** Combine Lunacy data with database or API MCP servers to create designs that adapt to real content. Claude can analyze your layout components, fetch actual data from your systems, and suggest design modifications based on content length, image aspect ratios, or data complexity. + +**Smart Design Review and Feedback** Use Lunacy MCP with communication tools (Slack, email) and project management systems. Claude can analyze your selected designs, compare them against design guidelines, generate detailed review reports, and automatically distribute them to stakeholders with embedded design previews and actionable feedback. + +**Intelligent Brand Compliance Checking** Connect Lunacy with document analysis MCP servers to automatically verify brand guideline compliance. Claude can analyze your designs against brand documentation, check color usage, typography consistency, spacing rules, and generate compliance reports with specific recommendations. + +**Automated Handoff Documentation** Combine Lunacy data with development tools MCP servers to create comprehensive developer handoffs. Claude can generate technical specifications, component props documentation, animation guidelines, responsive behavior notes, and integration instructions - all tailored to your specific tech stack. + +## Benefits of MCP Integration + +* **Seamless Workflow**: No need to manually export or copy design information +* **Real-time Access**: Claude always works with your current project state +* **Enhanced Productivity**: Get instant analysis and suggestions for your designs +* **Secure Connection**: All data remains local and private +* **Context-Aware Assistance**: Claude understands your specific design context + +The MCP integration transforms how you work with AI assistance in your design process, making it more efficient and contextually relevant to your actual projects. \ No newline at end of file diff --git a/docs/raw/release-notes.md b/docs/raw/release-notes.md index 63c67ec..af81e85 100644 --- a/docs/raw/release-notes.md +++ b/docs/raw/release-notes.md @@ -4,23 +4,209 @@ +# Version 13 + +*Release date: March 3, 2026* + +Microsoft Store \| [Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_13.0.exe) \| App Store \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_13.0.dmg) \| Snapcraft \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_13.0.deb) \| [Flatpak](https://flathub.org/en/apps/com.icons8.Lunacy) + +* **Scroll overflow**. Content that exceeds a frame’s bounds can now be scrolled on prototypes. +* **Multiple prototype flows**. Create multiple prototype flows with different starting points on a page. Start a flow from the list in the right panel. +* **Override inspector**. It now appears in the right panel when a component instance with overrides is selected. It helps manage overrides in complex documents such as design systems. +* **Vertical trim**. Text layers can now trim extra vertical space, improving alignment and layout consistency. +* **Export file prefixes now create folders**. Using slashes (/) in the prefix will generate corresponding folders during export. +* **Platform selector**. You can choose the target platform, and the GUI tool will automatically provide matching components. This behavior will be extended to other tools over time. +* **Stack layout support**. Lunacy now correctly reads and writes Sketch's stack layouts. + + +# Version 12 + +*Release date: February 9, 2026* + +Microsoft Store \| [Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_12.3.exe) \| App Store \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_12.3.dmg) \| Snapcraft \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_12.3.deb) \| [Flatpak](https://flathub.org/en/apps/com.icons8.Lunacy) + + +### Lunacy online + +Lunacy now has a full-featured web version available at [lunacyapp.com](https://lunacyapp.com). Teams working with sensitive data can also deploy the web version in [closed environments](https://icons8.com/lunacy-dedicated). + +### AI Chat + +Get inspired or edit your designs with LLMs. Choose between Claude, Gemini, OpenAI, and Grok. No API keys required, free to use, with support for auto layout. + + + + +### Improved MCP server + +The MCP server has been expanded with additional methods for more advanced integrations. + +### Plugins + +You can now create custom plugins for Lunacy in any programming language using the MCP API. See the docs and example plugins on our [GitHub](https://github.com/icons8/lunacy-plugins). + +### Connectors + +You can now use connectors ( or `X` +) to visually link layers and show relationships or flow. Connectors move with linked objects and can be customized like arrows or lines. + + + +### Sections + +We’ve added **sections**, a new layer type that helps you keep related objects together. + +You can: + +- Name sections +- Change their fill +- Drag sections along with their contents across the canvas + +To create a section, click + on the toolbar or press `Shift+S`. + +To select a section, click its label. + + + +### New styles + +In addition to color and layer styles, text and layout guide styles are now available. All the styles can be applied to layers separately. + +This improves the usability of styles and fixes lots of Figma compatibility issues. + + + + +### Skew + +You can now skew layers. + +1. In the upper menu, click **Layer → Add Skew**. +2. Use the controls in the right panel, to adjust the skew. + + + +
+

Note: Some shape editors may not fully support skewed layers yet (we’re working on it). If you run into issues, reset the skew, make your edits, then reapply it.

+ +### Improved prototyping + +Prototyping has been improved with Smart Animate, Spring animations, and a Flow List for managing multiple prototype flows. + +### Improved auto layout + +Auto layout elements can now be reordered by dragging them directly on the canvas. + + + +### Changes to components + +#### Component page has left the building (almost) + +You can now create components on any page. + +The Component page is now created only in two cases: + +- When you copy a component from another file to a local file +- When you drop on the canvas an element from the GUI tool (button, checkbox, etc.) + +#### Enhanced component states UX + +You can now create and manage component states right on the canvas (right-panel options are still available). + + + +Under the hood, we've reworked component states for better compatibility with Figma variants, resulting in more accurate Figma imports. + +### Import of .fig files + +We've deprecated Figma import over API due to its limitations and recurring issues. + +Instead, .fig file import ensures higher quality and faster conversion. + +### New zooming and panning options +The zoom control in the top-right corner now includes two new features: + +**Pan with Right Click** — pan the canvas by dragging while holding the right mouse button + +**Zoom with Scroll Wheel** — zoom the canvas using the scroll wheel without needing to hold `Ctrl` or `Cmd` + + + +### Updated Color Picker + +We have significantly improved the Color Picker: + +- New gradient stop editor. +- CSS color support. +- New color spaces including LCH, OKLCH, LAB, OKLAB, and HWB. +- Image filters and blend modes for fills and borders have been moved to the Color Picker. + +### Changes to right panel + +- The right panel is now resizable. +- Comments now show up only when the comment tool is enabled. + + +### Support for Sketch 2025 file format + +The Sketch 2025 file format, which includes major updates, is now supported. + +### Lower RAM usage + +We've reworked the render logic to handle large pages more efficiently. Huge pages now load progressively at a controlled pace, letting you navigate smoothly without interruptions. + +### Updated .FREE format + +Lunacy's .free format has been updated, with changes primarily affecting variables. + +### Variables rollout underway + +We’ve started a long-term process to support Figma’s complex variable system. When importing .fig files, new variables and properties may appear to preserve important data. However, these won’t be functional right away. We’ll gradually implement full support for variables, including themes, groups, theme switching, field binding, and more. + +### Lunacy on Flatpak + +Lunacy Beta is now available on Flatpak. + +### Fixes and improvements + +- Issues affecting cloud collaboration have been resolved. +- All known instance override issues have been fixed. + + # Version 11 +## 11.6 + +*Release date: July 2, 2025* + +[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_11.6.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_11.6.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_11.6.deb) + +* Now LLM can edit Selection over MCP. +* Fix of Copy/Paste on Windows. + +## 11.5 + +*Release date: June 26, 2025* + +[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_11.5.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_11.5.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_11.5.deb) + +* LLM Integration over MCP. +* Fixed Icons8 Icons integration. + ## 11.4 *Release date: April 21, 2025* -Microsoft Store \| [Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_11.4.exe) \| App Store \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_11.4.dmg) \| Snapcraft \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_11.4.deb) +[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_11.4.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_11.4.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_11.4.deb) Fixed 10 app crash reasons. - ## 11.3 *Release date: April 18, 2025* -[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_11.3.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_11.3.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_11.3.deb) - ### New selection tools Two new options are now available in the Action Bar: @@ -69,19 +255,12 @@ We’ve optimized the disk size of Lunacy. Depending on your platform, it now ta *Release date: March 27, 2025* -[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_11.2.1.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_11.2.1.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_11.2.1.deb) - - - - Reverted recent changes to masks. They now work as before. ## 11.2 *Release date: March 27, 2025* -[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_11.2.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_11.2.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_11.2.deb) - - ### Fixes and improvements - Added navigation buttons to the Prototype Player. - Fixed crashes and file access issues on macOS. @@ -92,8 +271,6 @@ We’ve optimized the disk size of Lunacy. Depending on your platform, it now ta *Release date: March 21, 2025* -[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_11.1.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_11.1.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_11.1.deb) - ### Prototyping overlays support Added support for overlays in prototypes. @@ -136,8 +313,6 @@ Options to disable **Auto Z-Index** and **Auto Shape Colors** were added to the *Release date: March 4, 2025* -[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_11.0.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_11.0.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_11.0.deb) - ### Advanced prototyping We added new triggers and animations, so you can now create more complex prototypes. See the full details in the updated Prototyping guide. @@ -195,8 +370,6 @@ Lunacy now supports TIFF files. Import, edit, and export TIFFs without conversio *Release date: January 15, 2025* -[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_10.11.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_10.11.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_10.11.deb) - ### Improvements and fixes - Fixed server connection issues. @@ -205,8 +378,6 @@ Lunacy now supports TIFF files. Import, edit, and export TIFFs without conversio *Release date: December 13, 2024* -[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_10.10.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_10.10.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_10.10.deb) - ### Improvements and fixes - Major rendering performance boost, achieving 60fps where it was previously 1-10fps. @@ -217,8 +388,6 @@ Lunacy now supports TIFF files. Import, edit, and export TIFFs without conversio *Release date: December 3, 2024* -[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_10.9.0.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_10.9.0.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_10.9.0.deb) - ### Improvements and fixes - PDF import is now faster. If a document has more than eight pages of equal size, they are arranged in a grid. @@ -231,9 +400,6 @@ Lunacy now supports TIFF files. Import, edit, and export TIFFs without conversio *Release date: November 29, 2024* - -[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_10.8.0.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_10.8.0.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_10.8.0.deb) - ### Improvements and fixes - New document page selector. @@ -244,8 +410,6 @@ Lunacy now supports TIFF files. Import, edit, and export TIFFs without conversio *Release date: November 23, 2024* -[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_10.7.0.1613.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_10.7.0.1613.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_10.7.0.1613.deb) - ### Improvements and fixes - Improved hardware compatibility. @@ -257,9 +421,6 @@ Lunacy now supports TIFF files. Import, edit, and export TIFFs without conversio *Release date: November 18, 2024* -[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_10.6.exe) \| [macOS Installer](https://lcdn.icons8.com/setup/Lunacy_10.6.dmg) \| [Linux Installer](https://lcdn.icons8.com/setup/Lunacy_10.6.deb) - - ### Color variables We've introduced the **Variables** tab in the left panel, where you can now manage **color variables**. Soon, we’ll be adding other variable types too. @@ -282,8 +443,6 @@ For details about color variables, click @@ -1037,7 +989,7 @@ It means that even more people can install Lunacy and create awesome designs, sh * We temporarily removed the support for external plugins. That was a trade-off we had to make in order to release the Mac and Linux versions. We're planning to restore the feature in one of the upcoming releases. * We removed suggestions panels. We need to re-think this feature. A new, revamped version will appear soon. -* There is a known issue with the display of some fonts. We're doing our best to fix it. Workaround: use [v.6.9](https://lcdn.icons8.com/setup/LunacySetup_6.9.0.exe). +* There is a known issue with the display of some fonts. We're doing our best to fix it. * And one more thing. If you'd like to have Lunacy on iPad, vote for it here. @@ -1047,9 +999,6 @@ It means that even more people can install Lunacy and create awesome designs, sh *Release date: June 25, 2021* -[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_7.1.0.exe) - - ### New features #### Privacy and share links management @@ -1096,9 +1045,6 @@ To exit the mode, click the user's avatar once again. *Release date: May 21, 2021* -[Windows Installer](https://lcdn.icons8.com/setup/LunacySetup_7.0.0.exe) - - ### New features @@ -1182,8 +1128,6 @@ If you also want to take part in Lunacy localization, click | **Text tool.** Add text layers to the document. Comes with an on-canvas text generation option.| `T` | | | **Pen tool.** Used for creating custom vectors or shapes.| `P` | | | **Image tool.** Use it for importing images. | `M` | -| | **GUI tools.** A set of basic interface element components from UI kits (buttons, checkboxes, radio buttons, and so on) that you can quickly add to your designs. | `B` — button
`D` — text input field
`F` — checkbox
`Y` — radio button
`J` — toggle
`W` — dropdown | +| | **GUI tool.** A set of basic interface element components from UI kits (buttons, checkboxes, radio buttons, and so on) that you can quickly add to your designs. | `B` — button
`D` — text input field
`F` — checkbox
`Y` — radio button
`J` — toggle
`W` — dropdown | | | **Icon tool.** Keeps recently used icons at hand. | `X` | | | **Comment tool.** Activate it to leave comments anywhere on the canvas (only available in cloud documents).| `C` | | | **Scale tool.** Proportionally change the size of the elements on the canvas. | `K` | diff --git a/docs/rn_private_cloud.md b/docs/rn_private_cloud.md deleted file mode 100644 index 175f5b0..0000000 --- a/docs/rn_private_cloud.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -# Page settings -layout: default -keywords: -comments: false - -# Hero section -title: Release History -description: New features and fixes for each version of Lunacy -icon: 'activity-history' - -# Micro navigation -left_menu_off: false -release_note: - - title: Version 1 - url: 'version-1' - - ---- - -# Version 1 - -## 1.0.0.259 - -*Release date: April 2, 2024* - -- Version number is now displayed in the admin panel - -- User actions logging added - -- SSO login support - -- Fixed issues with loading large documents - -- Other minor bug fixes \ No newline at end of file diff --git a/scripts/Program.cs b/scripts/Program.cs index 4dda323..382a61b 100644 --- a/scripts/Program.cs +++ b/scripts/Program.cs @@ -35,9 +35,7 @@ else //get md files var mdFiles = Directory.GetFiles(rootPath, "*.md", SearchOption.AllDirectories) .Where(x => !x.EndsWith("README.md") && - !x.EndsWith("index.md") && - !x.EndsWith("rn_private_cloud.md") && - !x.EndsWith("creating_private_cloud.md")) + !x.EndsWith("index.md")) .OrderBy(x => Path.GetFileName(x)) .ToArray(); foreach (var path in mdFiles)