Skip to content

Capswan/cli-ftr

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

FTR

Figma <-> Tailwind + React interoperability


Warning:

FTR in its current state is highly experimental. Please don't use the figma plugin with your production files as artboards might get deleted or changed. We recommend using an empty figma file to test this out.


TL;DR

  1. Use the cli to scrape an existing dev or prod storybook for stories. You get a json as output.
  2. Use the figma plugin to import the json and select the components you want to import.

Current Landscape

There are multiple projects that convert Figma into React (eg. Anima, FireJet). These are fairly robust/readable and make it easy for developers to go from design to code.

Pain Points

  • No FOSS solution
  • Conversion isn't bi-directional

Why FTR

At Capswan, want to go from our UI library to Figma. Reasons for doing this:

  • minimize pixel-perfect incongruencies between design & development
  • mitigate design/development time to keep figma files & react library in sync UI & design libraries
    • automate on build
  • make it faster to go from idea to production
    • allow product managers to quickly play around with component libraries in figma or playroom
    • allow designers to use components that devs made on the fly which might not be in their initial designs
    • allow developers to utilize components in apps without needing to manually code

Workflows

Current Workflow

graph LR
	Tail["Tailwind UI"] --> TailScrape["Tailwind Storybook Scraper"]
	TailScrape --> Storybook
	UI["UI Library"] --> Storybook
	Storybook --> Playroom
	Playroom --> UI
Loading

Augmented Workflow

graph LR
	UI["UI Library"] --> ReactFigma["React-Figma"]
	ReactFigma -.-> ReactFigmaPlugin["React-Figma Plugin"]
  ReactFigma -.-> Babel
  Babel -.->ReactFigmaPlugin
	ReactFigmaPlugin --> Figma
	Figma --> UI
Loading

Complete Workflow

graph LR
	Tail["Tailwind UI"] --> TailScrape["Tailwind Storybook Scraper"]
	TailScrape --> Storybook
	UI["UI Library"] --> Storybook
	Storybook --> Playroom
	Playroom --> UI
  UI --> ReactFigma["React-Figma"]
	ReactFigma -.-> ReactFigmaPlugin["React-Figma Plugin"]
  ReactFigma -.-> Babel
  Babel -.->ReactFigmaPlugin
	ReactFigmaPlugin --> Figma
	Figma --> UI
Loading

Dependencies

  • react-figma

    Render React in figma

  • babel

    Convert ReactDOM (ie. UI library components) to React-Figma syntax eg. <p> => <Text>

References

About

Figma, Tailwind, React conversion pipeline

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published