Skip to content
Gallery
Power Apps UI Cooker
Introduction
About Author
Release Notes
Custom Functions
Custom Components
Share
Explore
Custom Components

icon picker
Feedback Box

MyCondy
Last edited 54 days ago by MyCondy

How to design it in Power Apps

Preview

⁠
Screenshot 2024-10-19 at 6.57.58.png
⁠
⁠

What does it consist of?

7x Container
2x Label
5x Button
5x Image

Procedure

Step 1 - create feedback box
Add a new Vertical Container PCF object, call it "feeling_box" with this "DropShadow" property:
DropShadow.Semibold
with CENTER horizontal and CENTER vertical alignment.
Step 2 - create title texts
Add a new Label object, call it "feeling_title" with Text property:
"How are you feeling?"
And a new Label object, call it "dscr_feeling_title" with Text property:
"Your input can help us to better understand"
Step 3 - create content frame
Add a new Horizontal Container PCF object, call it "feeling_box" with this "Gap" property:
10
with CENTER horizontal and CENTER vertical alignment.
Step 4 - create emoji frames
Add 5 Vertical Container PCF objects, call it "sad/not_bad/neutral/good/love_frame" with this "Gap" properties:
10
with CENTER horizontal and STRETCH vertical alignment.

And create 5 Image objects, call it "sad/not_bad/neutral/good/love_icon" with Image properties:
Sad
"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'> <g clip-path='url(#clip0_4049_316)'> <path d='M20 39.1667C30.5855 39.1667 39.1667 30.5855 39.1667 20C39.1667 9.41458 30.5855 0.833374 20 0.833374C9.41455 0.833374 0.833344 9.41458 0.833344 20C0.833344 30.5855 9.41455 39.1667 20 39.1667Z' fill='#FFCE52'/> <path d='M30.8333 29.7225C30.8683 30.4218 30.625 31.1066 30.1565 31.6271C29.688 32.1476 29.0325 32.4614 28.3333 32.5C27.6341 32.4614 26.9786 32.1476 26.5102 31.6271C26.0417 31.1066 25.7983 30.4218 25.8333 29.7225C25.8333 28.1883 27.7083 24.1666 28.3333 24.1666C28.9583 24.1666 30.8333 28.1883 30.8333 29.7225Z' fill='#3BC5F6'/> <path d='M8.33334 14.1667V12.5C11.435 12.5 13.3333 11.4209 13.3333 10.8334H15C15 13.0217 11.6467 14.1667 8.33334 14.1667Z' fill='#273941'/> <path d='M31.6667 14.1667C28.3533 14.1667 25 13.0217 25 10.8334H26.6667C26.6667 11.4209 28.565 12.5 31.6667 12.5V14.1667Z' fill='#273941'/> <path d='M20 29.1666C18.8442 29.2179 17.7106 29.5013 16.6667 30C16.6667 29.1159 17.0178 28.2681 17.643 27.6429C18.2681 27.0178 19.1159 26.6666 20 26.6666C20.884 26.6666 21.7319 27.0178 22.357 27.6429C22.9821 28.2681 23.3333 29.1159 23.3333 30C22.2894 29.5013 21.1558 29.2179 20 29.1666Z' fill='#273941'/> <path d='M28.3333 22.5C30.6345 22.5 32.5 20.6345 32.5 18.3333C32.5 16.0321 30.6345 14.1666 28.3333 14.1666C26.0321 14.1666 24.1667 16.0321 24.1667 18.3333C24.1667 20.6345 26.0321 22.5 28.3333 22.5Z' fill='#273941'/> <path d='M11.6667 22.5C13.9679 22.5 15.8333 20.6345 15.8333 18.3333C15.8333 16.0321 13.9679 14.1666 11.6667 14.1666C9.36548 14.1666 7.5 16.0321 7.5 18.3333C7.5 20.6345 9.36548 22.5 11.6667 22.5Z' fill='#273941'/> <path d='M28.3333 21.6667C30.1743 21.6667 31.6667 20.1743 31.6667 18.3333C31.6667 16.4924 30.1743 15 28.3333 15C26.4924 15 25 16.4924 25 18.3333C25 20.1743 26.4924 21.6667 28.3333 21.6667Z' fill='#141E21'/> <path d='M11.6667 21.6667C13.5076 21.6667 15 20.1743 15 18.3333C15 16.4924 13.5076 15 11.6667 15C9.82573 15 8.33334 16.4924 8.33334 18.3333C8.33334 20.1743 9.82573 21.6667 11.6667 21.6667Z' fill='#141E21'/> <path d='M29.5833 18.3334C30.2737 18.3334 30.8333 17.7737 30.8333 17.0834C30.8333 16.393 30.2737 15.8334 29.5833 15.8334C28.893 15.8334 28.3333 16.393 28.3333 17.0834C28.3333 17.7737 28.893 18.3334 29.5833 18.3334Z' fill='#F6FAFD'/> <path d='M27.0833 20.8334C27.7737 20.8334 28.3333 20.2737 28.3333 19.5834C28.3333 18.893 27.7737 18.3334 27.0833 18.3334C26.393 18.3334 25.8333 18.893 25.8333 19.5834C25.8333 20.2737 26.393 20.8334 27.0833 20.8334Z' fill='#F6FAFD'/> <path d='M29.5833 20C29.8134 20 30 19.8134 30 19.5833C30 19.3532 29.8134 19.1666 29.5833 19.1666C29.3532 19.1666 29.1667 19.3532 29.1667 19.5833C29.1667 19.8134 29.3532 20 29.5833 20Z' fill='#F6FAFD'/> <path d='M10.4167 18.3334C11.107 18.3334 11.6667 17.7737 11.6667 17.0834C11.6667 16.393 11.107 15.8334 10.4167 15.8334C9.7263 15.8334 9.16666 16.393 9.16666 17.0834C9.16666 17.7737 9.7263 18.3334 10.4167 18.3334Z' fill='#F6FAFD'/> <path d='M12.9167 20.8334C13.607 20.8334 14.1667 20.2737 14.1667 19.5834C14.1667 18.893 13.607 18.3334 12.9167 18.3334C12.2263 18.3334 11.6667 18.893 11.6667 19.5834C11.6667 20.2737 12.2263 20.8334 12.9167 20.8334Z' fill='#F6FAFD'/> <path d='M10.4167 20C10.6468 20 10.8333 19.8134 10.8333 19.5833C10.8333 19.3532 10.6468 19.1666 10.4167 19.1666C10.1865 19.1666 10 19.3532 10 19.5833C10 19.8134 10.1865 20 10.4167 20Z' fill='#F6FAFD'/> <path d='M20 3.33336C30.125 3.33336 38.3333 10.4225 38.3333 19.1667H39.1458C38.9161 14.2434 36.7986 9.59783 33.2332 6.19495C29.6679 2.79206 24.9286 0.893433 20 0.893433C15.0713 0.893433 10.3321 2.79206 6.76675 6.19495C3.20137 9.59783 1.08389 14.2434 0.854156 19.1667H1.66666C1.66666 10.4225 9.87499 3.33336 20 3.33336Z' fill='#FFE369'/> <path d='M38.3333 19.1666C38.3333 27.9108 30.125 35 20 35C9.87501 35 1.66668 27.9108 1.66668 19.1666H0.854177C0.84251 19.4433 0.833344 19.7208 0.833344 20C0.833344 25.0833 2.85268 29.9584 6.44713 33.5528C10.0416 37.1473 14.9167 39.1666 20 39.1666C25.0833 39.1666 29.9584 37.1473 33.5529 33.5528C37.1473 29.9584 39.1667 25.0833 39.1667 20C39.1667 19.7208 39.1575 19.4433 39.1458 19.1666H38.3333Z' fill='#FFB32B'/> <path d='M31.51 8.17597C31.7784 7.90739 31.693 7.3869 31.3193 7.01343C30.9456 6.63996 30.425 6.55493 30.1566 6.82351C29.8882 7.09209 29.9736 7.61257 30.3474 7.98604C30.7211 8.35951 31.2416 8.44455 31.51 8.17597Z' fill='#F6FAFD'/> <path d='M25.9593 4.08781C26.0937 3.95336 26.0511 3.69298 25.8643 3.50625C25.6774 3.31951 25.417 3.27713 25.2826 3.41158C25.1483 3.54603 25.1909 3.80641 25.3777 3.99314C25.5646 4.17988 25.825 4.22226 25.9593 4.08781Z' fill='#F6FAFD'/> <path d='M29.6871 7.18636C30.2239 6.64921 30.0528 5.60797 29.305 4.8607C28.5572 4.11344 27.5159 3.94311 26.9791 4.48027C26.4423 5.01743 26.6134 6.05866 27.3612 6.80593C28.109 7.5532 29.1503 7.72352 29.6871 7.18636Z' fill='#F6FAFD'/> <path d='M28.4458 24.2058C29.0483 24.5716 30.4167 27.4625 30.4167 28.6108C30.4347 28.8955 30.3942 29.1808 30.2976 29.4492C30.2011 29.7176 30.0505 29.9634 29.8553 30.1714C29.6601 30.3793 29.4243 30.5451 29.1625 30.6584C28.9008 30.7717 28.6186 30.8301 28.3333 30.8301C28.0481 30.8301 27.7659 30.7717 27.5041 30.6584C27.2423 30.5451 27.0066 30.3793 26.8114 30.1714C26.6161 29.9634 26.4656 29.7176 26.369 29.4492C26.2725 29.1808 26.232 28.8955 26.25 28.6108C26.25 27.4625 27.6183 24.5716 28.2208 24.2058C27.5108 24.5966 25.8333 28.27 25.8333 29.7225C25.7983 30.4219 26.0417 31.1067 26.5102 31.6271C26.9786 32.1476 27.6341 32.4614 28.3333 32.5C29.0325 32.4614 29.688 32.1476 30.1565 31.6271C30.625 31.1067 30.8683 30.4219 30.8333 29.7225C30.8333 28.27 29.1558 24.5966 28.4458 24.2058Z' fill='#00A3E1'/> <path d='M29.8438 29.8427C30.1122 29.5741 30.0268 29.0537 29.653 28.6802C29.2793 28.3067 28.7588 28.2217 28.4904 28.4903C28.222 28.7588 28.3074 29.2793 28.6811 29.6528C29.0548 30.0263 29.5754 30.1113 29.8438 29.8427Z' fill='#F6FAFD'/> <path d='M30.1265 28.2546C30.2609 28.1201 30.2183 27.8597 30.0314 27.673C29.8446 27.4863 29.5841 27.4439 29.4498 27.5783C29.3154 27.7128 29.358 27.9732 29.5449 28.1599C29.7317 28.3466 29.9921 28.389 30.1265 28.2546Z' fill='#F6FAFD'/> <path d='M28.3333 32.5C27.7768 32.4789 27.2426 32.2755 26.813 31.921C26.3834 31.5666 26.0822 31.0807 25.9558 30.5383C25.8846 30.8167 25.8435 31.102 25.8333 31.3892C25.7983 32.0885 26.0417 32.7733 26.5102 33.2938C26.9786 33.8143 27.6341 34.1281 28.3333 34.1667C29.0325 34.1281 29.688 33.8143 30.1565 33.2938C30.625 32.7733 30.8683 32.0885 30.8333 31.3892C30.8231 31.102 30.7821 30.8167 30.7108 30.5383C30.5844 31.0807 30.2832 31.5666 29.8536 31.921C29.4241 32.2755 28.8899 32.4789 28.3333 32.5Z' fill='#FFB32B'/> </g> <defs> <clipPath id='clip0_4049_316'> <rect width='40' height='40' fill='white'/> </clipPath> </defs> </svg>")
Not Bad
"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'> <g clip-path='url(#clip0_4049_344)'> <path d='M20 39.1667C30.5855 39.1667 39.1667 30.5855 39.1667 20C39.1667 9.41458 30.5855 0.833374 20 0.833374C9.41455 0.833374 0.833344 9.41458 0.833344 20C0.833344 30.5855 9.41455 39.1667 20 39.1667Z' fill='#FFCE52'/> <path d='M17.5 30.0116L15.8333 30C15.8333 27.3683 21.5958 26.6666 25 26.6666V28.3333C20.1175 28.3333 17.6225 29.5491 17.5 30.0116Z' fill='#273941'/> <path d='M32.6167 13.2667C32.5817 13.205 32.5383 13.1483 32.5 13.0883V14.1667C32.5 14.6087 32.3244 15.0326 32.0118 15.3452C31.6993 15.6577 31.2754 15.8333 30.8333 15.8333C30.3913 15.8333 29.9674 15.6577 29.6548 15.3452C29.3423 15.0326 29.1667 14.6087 29.1667 14.1667V12.5H24.6167C23.7883 13.4123 23.3306 14.6011 23.3333 15.8333C23.3333 17.1594 23.8601 18.4312 24.7978 19.3689C25.7355 20.3065 27.0072 20.8333 28.3333 20.8333C29.6594 20.8333 30.9312 20.3065 31.8689 19.3689C32.8065 18.4312 33.3333 17.1594 33.3333 15.8333C33.3365 14.9279 33.0884 14.0394 32.6167 13.2667Z' fill='#F6FAFD'/> <path d='M30.8333 15.8333C31.2754 15.8333 31.6993 15.6577 32.0118 15.3452C32.3244 15.0326 32.5 14.6087 32.5 14.1667V13.0883C32.3673 12.8796 32.2167 12.6827 32.05 12.5H29.1667V14.1667C29.1667 14.6087 29.3422 15.0326 29.6548 15.3452C29.9674 15.6577 30.3913 15.8333 30.8333 15.8333Z' fill='#141E21'/> <path d='M15.95 13.2667C15.915 13.205 15.8717 13.1483 15.8333 13.0883V14.1667C15.8333 14.6087 15.6577 15.0326 15.3452 15.3452C15.0326 15.6577 14.6087 15.8333 14.1667 15.8333C13.7246 15.8333 13.3007 15.6577 12.9882 15.3452C12.6756 15.0326 12.5 14.6087 12.5 14.1667V12.5H7.95C7.12165 13.4123 6.66396 14.6011 6.66667 15.8333C6.66667 17.1594 7.19345 18.4312 8.13113 19.3689C9.06882 20.3065 10.3406 20.8333 11.6667 20.8333C12.9928 20.8333 14.2645 20.3065 15.2022 19.3689C16.1399 18.4312 16.6667 17.1594 16.6667 15.8333C16.6699 14.9279 16.4218 14.0394 15.95 13.2667Z' fill='#F6FAFD'/> <path d='M14.1667 15.8333C14.6087 15.8333 15.0326 15.6577 15.3452 15.3452C15.6577 15.0326 15.8333 14.6087 15.8333 14.1667V13.0883C15.7006 12.8796 15.5501 12.6827 15.3833 12.5H12.5V14.1667C12.5 14.6087 12.6756 15.0326 12.9882 15.3452C13.3007 15.6577 13.7246 15.8333 14.1667 15.8333Z' fill='#141E21'/> <path d='M20 3.33336C30.125 3.33336 38.3333 10.4225 38.3333 19.1667H39.1458C38.9161 14.2434 36.7986 9.59783 33.2332 6.19495C29.6679 2.79206 24.9286 0.893433 20 0.893433C15.0713 0.893433 10.3321 2.79206 6.76675 6.19495C3.20137 9.59783 1.08389 14.2434 0.854156 19.1667H1.66666C1.66666 10.4225 9.87499 3.33336 20 3.33336Z' fill='#FFE369'/> <path d='M38.3333 19.1666C38.3333 27.9108 30.125 35 20 35C9.87501 35 1.66668 27.9108 1.66668 19.1666H0.854177C0.84251 19.4433 0.833344 19.7208 0.833344 20C0.833344 25.0833 2.85268 29.9584 6.44713 33.5528C10.0416 37.1473 14.9167 39.1666 20 39.1666C25.0833 39.1666 29.9584 37.1473 33.5529 33.5528C37.1473 29.9584 39.1667 25.0833 39.1667 20C39.1667 19.7208 39.1575 19.4433 39.1458 19.1666H38.3333Z' fill='#FFB32B'/> <path d='M31.0933 7.75946C31.3617 7.49088 31.2763 6.9704 30.9025 6.59693C30.5288 6.22346 30.0083 6.13843 29.7399 6.407C29.4715 6.67558 29.5569 7.19607 29.9306 7.56954C30.3043 7.94301 30.8249 8.02804 31.0933 7.75946Z' fill='#F6FAFD'/> <path d='M25.5434 3.67131C25.6778 3.53685 25.6352 3.27648 25.4483 3.08974C25.2615 2.90301 25.0011 2.86063 24.8667 2.99508C24.7324 3.12953 24.7749 3.3899 24.9618 3.57664C25.1487 3.76338 25.4091 3.80576 25.5434 3.67131Z' fill='#F6FAFD'/> <path d='M29.2703 6.76986C29.8071 6.2327 29.6361 5.19147 28.8883 4.4442C28.1405 3.69693 27.0991 3.52661 26.5624 4.06377C26.0256 4.60092 26.1966 5.64216 26.9444 6.38942C27.6922 7.13669 28.7336 7.30702 29.2703 6.76986Z' fill='#F6FAFD'/> <path d='M28.3333 20.8333C27.1547 20.8322 26.0143 20.4148 25.1135 19.6547C24.2127 18.8946 23.6094 17.8408 23.41 16.6791C23.2835 17.3983 23.3161 18.1365 23.5054 18.8418C23.6948 19.5471 24.0364 20.2023 24.5061 20.7615C24.9758 21.3206 25.5623 21.7701 26.2244 22.0782C26.8864 22.3864 27.608 22.5458 28.3382 22.5452C29.0685 22.5447 29.7898 22.3842 30.4513 22.075C31.1129 21.7658 31.6987 21.3155 32.1676 20.7556C32.6365 20.1958 32.9771 19.54 33.1653 18.8345C33.3536 18.1289 33.3851 17.3907 33.2575 16.6716C33.0597 17.8348 32.4569 18.8905 31.5558 19.6521C30.6546 20.4137 29.5132 20.8321 28.3333 20.8333Z' fill='#FBB40A'/> <path d='M11.6667 20.8333C10.488 20.8322 9.34769 20.4148 8.44688 19.6547C7.54607 18.8946 6.94273 17.8408 6.74334 16.6791C6.61684 17.3983 6.64942 18.1365 6.83879 18.8418C7.02816 19.5471 7.36972 20.2023 7.83945 20.7615C8.30918 21.3206 8.89569 21.7701 9.55774 22.0782C10.2198 22.3864 10.9413 22.5458 11.6716 22.5452C12.4018 22.5447 13.1231 22.3842 13.7847 22.075C14.4463 21.7658 15.0321 21.3155 15.501 20.7556C15.9698 20.1958 16.3104 19.54 16.4987 18.8345C16.687 18.1289 16.7184 17.3907 16.5908 16.6716C16.393 17.8348 15.7902 18.8905 14.8891 19.6521C13.988 20.4137 12.8465 20.8321 11.6667 20.8333Z' fill='#FBB40A'/> <path d='M29.1667 12.5H32.05C32.2167 12.6827 32.3673 12.8795 32.5 13.0883C32.5383 13.1483 32.5833 13.205 32.6167 13.2666C33.022 13.9377 33.2596 14.6967 33.3092 15.4791C33.3242 15.3216 33.3333 15.1616 33.3333 15C33.3365 14.0946 33.0884 13.2061 32.6167 12.4333C32.5817 12.3716 32.5383 12.315 32.5 12.255C32.3673 12.0462 32.2167 11.8494 32.05 11.6666H24.6167C23.7883 12.5789 23.3306 13.7677 23.3333 15C23.3335 15.1764 23.3429 15.3528 23.3617 15.5283C23.423 14.4054 23.8658 13.3371 24.6167 12.5H29.1667Z' fill='#FBB40A'/> <path d='M12.5 12.5H15.3833C15.5501 12.6827 15.7006 12.8795 15.8333 13.0883C15.8717 13.1483 15.9167 13.205 15.95 13.2666C16.3554 13.9377 16.5929 14.6967 16.6425 15.4791C16.6575 15.3216 16.6667 15.1616 16.6667 15C16.6699 14.0946 16.4218 13.2061 15.95 12.4333C15.915 12.3716 15.8717 12.315 15.8333 12.255C15.7006 12.0462 15.5501 11.8494 15.3833 11.6666H7.95C7.12165 12.5789 6.66396 13.7677 6.66667 15C6.66683 15.1764 6.67629 15.3528 6.695 15.5283C6.75639 14.4054 7.19912 13.3371 7.95 12.5H12.5Z' fill='#FBB40A'/> </g> <defs> <clipPath id='clip0_4049_344'> <rect width='40' height='40' fill='white'/> </clipPath> </defs> </svg>")
Neutral
"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'> <g clip-path='url(#clip0_4049_363)'> <path d='M20 39.1667C30.5855 39.1667 39.1667 30.5855 39.1667 20C39.1667 9.41458 30.5855 0.833374 20 0.833374C9.41455 0.833374 0.833344 9.41458 0.833344 20C0.833344 30.5855 9.41455 39.1667 20 39.1667Z' fill='#FFCE52'/> <path d='M27.5 18.3333C28.8807 18.3333 30 16.8409 30 15C30 13.159 28.8807 11.6666 27.5 11.6666C26.1193 11.6666 25 13.159 25 15C25 16.8409 26.1193 18.3333 27.5 18.3333Z' fill='#273941'/> <path d='M12.5 18.3333C13.8807 18.3333 15 16.8409 15 15C15 13.159 13.8807 11.6666 12.5 11.6666C11.1193 11.6666 10 13.159 10 15C10 16.8409 11.1193 18.3333 12.5 18.3333Z' fill='#273941'/> <path d='M27.5 17.5C28.4205 17.5 29.1667 16.3807 29.1667 15C29.1667 13.6193 28.4205 12.5 27.5 12.5C26.5795 12.5 25.8333 13.6193 25.8333 15C25.8333 16.3807 26.5795 17.5 27.5 17.5Z' fill='#141E21'/> <path d='M12.5 17.5C13.4205 17.5 14.1667 16.3807 14.1667 15C14.1667 13.6193 13.4205 12.5 12.5 12.5C11.5795 12.5 10.8333 13.6193 10.8333 15C10.8333 16.3807 11.5795 17.5 12.5 17.5Z' fill='#141E21'/> <path d='M28.3333 15C28.7936 15 29.1667 14.6269 29.1667 14.1667C29.1667 13.7065 28.7936 13.3334 28.3333 13.3334C27.8731 13.3334 27.5 13.7065 27.5 14.1667C27.5 14.6269 27.8731 15 28.3333 15Z' fill='#F6FAFD'/> <path d='M13.3333 15C13.7936 15 14.1667 14.6269 14.1667 14.1667C14.1667 13.7065 13.7936 13.3334 13.3333 13.3334C12.8731 13.3334 12.5 13.7065 12.5 14.1667C12.5 14.6269 12.8731 15 13.3333 15Z' fill='#F6FAFD'/> <path d='M20 3.33336C30.125 3.33336 38.3333 10.4225 38.3333 19.1667H39.1458C38.9161 14.2434 36.7986 9.59783 33.2332 6.19495C29.6679 2.79206 24.9286 0.893433 20 0.893433C15.0713 0.893433 10.3321 2.79206 6.76675 6.19495C3.20137 9.59783 1.08389 14.2434 0.854156 19.1667H1.66666C1.66666 10.4225 9.87499 3.33336 20 3.33336Z' fill='#FFE369'/> <path d='M38.3333 19.1666C38.3333 27.9108 30.125 35 20 35C9.87501 35 1.66668 27.9108 1.66668 19.1666H0.854177C0.84251 19.4433 0.833344 19.7208 0.833344 20C0.833344 25.0833 2.85268 29.9584 6.44713 33.5528C10.0416 37.1473 14.9167 39.1666 20 39.1666C25.0833 39.1666 29.9584 37.1473 33.5529 33.5528C37.1473 29.9584 39.1667 25.0833 39.1667 20C39.1667 19.7208 39.1575 19.4433 39.1458 19.1666H38.3333Z' fill='#FFB32B'/> <path d='M26.6667 26.6666H13.3333V28.3333H26.6667V26.6666Z' fill='#273941'/> <path d='M31.51 8.17597C31.7784 7.90739 31.693 7.3869 31.3193 7.01343C30.9456 6.63996 30.425 6.55493 30.1566 6.82351C29.8882 7.09209 29.9736 7.61257 30.3474 7.98604C30.7211 8.35951 31.2416 8.44455 31.51 8.17597Z' fill='#F6FAFD'/> <path d='M25.9593 4.08781C26.0937 3.95336 26.0511 3.69298 25.8643 3.50625C25.6774 3.31951 25.417 3.27713 25.2826 3.41158C25.1483 3.54603 25.1909 3.80641 25.3777 3.99314C25.5646 4.17988 25.825 4.22226 25.9593 4.08781Z' fill='#F6FAFD'/> <path d='M29.6871 7.18636C30.2239 6.64921 30.0528 5.60797 29.305 4.8607C28.5572 4.11344 27.5159 3.94311 26.9791 4.48027C26.4423 5.01743 26.6134 6.05866 27.3612 6.80593C28.109 7.5532 29.1503 7.72352 29.6871 7.18636Z' fill='#F6FAFD'/> </g> <defs> <clipPath id='clip0_4049_363'> <rect width='40' height='40' fill='white'/> </clipPath> </defs> </svg>")
Good
"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'> <g clip-path='url(#clip0_4049_380)'> <path d='M20 39.1667C30.5854 39.1667 39.1666 30.5855 39.1666 20C39.1666 9.41458 30.5854 0.833374 20 0.833374C9.41452 0.833374 0.833313 9.41458 0.833313 20C0.833313 30.5855 9.41452 39.1667 20 39.1667Z' fill='#FFCE52'/> <path d='M5.83331 21.6666C5.83331 24.4333 12.1666 27.5 20 27.5C27.8333 27.5 34.1666 24.4333 34.1666 21.6666C34.1509 23.3792 33.7176 25.0622 32.9044 26.5695C32.0912 28.0768 30.9226 29.363 29.5 30.3166C26.721 32.2795 23.4023 33.3333 20 33.3333C16.5977 33.3333 13.279 32.2795 10.5 30.3166C9.07732 29.363 7.90872 28.0768 7.09552 26.5695C6.28232 25.0622 5.84907 23.3792 5.83331 21.6666Z' fill='#AE2D4C'/> <path d='M34.1666 21.6666C34.1666 24.4333 27.8333 27.5 20 27.5C12.1666 27.5 5.83331 24.4333 5.83331 21.6666C6.66665 22.5 12.5 23.3333 20 23.3333C27.5 23.3333 33.3333 22.5 34.1666 21.6666Z' fill='#F6FAFD'/> <path d='M27.5 18.3333C28.8807 18.3333 30 16.8409 30 15C30 13.159 28.8807 11.6666 27.5 11.6666C26.1193 11.6666 25 13.159 25 15C25 16.8409 26.1193 18.3333 27.5 18.3333Z' fill='#273941'/> <path d='M12.5 18.3333C13.8807 18.3333 15 16.8409 15 15C15 13.159 13.8807 11.6666 12.5 11.6666C11.1193 11.6666 10 13.159 10 15C10 16.8409 11.1193 18.3333 12.5 18.3333Z' fill='#273941'/> <path d='M27.5 17.5C28.4205 17.5 29.1666 16.3807 29.1666 15C29.1666 13.6193 28.4205 12.5 27.5 12.5C26.5795 12.5 25.8333 13.6193 25.8333 15C25.8333 16.3807 26.5795 17.5 27.5 17.5Z' fill='#141E21'/> <path d='M12.5 17.5C13.4205 17.5 14.1666 16.3807 14.1666 15C14.1666 13.6193 13.4205 12.5 12.5 12.5C11.5795 12.5 10.8333 13.6193 10.8333 15C10.8333 16.3807 11.5795 17.5 12.5 17.5Z' fill='#141E21'/> <path d='M28.3333 15C28.7936 15 29.1667 14.6269 29.1667 14.1667C29.1667 13.7065 28.7936 13.3334 28.3333 13.3334C27.8731 13.3334 27.5 13.7065 27.5 14.1667C27.5 14.6269 27.8731 15 28.3333 15Z' fill='#F6FAFD'/> <path d='M13.3333 15C13.7936 15 14.1667 14.6269 14.1667 14.1667C14.1667 13.7065 13.7936 13.3334 13.3333 13.3334C12.8731 13.3334 12.5 13.7065 12.5 14.1667C12.5 14.6269 12.8731 15 13.3333 15Z' fill='#F6FAFD'/> <path d='M20 29.1666C26.635 29.1666 32.1775 26.9658 33.7233 24.6116C34.0162 23.6573 34.1656 22.6648 34.1666 21.6666C34.1666 24.4333 27.8333 27.5 20 27.5C12.1666 27.5 5.83331 24.4333 5.83331 21.6666C5.83437 22.6648 5.98378 23.6573 6.27665 24.6116C7.82248 26.9658 13.365 29.1666 20 29.1666Z' fill='#8A293D'/> <path d='M32.8958 23.8791C33.2504 23.6196 33.5467 23.2886 33.7656 22.9075C33.9845 22.5264 34.1211 22.1037 34.1666 21.6666C33.3333 22.5 27.5 23.3333 20 23.3333C12.5 23.3333 6.66665 22.5 5.83331 21.6666C5.87885 22.1037 6.01546 22.5264 6.23435 22.9075C6.45323 23.2886 6.74953 23.6196 7.10415 23.8791C9.35248 24.495 14.1666 25 20 25C25.8333 25 30.6475 24.495 32.8958 23.8791Z' fill='#EDEDED'/> <path d='M20 3.33336C30.125 3.33336 38.3334 10.4225 38.3334 19.1667H39.1459C38.9161 14.2434 36.7986 9.59783 33.2333 6.19495C29.6679 2.79206 24.9287 0.893433 20 0.893433C15.0714 0.893433 10.3322 2.79206 6.76678 6.19495C3.2014 9.59783 1.08392 14.2434 0.854187 19.1667H1.66669C1.66669 10.4225 9.87502 3.33336 20 3.33336Z' fill='#FFE369'/> <path d='M38.3333 19.1666C38.3333 27.9108 30.125 35 20 35C9.87498 35 1.66665 27.9108 1.66665 19.1666H0.854146C0.84248 19.4433 0.833313 19.7208 0.833313 20C0.833313 25.0833 2.85265 29.9584 6.4471 33.5528C10.0415 37.1473 14.9167 39.1666 20 39.1666C25.0833 39.1666 29.9584 37.1473 33.5529 33.5528C37.1473 29.9584 39.1666 25.0833 39.1666 20C39.1666 19.7208 39.1575 19.4433 39.1458 19.1666H38.3333Z' fill='#FFB32B'/> <path d='M31.51 8.17597C31.7784 7.90739 31.693 7.3869 31.3193 7.01343C30.9456 6.63996 30.425 6.55493 30.1566 6.82351C29.8882 7.09209 29.9736 7.61257 30.3474 7.98604C30.7211 8.35951 31.2416 8.44455 31.51 8.17597Z' fill='#F6FAFD'/> <path d='M25.9593 4.08781C26.0937 3.95336 26.0511 3.69298 25.8643 3.50625C25.6774 3.31951 25.417 3.27713 25.2826 3.41158C25.1483 3.54603 25.1909 3.80641 25.3777 3.99314C25.5646 4.17988 25.825 4.22226 25.9593 4.08781Z' fill='#F6FAFD'/> <path d='M29.6871 7.18636C30.2238 6.64921 30.0528 5.60797 29.305 4.8607C28.5572 4.11344 27.5159 3.94311 26.9791 4.48027C26.4423 5.01743 26.6133 6.05866 27.3611 6.80593C28.1089 7.5532 29.1503 7.72352 29.6871 7.18636Z' fill='#F6FAFD'/> </g> <defs> <clipPath id='clip0_4049_380'> <rect width='40' height='40' fill='white'/> </clipPath> </defs> </svg>")
Love
"data:image/svg+xml;utf8, " &EncodeUrl("<svg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'> <g clip-path='url(#clip0_4049_400)'> <path d='M20 39.1667C30.5854 39.1667 39.1666 30.5855 39.1666 20C39.1666 9.41458 30.5854 0.833374 20 0.833374C9.41452 0.833374 0.833313 9.41458 0.833313 20C0.833313 30.5855 9.41452 39.1667 20 39.1667Z' fill='#FFCE52'/> <path d='M20 3.33336C30.125 3.33336 38.3334 10.4225 38.3334 19.1667H39.1459C38.9161 14.2434 36.7986 9.59783 33.2333 6.19495C29.6679 2.79206 24.9287 0.893433 20 0.893433C15.0714 0.893433 10.3322 2.79206 6.76678 6.19495C3.2014 9.59783 1.08392 14.2434 0.854187 19.1667H1.66669C1.66669 10.4225 9.87502 3.33336 20 3.33336Z' fill='#FFE369'/> <path d='M38.3333 19.1666C38.3333 27.9108 30.125 35 20 35C9.87498 35 1.66665 27.9108 1.66665 19.1666H0.854146C0.84248 19.4433 0.833313 19.7208 0.833313 20C0.833313 25.0833 2.85265 29.9584 6.4471 33.5528C10.0415 37.1473 14.9167 39.1666 20 39.1666C25.0833 39.1666 29.9584 37.1473 33.5529 33.5528C37.1473 29.9584 39.1666 25.0833 39.1666 20C39.1666 19.7208 39.1575 19.4433 39.1458 19.1666H38.3333Z' fill='#FFB32B'/> <path d='M31.51 8.17597C31.7784 7.90739 31.693 7.3869 31.3193 7.01343C30.9456 6.63996 30.425 6.55493 30.1566 6.82351C29.8882 7.09209 29.9736 7.61257 30.3474 7.98604C30.7211 8.35951 31.2416 8.44455 31.51 8.17597Z' fill='#F6FAFD'/> <path d='M25.9593 4.08781C26.0937 3.95336 26.0511 3.69298 25.8643 3.50625C25.6774 3.31951 25.417 3.27713 25.2826 3.41158C25.1483 3.54603 25.1909 3.80641 25.3777 3.99314C25.5646 4.17988 25.825 4.22226 25.9593 4.08781Z' fill='#F6FAFD'/> <path d='M29.6871 7.18636C30.2238 6.64921 30.0528 5.60797 29.305 4.8607C28.5572 4.11344 27.5159 3.94311 26.9791 4.48027C26.4423 5.01743 26.6133 6.05866 27.3611 6.80593C28.1089 7.5532 29.1503 7.72352 29.6871 7.18636Z' fill='#F6FAFD'/> <path d='M28.3333 32.5C28.3333 30.2 24.6083 28.3334 20 28.3334C15.3916 28.3334 11.6666 30.2 11.6666 32.5L11.5833 32.6084C10.3334 31.7997 9.30521 30.6916 8.59213 29.3848C7.87905 28.078 7.50364 26.6138 7.49998 25.125C7.4713 24.6813 7.61889 24.2442 7.91069 23.9087C8.20249 23.5733 8.61491 23.3665 9.05831 23.3334C10.625 24.2334 14.3833 24.1667 20 24.1667C25.6166 24.1667 29.375 24.2334 30.9333 23.3334C31.3781 23.3646 31.7925 23.5705 32.086 23.9062C32.3796 24.2419 32.5284 24.68 32.5 25.125C32.4963 26.6138 32.1209 28.078 31.4078 29.3848C30.6947 30.6916 29.6666 31.7997 28.4166 32.6084L28.3333 32.5Z' fill='#273941'/> <path d='M28.3333 32.5L28.4166 32.6084C25.9136 34.2299 22.9817 35.063 20 35C17.0183 35.063 14.0863 34.2299 11.5833 32.6084L11.6666 32.5C11.6666 30.2 15.3916 28.3334 20 28.3334C24.6083 28.3334 28.3333 30.2 28.3333 32.5Z' fill='#AE2D4C'/> <path d='M13.75 7.49997C14.2655 7.49447 14.7765 7.59615 15.2506 7.79855C15.7247 8.00096 16.1516 8.29968 16.5042 8.67576C16.8567 9.05184 17.1273 9.49708 17.2987 9.98326C17.4702 10.4694 17.5387 10.9859 17.5 11.5C17.5 17.5 11.25 20.8333 10 20.8333C9.4 20.8333 3.01667 17.75 2.525 12.175C2.50833 11.95 2.5 11.725 2.5 11.5C2.43221 10.5952 2.69836 9.69702 3.24812 8.97527C3.79787 8.25353 4.5931 7.75831 5.48333 7.5833C5.73487 7.52634 5.9921 7.49838 6.25 7.49997C8.125 7.49997 9.375 8.8333 10 10.8333C10.625 8.8333 11.875 7.49997 13.75 7.49997Z' fill='#CF4054'/> <path d='M37.5 11.5C37.5 11.7222 37.4917 11.9472 37.475 12.175C37.0333 17.75 31.2 20.8333 30 20.8333C29.375 20.8333 22.5 17.5 22.5 11.5C22.4613 10.9859 22.5298 10.4694 22.7013 9.98326C22.8727 9.49708 23.1433 9.05184 23.4958 8.67576C23.8484 8.29968 24.2753 8.00096 24.7494 7.79855C25.2235 7.59615 25.7345 7.49447 26.25 7.49997C28.125 7.49997 29.375 8.8333 30 10.8333C30.625 8.8333 31.875 7.49997 33.75 7.49997C34.0079 7.49838 34.2651 7.52634 34.5167 7.5833C35.4069 7.75831 36.2021 8.25353 36.7519 8.97527C37.3016 9.69702 37.5678 10.5952 37.5 11.5Z' fill='#CF4054'/> <path d='M9.05831 25C10.625 25.9 14.3833 25.8334 20 25.8334C25.6166 25.8334 29.375 25.9 30.9333 25C31.2891 25.0173 31.629 25.1525 31.8995 25.3843C32.17 25.616 32.3558 25.9311 32.4275 26.28C32.4759 25.8969 32.5001 25.5112 32.5 25.125C32.5284 24.68 32.3796 24.2419 32.086 23.9062C31.7925 23.5705 31.3781 23.3646 30.9333 23.3334C29.375 24.2334 25.6166 24.1667 20 24.1667C14.3833 24.1667 10.625 24.2334 9.05831 23.3334C8.61491 23.3665 8.20249 23.5733 7.91069 23.9087C7.61889 24.2442 7.4713 24.6813 7.49998 25.125C7.49986 25.5109 7.52408 25.8964 7.57248 26.2792C7.64318 25.9314 7.82753 25.617 8.09651 25.3854C8.3655 25.1538 8.70385 25.0183 9.05831 25Z' fill='#141E21'/> <path d='M27.9425 31.2383C25.5386 32.6551 22.7899 33.3801 20 33.3333C17.21 33.3801 14.4614 32.6551 12.0575 31.2383C11.8088 31.6126 11.6731 32.0506 11.6666 32.4999L11.5833 32.6083C14.0863 34.2298 17.0183 35.0629 20 34.9999C22.9817 35.0629 25.9136 34.2298 28.4166 32.6083L28.3333 32.4999C28.3268 32.0506 28.1912 31.6126 27.9425 31.2383Z' fill='#8A293D'/> <path d='M30 20.8334C29.4083 20.8334 23.2242 17.8417 22.5658 12.4326C22.5259 12.6753 22.5039 12.9207 22.5 13.1667C22.5 19.1667 29.375 22.5001 30 22.5001C31.2 22.5001 37.0333 19.4167 37.475 13.8417C37.4917 13.6139 37.5 13.3889 37.5 13.1667C37.4995 12.9137 37.48 12.661 37.4417 12.4109C36.8542 17.8334 31.1825 20.8334 30 20.8334Z' fill='#FBB40A'/> <path d='M10 20.8334C9.40833 20.8334 3.22417 17.8417 2.56583 12.4326C2.52586 12.6753 2.50385 12.9207 2.5 13.1667C2.5 19.1667 9.375 22.5001 10 22.5001C11.2 22.5001 17.0333 19.4167 17.475 13.8417C17.4917 13.6139 17.5 13.3889 17.5 13.1667C17.4995 12.9137 17.48 12.661 17.4417 12.4109C16.8542 17.8334 11.1825 20.8334 10 20.8334Z' fill='#FBB40A'/> <path d='M33.75 7.49997C31.875 7.49997 30.625 8.8333 30 10.8333C30.4858 9.3333 31.4583 8.3333 32.9167 8.3333C33.3099 8.32205 33.7011 8.3926 34.0656 8.5405C34.4302 8.68839 34.76 8.91039 35.0342 9.19244C35.3084 9.47448 35.521 9.81041 35.6586 10.1789C35.7961 10.5475 35.8557 10.9406 35.8333 11.3333C35.8333 15.8333 30.9725 18.3333 30 18.3333C29.5333 18.3333 24.5683 16.0208 24.1858 11.8391C24.1733 11.6725 24.1667 11.5016 24.1667 11.3333C24.1239 10.6439 24.3369 9.963 24.765 9.42097C25.1931 8.87893 25.8061 8.5139 26.4867 8.3958C26.6826 8.35289 26.8827 8.33193 27.0833 8.3333C28.5417 8.3333 29.5142 9.3333 30 10.8333C29.375 8.8333 28.125 7.49997 26.25 7.49997C25.9921 7.49838 25.7349 7.52634 25.4833 7.5833C24.5931 7.75831 23.7979 8.25353 23.2481 8.97527C22.6984 9.69702 22.4322 10.5952 22.5 11.5C22.5 11.7222 22.5083 11.9472 22.525 12.175C23.0167 17.75 29.4 20.8333 30 20.8333C31.25 20.8333 37.5 17.5 37.5 11.5C37.5387 10.9859 37.4702 10.4694 37.2987 9.98326C37.1273 9.49708 36.8567 9.05184 36.5042 8.67576C36.1516 8.29968 35.7247 8.00096 35.2506 7.79855C34.7765 7.59615 34.2655 7.49447 33.75 7.49997Z' fill='#AE2D4C'/> <path d='M13.75 7.49997C11.875 7.49997 10.625 8.8333 10 10.8333C10.4858 9.3333 11.4583 8.3333 12.9167 8.3333C13.3099 8.32205 13.7011 8.3926 14.0656 8.5405C14.4302 8.68839 14.76 8.91039 15.0342 9.19244C15.3084 9.47448 15.521 9.81041 15.6586 10.1789C15.7961 10.5475 15.8557 10.9406 15.8333 11.3333C15.8333 15.8333 10.9725 18.3333 10 18.3333C9.53333 18.3333 4.56833 16.0208 4.18583 11.8391C4.17333 11.6708 4.16667 11.5 4.16667 11.3333C4.12387 10.6439 4.33692 9.963 4.76502 9.42097C5.19311 8.87893 5.80614 8.5139 6.48667 8.3958C6.68262 8.35289 6.88274 8.33193 7.08333 8.3333C8.54167 8.3333 9.51417 9.3333 10 10.8333C9.375 8.8333 8.125 7.49997 6.25 7.49997C5.9921 7.49838 5.73487 7.52634 5.48333 7.5833C4.5931 7.75831 3.79787 8.25353 3.24812 8.97527C2.69836 9.69702 2.43221 10.5952 2.5 11.5C2.5 11.7222 2.50833 11.9472 2.525 12.175C3.01667 17.75 9.4 20.8333 10 20.8333C11.25 20.8333 17.5 17.5 17.5 11.5C17.5387 10.9859 17.4702 10.4694 17.2987 9.98326C17.1273 9.49708 16.8567 9.05184 16.5042 8.67576C16.1516 8.29968 15.7247 8.00096 15.2506 7.79855C14.7765 7.59615 14.2655 7.49447 13.75 7.49997Z' fill='#AE2D4C'/> <path d='M35.6765 11.509C35.9449 11.2404 35.8595 10.7199 35.4857 10.3464C35.112 9.97297 34.5915 9.88794 34.3231 10.1565C34.0547 10.4251 34.1401 10.9456 34.5138 11.3191C34.8875 11.6925 35.4081 11.7776 35.6765 11.509Z' fill='#F6FAFD'/> <path d='M34.2927 9.92155C34.4271 9.7871 34.3845 9.52672 34.1976 9.33999C34.0108 9.15325 33.7504 9.11087 33.616 9.24532C33.4817 9.37978 33.5242 9.64015 33.7111 9.82688C33.898 10.0136 34.1584 10.056 34.2927 9.92155Z' fill='#F6FAFD'/> <path d='M15.6768 11.5095C15.9452 11.2409 15.8598 10.7204 15.486 10.3469C15.1123 9.97346 14.5918 9.88843 14.3234 10.157C14.055 10.4256 14.1404 10.9461 14.5141 11.3195C14.8878 11.693 15.4084 11.778 15.6768 11.5095Z' fill='#F6FAFD'/> <path d='M14.293 9.92106C14.4274 9.78661 14.3848 9.52624 14.198 9.3395C14.0111 9.15277 13.7507 9.11038 13.6163 9.24483C13.482 9.37929 13.5245 9.63966 13.7114 9.8264C13.8983 10.0131 14.1587 10.0555 14.293 9.92106Z' fill='#F6FAFD'/> </g> <defs> <clipPath id='clip0_4049_400'> <rect width='40' height='40' fill='white'/> </clipPath> </defs> </svg>")
This is an output:
⁠
Screenshot 2024-10-19 at 6.57.51.png
⁠
⁠

