figmagic - npm Package Compare versions

Comparing version 4.4.6 to 4.5.0

package.json

		{
		"name": "figmagic",
		"version": "4.4.6",
		"version": "4.5.0",
		"description": "Figmagic is the missing piece between DevOps and design: Generate design tokens, export graphics, and extract design token-driven React components from your Figma documents.",
		@@ -72,4 +72,5 @@ "homepage": "https://www.figmagic.com",
		"build": "rm -rf build && npx webpack",
		"test": "jest __tests__ --collectCoverage",
		"test:watch": "jest --clearCache && jest __tests__ --collectCoverage --watch",
		"test": "npx jest __tests__ --collectCoverage",
		"test:watch": "npx jest --clearCache && jest __tests__ --collectCoverage --watch",
		"test:silent": "npx jest --reporters jest-silent-reporter --collectCoverage=false",
		"lint": "npx eslint './bin/*/.ts' --quiet --fix",
		@@ -96,2 +97,3 @@ "docs": "npx typedoc && npx arkit",
		"jest": "28",
		"jest-silent-reporter": "0",
		"license-compatibility-checker": "latest",
		@@ -98,0 +100,0 @@ "license-compliance": "latest",

readme/elements.md

		@@ -19,7 +19,7 @@ # Figmagic Element Sync

		You can generate simple flat elements or nested ones. Use flat elements for anything that is usually less complex (like `hr` and headings like `h1`), and go for nested elements when you want more advanced or “stateful” behavior like being invalid, disabled or if you need subclasses (maybe something like "Warning" and "Error" variants). Open and inspect some of the elements in the [Figmagic template]() to see both patterns! You can make nested elements as deep as you want, but Figmagic will currently only generate code based on the two first nested layers—this is so Figmagic can support the common pattern of Component > Variant > State. Nesting can use either a "subclass" (by having a group), or a pseudo-selector (by using a group prefixed with colon, like ":disabled"). Note that you may mix these as you wish, even something awful like Component > State > State if you need that! :)
		You can generate simple flat elements or nested ones. Use flat elements for anything that is usually less complex (like `hr` and headings like `h1`), and go for nested elements when you want more advanced or “stateful” behavior like being invalid, disabled or if you need subclasses (maybe something like "Warning" and "Error" variants). Open and inspect some of the elements in the [Figmagic template]() to see both patterns! You can make nested elements as deep as you want, but Figmagic will currently only generate code based on the two first nested layers—this is so Figmagic can support the common pattern of Component > Variant > State. Nesting can use either a "subclass" (by having a group or frame), or a pseudo-selector (by using a group or frame prefixed with colon, like ":disabled"). Note that you may mix these as you wish, even something awful like Component > State > State if you need that! :)

		Figmagic lets you style elements through typography and/or layout layers. These are communicated through a text layer (Figma's TEXT layer for typography) and a non-text layer (such as Figma's RECT layer) for layout.

		The name of the React component will be taken from the component name. Subclasses and pseudo-selectors will be named by their group name.
		The name of the React component will be taken from the component name. Subclasses and pseudo-selectors will be named by their group/frame name.

		@@ -40,3 +40,3 @@ ![Nesting: Button, Normal](../images/nesting-normal.png)

		_Nesting: Generated code. Notice how the nested group names became CSS classes. Only the differences in those layers were promoted to their own class, eliminating redundant code._
		_Nesting: Generated code. Notice how the nested group/frame names became CSS classes. Only the differences in those layers were promoted to their own class, eliminating redundant code._

		@@ -59,3 +59,3 @@ ## Describing your element

		You can prefix your layer/group with `:` to set/communicate a pseudo-selector (like `:hover`) during code generation.
		You can prefix your layer/group/frame with `:` to set/communicate a pseudo-selector (like `:hover`) during code generation.

		@@ -103,3 +103,3 @@ ### Ignore a layer
		- Elements are not self-closing (i.e. they are always `<element></element>` rather than `<element />`).
		- Cannot combine groups AND flat/non-nested styling inside an element.
		- Cannot combine groups/frames AND flat/non-nested styling inside an element.
		- Linear gradient is supported, but it does not use "gradientHandlePositions”.
		@@ -111,3 +111,3 @@
		- Layer order matters in nested elements! It will always pick the first layout or text element it finds.
		- Currently only a single layout element per group/nested layer will be picked up.
		- Currently only a single layout element per group/frame/nested layer will be picked up.
		- Nested elements should ideally have a text element in order to avoid breaking or getting strange CSS/behavior. This layer does not have to be visible!
		@@ -114,0 +114,0 @@

build/index.js

Sorry, the diff of this file is too big to display

figmagic - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics