Power Apps UI Cooker

About Author

Release Notes

Custom Functions

Custom Components

Explore

Custom Components

Rich Text

MyCondy

Last edited 32 days ago by MyCondy

How to design it in Power Apps

Preview

⁠

⁠

What does it consist of?

2x Container

1x Text Input PCF

11x Image

Procedure

Step 1 - create boolean variables on Screen

Set(left_prop,false);Set(center_prop,false);Set(right_prop,false);Set(bold_prop,false);Set(italic_prop,false);Set(underline_prop,false);Set(h1_prop,false);Set(h2_prop,false);Set(h3_prop,false)

Step 2 - create richtext container

Add a new Vertical Container PCF object, call it "richtext_custom" with this "DropShadow" property:

DropShadow.Semibold

Step 3 - create text input

Add a new Text Input object under "richtext_custom", call it "multiline" with this "HintText" property:

"insert text..."

and "Mode" property:

'TextInputCanvas.Mode'.Multiline

and "Align" property:

If(left_prop,'TextInputCanvas.Align'.Start,center_prop, 'TextInputCanvas.Align'.Center,right_prop,'TextInputCanvas.Align'.End)

and "FontWeight" property:

If(bold_prop,FontWeight.Bold,italic_prop,FontWeight.Lighter, FontWeight.Normal)

and "FontItalic" property:

italic_prop

and "FontUnderline" property:

underline_prop

and "FontSize" property:

If(h1_prop, 40,h2_prop,30,h3_prop,20)

Step 4 - create action icons

Add a new Horizontal Container PCF object, call it "icons_frame" with this "Gap" property:

And add these Images objects with "Image" properties:

Left Icon

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M3 2.75C3 2.55109 3.07902 2.36032 3.21967 2.21967C3.36032 2.07902 3.55109 2 3.75 2C3.94891 2 4.13968 2.07902 4.28033 2.21967C4.42098 2.36032 4.5 2.55109 4.5 2.75V21.25C4.5 21.4489 4.42098 21.6397 4.28033 21.7803C4.13968 21.921 3.94891 22 3.75 22C3.55109 22 3.36032 21.921 3.21967 21.7803C3.07902 21.6397 3 21.4489 3 21.25V2.75ZM8.25 4C7.65326 4 7.08097 4.23705 6.65901 4.65901C6.23705 5.08097 6 5.65326 6 6.25V8.75C6 9.34674 6.23705 9.91903 6.65901 10.341C7.08097 10.7629 7.65326 11 8.25 11H18.75C19.3467 11 19.919 10.7629 20.341 10.341C20.7629 9.91903 21 9.34674 21 8.75V6.25C21 5.65326 20.7629 5.08097 20.341 4.65901C19.919 4.23705 19.3467 4 18.75 4H8.25ZM7.5 6.25C7.5 6.05109 7.57902 5.86032 7.71967 5.71967C7.86032 5.57902 8.05109 5.5 8.25 5.5H18.75C18.9489 5.5 19.1397 5.57902 19.2803 5.71967C19.421 5.86032 19.5 6.05109 19.5 6.25V8.75C19.5 8.94891 19.421 9.13968 19.2803 9.28033C19.1397 9.42098 18.9489 9.5 18.75 9.5H8.25C8.05109 9.5 7.86032 9.42098 7.71967 9.28033C7.57902 9.13968 7.5 8.94891 7.5 8.75V6.25ZM8.25 13C7.65326 13 7.08097 13.2371 6.65901 13.659C6.23705 14.081 6 14.6533 6 15.25V17.75C6 18.0455 6.0582 18.3381 6.17127 18.611C6.28434 18.884 6.45008 19.1321 6.65901 19.341C6.86794 19.5499 7.11598 19.7157 7.38896 19.8287C7.66194 19.9418 7.95453 20 8.25 20H15.25C15.5455 20 15.8381 19.9418 16.111 19.8287C16.384 19.7157 16.6321 19.5499 16.841 19.341C17.0499 19.1321 17.2157 18.884 17.3287 18.611C17.4418 18.3381 17.5 18.0455 17.5 17.75V15.25C17.5 14.6533 17.2629 14.081 16.841 13.659C16.419 13.2371 15.8467 13 15.25 13H8.25ZM7.5 15.25C7.5 15.0511 7.57902 14.8603 7.71967 14.7197C7.86032 14.579 8.05109 14.5 8.25 14.5H15.25C15.4489 14.5 15.6397 14.579 15.7803 14.7197C15.921 14.8603 16 15.0511 16 15.25V17.75C16 17.9489 15.921 18.1397 15.7803 18.2803C15.6397 18.421 15.4489 18.5 15.25 18.5H8.25C8.05109 18.5 7.86032 18.421 7.71967 18.2803C7.57902 18.1397 7.5 17.9489 7.5 17.75V15.25Z' fill='#212121'/> </svg>")

