WordPress / WordPress/openverse

Integrate Figma pages for the design library with Storybook

Open
#643 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

⛔ status: blocked ✨ goal: improvement 💻 aspect: code 🟩 priority: low 🧱 stack: frontend
Dominant language
Python
Stars
380
Forks
290
Avg merge
3h 17m
Merged PRs (30d)
8

Description

Problem

The Figma file which guides the Storybook is currently separate from the Storybook where we build and test our components. There should be 1-1 mapping of stories and their design in the Figma file.

Description

The goal is to setup the Stoybook-Figma integration so that the stories can be linked to their Figma mockups. The storybook-addon-designs addon provides support for linking each story to a board/entity in Figma.

Additional context

Figma has a nice writeup about this that explains how to use a Storybook addon to link the two tools on a per-story basis.

Implementation

  • 🙋 I would be interested in implementing this feature.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the Storybook configuration and the storybook-addon-designs documentation, then compare it with Figma's Storybook integration guide. Done means the design library's stories have a one-to-one mapping to their corresponding Figma boards or entities and the links can be used from Storybook.

Written by the indexing model from the issue text.

Assessment

Tech stack
figma, storybook
Domain
design, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.