CINXE.COM

<!doctype html> <html data-n-head-ssr lang="en" data-n-head="%7B%22lang%22:%7B%22ssr%22:%22en%22%7D%7D"> <head > <meta data-n-head="ssr" data-hid="charset" charset="utf-8"><meta data-n-head="ssr" data-hid="viewport" name="viewport" content="width=device-width, initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Gain access to thousands of illustrated concepts from Storyset and add them to your Figma project, ready to be edited to your liking."><title>Storyset for Figma</title><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link data-n-head="ssr" rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link data-n-head="ssr" rel="icon" href="/favicon.svg"><link data-n-head="ssr" rel="icon" type="image/png" size="32x32" href="/favicon-32x32.png"><link data-n-head="ssr" rel="icon" type="image/png" size="16x16" href="/favicon-16x16.png"><link data-n-head="ssr" rel="manifest" href="/site.webmanifest"><link rel="preload" href="/_nuxt/acb11d4.js" as="script"><link rel="preload" href="/_nuxt/5c0e2af.js" as="script"><link rel="preload" href="/_nuxt/css/b1934df.css" as="style"><link rel="preload" href="/_nuxt/d7e9ad5.js" as="script"><link rel="preload" href="/_nuxt/css/63ddfe5.css" as="style"><link rel="preload" href="/_nuxt/ecbd288.js" as="script"><link rel="preload" href="/_nuxt/fonts/proxima-nova-bold.725bf99.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/_nuxt/fonts/proxima-nova-semibold.7353804.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/_nuxt/fonts/proxima-nova-regular.d828a5e.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/_nuxt/css/6ba4f8e.css" as="style"><link rel="preload" href="/_nuxt/5717b2c.js" as="script"><link rel="stylesheet" href="/_nuxt/css/b1934df.css"><link rel="stylesheet" href="/_nuxt/css/63ddfe5.css"><link rel="stylesheet" href="/_nuxt/css/6ba4f8e.css"> </head> <body > <div data-server-rendered="true" id="__nuxt"><div id="__layout"><div class="bg-gray-100 min-h-screen" data-v-6d0118f8> <header class="absolute left-0 top-0 right-0 px-6 flex items-center h-16 justify-between z-30" data-v-6d0118f8><a href="/" class="nuxt-link-active" data-v-6d0118f8><img src="/images/logo-footer.svg" alt="logo" class="h-8" data-v-6d0118f8></a> <a href="/" class="border border-gray-600 rounded py-2 px-4 text-gray-700 text-sm hover:bg-darkblue-500 hover:border-darkblue-500 hover:text-white hidden sm:block nuxt-link-active" data-v-6d0118f8> Go to Storyset </a></header> <div class="pb-20 pt-28 sm:py-20 relative" data-v-6d0118f8><img src="/images/figma/wave1.svg" alt="waves shape" class="absolute top-0 left-0 hidden sm:block" data-v-6d0118f8> <img src="/images/figma/wave2.svg" alt="waves shape" class="absolute top-0 right-0 hidden sm:block" data-v-6d0118f8> <div class="container max-w-screen-lg px-6 mx-auto flex flex-col items-center relative" data-v-6d0118f8><div class="flex items-center mb-8" data-v-6d0118f8><img src="/images/figma/stories.svg" alt="Figma image" class="w-16 h-16" data-v-6d0118f8> <span class="text-gray-700 text-lg mx-4" data-v-6d0118f8>+</span> <img src="/images/figma/figma.svg" alt="Figma icon" class="w-16 h-16" data-v-6d0118f8></div> <h1 class="text-3xl font-bold text-darkblue-500 mb-3 text-center leading-tight" data-v-6d0118f8> Storyset plugin for Figma </h1> <p class="text-gray-700 text-lg text-center mb-4" data-v-6d0118f8> Gain access to thousands of illustrated concepts from Storyset by Freepik <br data-v-6d0118f8> and add them to your Figma project, ready to be edited to your liking. </p> <a href="https://www.figma.com/community/plugin/865232148477039928/Stories-by-Freepik" target="_blank" class="bg-blue-500 hover:bg-blue-600 py-2 px-6 rounded font-bold text-lg text-white" data-v-6d0118f8>Install now</a></div></div> <div class="wave relative" data-v-6d0118f8><div class="stars absolute top-0 left-0 w-full h-full z-10" data-v-6d0118f8></div> <svg preserveAspectRatio="none" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1919.9 1021.12" class="absolute h-full w-full" data-v-6d0118f8><defs><linearGradient id="home-wave_svg__a" x1="1238.81" y1="2676.07" x2="832.74" y2="1149.95" gradientTransform="matrix(1 0 0 -1 0 2479.89)" gradientUnits="userSpaceOnUse"><stop offset=".19" stop-color="#2d2db0"></stop><stop offset=".34" stop-color="#2b2da8"></stop><stop offset=".56" stop-color="#242f92"></stop><stop offset=".83" stop-color="#19316f"></stop><stop offset="1" stop-color="#113255"></stop></linearGradient></defs><path d="M1641.5 334.8c-96.9 47.7-205.9 77.9-312.9 64-43.3-7.3-85.1-20.8-123.7-43-78.5-45.1-145.9-125.9-235.7-125.5-135.1.6-204.8 178.9-332.8 223.6C517 495.6 385 409.1 262.6 440c-76.3 19.3-135 80.7-203.9 119.6a424.43 424.43 0 01-58.7 27v503c67.4 2.9 135.3-1.3 202.7-6.9 176.2-14.6 364.8-39.9 530.9 37.3 38.3 17.8 74.6 40.8 115.2 51.9 125.7 34.4 250-51.6 378-75.1 119.3-21.9 240.6 11.3 359.6 34.5 111.1 21.6 231.5 33 333.5-14.2V158.8c-91.1 61.4-179.8 127.5-278.4 176z" transform="translate(0 -158.8)" fill="url(#home-wave_svg__a)"></path></svg> <div class="container max-w-screen-lg px-6 mx-auto flex flex-col items-center relative z-20" data-v-6d0118f8><img src="/images/figma/color-palette.svg" alt="color palette" class="hidden sm:block absolute top-0 left-0 ml-32 lg:ml-64 mt-10" data-v-6d0118f8> <img src="/images/figma/paper.svg" alt="paper image" class="hidden sm:block absolute bottom-0 ml-64 -mr-16 mb-10" data-v-6d0118f8> <img src="/images/figma/pentool.svg" alt="pen illustration" class="hidden sm:block absolute top-0 right-0 mr-32 lg:mr-64" data-v-6d0118f8> <img src="/images/figma/tools.svg" alt="tools illustration" class="hidden sm:block absolute bottom-0 mr-64 -ml-20 -mb-4 z-20" data-v-6d0118f8> <video width="311" height="568" autoplay="autoplay" muted="muted" loop="loop" poster="/images/figma/poster-figma.png" class="shadow-lg rounded relative z-10" data-v-6d0118f8><source src="/images/figma/video-figma.mp4" type="video/mp4" data-v-6d0118f8></video></div></div> <div class="container max-w-screen-lg px-6 mx-auto mt-32" data-v-6d0118f8><div class="flex flex-col-reverse sm:flex-row mb-28" data-v-6d0118f8><div class="sm:w-1/2 sm:pr-16 lg:pr-24 mt-8 sm:mt-0" data-v-6d0118f8><h3 class="text-3xl font-bold text-darkblue-500 mb-2 leading-tight sm:mt-8" data-v-6d0118f8> Thousands of illustrated concepts </h3> <p class="text-gray-700 text-lg" data-v-6d0118f8> Find the illustration that best suits your project and add it with a single click. </p></div> <div class="sm:w-1/2" data-v-6d0118f8><img src="/images/figma/illustrations.svg" alt="illustrations images" data-v-6d0118f8></div></div> <div class="flex flex-col sm:flex-row mb-28" data-v-6d0118f8><div class="sm:w-1/2 pr-0 sm:pr-24" data-v-6d0118f8><img src="/images/figma/styles.svg" alt="styles icon" data-v-6d0118f8></div> <div class="sm:w-1/2 sm:pl-16 lg:pl-0 mt-8 sm:mt-0" data-v-6d0118f8><h3 class="text-3xl font-bold text-darkblue-500 mb-2 leading-tight sm:mt-8" data-v-6d0118f8> Different styles </h3> <p class="text-gray-700 text-lg" data-v-6d0118f8> Each with its own design and approach. There is something for everyone! </p></div></div> <div class="flex flex-col-reverse sm:flex-row mb-28" data-v-6d0118f8><div class="sm:w-1/2 sm:pr-16 lg:pr-24 mt-8 sm:mt-0" data-v-6d0118f8><h3 class="text-3xl font-bold text-darkblue-500 mb-2 leading-tight sm:mt-8" data-v-6d0118f8> Customizable </h3> <p class="text-gray-700 text-lg" data-v-6d0118f8> You can choose the color and the type of background you want. Besides, all the illustrations are vector based, so you will be able to fully customize them to your liking in Figma. </p></div> <div class="sm:w-1/2" data-v-6d0118f8><img src="/images/figma/customizable.svg" alt="customizable illustration" data-v-6d0118f8></div></div></div> <div class="bg-white pt-20 pb-20 lg:pb-32" data-v-6d0118f8><h3 class="text-3xl font-bold text-darkblue-500 leading-tight text-center mb-16" data-v-6d0118f8> Why Storyset? </h3> <div class="container max-w-screen-lg px-6 mx-auto relative z-20" data-v-6d0118f8><div class="flex flex-col sm:flex-row items-center" data-v-6d0118f8><div class="sm:w-1/2 sm:pr-16 mb-16 sm:mb-0 px-8 sm:px-0" data-v-6d0118f8><img src="/images/figma/why.svg" alt="reasons illustration" data-v-6d0118f8></div> <div class="sm:w-1/2 flex flex-col" data-v-6d0118f8><div class="flex mb-8" data-v-6d0118f8><div class="flex w-8 h-8" data-v-6d0118f8><img src="/images/figma/quality.svg" alt="quality illustration" class="w-full" data-v-6d0118f8></div> <div class="pl-4 flex-1" data-v-6d0118f8><h4 class="text-lg text-darkblue-500 font-bold" data-v-6d0118f8>Quality</h4> <p class="text-gray-600" data-v-6d0118f8> Freepik is one of the leading companies in the sector, offering millions of free illustrations, photos, icons, PSDs and presentation templates. We provide the best of the best. </p></div></div> <div class="flex mb-8" data-v-6d0118f8><div class="flex w-8 h-8" data-v-6d0118f8><img src="/images/figma/variety.svg" alt="variety illustration" class="w-full" data-v-6d0118f8></div> <div class="pl-4 flex-1" data-v-6d0118f8><h4 class="text-lg text-darkblue-500 font-bold" data-v-6d0118f8>Variety</h4> <p class="text-gray-600" data-v-6d0118f8> Since a story can be told in many ways, all our illustrated concepts are available in different styles, each with its own design and artistic approach. </p></div></div> <div class="flex" data-v-6d0118f8><div class="flex w-8 h-8" data-v-6d0118f8><img src="/images/figma/practicality.svg" alt="Practicality illustration" class="w-full" data-v-6d0118f8></div> <div class="pl-4 flex-1" data-v-6d0118f8><h4 class="text-lg text-darkblue-500 font-bold" data-v-6d0118f8> Practicality </h4> <p class="text-gray-600" data-v-6d0118f8> It is easy to use our illustrations in any kind of project, and their vector nature allows you to customize them according to your needs. </p></div></div></div></div> <div class="work-in relative rounded-lg py-8 px-8 lg:px-16 mt-16 lg:mt-32" data-v-6d0118f8><div class="stars absolute inset-0" data-v-6d0118f8></div> <div class="relative flex flex-col items-center" data-v-6d0118f8><h3 class="text-center text-white text-2xl font-bold mb-4" data-v-6d0118f8> Work in Figma with illustrations from Freepik鈥檚 latest project </h3> <p class="text-center text-white text-lg" data-v-6d0118f8> Get our plugin and start working with thousands of illustrated concepts created by one of the leading companies in the graphic design sector. </p> <a href="https://www.figma.com/community/plugin/865232148477039928/Stories-by-Freepik" target="_blank" class="bg-blue-500 hover:bg-blue-600 py-2 px-6 rounded font-bold text-lg text-white mt-8" data-v-6d0118f8>Install now</a></div></div></div></div> <footer class="py-8 bg-darkblue-400" data-v-6d0118f8><div class="px-6 text-center flex items-center justify-between" data-v-6d0118f8><div class="flex flex-col justify-center items-center h-10 sm:flex-row items-center" data-v-6d0118f8><img src="/images/freepikcompany.svg" alt="freepik company" class="my-2 h-5" data-v-6d0118f8> <p class="opacity-75 leading-normal text-white ml-4" data-v-6d0118f8> Copyright 漏2021 Freepik Company S.L. All rights reserved. </p></div></div></footer> <script type="application/ld+json" data-v-6d0118f8>{"@context":"https://schema.org","@type":"Organization","logo":"https://storyset.com/images/logo.svg","name":"Storyset","url":"https://storyset.com/"}</script></div></div></div><script>window.__NUXT__=(function(a){return {layout:"empty",data:[{}],fetch:{},error:a,serverRendered:true,routePath:"\u002Ffor-figma",config:{_app:{basePath:"\u002F",assetsPath:"\u002F_nuxt\u002F",cdnURL:a}}}}(null));</script><script src="/_nuxt/acb11d4.js" defer></script><script src="/_nuxt/5717b2c.js" defer></script><script src="/_nuxt/5c0e2af.js" defer></script><script src="/_nuxt/d7e9ad5.js" defer></script><script src="/_nuxt/ecbd288.js" defer></script> </body> </html>