'%20d='M0%200h64v420H0z'/%3e%3cpath%20fill='url(%23b)'%20d='M84%200h64v420H84z'/%3e%3cpath%20fill='url(%23c)'%20d='M168%200h64v420h-64z'/%3e%3cpath%20fill='url(%23d)'%20d='M252%200h64v420h-64z'/%3e%3cpath%20fill='url(%23e)'%20d='M336%200h64v420h-64z'/%3e%3cpath%20fill='url(%23f)'%20d='M420%200h64v420h-64z'/%3e%3cpath%20fill='url(%23g)'%20d='M504%200h64v420h-64z'/%3e%3cpath%20fill='url(%23h)'%20d='M588%200h64v420h-64z'/%3e%3cpath%20fill='url(%23i)'%20d='M672%200h64v420h-64z'/%3e%3cdefs%3e%3clinearGradient%20id='a'%20x1='32'%20x2='32'%20y1='0'%20y2='420'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23EFF6FF'/%3e%3cstop%20offset='.235'%20stop-color='%23F3F4F6'/%3e%3cstop%20offset='1'%20stop-color='%23F3F4F6'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='b'%20x1='116'%20x2='116'%20y1='0'%20y2='420'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23EFF6FF'/%3e%3cstop%20offset='.235'%20stop-color='%23F3F4F6'/%3e%3cstop%20offset='1'%20stop-color='%23F3F4F6'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='c'%20x1='200'%20x2='200'%20y1='0'%20y2='420'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23EFF6FF'/%3e%3cstop%20offset='.235'%20stop-color='%23F3F4F6'/%3e%3cstop%20offset='1'%20stop-color='%23F3F4F6'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='d'%20x1='284'%20x2='284'%20y1='0'%20y2='420'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23EFF6FF'/%3e%3cstop%20offset='.235'%20stop-color='%23F3F4F6'/%3e%3cstop%20offset='1'%20stop-color='%23F3F4F6'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='e'%20x1='368'%20x2='368'%20y1='0'%20y2='420'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23EFF6FF'/%3e%3cstop%20offset='.235'%20stop-color='%23F3F4F6'/%3e%3cstop%20offset='1'%20stop-color='%23F3F4F6'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='f'%20x1='452'%20x2='452'%20y1='0'%20y2='420'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23EFF6FF'/%3e%3cstop%20offset='.235'%20stop-color='%23F3F4F6'/%3e%3cstop%20offset='1'%20stop-color='%23F3F4F6'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='g'%20x1='536'%20x2='536'%20y1='0'%20y2='420'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23EFF6FF'/%3e%3cstop%20offset='.235'%20stop-color='%23F3F4F6'/%3e%3cstop%20offset='1'%20stop-color='%23F3F4F6'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='h'%20x1='620'%20x2='620'%20y1='0'%20y2='420'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23EFF6FF'/%3e%3cstop%20offset='.235'%20stop-color='%23F3F4F6'/%3e%3cstop%20offset='1'%20stop-color='%23F3F4F6'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='i'%20x1='704'%20x2='704'%20y1='0'%20y2='420'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23EFF6FF'/%3e%3cstop%20offset='.235'%20stop-color='%23F3F4F6'/%3e%3cstop%20offset='1'%20stop-color='%23F3F4F6'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
Crafting your interface
Designer Extensions operate within an iframe, allowing you to use standard HTML, CSS, and JavaScript for developing your user interface, just like you would for a single-page application. To simplify the process, you may employ frameworks and libraries. For example, React or Vue can be used to create UI components, while Tailwind CSS or Bootstrap can be used for styling.
Although Simple does not demand Designer Extensions to be native to the Designer, we believe that applications that feel native will be more appealing to our customers and provide a superior user experience.
Looking to build a native looking app?
- We've provided a simplified version of our design system with colors, typography, components, patterns, and examples to help kickstart the design of your app. Interested? Access the Figma UI kit here.