How to create widgets in Figma

Figma is a popular design tool used by designers to create user interfaces, logos, and other design assets. One of the most powerful features of Figma is its ability to create custom widgets that can be used across multiple design projects. In this article, we’ll take a look at how to create widgets in Figma.

Plan your widget

Before you start designing your widget, it’s important to have a plan. Think about the purpose of your widget and how it will be used. Will it be used as a button or a form field? What will the widget look like? What should be its size, colors, and other design specifications?

Design your widget

Once you have a plan, it’s time to start designing your widget. In Figma, you can design your widget just like you would any other design asset. You can use the various design tools and features to create your widget. Make sure to pay attention to the details, such as the size, colors, and typography.

Create your widget as a component

Once you have finished designing your widget, it’s time to turn it into a component. To do this, select the entire widget and then click on the “Create Component” button in the top right corner of the screen. You can also use the keyboard shortcut “Command + Option + K” on Mac or “Ctrl + Alt + K” on Windows.

Add Variants

If your widget has different states, such as hover or pressed, you can create variants. Variants are like different versions of your widget that can be used in different situations. To create a variant, simply duplicate your component and make the necessary changes to the design. Then select the new component and click on the “Create Variant” button.

Initialize the Widget

Choose the new widget option from the widgets menu and create a blank project. This sets up a folder structure for your widget.

Open the folder with e.g. VSCode and copy and paste the svg into the code.tsx file in the widget-src folder and run npm install. 

The code block shows some sample code you can use.

const {widget} = figma
const {Frame, SVG} = widget

