‹div›RIOTS logo

FRONT-END
IS
BACK!

We believe decorative icon

Front-end creation is an art when developers and designers work together to build extraordinary experiences.

It's exciting but it's HARD !

They deserve better tools to focus on what matters and work collaboratively as a team.

This is our mission.

What we do >

Figma plugins

abstract image

html.to.design

Convert any website into fully editable Figma designs. Leverage an existing website and import into Figma to start your own designs, without building each element from scratch.

Try html.to.design
abstract image

data.to.design

Your content database for Figma. Sync directly to your content sources and design with real data instead of placeholders.

Try data.to.design
abstract image

Lorem Ipsum

Generate ‘Lorem Ipsum’ to fill your text layers with dummy text in a single click. Choose between ‘Auto-generate’ or a specific text length.

Try Lorem Ipsum
abstract image

pdf.to.design

Convert any PDF document into Figma designs. Import your PDF into Figma as designs with fully editable layers, or as static, pixel-perfect images.

Try pdf.to.design
Already empowering over 1.4 million Figma users
abstract image

story.to.design

Generate and sync a full Figma library from Storybook. Keep your Figma components up to date with code in a single click.

Try story.to.design
abstract image

Remove Background (Privacy-First)

Remove background from images in Figma 100% privately. Your image is analyzed locally on your device and never uploaded or shared anywhere.

Try Remove Background
abstract image

Stretch

Stretch and transform text, vectors and entire Figma frames, while keeping them fully editable!

Try Stretch
abstract image

code.to.design

Instantly transform your code snippets into fully editable Figma designs.

Try code.to.design

Design system solutions

Generate and sync a full Figma library from Storybook. Keep your Figma components up to date with code in a single click.
Screenshots of a Storybook story and of a Figma component overlapping.
Backlight.dev is a specialized development environment for design systems with advanced collaborative features for both developers and designers.
Screenshot of the editing of a design system in Backlight.

Online IDEs

abstract image

WebComponents.dev

Build Web Components, push to GitHub and release to npm.

Try WebComponents.dev

Our achievements wouldn't have been possible without open source. We give back every chance we get.

Stripe climate program We contribute 1% of all purchases to fight climate change through the Stripe Climate program.

We aredecorative icon

  • Good listeners, because we care.
  • Curious, because there is so much to discover.
  • Unpretentious, because we have so much to learn.
  • Fun, because life is too short.

Communitydecorative icon

Join a welcoming community around web development, component-driven development and design systems.

Stay up-to-date with our latest news.

Join our community on Discord
Join us
Check our latest news on Twitter
Follow us
Check out our updates on Linkedin
Follow us