Center Icon

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M21.25 12.75C21.4489 12.75 21.6397 12.671 21.7803 12.5303C21.921 12.3897 22 12.1989 22 12C22 11.8011 21.921 11.6103 21.7803 11.4697C21.6397 11.329 21.4489 11.25 21.25 11.25H20V8.75C20 8.45453 19.9418 8.16194 19.8287 7.88896C19.7157 7.61598 19.5499 7.36794 19.341 7.15901C19.1321 6.95008 18.884 6.78434 18.611 6.67127C18.3381 6.5582 18.0455 6.5 17.75 6.5H15.25C14.6533 6.5 14.081 6.73705 13.659 7.15901C13.2371 7.58097 13 8.15326 13 8.75V11.25H11V6.75C11 6.15326 10.7629 5.58097 10.341 5.15901C9.91903 4.73705 9.34674 4.5 8.75 4.5H6.25C5.65326 4.5 5.08097 4.73705 4.65901 5.15901C4.23705 5.58097 4 6.15326 4 6.75V11.25H2.75C2.55109 11.25 2.36032 11.329 2.21967 11.4697C2.07902 11.6103 2 11.8011 2 12C2 12.1989 2.07902 12.3897 2.21967 12.5303C2.36032 12.671 2.55109 12.75 2.75 12.75H4V17.25C4 17.8467 4.23705 18.419 4.65901 18.841C5.08097 19.2629 5.65326 19.5 6.25 19.5H8.75C9.34674 19.5 9.91903 19.2629 10.341 18.841C10.7629 18.419 11 17.8467 11 17.25V12.75H13V15.25C13 15.8467 13.2371 16.419 13.659 16.841C14.081 17.2629 14.6533 17.5 15.25 17.5H17.75C18.0455 17.5 18.3381 17.4418 18.611 17.3287C18.884 17.2157 19.1321 17.0499 19.341 16.841C19.5499 16.6321 19.7157 16.384 19.8287 16.111C19.9418 15.8381 20 15.5455 20 15.25V12.75H21.25ZM18.5 8.75V15.25C18.5 15.4489 18.421 15.6397 18.2803 15.7803C18.1397 15.921 17.9489 16 17.75 16H15.25C15.0511 16 14.8603 15.921 14.7197 15.7803C14.579 15.6397 14.5 15.4489 14.5 15.25V8.75C14.5 8.55109 14.579 8.36032 14.7197 8.21967C14.8603 8.07902 15.0511 8 15.25 8H17.75C17.9489 8 18.1397 8.07902 18.2803 8.21967C18.421 8.36032 18.5 8.55109 18.5 8.75ZM9.5 6.75V17.25C9.5 17.4489 9.42098 17.6397 9.28033 17.7803C9.13968 17.921 8.94891 18 8.75 18H6.25C6.05109 18 5.86032 17.921 5.71967 17.7803C5.57902 17.6397 5.5 17.4489 5.5 17.25V6.75C5.5 6.55109 5.57902 6.36032 5.71967 6.21967C5.86032 6.07902 6.05109 6 6.25 6H8.75C8.94891 6 9.13968 6.07902 9.28033 6.21967C9.42098 6.36032 9.5 6.55109 9.5 6.75Z' fill='#212121'/> </svg>")