function Widget() {
    return (
    <SVG src= {`<svg width="258" height="118" viewBox="0 0 258 118" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g filter="url(#filter0_d_4_27)">
    <rect x="4" width="250" height="110" rx="30" fill="#41CE69"/>
    <g filter="url(#filter1_dd_4_27)">
    <path d="M27.7273 70L32.5568 40.9091H33.4659L31.1364 55H49.6591L51.9886 40.9091H52.8977L48.0682 70H47.1591L49.4886 55.9091H30.9659L28.6364 70H27.7273ZM64.5845 70.4545C62.6716 70.4545 61.0855 69.9574 59.826 68.9631C58.5665 67.9688 57.6858 66.6193 57.1839 64.9148C56.6821 63.2102 56.611 61.2879 56.9709 59.1477C57.3307 57.0076 58.0457 55.0852 59.1158 53.3807C60.1858 51.6761 61.4832 50.3267 63.0078 49.3324C64.5324 48.3381 66.1565 47.8409 67.88 47.8409C69.1489 47.8409 70.2758 48.1155 71.2607 48.6648C72.255 49.2045 73.0741 49.9527 73.718 50.9091C74.3714 51.8561 74.8213 52.9545 75.0675 54.2045C75.3137 55.4451 75.3232 56.7708 75.0959 58.1818L74.9254 59.0909H57.4254L57.5959 58.1818H74.1868C74.4709 56.4394 74.3809 54.858 73.9169 53.4375C73.4624 52.0076 72.7095 50.8712 71.6584 50.0284C70.6167 49.1761 69.3572 48.75 67.88 48.75C66.3838 48.75 64.9444 49.1951 63.5618 50.0852C62.1792 50.9754 60.986 52.1875 59.9822 53.7216C58.9785 55.2557 58.2966 56.9886 57.9368 58.9205L57.88 58.9773C57.558 60.8902 57.5911 62.6468 57.9794 64.2472C58.3677 65.8475 59.1158 67.1307 60.2237 68.0966C61.3317 69.0625 62.8042 69.5455 64.6413 69.5455C65.9671 69.5455 67.1319 69.3087 68.1357 68.8352C69.1489 68.3617 69.9917 67.8172 70.6641 67.2017C71.3459 66.5862 71.8572 66.0606 72.1982 65.625L72.8232 66.1364C72.4254 66.6856 71.8525 67.2964 71.1044 67.9688C70.3563 68.6411 69.4377 69.2235 68.3487 69.7159C67.2597 70.2083 66.005 70.4545 64.5845 70.4545ZM85.2841 40.9091L80.4545 70H79.5455L84.375 40.9091H85.2841ZM93.9169 40.9091L89.0874 70H88.1783L93.0078 40.9091H93.9169ZM104.538 70.4545C102.815 70.4545 101.347 69.9574 100.135 68.9631C98.9323 67.9688 98.0705 66.6098 97.5497 64.8864C97.0384 63.1629 96.9626 61.2121 97.3224 59.0341C97.6823 56.9129 98.3925 55.0095 99.4531 53.3239C100.523 51.6288 101.811 50.2936 103.317 49.3182C104.832 48.3333 106.432 47.8409 108.118 47.8409C109.86 47.8409 111.333 48.3428 112.536 49.3466C113.748 50.3504 114.609 51.714 115.121 53.4375C115.642 55.161 115.732 57.1023 115.391 59.2614C115.031 61.3826 114.316 63.2907 113.246 64.9858C112.176 66.6714 110.883 68.0066 109.368 68.9915C107.853 69.9669 106.243 70.4545 104.538 70.4545ZM104.538 69.5455C106.11 69.5455 107.592 69.0909 108.984 68.1818C110.376 67.2633 111.56 66.0133 112.536 64.4318C113.511 62.8409 114.16 61.0417 114.482 59.0341C114.804 57.0833 114.742 55.3314 114.297 53.7784C113.852 52.2254 113.099 50.9991 112.038 50.0994C110.978 49.1998 109.69 48.75 108.175 48.75C106.622 48.75 105.149 49.214 103.757 50.142C102.365 51.0606 101.177 52.3153 100.192 53.9062C99.2069 55.4877 98.5535 57.2727 98.2315 59.2614C97.8906 61.2121 97.9427 62.964 98.3878 64.517C98.8423 66.0701 99.5999 67.2964 100.661 68.196C101.731 69.0956 103.023 69.5455 104.538 69.5455ZM136.509 70L133.327 40.9091H134.293L137.248 68.5795H137.362L149.407 40.9091H150.657L153.441 68.5795H153.555L165.771 40.9091H166.793L153.952 70H152.646L149.862 42.3295H149.748L137.759 70H136.509ZM172.585 70.4545C170.862 70.4545 169.394 69.9574 168.182 68.9631C166.979 67.9688 166.117 66.6098 165.597 64.8864C165.085 63.1629 165.009 61.2121 165.369 59.0341C165.729 56.9129 166.439 55.0095 167.5 53.3239C168.57 51.6288 169.858 50.2936 171.364 49.3182C172.879 48.3333 174.479 47.8409 176.165 47.8409C177.907 47.8409 179.38 48.3428 180.582 49.3466C181.795 50.3504 182.656 51.714 183.168 53.4375C183.688 55.161 183.778 57.1023 183.438 59.2614C183.078 61.3826 182.363 63.2907 181.293 64.9858C180.223 66.6714 178.93 68.0066 177.415 68.9915C175.9 69.9669 174.29 70.4545 172.585 70.4545ZM172.585 69.5455C174.157 69.5455 175.639 69.0909 177.031 68.1818C178.423 67.2633 179.607 66.0133 180.582 64.4318C181.558 62.8409 182.206 61.0417 182.528 59.0341C182.85 57.0833 182.789 55.3314 182.344 53.7784C181.899 52.2254 181.146 50.9991 180.085 50.0994C179.025 49.1998 177.737 48.75 176.222 48.75C174.669 48.75 173.196 49.214 171.804 50.142C170.412 51.0606 169.223 52.3153 168.239 53.9062C167.254 55.4877 166.6 57.2727 166.278 59.2614C165.938 61.2121 165.99 62.964 166.435 64.517C166.889 66.0701 167.647 67.2964 168.707 68.196C169.777 69.0956 171.07 69.5455 172.585 69.5455ZM188.022 70L191.658 48.1818H192.567L191.999 51.6477H192.113C192.795 50.5114 193.78 49.6023 195.067 48.9205C196.365 48.2386 197.766 47.8977 199.272 47.8977C199.386 47.8977 199.461 47.8977 199.499 47.8977C199.537 47.8977 199.613 47.8977 199.727 47.8977L199.556 48.8068C199.442 48.8068 199.367 48.8068 199.329 48.8068C199.291 48.8068 199.215 48.8068 199.102 48.8068C197.814 48.8068 196.621 49.0862 195.522 49.6449C194.433 50.2036 193.519 50.9754 192.781 51.9602C192.051 52.9451 191.583 54.072 191.374 55.3409L188.931 70H188.022ZM206.768 40.9091L201.939 70H201.03L205.859 40.9091H206.768ZM216.708 70.4545C214.985 70.4545 213.574 69.9621 212.475 68.9773C211.377 67.983 210.624 66.6335 210.217 64.929C209.819 63.2244 209.795 61.2973 210.146 59.1477C210.505 57.0076 211.173 55.0852 212.148 53.3807C213.124 51.6761 214.322 50.3267 215.742 49.3324C217.172 48.3381 218.735 47.8409 220.43 47.8409C221.594 47.8409 222.622 48.0824 223.512 48.5653C224.412 49.0388 225.146 49.7206 225.714 50.6108C226.291 51.4915 226.67 52.5379 226.85 53.75H226.964L229.094 40.9091H230.004L225.174 70H224.265L225.174 64.5455H225.06C224.464 65.7481 223.735 66.7945 222.873 67.6847C222.021 68.5653 221.069 69.2472 220.018 69.7301C218.976 70.2131 217.873 70.4545 216.708 70.4545ZM216.708 69.5455C218.252 69.5455 219.672 69.0909 220.969 68.1818C222.267 67.2633 223.356 66.0227 224.237 64.4602C225.127 62.8883 225.733 61.1174 226.055 59.1477C226.386 57.178 226.386 55.4119 226.055 53.8494C225.733 52.2775 225.098 51.0369 224.151 50.1278C223.204 49.2093 221.964 48.75 220.43 48.75C218.896 48.75 217.48 49.2093 216.183 50.1278C214.885 51.0369 213.787 52.2775 212.887 53.8494C211.997 55.4119 211.386 57.178 211.055 59.1477C210.733 61.1174 210.733 62.8883 211.055 64.4602C211.386 66.0227 212.025 67.2633 212.972 68.1818C213.919 69.0909 215.165 69.5455 216.708 69.5455Z" fill="#4720B5"/>
    </g>
    <rect x="4.5" y="0.5" width="249" height="109" rx="29.5" stroke="black"/>
    </g>
    <defs>
    <filter id="filter0_d_4_27" x="0" y="0" width="258" height="118" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
    <feOffset dy="4"/>
    <feGaussianBlur stdDeviation="2"/>
    <feComposite in2="hardAlpha" operator="out"/>
    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4_27"/>
    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4_27" result="shape"/>
    </filter>
    <filter id="filter1_dd_4_27" x="23.7273" y="40.9091" width="210.276" height="37.5455" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
    <feOffset dy="4"/>
    <feGaussianBlur stdDeviation="2"/>
    <feComposite in2="hardAlpha" operator="out"/>
    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4_27"/>
    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
    <feOffset dy="4"/>
    <feGaussianBlur stdDeviation="2"/>
    <feComposite in2="hardAlpha" operator="out"/>
    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
    <feBlend mode="normal" in2="effect1_dropShadow_4_27" result="effect2_dropShadow_4_27"/>
    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_4_27" result="shape"/>
    </filter>
    </defs>
    </svg>
    `}></SVG>
    )

}

widget.register(Widget)

Now run you can run the build task (CTRL + Shift + B in VSCode) and you are done with your widget.

Use your widget

You can use the widget using the widget menu in you projects.

Update your widget

If you need to make changes to your widget, you can do so by simply editing the component and copy the new svg code to the code.tsx file. When you make changes to the component, they will be automatically updated in all instances of the widget in your design.

Conclusion

Creating widgets in Figma can be a powerful tool for designers who want to save time and create consistent designs. By following these simple steps, you can create your own widgets and use them across multiple design projects. With Figma’s robust design features and intuitive interface, you can create stunning widgets that will enhance the overall user experience. I hope this helps you getting started with Figma widgets. If you require further information, you can find in the documentation. Happy designing