How to design it in Figma

Preview

⁠
Screenshot 2024-10-19 at 7.14.14.png
⁠
⁠

What does it consist of?

12x Frame
7x Text
5x Vector

Procedure

Step 1 - create a feeling frame with auto layout
Add a new Frame (F command) with vertical auto layout (SHIFT + A command) object, call it "vercont_feeling_box" with these properties:
⁠
Screenshot 2024-10-19 at 7.37.49.png
⁠
⁠
⁠
Screenshot 2024-10-19 at 7.38.05.png
⁠
⁠
Step 2 - create texts
Add a new Text (T command) object, call it "lbl_feeling_title" with these properties:
⁠
Screenshot 2024-10-19 at 7.39.31.png
⁠
⁠
Add a new Text (T command) object, call it "lbl_dscr_feeling_title" with these properties:
⁠
Screenshot 2024-10-19 at 7.40.01.png
⁠
⁠
Step 3 - create content frame
Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "horcont_feeling_content" with these properties:
⁠
Screenshot 2024-10-19 at 7.41.19.png
⁠
⁠
Step 4 - create emoji frames
Add 5 new Frames (F command) with vertical auto layout (SHIFT + A command) object, call them "vercont_sad/not_bad/neutral/good/love_frame" with these properties:
⁠
Screenshot 2024-10-19 at 7.44.50.png
⁠
⁠
Import 5 new SVG files, call them "svg_sad/not_bad/neutral/good/love_icon" with XML code(the same SVG codes as in previous section)
Add 5 new Frames (F command) with horizontal auto layout (SHIFT + A command) object, call them "btn_sad/not_bad/neutral/good/love_button" with these properties:
⁠
Screenshot 2024-10-19 at 7.49.15.png
⁠
⁠
the same properties, but different colour.
Add 5 new Text (T command) object, call it "Sad/Not Bad/Neutral/Good/Love" with these properties:
⁠
Screenshot 2024-10-19 at 7.51.26.png
⁠
⁠
the same properties for the rest, but different text value.
This is an output:
⁠
Screenshot 2024-10-19 at 7.14.46.png
⁠
⁠

How to use it via DesignKit

Prerequisites

the designed component according to the instructions from the previous section

Used Prefixes

vercont_feeling_box, vercont_sad_frame = Vertical Container
horcont_feeling_content = Horizontal Container
btn_sad_button = Button
lbl_feeling_title, lbl_dscr_feeling_title = Label
svg_sad_icon = Image

YAML Output

⁠
yaml.png
⁠
⁠

Used Colours

Feeling Background - #FFFFFF
Title Font Colour - #3E4EA6
Dscr Font Colour - #808080
Sad Button Background - #3E4EA6
Not Bad Button Background - #3BC5F6
Neutral Button Background - #FFB32B
Good Button Background - #0FA298
Love Button Background - #CF4054

⁠
← Counter
⁠
⁠
⁠
Gradient Button →
⁠
⁠

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.