Right Icon

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M21 2.75C21 2.55109 20.921 2.36032 20.7803 2.21967C20.6397 2.07902 20.4489 2 20.25 2C20.0511 2 19.8603 2.07902 19.7197 2.21967C19.579 2.36032 19.5 2.55109 19.5 2.75V21.25C19.5 21.4489 19.579 21.6397 19.7197 21.7803C19.8603 21.921 20.0511 22 20.25 22C20.4489 22 20.6397 21.921 20.7803 21.7803C20.921 21.6397 21 21.4489 21 21.25V2.75ZM15.75 4C16.3467 4 16.919 4.23705 17.341 4.65901C17.7629 5.08097 18 5.65326 18 6.25V8.75C18 9.34674 17.7629 9.91903 17.341 10.341C16.919 10.7629 16.3467 11 15.75 11H5.25C4.65326 11 4.08097 10.7629 3.65901 10.341C3.23705 9.91903 3 9.34674 3 8.75V6.25C3 5.65326 3.23705 5.08097 3.65901 4.65901C4.08097 4.23705 4.65326 4 5.25 4H15.75ZM16.5 6.25C16.5 6.05109 16.421 5.86032 16.2803 5.71967C16.1397 5.57902 15.9489 5.5 15.75 5.5H5.25C5.05109 5.5 4.86032 5.57902 4.71967 5.71967C4.57902 5.86032 4.5 6.05109 4.5 6.25V8.75C4.5 9.164 4.836 9.5 5.25 9.5H15.75C15.9489 9.5 16.1397 9.42098 16.2803 9.28033C16.421 9.13968 16.5 8.94891 16.5 8.75V6.25ZM15.75 13C16.3467 13 16.919 13.2371 17.341 13.659C17.7629 14.081 18 14.6533 18 15.25V17.75C18 18.0455 17.9418 18.3381 17.8287 18.611C17.7157 18.884 17.5499 19.1321 17.341 19.341C17.1321 19.5499 16.884 19.7157 16.611 19.8287C16.3381 19.9418 16.0455 20 15.75 20H8.75C8.45453 20 8.16194 19.9418 7.88896 19.8287C7.61598 19.7157 7.36794 19.5499 7.15901 19.341C6.95008 19.1321 6.78434 18.884 6.67127 18.611C6.5582 18.3381 6.5 18.0455 6.5 17.75V15.25C6.5 14.6533 6.73705 14.081 7.15901 13.659C7.58097 13.2371 8.15326 13 8.75 13H15.75ZM16.5 15.25C16.5 15.0511 16.421 14.8603 16.2803 14.7197C16.1397 14.579 15.9489 14.5 15.75 14.5H8.75C8.55109 14.5 8.36032 14.579 8.21967 14.7197C8.07902 14.8603 8 15.0511 8 15.25V17.75C8 18.164 8.336 18.5 8.75 18.5H15.75C15.9489 18.5 16.1397 18.421 16.2803 18.2803C16.421 18.1397 16.5 17.9489 16.5 17.75V15.25Z' fill='#212121'/> </svg>")

Divider Icon

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M11.25 4.75V19.25C11.25 19.4489 11.329 19.6397 11.4697 19.7803C11.6103 19.921 11.8011 20 12 20C12.1989 20 12.3897 19.921 12.5303 19.7803C12.671 19.6397 12.75 19.4489 12.75 19.25V4.75C12.75 4.55109 12.671 4.36032 12.5303 4.21967C12.3897 4.07902 12.1989 4 12 4C11.8011 4 11.6103 4.07902 11.4697 4.21967C11.329 4.36032 11.25 4.55109 11.25 4.75Z' fill='#212121'/> </svg>")

Bold Icon

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M6.935 4.44C7.07428 4.30055 7.23967 4.18992 7.42172 4.11442C7.60377 4.03892 7.79892 4.00004 7.996 4H12.379C15.017 4 17 6.182 17 8.625C16.9973 9.58716 16.695 10.5246 16.135 11.307C17.212 12.134 18.001 13.427 18.001 15.12C18 18.232 15.3 20 13.12 20H8C7.60218 20 7.22065 19.842 6.93934 19.5607C6.65804 19.2794 6.5 18.8978 6.5 18.5L6.496 5.5C6.496 5.103 6.653 4.721 6.935 4.44ZM9.5 10.25H12.38C13.283 10.25 14 9.49 14 8.625C14 7.76 13.281 7 12.38 7H9.498L9.5 10.25ZM9.5 13.25V17H13.12C13.994 17 15 16.246 15 15.12C15 13.99 14.026 13.25 13.12 13.25H9.5Z' fill='#212121'/> </svg>")

