Comparing version 4.3.0-alpha.1 to 4.3.0
{ | ||
"name": "figmagic", | ||
"version": "4.3.0-alpha.1", | ||
"description": "Generate design tokens, export graphics, and extract design token-driven React components from your Figma documents. Inspired by Salesforce Theo.", | ||
"version": "4.3.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.", | ||
"homepage": "https://www.figmagic.com", | ||
@@ -13,6 +13,9 @@ "repository": { | ||
"figma", | ||
"figma api", | ||
"design tokens", | ||
"figma-api", | ||
"tokens", | ||
"design system" | ||
"ux", | ||
"design-tokens", | ||
"design-system", | ||
"design-systems", | ||
"design-specs" | ||
], | ||
@@ -19,0 +22,0 @@ "license": "MIT", |
400
README.md
@@ -10,16 +10,86 @@ ![Figmagic cover art](images/cover.png) | ||
#### _Generate design tokens, export graphics, and extract design token-driven React components from your Figma documents. Originally inspired by [Salesforce Theo](https://github.com/salesforce-ux/theo)._ | ||
> 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. | ||
Figmagic promotes a structured way of assembling design systems. Following the primary principle of atomic design, Figmagic wants you to build from the bottom up, beginning with decomposing the tokens. Tokens shape elements, which form components, that are ordered in compositions, which get presented in views... You know the drill, though I am switching Brad Frost's nomenclature into something more front-end friendly. | ||
🏕️ Kumbaya, friends. Figmagic automates the world into a better place, but does not attempt to completely remove designers or developers: It just aims to move them closer, while eliminating most of the tedious busywork that has grown around front-end development. | ||
When it comes to code generation, Figmagic tries to do this in a better way. Instead of over-eagerly promoting hardcoded code generation from huge and complex components, Figmagic tries to competently, or at least "mostly-right", handle automation for things that should not be too context-dependent or manual input-heavy. Code should also be as close to "normal" as possible—meaning that generated code binds values to tokens and not some random px values as other platforms do. All of this can happen because Figmagic assumes a way of working that respects standard CSS and HTML: no magic trickery! Figmagic avoids some of the cognitive and technical overhead by introducing a concept called **Elements**, which are Figmagic-compliant components that can be output into code. By composing larger components out of simple Elements, code generation is made much more manageable while also promoting much more structured design. | ||
_Built initially as an internal handoff tool for [Humblebee](https://www.humblebee.se)._ | ||
Figmagic does not aim at completely removing designers or developers: It just aims to move them closer, while eliminating any of the tedious busywork that has grown around front-end development. | ||
--- | ||
**Please note:** Figmagic requires that your document structure is identical to what I show in the template at [https://www.figma.com/community/file/821094451476848226/Figmagic-%E2%80%94-Design-System-for-Tokens](https://www.figma.com/community/file/821094451476848226/Figmagic-%E2%80%94-Design-System-for-Tokens). | ||
## PSA: Version `4.3.0` introduces new handling of trashed/replaced files | ||
Figmagic is compiled from Typescript to ES6, so you should have Node 10 or later for it to work on your machine. | ||
Previous versions in the 4.0 series have been using [`trash`](https://github.com/sindresorhus/trash) to handle files that need to be replaced. In `4.3.0` this is no longer the case, and there is now instead a configuration choice you can make to adapt to your needs. | ||
_Built initially as an internal handoff tool for [Humblebee](https://www.humblebee.se)._ | ||
**The default uses a local soft delete by moving folders into `./figmagic-trash` – that's why you might be surprised by seeing it added.** | ||
Read more under the [`refreshType`](#refresh-type) listing. | ||
--- | ||
## Requirements | ||
**Please note:** Figmagic requires that your document structure follows the conventions in this document; a full setup can be seen in the template at [https://www.figma.com/community/file/821094451476848226/Figmagic-%E2%80%94-Design-System-for-Tokens](https://www.figma.com/community/file/821094451476848226/Figmagic-%E2%80%94-Design-System-for-Tokens). | ||
Figmagic is compiled from Typescript to ES6, so you should have Node 12 or later (Node 14 and newer recommended) for it to work on your machine. | ||
--- | ||
## Introduction | ||
### Figmagic promotes a structured way of assembling design systems | ||
Figmagic is a very straightforward, super-flexible command-line tool that helps you do three things well: | ||
#### 1. Output design tokens | ||
Outputting and using **design tokens** aids in designing with a structured approach. These tokens are completely platform agnostic when output into JSON, or for most web developers, more readily useable in various supported flavors of JavaScript (TS, JS, MJS). It's web-oriented but works well with React Native too. | ||
A basic set of tokens can look like this: | ||
```js | ||
const tokens = { | ||
colors: { | ||
blue: 'rgba(20, 20, 255, 1)', | ||
warmWhite: 'rgba(240, 240, 240, 1)' | ||
}, | ||
spacing: { | ||
small: '1rem', | ||
medium: '1.5rem' | ||
} | ||
}; | ||
``` | ||
You use these tokens like so, `color: ${colors.blue};`, to shape and specify your coded components, web sites, apps, and what have you, instead of hard-coding every single value. | ||
**This way, you decouple implementation from data. You can now easily drive changes as _design choices_ through Figma instead of as _code changes_.** | ||
#### 2. Output graphics | ||
Say goodbye to ever manually exporting graphics from Figma again. Grab your graphics as PNG, SVG, as React components with inlined SVG, or as objects that export all graphics from a single file. | ||
#### 3. Generate React components | ||
Figmagic also allows you to generate React components from Figma components that follow a specific formal structure. It's best at fairly low-level components that you can piece together to make more complex organisms on your own. You can significantly cut down on boilerplate churn and scaffolding time with Figmagic. | ||
And, no, the code does not actually suck! This was my own biggest gripe with services promising this functionality, so I knew it had to be good, or at least tolerable. Therefore Figmagic supports things like actually using your own tokens (so we can cut down on hard-coded garbage, unless matches aren't found) and you can completely customize the number of related generated files. | ||
While not perfect, it's definitely better than many things I've seen, made by big companies. All of this is explained later here in the docs. | ||
#### The arguments | ||
Here are a few reasons you'd want to use Figmagic rather than anything similar: | ||
- In Figmagic, design tokens are a first-class concept since day 1 | ||
- Figmagic is designer-driven, since Figma is seen as the source of truth | ||
- Figmagic is automatable and very lightweight (~40kb compressed), with only a single external dependency (`dotenv`) | ||
- Figmagic is developer-friendly and makes very few assumptions on your use and/or setup and supports a range of output formats plus that it's extensible through custom templates if you need something completely different | ||
- Figmagic is open-sourced under the MIT license and has a long track record of very short implementation cycles for new features/fixes | ||
- Generated React components bind to any token values you've defined so these are equally useful as starter code or as code you continually output | ||
## Additional documentation sources | ||
The Figmagic developer docs are auto-generated on every push and can be found at the [dedicated documentation site](https://docs.figmagic.com). | ||
For deeper information pertaining to Figmagic Elements and syncing them, see [the dedicated README page](readme/elements.md). | ||
## Example project | ||
@@ -117,10 +187,14 @@ | ||
Design tokens are the abstract but shared elements from which your design system is built. | ||
Design tokens are the _**abstract and shared elements**_ from which your design system is built. | ||
Design tokens express any of the individual values that you build from, such as colors, spacing, and typographic features. | ||
Design tokens _**express any of the individual values that you build from**_, such as colors, spacing, and typographic features. | ||
Tokens offer a form of “contract” between a designer’s intent and its fulfillment by developers. This means that both sides agree to avoid by all means anything that’s not codified also as a token. For example, avoiding spacing values that are not also available as a token. It’s similar in many ways to old-school styleguides, but tokens should only ever communicate strict, hard values. Styleguides can tend to be context-sensitive and full of explanation—tokens must communicate without context or explanation. | ||
Tokens offer a form of “contract” between a designer’s intent and its fulfillment by developers. This means that both sides agree to treat the individual parts of a complete design through the tokens that represent those values. As a format, they are super easy to read and understand and are adaptable for consumption by many types of systems or applications. That’s very important as you start doing cross-platform apps and things like that. | ||
However: You may still want to add written guidance for usage. It’s just that the tokens should be able to be consumed without understanding anything specific about them. | ||
![Design tokens](images/design-tokens.png) | ||
Tokens ensure that values are not [magic numbers](<https://en.wikipedia.org/wiki/Magic_number_(programming)>) or ”just picked at random”. This makes communication precise and effortless. Creating actual code for components, even complex ones, also becomes a lot less of a bore, since what you are doing is just pointing stuff like padding, Z indices, and anything else to their token representations. | ||
_However: You may still want to add written guidance for usage. It’s just that the tokens should be able to be consumed without understanding anything specific about them._ | ||
You should bind tokens to Figma styles whenever and wherever possible to simplify your own design work, but make sure that those are also represented in the **Tokens** page, as this page is where a developer will pick up tokens with Figmagic. | ||
@@ -132,3 +206,3 @@ | ||
- Colors | ||
- Colors (including linear and radial gradients, though note: linear gradients which are not using straight angles will get an incorrect calculation) | ||
- Font Sizes | ||
@@ -143,3 +217,3 @@ - Spacing | ||
- Border Widths | ||
- Shadows (currently supports single/multiple Drop Shadows) | ||
- Shadows (currently supports single/multiple Drop Shadows; see caveat below) | ||
- Opacities | ||
@@ -153,2 +227,10 @@ - Durations (for animations) | ||
#### Note on shadows | ||
From [alehar9320](https://github.com/alehar9320) commenting on [issue 111](https://github.com/mikaelvesavuori/figmagic/issues/111): | ||
> Figma calls everything Drop-shadow, while translating the design into box-shadow or drop-shadow CSS dependent upon whether it's a ~ shape or a vector graphic. See [blog post](https://www.figma.com/blog/behind-the-feature-shadow-spread/) from the Figma developer who built the feature. | ||
> This means that if Figmagic is used to define shadow tokens, it should be recommended to only have one drop-shadow definition per rectangle. To maintain compatibility with both drop-shadow and box-shadow CSS. The exception would be if there is a clear distinction between tokens to be used with box-shadow and drop-shadow. As [_drop-shadow_ can only accept a single shadow parameter](<https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow()>). Any token that has two values will simply be incompatible with drop-shadow. | ||
## Working with Figmagic as a designer | ||
@@ -233,3 +315,3 @@ | ||
``` | ||
```json5 | ||
{ | ||
@@ -297,2 +379,4 @@ "debugMode": false, | ||
--- | ||
#### Toggle debug mode | ||
@@ -302,4 +386,6 @@ | ||
Default is `false`. | ||
**Default**: `false`. | ||
--- | ||
#### Switch font unit | ||
@@ -309,4 +395,6 @@ | ||
Default is `rem`. | ||
**Default**: `rem`. | ||
--- | ||
#### Switch letter-spacing unit | ||
@@ -316,4 +404,6 @@ | ||
Default is `em`. | ||
**Default**: `em`. | ||
--- | ||
#### Switch line-height unit | ||
@@ -323,4 +413,6 @@ | ||
Default is `unitless`. | ||
**Default**: `unitless`. | ||
--- | ||
#### Switch opacities unit | ||
@@ -330,4 +422,6 @@ | ||
Default is `float`. | ||
**Default**: `float`. | ||
--- | ||
#### Set output file name | ||
@@ -337,4 +431,6 @@ | ||
Default is `figma.json`. | ||
**Default**: `figma.json`. | ||
--- | ||
#### Set Figma base file output folder | ||
@@ -344,4 +440,6 @@ | ||
Default is `.figmagic`. | ||
**Default**: `.figmagic`. | ||
--- | ||
#### Set elements output folder | ||
@@ -351,4 +449,6 @@ | ||
Default is `elements`. | ||
**Default**: `elements`. | ||
--- | ||
#### Set graphics output folder | ||
@@ -358,4 +458,6 @@ | ||
Default is `graphics`. | ||
**Default**: `graphics`. | ||
--- | ||
#### Set token output folder | ||
@@ -365,4 +467,6 @@ | ||
Default is `tokens`. | ||
**Default**: `tokens`. | ||
--- | ||
#### Switch CSS file format | ||
@@ -372,4 +476,6 @@ | ||
Default is `ts`. | ||
**Default**: `ts`. | ||
--- | ||
#### Switch description file format | ||
@@ -379,4 +485,6 @@ | ||
Default is `md`. | ||
**Default**: `md`. | ||
--- | ||
#### Switch elements file format | ||
@@ -386,4 +494,6 @@ | ||
Default is `tsx`. | ||
**Default**: `tsx`. | ||
--- | ||
#### Switch graphics file format | ||
@@ -393,4 +503,6 @@ | ||
Default is `svg`. | ||
**Default**: `svg`. | ||
--- | ||
#### Switch Storybook file format | ||
@@ -400,4 +512,6 @@ | ||
Default is `js`. | ||
**Default**: `js`. | ||
--- | ||
#### Switch token file format | ||
@@ -407,4 +521,6 @@ | ||
Default is `ts`. | ||
**Default**: `ts`. | ||
--- | ||
#### Output graphics as wrapped React elements | ||
@@ -414,4 +530,6 @@ | ||
Default is `false`. | ||
**Default**: `false`. | ||
--- | ||
#### Output graphics elements map | ||
@@ -421,4 +539,6 @@ | ||
Default is `false`. | ||
**Default**: `false`. | ||
--- | ||
#### Set output scale of graphics | ||
@@ -428,4 +548,8 @@ | ||
Default is `1`. **Note that from the CLI you must specify the scale size like `3x` (or anything at the end, as long as it includes letter at the end). This only applies to CLI configuration, and does not apply to other types of config, such as through `figmagic.json` or `.figmagicrc`**. | ||
**Default**: `1`. | ||
_Note that from the CLI you must specify the scale size like `3x` (or anything at the end, as long as it includes letter at the end). This only applies to CLI configuration, and does not apply to other types of config, such as through `figmagic.json` or `.figmagicrc`_. | ||
--- | ||
#### Set output token data type | ||
@@ -435,4 +559,6 @@ | ||
Default is `null`. Currently the only valid non-null value is `enum`. | ||
**Default**: `null`. | ||
--- | ||
#### Overwrite files | ||
@@ -442,2 +568,4 @@ | ||
--- | ||
#### Recompile data from local Figma JSON file | ||
@@ -447,4 +575,6 @@ | ||
Default is `null`, and will then be taken from local `.env` file if not explicitly passed in through the CLI. | ||
**Default**: `null`, and will then be taken from local `.env` file if not explicitly passed in through the CLI. | ||
--- | ||
#### Refresh type | ||
@@ -454,8 +584,11 @@ | ||
Default is `soft`. This defines how overwritten files will be "refreshed" when starting Figmagic operations. | ||
**Default**: `soft`. | ||
In `soft` mode, the previous folder is renamed and placed in a Figmagic-created trash folder (`./figmagic-trash/`) with an added ISO 8601 timestamp. | ||
This defines how overwritten files will be "refreshed" when starting Figmagic operations. | ||
In `hard` mode, Node's `fs` module is used to erase the folder with no way of retrieving the old folder. | ||
- In `soft` mode, the previous folder is renamed and placed in a Figmagic-created trash folder (`./figmagic-trash/`) with an added [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) timestamp (i.e. `2021-09-05`) and hour-minute-second indicator. | ||
- In `hard` mode, Node's `fs` module is used to erase the folder with no way of retrieving the old folder. | ||
--- | ||
#### Set REM size | ||
@@ -465,4 +598,8 @@ | ||
Default is `16`. **Note that from the CLI you must specify the REM size like `16p` (or anything at the end, as long as it includes letter at the end). This only applies to CLI configuration, and does not apply to other types of config, such as through `figmagic.json` or `.figmagicrc`**. | ||
**Default**: `16`. | ||
_Note that from the CLI you must specify the REM size like `16p` (or anything at the end, as long as it includes letter at the end). This only applies to CLI configuration, and does not apply to other types of config, such as through `figmagic.json` or `.figmagicrc`_. | ||
--- | ||
#### Force update all elements | ||
@@ -472,4 +609,8 @@ | ||
Default is `true`. Forces all elements and file types to be regenerated. | ||
**Default**: `true`. | ||
Forces all elements and file types to be regenerated. | ||
--- | ||
#### Skip file generation: CSS | ||
@@ -479,4 +620,8 @@ | ||
Default is `false`. Skip creating CSS file when syncing elements. | ||
**Default**: `false`. | ||
Skip creating CSS file when syncing elements. | ||
--- | ||
#### Skip file generation: Markdown description | ||
@@ -486,4 +631,8 @@ | ||
Default is `false`. Skip creating Markdown file when syncing elements. | ||
**Default**: `false`. | ||
Skip creating Markdown file when syncing elements. | ||
--- | ||
#### Skip file generation: React | ||
@@ -493,4 +642,8 @@ | ||
Default is `false`. Skip creating React file when syncing elements. | ||
**Default**: `false`. | ||
Skip creating React file when syncing elements. | ||
--- | ||
#### Skip file generation: Storybook | ||
@@ -500,4 +653,8 @@ | ||
Default is `false`. Skip creating Storybook file when syncing elements. | ||
**Default**: `false`. | ||
Skip creating Storybook file when syncing elements. | ||
--- | ||
#### Skip file generation: Styled Components | ||
@@ -507,4 +664,8 @@ | ||
Default is `false`. Skip creating Styled Components file when syncing elements. | ||
**Default**: `false`. | ||
Skip creating Styled Components file when syncing elements. | ||
--- | ||
#### Switch spacing unit | ||
@@ -514,4 +675,6 @@ | ||
Default is `rem`. | ||
**Default**: `rem`. | ||
--- | ||
#### Sync elements | ||
@@ -521,6 +684,8 @@ | ||
Default is `false`, and will then be taken from local `.env` file if not explicitly passed in through the CLI. | ||
**Default**: `false`, and will then be taken from local `.env` file if not explicitly passed in through the CLI. | ||
Use this when you want to sync elements in your "Elements" page in Figma. | ||
--- | ||
#### Sync graphics | ||
@@ -530,6 +695,8 @@ | ||
Default is `false`, and will then be taken from local `.env` file if not explicitly passed in through the CLI. | ||
**Default**: `false`, and will then be taken from local `.env` file if not explicitly passed in through the CLI. | ||
Use this when you want to sync graphics in your "Graphics" page in Figma. Use the RC configuration file to pass in options. Default format will be SVG. | ||
--- | ||
#### Sync tokens | ||
@@ -539,6 +706,8 @@ | ||
Default is `true`, and will then be taken from local `.env` file if not explicitly passed in through the CLI. | ||
**Default**: `true`, and will then be taken from local `.env` file if not explicitly passed in through the CLI. | ||
Use this when you want to sync tokens in your "Design tokens" page in Figma. Use the RC configuration file to pass in options. | ||
--- | ||
#### Set path to graphics template | ||
@@ -548,6 +717,8 @@ | ||
Default is `templates/graphic`. | ||
**Default**: `templates/graphic`. | ||
**Your local `figmagic.json` or `.figmagicrc` file must have a block with `templates.templatePathGraphic` that specifies a valid path, such as `./node_modules/figmagic/templates/graphic`**. | ||
_Your local `figmagic.json` or `.figmagicrc` file must have a block with `templates.templatePathGraphic` that specifies a valid path, such as `./node_modules/figmagic/templates/graphic`_. | ||
--- | ||
#### Set path to React template | ||
@@ -557,6 +728,8 @@ | ||
Default is `templates/react`. | ||
**Default**: `templates/react`. | ||
**Your local `figmagic.json` or `.figmagicrc` file must have a block with `templates.templatePathReact` that specifies a valid path, such as `./node_modules/figmagic/templates/react`**. | ||
_Your local `figmagic.json` or `.figmagicrc` file must have a block with `templates.templatePathReact` that specifies a valid path, such as `./node_modules/figmagic/templates/react`_. | ||
--- | ||
#### Set path to Storybook template | ||
@@ -566,6 +739,8 @@ | ||
Default is `templates/story`. | ||
**Default**: `templates/story`. | ||
**Your local `figmagic.json` or `.figmagicrc` file must have a block with `templates.templatePathStory` that specifies a valid path, such as `./node_modules/figmagic/templates/story`**. | ||
_Your local `figmagic.json` or `.figmagicrc` file must have a block with `templates.templatePathStory` that specifies a valid path, such as `./node_modules/figmagic/templates/story`_. | ||
--- | ||
#### Set path to Styled Components template | ||
@@ -575,6 +750,8 @@ | ||
Default is `templates/styled`. | ||
**Default**: `templates/styled`. | ||
**Your local `figmagic.json` or `.figmagicrc` file must have a block with `templates.templatePathStyled` that specifies a valid path, such as `./node_modules/figmagic/templates/styled`**. | ||
_Your local `figmagic.json` or `.figmagicrc` file must have a block with `templates.templatePathStyled` that specifies a valid path, such as `./node_modules/figmagic/templates/styled`_. | ||
--- | ||
#### Pass in Figma API token | ||
@@ -584,4 +761,6 @@ | ||
Default is `null`, and will then be taken from local `.env` file if not explicitly passed in through the CLI. | ||
**Default**: `null`, and will then be taken from local `.env` file if not explicitly passed in through the CLI. | ||
--- | ||
#### Set relative import path for tokens (for CSS) | ||
@@ -591,4 +770,6 @@ | ||
Default is `''` (effectively just blank or the same folder). Use this so CSS files can import tokens from the correct location, for example to resolve something like `../../tokens/colors.ts` you would pass in `../../` and `tokens` would be whatever your `outputFolderTokens` value is. | ||
**Default**: `''` (effectively just blank or the same folder). Use this so CSS files can import tokens from the correct location, for example to resolve something like `../../tokens/colors.ts` you would pass in `../../` and `tokens` would be whatever your `outputFolderTokens` value is. | ||
--- | ||
#### Pass in Figma URL | ||
@@ -598,4 +779,6 @@ | ||
Default is `null`, and will then be taken from local `.env` file if not explicitly passed in through the CLI. | ||
**Default**: `null`, and will then be taken from local `.env` file if not explicitly passed in through the CLI. | ||
--- | ||
#### Pass in unitless precision | ||
@@ -605,4 +788,8 @@ | ||
Defines the precision (decimals) for unitless values (rounded using `.toFixed()` internally). Default is `2`. | ||
**Default**: `2`. | ||
Defines the precision (decimals) for unitless values (rounded using `.toFixed()` internally). | ||
--- | ||
#### Set font family name to be Postscript name instead of "common name" | ||
@@ -612,4 +799,6 @@ | ||
Default is `false`, i.e. common name. | ||
**Default**: `false`, i.e. common name. | ||
--- | ||
#### Use a versioned Figma document | ||
@@ -619,4 +808,6 @@ | ||
Default is `null` which will resolve to the latest version. The value you specify here is the name of the version in the Figma file's **Version history**. | ||
**Default**: `null` which will resolve to the latest version. The value you specify here is the name of the version in the Figma file's **Version history**. | ||
--- | ||
## Templates used for code generation | ||
@@ -643,6 +834,8 @@ | ||
Default: Common name. | ||
**Default:** Common name. | ||
**Note**: In previous versions of Figmagic the Postscript font family name was used. | ||
--- | ||
### Font weights | ||
@@ -652,2 +845,4 @@ | ||
--- | ||
### Font sizes | ||
@@ -657,4 +852,6 @@ | ||
Default: `rem` units. Can be set to `rem` or `em`. | ||
**Default:** `rem` units. Can be set to `rem` or `em`. | ||
--- | ||
### Line heights | ||
@@ -666,2 +863,4 @@ | ||
--- | ||
### Colors | ||
@@ -671,18 +870,28 @@ | ||
--- | ||
### Spacing | ||
Default: `rem` units. Can be set to `rem` or `em`. | ||
**Default:** `rem` units. Can be set to `rem` or `em`. | ||
--- | ||
### Border widths | ||
Default: `px` units. | ||
**Default:** `px` units. | ||
--- | ||
### Letter spacings | ||
Default: `em` units. | ||
**Default:** `em` units. | ||
--- | ||
### Media queries | ||
Default: `px` units. | ||
**Default:** `px` units. | ||
--- | ||
### Opacities | ||
@@ -693,14 +902,22 @@ | ||
--- | ||
### Radii | ||
Default: `px` units. | ||
**Default:** `px` units. | ||
--- | ||
### Shadows | ||
Default: `px` units for three values (horizontal offset, vertical offset, blur) and RGBA for the color. | ||
**Default:** `px` units for three values (horizontal offset, vertical offset, blur) and RGBA for the color. | ||
--- | ||
### Z indices | ||
Default: numbers (whole numbers, i.e. integers). | ||
**Default:** numbers (whole numbers, i.e. integers). | ||
--- | ||
## Code structure | ||
@@ -710,21 +927,28 @@ | ||
- `__tests__/`: Tests, structured similarly to the `bin` folder source code | ||
- `.github/`: GitHub files for CI and issue template | ||
- `.vscode/`: Visual Studio Code configuration | ||
- `bin/`: Source code | ||
- `bin/contracts`: Types and interfaces | ||
- `bin/controllers`: Controllers | ||
- `bin/entities`: Entities (DDD-style), this is where most of the logic will be contained | ||
- `bin/frameworks`: Non-domain functionality, like string manipulation and downloading files etc. | ||
- `bin/usecases`: Where the application "features" are orchestrated, as per [Clean Architecture](https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html) | ||
- `build/`: ES6-compiled code (this is the code that consumers of the Figmagic binary actually use) | ||
- `images/`: Documentation, mostly images and screen shots | ||
- `templates/`: Files that are used as templates for code generation | ||
- `testdata/`: Most of the tests point to stored test data which is stored in this folder | ||
- `index.ts`: The file that initializes and sets up everything required to run Figmagic | ||
| Folder | Description | | ||
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | | ||
| `__tests__/` | Tests, structured similarly to the `bin` folder source code | | ||
| `.github/` | GitHub files for CI and issue template | | ||
| `.husky/` | Husky pre-commit configuration | | ||
| `.vscode/` | Visual Studio Code configuration | | ||
| `bin/` | Source code | | ||
| `bin/contracts` | Types and interfaces | | ||
| `bin/controllers` | Controllers | | ||
| `bin/entities` | Entities (DDD-style), this is where most of the logic will be contained | | ||
| `bin/frameworks` | Non-domain functionality, like string manipulation and downloading files etc. | | ||
| `bin/usecases` | Where the application "features" are orchestrated, as per [Clean Architecture](https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html) | | ||
| `build/` | ES6-compiled code (this is the code that consumers of the Figmagic binary actually use) | | ||
| `images/` | Documentation, mostly images and screen shots | | ||
| `readme/` | Additional readme files | | ||
| `templates/` | Files that are used as templates for code generation | | ||
| `testdata/` | Most of the tests point to stored test data which is stored in this folder | | ||
| `typedoc-docs/` | Documentation generated by TypeDoc; gets hosted at [https://docs.figmagic.com](https://docs.figmagic.com) | | ||
| `index.ts` | The file that initializes and sets up everything required to run Figmagic | | ||
### Arkit map | ||
### Arkit diagram | ||
![Arkit code structure map](images/arkit.svg) | ||
This is how [Arkit](https://arkit.pro) models Figmagic and its source code structure and dependencies. Note that this diagram omits frameworks, external dependencies and contracts (i.e. types) to focus on the primary flows. | ||
![Arkit code structure diagram](images/arkit.svg) | ||
## Contribution | ||
@@ -731,0 +955,0 @@ |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
155534
1
901