story.to.design | Generate Figma components from code

Person pointing at screen with Storybook syncing with Figma components

Best tools to align design and development

Tue, 26 Nov 2024

Why it's key to keep design and code in sync and a list of some of the top tools for the job.

story.to.design supports the new Storybook 8

Fri, 23 Feb 2024

The new Storybook 8 just launched and story.to.design already supports it!

Best Figma plugins for Dev Mode

Fri, 15 Sep 2023

In this post, we’ve rounded up some of the best Figma plugins to help teams make the most of Figma's new Dev Mode.

Best Figma plugins for developers

Thu, 24 Aug 2023

In this post, we’ve rounded up some of the best Figma plugins for frontend developers working and collaborating in Figma.

Best plugins for managing Figma variables

Thu, 27 Jul 2023

In this post, we’ve rounded up some of the best Figma plugins for creating and managing Figma variables.

Image of a person working at a computer with a screenshot of Storybook components being imported into Figma.

Developer Mode is now Local Mode

Fri, 30 Jun 2023

Quick feature update! story.to.design's Developer Mode is now called Local Mode.

Image of two people working, one sitting on the letters spelling UX and another at a computer, coding.

Design system governance - Bridging the gap between design and development

Tue, 20 Jun 2023

We explore the concept of design system governance and the tools to leverage in order to enhance communication, streamline workflows and overcome the challenges of managing design systems.

Image of a desktop computer and audio of a screen reader, with a bubble that spells A11y.

Best Figma plugins to design for accessibility

Tue, 18 Apr 2023

In this post, we’ve rounded up some of the best Figma plugins that can help designers think about accessibility when designing.

Image of a person working on a laptop sitting on block letters that spell Naming.

Best practices for naming Storybook components

Thu, 02 Mar 2023

Getting started on setting up your Storybook? Here are a few tips to help you name components and maintain consistency in your design system.

Component Story Format 3.0 is now supported by story.to.design

Tue, 31 Jan 2023

story.to.design supports the new Component Story Format 3.0 aka CSF3 that will be the default way to write stories in Storybook 7.

Image of a person working on a laptop pointing at a screen with Storybook components turning into Figma components.

Storybook to Figma - The ultimate guide

Tue, 31 Jan 2023

The importance of connecting Storybook to Figma, how to keep your design system assets aligned and some tips to get the most out of story.to.design.

Image of someone working on a keyboard and and rocketship.

story.to.design - Better. Faster. Stronger.

Thu, 26 Jan 2023

Almost a year since the first beta release of story.to.design! Let's look back at what 77 releases and even more late nights looks like.

Image of a person looking at button styles and their color tokens on a screen.

Introducing support for Design Tokens

Wed, 25 Jan 2023

A feature many of you have been waiting for, story.to.design now detects and imports Design Tokens from stories to Figma!

Illustration for variants process just got faster

Variants processing just got faster

Fri, 20 Jan 2023

We've recently spent time optimizing the backend processing of story.to.design and wanted to share some of the results with you.

Backlight, Storybook and Histoire logos in 3 buttons and a mouse pointer on the Histoire button.

story.to.design now supports Histoire

Mon, 09 Jan 2023

Since launching, story.to.design has always supported Storybook and Backlight. Today, we are pleased to announce that story.to.design now also supports Histoire as a source of stories to create Figma components from.

Image of developer working at laptop and components going from Storybook to Figma.

Introducing Developer Mode

Wed, 04 Jan 2023

Why we introduced a new mode for developers and how to use it.

Image of design, code and documentation files going into a filing cabinet labelled assets.

How to keep development and design assets aligned

Wed, 21 Dec 2022

Strategies to help keep your Figma UI library aligned with code.

Image of various design system components and the title of the blog post

Subcomponents - How to make your design system more flexible

Fri, 16 Dec 2022

How subcomponents can help make your design system work for more interfaces and use-cases.

Patchwork of variant properties API as code and some corresponding Figma components and properties.

Introducing the variant properties API

Fri, 09 Dec 2022

New feature to programmatically define Figma variant properties in your stories and create even more complex Figma components!

4 ways this Figma plugin helps my UX writing workflow

Wed, 26 Oct 2022

html.to.design helps you to improve your UX writing workflow

People holding pens working at a desk where computers are opened and notes are spread out

html.to.design for UI inventory

Wed, 26 Oct 2022

Putting together UI inventories has never been easier with this Figma plugin.

What if you could import a full webpage into Figma?

Fri, 14 Oct 2022

Why stop at importing components when you can import a full webpage? Introducing… html.to.design!

Screenshot showing frames in Figma with a settings window above puzzle pieces

Best Figma plugins for design systems

Wed, 12 Oct 2022

In this post, we’ve rounded the best Figma plugins that can help designers build, grow and maintain their design systems. A lot of them automate the dull, manual work and some even help bridge gaps between teams, aligning code and design.

Screenshot of a Figma file named story.to.design containing a picture of a "We're open" neon light sign over a dark brick wall, with the story.to.design plugin shortcut displayed on the top left corner.

We are open!

Thu, 01 Sep 2022

After a few months of testing our private Beta with early adopters, we are now pleased to open story.to.design to everyone!

5 reasons every design team needs story.to.design

Mon, 29 Aug 2022

Most teams know how hard it is to align developers and designers, code and design. Keeping a Figma library in sync with the codebase is a lot of work.