paperclip translator

[Craig Condon]

PC functionality should be just about the same as Figmark, so it makes more sense to translate Figma files to Paperclip. Here's an example translated file:

<!--
!!!!!!!!!!!!!!!!!
This file is auto-generated by Figmark. To update it, run `figmark download`.
!!!!!!!!!!!!!!!!!
-->

<style>
  .layer-style {
    position: absolute;
    width: 100%;
    height: 100%;
  }
</style>

<!-- ? would be optional parameter -->
<div export component as="Layer" className="layer-style {className?}" style="{style?}">
  {children}
</div>

<div export component as="ChildLayer" class="child-layer">
  {children}
</div>

<!-- re-build for preview -->
<Layer>
  <ChildLayer />
</Layer>

Then in actual code:

import {Layer, ChildLayer} from "./synced-figma-file.pc"
<Layer>
  <ChildLayer style={styleOverride} />
</Layer>

AND by extension, users can use Paperclip to stylize:

<import as="design" src="./design.pc" />

<style>
  .layer {
    color: red;
  }
</style>

<design:Layer export component as="Layer" class=">>>layer"  />

Considerations

• Shared styles
• Slots