Italic Icon

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M9.75 4H18.254C18.444 4.00006 18.6269 4.07224 18.7658 4.20197C18.9046 4.3317 18.9891 4.5093 19.002 4.69888C19.015 4.88846 18.9555 5.07589 18.8356 5.2233C18.7157 5.37071 18.5443 5.4671 18.356 5.493L18.254 5.499H15.057L10.037 18.5H14.25C14.4311 18.5002 14.6059 18.566 14.7423 18.6851C14.8787 18.8042 14.9674 18.9686 14.992 19.148L14.999 19.25C14.999 19.4312 14.9334 19.6063 14.8142 19.7429C14.6951 19.8795 14.5306 19.9684 14.351 19.993L14.25 20H4.75C4.65174 19.9999 4.55446 19.9804 4.46375 19.9426C4.37304 19.9048 4.29068 19.8495 4.22138 19.7798C4.15208 19.7101 4.09721 19.6275 4.05991 19.5366C4.02261 19.4456 4.00361 19.3483 4.004 19.25C4.004 18.87 4.284 18.556 4.649 18.507L4.75 18.5H8.435L8.456 18.435L13.45 5.499H9.75C9.56894 5.49875 9.39408 5.43301 9.2577 5.3139C9.12132 5.1948 9.03263 5.03038 9.008 4.851L9 4.75C9.00001 4.56876 9.06565 4.39366 9.18477 4.25707C9.30389 4.12048 9.46845 4.03165 9.648 4.007L9.751 4H9.75Z' fill='#212121'/> </svg>")

Underline Icon

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M6.75 19H17.25C17.44 19.0001 17.6229 19.0722 17.7618 19.202C17.9006 19.3317 17.9851 19.5093 17.998 19.6989C18.011 19.8885 17.9515 20.0759 17.8316 20.2233C17.7117 20.3707 17.5402 20.4671 17.352 20.493L17.25 20.5H6.75C6.55998 20.4999 6.37706 20.4278 6.23821 20.298C6.09936 20.1683 6.01493 19.9907 6.00197 19.8011C5.98902 19.6115 6.04852 19.4241 6.16843 19.2767C6.28835 19.1293 6.45975 19.0329 6.648 19.007L6.75 19ZM17.25 4C17.4312 4.00001 17.6063 4.06564 17.7429 4.18477C17.8795 4.30389 17.9684 4.46845 17.993 4.648L18 4.75V10.75C18 15.144 15.937 17.5 11.997 17.5C8.142 17.5 6.087 15.245 6.003 11.034L6 10.75V4.75C6.00006 4.55998 6.07224 4.37706 6.20197 4.23821C6.3317 4.09936 6.5093 4.01493 6.69888 4.00197C6.88846 3.98902 7.07589 4.04852 7.2233 4.16843C7.37071 4.28835 7.4671 4.45975 7.493 4.648L7.5 4.75V10.75C7.496 14.358 8.933 16 11.997 16C14.982 16 16.425 14.44 16.497 11.024L16.5 10.75V4.75C16.5 4.55109 16.579 4.36032 16.7197 4.21967C16.8603 4.07902 17.0511 4 17.25 4Z' fill='#212121'/> </svg>")

Header 1 Icon

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M19.59 5.08096C19.4615 5.01518 19.3166 4.9881 19.173 5.00301C19.0294 5.01792 18.8933 5.07418 18.781 5.16496C18.6629 5.25944 18.5762 5.38735 18.532 5.53196C17.842 7.58296 16.475 8.94096 15.364 9.60696C15.1956 9.71035 15.0748 9.87604 15.0278 10.068C14.9809 10.26 15.0116 10.4627 15.1133 10.6322C15.215 10.8016 15.3795 10.9241 15.571 10.9729C15.7625 11.0217 15.9656 10.993 16.136 10.893C16.91 10.429 17.759 9.71296 18.5 8.74696V18.25C18.5 18.4489 18.579 18.6396 18.7197 18.7803C18.8603 18.9209 19.0511 19 19.25 19C19.4489 19 19.6397 18.9209 19.7803 18.7803C19.921 18.6396 20 18.4489 20 18.25V5.77196C20.004 5.62992 19.9677 5.48966 19.8951 5.3675C19.8225 5.24535 19.7167 5.14532 19.59 5.08096ZM3.5 5.74996C3.5 5.55105 3.42098 5.36028 3.28033 5.21963C3.13968 5.07898 2.94891 4.99996 2.75 4.99996C2.55109 4.99996 2.36032 5.07898 2.21967 5.21963C2.07902 5.36028 2 5.55105 2 5.74996V18.25C2 18.4489 2.07902 18.6396 2.21967 18.7803C2.36032 18.9209 2.55109 19 2.75 19C2.94891 19 3.13968 18.9209 3.28033 18.7803C3.42098 18.6396 3.5 18.4489 3.5 18.25V12.5H10V18.25C10 18.4489 10.079 18.6396 10.2197 18.7803C10.3603 18.9209 10.5511 19 10.75 19C10.9489 19 11.1397 18.9209 11.2803 18.7803C11.421 18.6396 11.5 18.4489 11.5 18.25V5.74996C11.5 5.55105 11.421 5.36028 11.2803 5.21963C11.1397 5.07898 10.9489 4.99996 10.75 4.99996C10.5511 4.99996 10.3603 5.07898 10.2197 5.21963C10.079 5.36028 10 5.55105 10 5.74996V11H3.5V5.74996Z' fill='#212121'/> </svg>")

