gridaco / figma-sdk

🎨 Design SDK, Supercharged Figma API & Plugin Development

DESIGN SDK

Build a single app that supports all figma, sketch, xd and bridged.

A mid wrapper for building consistant figma & sketch & reflection plugin, with single api reference

Powers Grida Figma Assistant

Features

• mocks desing platform environment - faster development.
• single api reference - write once, run everywhere.
• reflect standard in the box - based on reflect DSL, develop with unified api structure.
• UI support - different ui feedback features by platform such as modals (xd), notify (figma) is supported by ui library
• OOP Based design access objects
• General UI Related utilities in the box
• Testing supported
• Provides Web based development environment

Packages & Usage

yarn add @design-sdk/<package>

Packages

• figma
  • figma-remote
  • figma-url
• xd
• sketch

Are you looking for universal design converter?

Take a look at design-file-converter

Sketch reference

• https://developer.sketch.com/plugins/javascript-api
• https://developer.sketch.com/reference/api/

Figma reference

• https://www.figma.com/plugin-docs/api/

XD reference

• https://adobexdplatform.com/plugin-docs/reference/xd-index.html

figma-sdk's Issues

Redesign nodes with types and properties.

Currently the sdk design follows the structure of figma plugin typings. which is poorly designed.

Need re-construction of nodes with types and properties separated.

E.g. Component should not be a type of a node, it rather be a property of a node of some other type. (which is frame.)

Higher order relative LCRS support.

current relative LCRS retrieval only works for direct parent. if the text is in the box under the root box, which box is same size as text, and the box aligned lest to the root, text will return value of center, which we should provide a way to get relative LCRS to specific target (a.k.a root)

• root (root:box - left, root:text - left)
  • box (box:text - center)
    • text

[Figma] Add figma-rpc package - a package for sending RPC commands through assistant plugin for CI jobs.

Proposal: A package for sending RPC commands through assistant plugin for CI tasks.

Writing automation process on plugin is time-consuming. Instead, we propose a new way to interact with figma app in a headless way, that can be executed remotely.

[Security] Add simple encryption for `/figma-auth-store`

• env var name - DESIGN_SDK_FIGMA_AUTH_STORE_SECRET_KEY
• or with api - AuthStore.configure( { secret: 'my-secret' } )

Converting rect node to frame ignores rect's layer opacity.

on nodes-on-rect-convert.ts

  if (rect.visible !== false) {
    // FIXEME - on converting fills, it does not handles the rectnode's layer opacity. so dimmed color rect will be convered as non-dimmed color frame node.
    frameNode.fills = rect.fills;
    frameNode.fillStyleId = rect.fillStyleId;

    frameNode.strokes = rect.strokes;
    frameNode.strokeStyleId = rect.strokeStyleId;

    frameNode.effects = rect.effects;
    frameNode.effectStyleId = rect.effectStyleId;
  }

Migrate node typings to reflect-core's CGR

ref: gridaco/design-lint#6

Add `--mock` flag support

Component variant on design tool often contains state of user interaction - e.g. A input cursor or a help text / actual input, a hover state.

See, the hover state is not a state that is exposed to outer component interface, it's a interaction state provided by native callbacks. So on design tool, hover=true variant should be marked as --mock so that design-sdk won't accidently recognize it as a state that is controllable by parent accessors.

Add variant-set node support on figma

variant-set will refuse to be converted and will throw error. this should be handled in more smarter way.

Idea: variant node as a limited type struct.
e.g.

variant-set {
   variants: component[]
}

Support rotation data mapping for figma remote to figma plugin nodes.

Currently the rotation mapping is always to 0 due to the lack of conversion implementation.

See L:65 at https://github.com/gridaco/design-sdk/blob/local/figma-remote/lib/blenders/general.blend.ts

Ref:

chrvadala/transformation-matrix#87

Support hyperlink mapping for remote typings

on figma-remote/lib/mapper/text.mapper.ts
hyperLink mapping is incomplete

[figma/feature-request] Add figma variant support

figma variant support

Including below features

• extract properties
• create variant abstract class for holding variant related datas.
• check differences by changed properties

[Figma] Shared plugin data setting not working across device / accounts

Skipping description. issue found on assistant/component-manager layer meta data setting

Workarounds -

TypeError: Cannot read property 'top' of undefined

TypeError: Cannot read property 'top' of undefined
    at convertToAutoLayout (auto-layout.convert.ts?c3e7:82)
    at convertNodesOnRectangle (nodes-on-rect.convert.ts?755f:70)
    at eval (index.ts?fcc0:178)
    at Array.map (<anonymous>)
    at intoReflectNodes (index.ts?fcc0:75)
    at convertFrameNodeToAlt (index.ts?fcc0:417)
    at eval (index.ts?fcc0:146)
    at Array.map (<anonymous>)
    at intoReflectNodes (index.ts?fcc0:75)
    at convertFrameNodeToAlt (index.ts?fcc0:417)
    at eval (index.ts?fcc0:146)
    at Array.map (<anonymous>)
    at intoReflectNodes (index.ts?fcc0:75)
    at convertFrameNodeToAlt (index.ts?fcc0:417)
    at eval (index.ts?fcc0:146)
    at Array.map (<anonymous>)
    at intoReflectNodes (index.ts?fcc0:75)
    at Module.intoReflectNode (index.ts?fcc0:67)

Error causing nodes

• https://www.figma.com/file/Y0Gh77AqBoHH7dG1GtK3xF/grida?node-id=391%3A50

[Figma] missing constraints property on `BooleaOperationNode`

Reported & tracking on figma-plugin-typings repo.
figma/plugin-typings#77

This is pollyfilled manually by sdk.

TypeError: Cannot read property '0' of undefined

base.node.ts?d2ee:144 Uncaught (in promise) TypeError: Cannot read property '0' of undefined
    at ReflectFrameNode.get (base.node.ts?d2ee:144)
    at getReletiveLCRS (lcrs.ts?f811:70)
    at ReflectTextNode.get (constraint.mixin.ts?87ec:26)
    at Module.commonPosition (common-position.ts?face:44)
    at retrieveAbsolutePosOrMakeWidget (positioned.wrap.ts?0736:58)
    at wrapWithPositioned (positioned.wrap.ts?0736:23)
    at TextBuilder.positionInParent (default.builder.ts?54e6:54)
    at flutterText (index.ts?6444:218)
    at handleNode (index.ts?6444:156)
    at eval (index.ts?6444:78)
    at Array.forEach (<anonymous>)
    at flutterWidgetGenerator (index.ts?6444:76)
    at flutterFrame (index.ts?6444:225)
    at handleNode (index.ts?6444:154)

This happens when absoluteTransform is undefined, caused by converting remote figma node into reflect node.

Example error causing desing

• https://www.figma.com/file/x7RRK6RwWtZuNakmbMLTVH/examples?node-id=1%3A6