Text
Figma Text
The Text in Incari provides similar functionality as its equivalent in Figma.
![](https://docs.incari.com/~gitbook/image?url=https%3A%2F%2F2561100106-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Ff6JZovzOqBctA4C1o76u%252Fuploads%252Fgit-blob-544615791b9f52cc37ba67c367bc1a74737a40f9%252Ftext2dimage120232.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=eb0a9c42&sv=1)
There are several Attributes which allow the user heightened customizability and control.
Attributes
Transformation
![](https://docs.incari.com/~gitbook/image?url=https%3A%2F%2F2561100106-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Ff6JZovzOqBctA4C1o76u%252Fuploads%252Fgit-blob-2c61d9a83c0cb34306d8df159bfa7da93c0f0bd8%252Fbuttonattstransformation.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=5f84a9a1&sv=1)
The Transformation
Attributes deal with placement, rotation, and size in XY space. More information can be found here.
Blending
![](https://docs.incari.com/~gitbook/image?url=https%3A%2F%2F2561100106-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Ff6JZovzOqBctA4C1o76u%252Fuploads%252Fgit-blob-92bbd8340c3ab7405f748d42bd01992a7c9ec2a4%252Ffigmablendingattribute.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=8607cc23&sv=1)
This Attribute lets the user set a Blend Mode
as a base property of the Text. These are established on common formulas, examples of each can be accessed here. An Object's Blend Mode
can also be set with the Set Blend Mode Node.
Fill
The Fill
Attributes consist of different items called Elements
. Each Element
contains a Type
. This can be either Solid
or Image
and changes some of the available Attributes under this category.
If there is more than one Fill Element
, the most recent one will take precedent over the others (unless some Blend Mode
is applied).
Solid
![](https://docs.incari.com/~gitbook/image?url=https%3A%2F%2F2561100106-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Ff6JZovzOqBctA4C1o76u%252Fuploads%252Fgit-blob-50708bd3bff5b5fea6140772a60d9a86f8f3fd1a%252Fbooleanoperationfill20232.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=7f678093&sv=1)
When Solid
is selected, Color
is visible.
Color
is a color selector that lets the user pick theFill's
color.Similar to the base property described previously,
Blend Mode
here affects theFill Elements
only. These are established on common formulas, examples of each can be accessed here. It can also be set with the Set Blend Mode Node.Opacity
refers to how opaque or transparent theFill
appears. This is represented by an integer between 0 and 1.
Image
![](https://docs.incari.com/~gitbook/image?url=https%3A%2F%2F2561100106-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Ff6JZovzOqBctA4C1o76u%252Fuploads%252Fgit-blob-740546c12bdb08d58c7df56323b76bab3260f679%252Ffigmafillimageatts.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=79000675&sv=1)
When Image
is selected, Image
and Fit Mode
are visible.
Image
is the desired Texture file.Fit Mode
determines how the Texture is displayed. These can beFill
,Fit
,Crop
, andTile
.Tile
has the additional Attribute ofScale Factor
, which augments the tesselation.Similar to the base property described previously,
Blend Mode
here affects theFill Elements
only. These are established on common formulas, examples of each can be accessed here. It can also be set with the Set Blend Mode Node.Opacity
refers to how opaque or transparent theFill
appears. This is represented by an integer between 0 and 1.
Font
![](https://docs.incari.com/~gitbook/image?url=https%3A%2F%2F2561100106-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Ff6JZovzOqBctA4C1o76u%252Fuploads%252Fgit-blob-1fc5919e2420005a403a1fa0c83ad8920f410744%252Ffigmatextfontatts.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=4998b507&sv=1)
The Font
Attributes controls many properties of a Text Object, such as:
Family
, which offers three different font types:monospace
,sans-serif
, andserif
. More fonts can be added by the user in Project Settings.Size
controls how large or small the text is.Line Height (%)
determines the spacing between lines of text.Letter Spacing (px)
determines the spacing between each individual letter.Paragrpah Spacing
determines the spacing between each paragraph.Horizontal Alignment
decides the alignment of the text horizontally within the text space. It can be eitherLeft
,Center
, orRight
.Vertical Alignment
decides the alignment of the text vertically within the text space. It can either beTop
,Center
, orBottom
.
Stroke
The Stroke
Attributes consist of different items called Elements
. Each Element
contains a Type
. This can be either Solid
or Image
and changes some of the available Attributes under this category. There are also two fixed Attributes outside of the Elements
. These are:
Width
, which is how wide (in pixels) eachStroke
will appear. This applies to eachStroke Element
.Position
, which determines what part of the outline identifies the outside of the Object. For example, ifInner
is selected, then the outside of theStroke
is the outside of the Object. IfCenter
is selected, then theStroke's
center is the outside of the Object. IfOuter
is selected, then the inside of theStroke
is the outside of the Object.
Solid
![](https://docs.incari.com/~gitbook/image?url=https%3A%2F%2F2561100106-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Ff6JZovzOqBctA4C1o76u%252Fuploads%252Fgit-blob-07da3627c47128c9249c2895730d086764b4c07e%252Fbooleanoperationstroke20232.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=7081f2a5&sv=1)
When Solid
is selected, Color
is visible.
Color
is a color selector that lets the user pick theStroke's
color.Similar to the base property described previously,
Blend Mode
here affects theStroke Elements
only. These are established on common formulas, examples of each can be accessed here. It can also be set with the Set Blend Mode Node.Opacity
refers to how opaque or transparent theStroke
appears. This is represented by an integer between 0 and 1.
Image
![](https://docs.incari.com/~gitbook/image?url=https%3A%2F%2F2561100106-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Ff6JZovzOqBctA4C1o76u%252Fuploads%252Fgit-blob-be82531f390672f345f57298dc20515cc48acfea%252Ffigmastrokeimage.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=1c166dd3&sv=1)
When Image
is selected, Image
and Fit Mode
are visible.
Image
is the desired Texture file.Fit Mode
determines how the Texture is displayed. These can beFill
,Fit
,Crop
, andTile
.Tile
has the additional Attribute ofScale Factor
, which augments the tesselation.Similar to the base property described previously,
Blend Mode
here affects theStroke Elements
only. These are established on common formulas, examples of each can be accessed here. It can also be set with the Set Blend Mode Node.Opacity
refers to how opaque or transparent theFill
appears. This is represented by an integer between 0 and 1.
Mask
A Mask is an Object that shows a certain area of another Object while concealing the rest. Any Object (e.g., an Ellipse, Rectangle, Frame, Group, or Text) can be used as a Mask.
For easier visualization, think of the Mask as a cookie cutter while the masked Object is the dough: the cookie cutter shows only a part and discards the rest.
![](https://docs.incari.com/~gitbook/image?url=https%3A%2F%2F2561100106-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Ff6JZovzOqBctA4C1o76u%252Fuploads%252Fgit-blob-3522d2bf131b5d03d6f9dff4d1c31b27f52c646f%252Ffigmamaskattsreal.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=65dde681&sv=1)
The Type
Attribute has three options:
None
- nothing is applied.Alpha
- the Mask has an opacity level (alpha channel) determining with which level of opacity (or transparency) the masked Object is revealed: 0% opacity reveals nothing, 100% opacity is equivalent to a Mask withVector
type.Vector
- only modifies the shape outline of the masked ObjectLuminance
- allows the user to utilize brightness to determine the effect of the Mask; the brighter the area of a Mask, the more that is revealed and the darker the area, the less that is revealed.
Object
allows the user to select what should be the masked Object.
Apply Mask
is a toggle that applies the Mask when set to on, and disables the Mask when set to off.
Text
![](https://docs.incari.com/~gitbook/image?url=https%3A%2F%2F2561100106-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Ff6JZovzOqBctA4C1o76u%252Fuploads%252Fgit-blob-34a3a7c64bea4b4aeeb21737078a530e89a305b5%252Ffigmatexttextatts.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=722995f5&sv=1)
Here, the user can input the desired text of the Text Object.
Tag
![](https://docs.incari.com/~gitbook/image?url=https%3A%2F%2F2561100106-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Ff6JZovzOqBctA4C1o76u%252Fuploads%252Fgit-blob-dc4f375e34ce9bdd2bebc3e93ff34c8680ab55bb%252Fbuttonattstag.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=4d88ad50&sv=1)
This Attribute manages the tags for the Button. See more on tags here.
Last updated