Header 2 Icon

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M4.5 5.75C4.5 5.55109 4.42098 5.36032 4.28033 5.21967C4.13968 5.07902 3.94891 5 3.75 5C3.55109 5 3.36032 5.07902 3.21967 5.21967C3.07902 5.36032 3 5.55109 3 5.75V18.25C3 18.4489 3.07902 18.6397 3.21967 18.7803C3.36032 18.921 3.55109 19 3.75 19C3.94891 19 4.13968 18.921 4.28033 18.7803C4.42098 18.6397 4.5 18.4489 4.5 18.25V12.5H11V18.25C11 18.4489 11.079 18.6397 11.2197 18.7803C11.3603 18.921 11.5511 19 11.75 19C11.9489 19 12.1397 18.921 12.2803 18.7803C12.421 18.6397 12.5 18.4489 12.5 18.25V5.75C12.5 5.55109 12.421 5.36032 12.2803 5.21967C12.1397 5.07902 11.9489 5 11.75 5C11.5511 5 11.3603 5.07902 11.2197 5.21967C11.079 5.36032 11 5.55109 11 5.75V11H4.5V5.75ZM15.421 7.835C15.651 7.375 16.334 6.5 18.001 6.5C18.843 6.5 19.46 6.76 19.861 7.139C20.258 7.515 20.501 8.06 20.501 8.75C20.501 10.713 19.201 11.818 17.543 13.093L17.331 13.256C15.825 14.409 14 15.806 14 18.25C14 18.4489 14.079 18.6397 14.2197 18.7803C14.3603 18.921 14.5511 19 14.75 19H21.25C21.4489 19 21.6397 18.921 21.7803 18.7803C21.921 18.6397 22 18.4489 22 18.25C22 18.0511 21.921 17.8603 21.7803 17.7197C21.6397 17.579 21.4489 17.5 21.25 17.5H15.59C15.905 16.248 17.017 15.39 18.456 14.282C20.05 13.057 22 11.537 22 8.75C22 7.69 21.617 6.735 20.89 6.048C20.166 5.364 19.158 5 18 5C15.667 5 14.516 6.291 14.08 7.165C13.9994 7.34179 13.9905 7.54298 14.0552 7.72619C14.12 7.9094 14.2533 8.06032 14.4272 8.14717C14.601 8.23402 14.8017 8.25001 14.9871 8.19178C15.1725 8.13355 15.3281 8.00564 15.421 7.835Z' fill='#212121'/> </svg>")

Header 3 Icon

"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M3.5 5.75C3.5 5.55109 3.42098 5.36032 3.28033 5.21967C3.13968 5.07902 2.94891 5 2.75 5C2.55109 5 2.36032 5.07902 2.21967 5.21967C2.07902 5.36032 2 5.55109 2 5.75V18.25C2 18.4489 2.07902 18.6397 2.21967 18.7803C2.36032 18.921 2.55109 19 2.75 19C2.94891 19 3.13968 18.921 3.28033 18.7803C3.42098 18.6397 3.5 18.4489 3.5 18.25V12.5H10V18.25C10 18.4489 10.079 18.6397 10.2197 18.7803C10.3603 18.921 10.5511 19 10.75 19C10.9489 19 11.1397 18.921 11.2803 18.7803C11.421 18.6397 11.5 18.4489 11.5 18.25V5.75C11.5 5.55109 11.421 5.36032 11.2803 5.21967C11.1397 5.07902 10.9489 5 10.75 5C10.5511 5 10.3603 5.07902 10.2197 5.21967C10.079 5.36032 10 5.55109 10 5.75V11H3.5V5.75ZM15.42 7.835C15.65 7.375 16.334 6.5 18 6.5C18.843 6.5 19.46 6.76 19.86 7.139C20.258 7.515 20.5 8.06 20.5 8.75C20.5 9.356 20.339 9.776 20.116 10.082C19.888 10.396 19.561 10.636 19.163 10.817C18.347 11.187 17.361 11.25 16.78 11.25C16.5811 11.25 16.3903 11.329 16.2497 11.4697C16.109 11.6103 16.03 11.8011 16.03 12C16.03 12.1989 16.109 12.3897 16.2497 12.5303C16.3903 12.671 16.5811 12.75 16.78 12.75C17.361 12.75 18.347 12.813 19.163 13.183C19.561 13.363 19.888 13.603 20.116 13.918C20.339 14.224 20.5 14.644 20.5 15.25C20.5 16.336 19.586 17.5 18 17.5C16.273 17.5 15.652 16.74 15.447 16.224C15.4129 16.1296 15.3601 16.043 15.2919 15.9693C15.2237 15.8956 15.1414 15.8364 15.0499 15.7952C14.9583 15.7539 14.8594 15.7314 14.7591 15.7291C14.6587 15.7268 14.5589 15.7446 14.4655 15.7816C14.3722 15.8185 14.2872 15.8739 14.2156 15.9443C14.1441 16.0147 14.0874 16.0988 14.0489 16.1915C14.0104 16.2843 13.991 16.3838 13.9917 16.4842C13.9924 16.5846 14.0132 16.6838 14.053 16.776C14.508 17.926 15.727 19 18 19C20.414 19 22 17.164 22 15.25C22 14.356 21.755 13.62 21.33 13.036C21.0141 12.6091 20.6095 12.2557 20.144 12C20.6095 11.7443 21.0141 11.3909 21.33 10.964C21.755 10.38 22 9.644 22 8.75C22 7.69 21.617 6.735 20.89 6.048C20.165 5.364 19.157 5 18 5C15.666 5 14.516 6.291 14.08 7.165C14.0301 7.25353 13.9987 7.35127 13.9878 7.45229C13.9768 7.55331 13.9865 7.65551 14.0163 7.75267C14.046 7.84983 14.0952 7.93994 14.1608 8.01752C14.2264 8.09511 14.3071 8.15854 14.398 8.20399C14.4889 8.24943 14.5881 8.27593 14.6895 8.28188C14.7909 8.28783 14.8925 8.2731 14.9881 8.2386C15.0837 8.20409 15.1713 8.15052 15.2455 8.08114C15.3197 8.01176 15.3791 7.92802 15.42 7.835Z' fill='#212121'/> </svg>")

And "OnSelect" property (Aligns properties):

If(left_prop,'TextInputCanvas.Align'.Start,center_prop, 'TextInputCanvas.Align'.Center,right_prop,'TextInputCanvas.Align'.End)

You can do this for the rest icons, like bold, italic, underline, or headers.

This is an output:

⁠

⁠

How to design it in Figma

Preview

⁠

⁠

What does it consist of?

14x Frame

14x Vector

1x Text

Procedure

Step 1 - create vertical frame

Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_richtext_custom" with these properties:

⁠

⁠

Step 2 - create text input

Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object under a "vercont_richtext_custom" frame, call it "txtpcf_multiline" with these properties:

⁠

⁠

Add a new Text (T command) object under a "txtpcf_multiline" frame, call it "insert text..." with these properties:

⁠

⁠

Step 3 - create action icons

Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object under a "vercont_richtext_custom" frame, call it "horcont_icons_frame" with these properties:

⁠

⁠

Add Vectors under this frame, you can use SVG code from the previous section.

This is an output:

⁠

⁠

How to use it via DesignKit

Prerequisites

the designed component according to the instructions from the previous section

Used Prefixes

vercont_richtext_custom = Vertical Container

txtpcf_multiline = Text Input

horcont_icons_frame = Horizontal Container

svg_align_left_icon = Image

YAML Output

⁠

Used Colours

Richtext Background - #FFFFFF

Icons Frame Background - #F5F5F5

Text Colour - #000000

Icons Colour - #212121

⁠

← Range Slider⁠

⁠

Search Box →⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.