diff --git a/apps/docs/CONTRIBUTING.md b/apps/docs/CONTRIBUTING.md index df0391a930..7486691df0 100644 --- a/apps/docs/CONTRIBUTING.md +++ b/apps/docs/CONTRIBUTING.md @@ -5,6 +5,58 @@ - Translation - i18n support for your native language would be a great first choice. - Documentation - Improve the documentations +## Source of truth + +- Edit docs in `/docs/**`. +- Do not edit generated files in `/apps/docs/docs/**`. +- Translations live next to their source docs under a sibling `translations/` directory and are copied into Docusaurus i18n output during `pnpm content:setup`. + +## Documentation taxonomy + +Use this workflow when deciding whether a doc should ship: + +- Ship docs that are already minimally meaningful. If the page is useful now, publish it now. +- Use `draft: true` only when the page is not yet meaningful enough to ship. +- Reserve `unlisted: true` for intentionally non-discoverable or on-demand docs. It is not the default for incomplete work. +- Use the custom frontmatter field `doc_tasks` to track follow-up work on docs that still ship. + +Example: + +```md +--- +title: Example +description: One-line summary. +doc_tasks: + - enhance + - translate +format: md +--- +``` + +`doc_tasks` values: + +- `enhance` for pages that need stronger examples, screenshots, or structure +- `update` for pages that should be checked against current product behavior or UI +- `translate` for pages that should get priority locale coverage next + +## Translation workflow + +- Treat the main English doc in `/docs/**` as the source of truth. Translations flow from `en` to locale docs such as `ko`, `ja`, and `fr`; do not reverse-sync changes from a locale doc back into the English source by default. +- Keep the source doc publishable even before translations exist. +- Add `doc_tasks: [translate]` on the source doc when translation is still pending. +- For a page like `docs/platform/index.md`, place the Korean translation at `docs/platform/translations/ko/index.md`. +- Add `translations/meta.json` in that directory if it does not already exist. +- Locale docs are copied into Docusaurus i18n output with the `translations//` segment removed. Keep internal relative doc links aligned with the English source doc unless a translation intentionally changes the document structure. + +## Validation + +Before finishing docs work, run the docs site setup/build from `/apps/docs`: + +```sh +pnpm content:setup +pnpm build +``` + ## Note for Insiders Beaware of two configurations, next.config.js (web : root) and docusaurus.config.js (docs-site : /docs). diff --git a/apps/docs/README.md b/apps/docs/README.md index 4aef5e2bc2..6317e4f65d 100644 --- a/apps/docs/README.md +++ b/apps/docs/README.md @@ -2,6 +2,19 @@ This website is built using [Docusaurus](https://docusaurus.io/). +## Source docs and translations + +- Source docs live in the repository root under `/docs/**`. +- `/apps/docs/docs/**` is generated during docs setup and build. +- Locale files live in `translations//` directories next to the source docs and are copied into Docusaurus i18n output. + +## Shipping rules + +- Publish docs once they are minimally meaningful. +- Use `draft: true` only for docs that are not yet meaningful enough to ship. +- Reserve `unlisted: true` for intentionally non-discoverable docs. +- Use `doc_tasks` to track follow-up work on publishable docs: `enhance`, `update`, `translate`. + ### Running locally ```sh diff --git a/apps/docs/docusaurus.config.ts b/apps/docs/docusaurus.config.ts index 0527a1dc5b..189c2358f5 100644 --- a/apps/docs/docusaurus.config.ts +++ b/apps/docs/docusaurus.config.ts @@ -57,11 +57,7 @@ const config: Config = { stylesheets: [require.resolve("katex/dist/katex.min.css")], i18n: { defaultLocale: "en", - locales: [ - "en", - // "fr", - "ko", - ], + locales: ["en", "ja", "fr", "ko"], }, themeConfig: { navbar: { diff --git a/docs/AGENTS.md b/docs/AGENTS.md index 88d401a68c..ea27c38ccc 100644 --- a/docs/AGENTS.md +++ b/docs/AGENTS.md @@ -34,6 +34,58 @@ frontmatter with `title`, `description`, and `keywords`. For most `wg/` and `reference/` Markdown pages that do not use MDX/JSX features, also include `format: md` as described below. +## Doc taxonomy + +We use a simple shipping-first taxonomy for Docusaurus docs. + +- **Ship minimally meaningful docs.** If a doc already helps a user complete a task or understand a feature, publish it as a normal doc even if it still needs screenshots, examples, or polish. +- **Use `draft: true` for docs that are not meaningful enough to ship yet.** Drafts are for placeholders, partial notes, or incomplete pages that would not yet help a user on their own. +- **Do not use `unlisted: true` as the default state for incomplete docs.** `unlisted: true` is reserved for intentionally non-discoverable docs such as on-demand pages, historical records, or docs that should exist but stay out of navigation/search. +- **Use `doc_tasks` for follow-up work on docs that still ship.** This is our custom frontmatter field for triage and task tracking. + +### `doc_tasks` frontmatter + +Use `doc_tasks` when a page is publishable now but still needs follow-up work. + +```md +--- +title: Example doc +description: Short summary of what the page covers. +doc_tasks: + - enhance + - translate +format: md +--- +``` + +Allowed values: + +- `enhance` — the doc ships, but needs better examples, screenshots, structure, or depth +- `update` — the doc ships, but should be checked against current product behavior, APIs, or UI +- `translate` — the source doc ships, but still needs priority translation work + +Guidelines: + +- Omit `doc_tasks` when no follow-up work needs to be tracked. +- Prefer `doc_tasks` over `draft: true` when the page is already useful enough to publish. +- Remove a task once that follow-up work is complete. + +## Authoring workflow + +When creating or revising a Docusaurus doc, use this decision flow: + +1. Is the page already minimally meaningful for its audience? + - If yes, ship it normally. + - If it still needs obvious follow-up work, add `doc_tasks`. +2. Is the page not yet useful enough on its own? + - Add `draft: true`. +3. Should the page exist but remain intentionally hard to discover? + - Use `unlisted: true`. +4. Is the page a normal Markdown page without JSX/MDX features? + - Prefer `format: md`. +5. Does the page have a Korean translation under a sibling `translations/ko/` directory? + - If not and translation is still desired, add `doc_tasks: [translate]` to the source doc. + ## Special Cases Some docs trees are intentionally kept, but have different ownership rules: diff --git a/docs/editor/features/tray.md b/docs/editor/features/tray.md index f27576efa6..faaed52e0b 100644 --- a/docs/editor/features/tray.md +++ b/docs/editor/features/tray.md @@ -2,6 +2,9 @@ title: Tray description: Organize your canvas with Trays — lightweight containers that group frames without affecting layout or exports. format: md +doc_tasks: + - enhance + - translate --- # Tray diff --git a/docs/editor/shortcuts/index.md b/docs/editor/shortcuts/index.md index 5816f302e5..56f3bce899 100644 --- a/docs/editor/shortcuts/index.md +++ b/docs/editor/shortcuts/index.md @@ -1,3 +1,17 @@ +--- +title: Grida Editor shortcuts +description: Reference the keyboard shortcuts available in the Grida editor across tools, selection, editing, layout, and view controls. +keywords: + - grida + - editor + - shortcuts + - keyboard shortcuts + - hotkeys +format: md +doc_tasks: + - update +--- + # Grida Editor Shortcuts Welcome to the official keyboard shortcuts guide for the Grida Canvas Editor. This reference covers all available keyboard shortcuts to help you work more efficiently and navigate the editor with ease. diff --git a/docs/editor/shortcuts/translations/fr/index.md b/docs/editor/shortcuts/translations/fr/index.md new file mode 100644 index 0000000000..ef03b6bce9 --- /dev/null +++ b/docs/editor/shortcuts/translations/fr/index.md @@ -0,0 +1,197 @@ +--- +title: Raccourcis de l'éditeur Grida +description: Référence des raccourcis clavier disponibles dans l'éditeur Grida pour les outils, la sélection, l'édition, la mise en page et l'affichage. +keywords: + - grida + - editor + - shortcuts + - keyboard shortcuts + - hotkeys +format: md +doc_tasks: + - update +--- + +# Raccourcis de l'éditeur Grida + +Ce guide est la référence officielle des raccourcis clavier disponibles dans Grida Canvas Editor. Les raccourcis vous permettent d'agir rapidement sans utiliser la souris, ce qui accélère nettement le travail dans l'éditeur. + +Les principales opérations sont organisées par catégorie : changement d'outil, transformations, alignement et gestion de l'affichage du canvas. Chaque raccourci est indiqué pour macOS et pour Windows/Linux. + +> **Note:** Sur macOS, utilisez `Cmd` (⌘) pour `meta`. Sur Windows/Linux, utilisez `Ctrl` pour `ctrl`. + +## Outils + +| Action | macOS | Windows/Linux | Description | +| ------------------- | -------------- | -------------- | ----------------------------------------------------- | +| Curseur (sélection) | `V` | `V` | Outil de sélection | +| Main | `H` or `Space` | `H` or `Space` | Déplacer le canvas (`Space` reste un appui maintenu) | +| Zoom | `Z` | `Z` | Zoomer sur le canvas (activation temporaire) | +| Mise à l'échelle | `K` | `K` | Outil de mise à l'échelle paramétrique | +| Lasso | `Q` | `Q` | Outil lasso (mode vectoriel uniquement) | +| Rectangle | `R` | `R` | Insérer un rectangle | +| Ellipse | `O` | `O` | Insérer une ellipse | +| Polygone | `Y` | `Y` | Insérer un polygone | +| Texte | `T` | `T` | Insérer du texte | +| Ligne | `L` | `L` | Dessiner une ligne | +| Flèche | `⇧ + L` | `⇧ + L` | Dessiner une flèche (ligne avec pointe) | +| Conteneur | `A` or `F` | `A` or `F` | Insérer un conteneur | +| Tray | `⇧ + F` | `⇧ + F` | Insérer un tray (section d'organisation) | +| Path | `P` | `P` | Dessiner un path (outil plume) | +| Crayon | `⇧ + P` | `⇧ + P` | Dessiner au crayon | +| Pinceau | `B` | `B` | Outil pinceau | +| Gomme | `E` | `E` | Outil gomme | +| Pot de peinture | `G` | `G` | Outil de remplissage (mode bitmap uniquement) | +| Largeur variable | `⇧ + W` | `⇧ + W` | Outil de largeur variable (mode vectoriel uniquement) | +| Pipette | `I` or `⌃ + C` | `I` | Prélever une couleur à l'écran | + +## Sélection et navigation + +| Action | macOS | Windows/Linux | Description | +| --------------------------- | ------------------- | ------------------- | ------------------------------------------------ | +| Sélectionner tous les pairs | `⌘ + A` | `Ctrl + A` | Sélectionner tous les éléments du même niveau | +| Sélectionner les enfants | `Enter` | `Enter` | Sélectionner tous les enfants de la sélection | +| Sélectionner le parent | `⇧ + Enter` or `\` | `⇧ + Enter` or `\` | Sélectionner le parent de la sélection courante | +| Pair suivant | `Tab` | `Tab` | Sélectionner l'élément suivant au même niveau | +| Pair précédent | `⇧ + Tab` | `⇧ + Tab` | Sélectionner l'élément précédent au même niveau | +| Échap / Effacer | `Escape` or `Clear` | `Escape` or `Clear` | Effacer la sélection et quitter les modes actifs | + +## Édition + +| Action | macOS | Windows/Linux | Description | +| ------------- | ----------------------- | --------------------------- | ------------------------------------------ | +| Annuler | `⌘ + Z` | `Ctrl + Z` | Annuler la dernière action | +| Rétablir | `⌘ + ⇧ + Z` | `Ctrl + ⇧ + Z` | Refaire la dernière action annulée | +| Couper | `⌘ + X` | `Ctrl + X` | Couper la sélection | +| Copier | `⌘ + C` | `Ctrl + C` | Copier la sélection | +| Copier en PNG | `⌘ + ⇧ + C` | `Ctrl + ⇧ + C` | Copier la sélection comme image PNG | +| Coller | `⌘ + V` | `Ctrl + V` | Coller depuis le presse-papiers | +| Dupliquer | `⌘ + D` | `Ctrl + D` | Dupliquer la sélection | +| Supprimer | `Delete` or `Backspace` | `Delete` or `Backspace` | Supprimer la sélection | +| Aplatir | `⌘ + E` or `⌥ + ⇧ + F` | `Ctrl + E` or `Alt + ⇧ + F` | Convertir la sélection en paths vectoriels | + +## Transformation + +| Action | macOS | Windows/Linux | Description | +| ------------------------------ | ------------------ | -------------------- | -------------------------------------------------------------------- | +| Déplacement fin | `Arrow Keys` | `Arrow Keys` | Déplacer la sélection de 1 px | +| Redimensionnement fin (droite) | `Ctrl + ⌥ + →` | `Ctrl + Alt + →` | Augmenter la largeur de 1 px | +| Redim. fin (droite, 10 px) | `Ctrl + ⌥ + ⇧ + →` | `Ctrl + Alt + ⇧ + →` | Augmenter la largeur de 10 px | +| Redimensionnement fin (gauche) | `Ctrl + ⌥ + ←` | `Ctrl + Alt + ←` | Diminuer la largeur de 1 px | +| Redim. fin (gauche, 10 px) | `Ctrl + ⌥ + ⇧ + ←` | `Ctrl + Alt + ⇧ + ←` | Diminuer la largeur de 10 px | +| Redimensionnement fin (haut) | `Ctrl + ⌥ + ↑` | `Ctrl + Alt + ↑` | Diminuer la hauteur de 1 px | +| Redim. fin (haut, 10 px) | `Ctrl + ⌥ + ⇧ + ↑` | `Ctrl + Alt + ⇧ + ↑` | Diminuer la hauteur de 10 px | +| Redimensionnement fin (bas) | `Ctrl + ⌥ + ↓` | `Ctrl + Alt + ↓` | Augmenter la hauteur de 1 px | +| Redim. fin (bas, 10 px) | `Ctrl + ⌥ + ⇧ + ↓` | `Ctrl + Alt + ⇧ + ↓` | Augmenter la hauteur de 10 px | +| Mettre au premier plan | `]` | `]` | Mettre devant (ou agrandir le pinceau si l'outil pinceau est actif) | +| Mettre à l'arrière-plan | `[` | `[` | Mettre derrière (ou réduire le pinceau si l'outil pinceau est actif) | +| Avancer d'un calque | `⌘ + ]` | `Ctrl + ]` | Avancer la sélection d'un calque | +| Reculer d'un calque | `⌘ + [` | `Ctrl + [` | Reculer la sélection d'un calque | + +## Alignement et distribution + +| Action | macOS | Windows/Linux | Description | +| -------------------------- | -------------- | ---------------- | ------------------------------------- | +| Aligner à gauche | `⌥ + A` | `Alt + A` | Aligner la sélection à gauche | +| Aligner à droite | `⌥ + D` | `Alt + D` | Aligner la sélection à droite | +| Aligner en haut | `⌥ + W` | `Alt + W` | Aligner la sélection en haut | +| Aligner en bas | `⌥ + S` | `Alt + S` | Aligner la sélection en bas | +| Centrer horizontalement | `⌥ + H` | `Alt + H` | Centrer horizontalement | +| Centrer verticalement | `⌥ + V` | `Alt + V` | Centrer verticalement | +| Distribuer horizontalement | `⌥ + Ctrl + V` | `Alt + Ctrl + V` | Répartir uniformément à l'horizontale | +| Distribuer verticalement | `⌥ + Ctrl + H` | `Alt + Ctrl + H` | Répartir uniformément à la verticale | + +## Groupement et mise en page + +| Action | macOS | Windows/Linux | Description | +| ---------------------- | ----------- | ---------------- | -------------------------------------- | +| Grouper | `⌘ + G` | `Ctrl + G` | Grouper la sélection | +| Dégrouper | `⌘ + ⇧ + G` | `Ctrl + ⇧ + G` | Dégrouper la sélection | +| Grouper avec conteneur | `⌘ + ⌥ + G` | `Ctrl + Alt + G` | Grouper la sélection avec un conteneur | +| Auto-layout | `⇧ + A` | `⇧ + A` | Appliquer l'auto-layout à la sélection | + +## Mise en forme du texte + +| Action | macOS | Windows/Linux | Description | +| ----------------------- | ----------- | ---------------- | ------------------------------------- | +| Basculer en gras | `⌘ + B` | `Ctrl + B` | Activer ou désactiver le gras | +| Basculer en italique | `⌘ + I` | `Ctrl + I` | Activer ou désactiver l'italique | +| Basculer le souligné | `⌘ + U` | `Ctrl + U` | Activer ou désactiver le souligné | +| Basculer le barré | `⌘ + ⇧ + X` | `Ctrl + ⇧ + X` | Activer ou désactiver le texte barré | +| Alignement texte gauche | `⌘ + ⌥ + L` | `Ctrl + Alt + L` | Aligner le texte à gauche | +| Alignement texte centre | `⌘ + ⌥ + T` | `Ctrl + Alt + T` | Centrer le texte | +| Alignement texte droite | `⌘ + ⌥ + R` | `Ctrl + Alt + R` | Aligner le texte à droite | +| Justifier le texte | `⌘ + ⌥ + J` | `Ctrl + Alt + J` | Justifier horizontalement le texte | +| Augmenter la taille | `⌘ + ⇧ + >` | `Ctrl + ⇧ + >` | Augmenter la taille de police de 1 px | +| Réduire la taille | `⌘ + ⇧ + <` | `Ctrl + ⇧ + <` | Réduire la taille de police de 1 px | +| Augmenter la graisse | `⌘ + ⌥ + >` | `Ctrl + Alt + >` | Augmenter la graisse de police | +| Réduire la graisse | `⌘ + ⌥ + <` | `Ctrl + Alt + <` | Réduire la graisse de police | +| Augmenter l'interligne | `⌥ + ⇧ + >` | `Alt + ⇧ + >` | Augmenter l'interligne | +| Réduire l'interligne | `⌥ + ⇧ + <` | `Alt + ⇧ + <` | Réduire l'interligne | +| Augmenter l'approche | `⌥ + >` | `Alt + >` | Augmenter l'espacement des lettres | +| Réduire l'approche | `⌥ + <` | `Alt + <` | Réduire l'espacement des lettres | + +## Propriétés des objets + +| Action | macOS | Windows/Linux | Description | +| ------------------------ | ------------------ | ------------------ | ---------------------------------------- | +| Basculer l'état actif | `⌘ + ⇧ + H` | `Ctrl + ⇧ + H` | Basculer l'état actif de la sélection | +| Basculer le verrouillage | `⌘ + ⇧ + L` | `Ctrl + ⇧ + L` | Basculer le verrouillage de la sélection | +| Retirer le fill | `⌥ + /` | `Alt + /` | Supprimer le fill de la sélection | +| Retirer le stroke | `⇧ + /` | `⇧ + /` | Supprimer le stroke (largeur mise à 0) | +| Échanger fill et stroke | `⇧ + X` | `⇧ + X` | Échanger les paints de fill et de stroke | +| Opacité à 0 % | `0` (double press) | `0` (double press) | Régler l'opacité à 0 % | +| Opacité à 10 % | `1` | `1` | Régler l'opacité à 10 % | +| Opacité à 20 % | `2` | `2` | Régler l'opacité à 20 % | +| Opacité à 30 % | `3` | `3` | Régler l'opacité à 30 % | +| Opacité à 40 % | `4` | `4` | Régler l'opacité à 40 % | +| Opacité à 50 % | `5` | `5` | Régler l'opacité à 50 % | +| Opacité à 60 % | `6` | `6` | Régler l'opacité à 60 % | +| Opacité à 70 % | `7` | `7` | Régler l'opacité à 70 % | +| Opacité à 80 % | `8` | `8` | Régler l'opacité à 80 % | +| Opacité à 90 % | `9` | `9` | Régler l'opacité à 90 % | +| Opacité à 100 % | `0` (single press) | `0` (single press) | Régler l'opacité à 100 % | + +## Affichage et zoom + +| Action | macOS | Windows/Linux | Description | +| ------------------------ | ---------------------- | ---------------------------- | -------------------------------------------------- | +| Zoom ajuster au contenu | `⇧ + 1` or `⇧ + 9` | `⇧ + 1` or `⇧ + 9` | Ajuster le zoom à tout le contenu | +| Zoom sur la sélection | `⇧ + 2` | `⇧ + 2` | Zoomer sur la sélection courante | +| Zoom à 100 % | `⇧ + 0` | `⇧ + 0` | Afficher à 100 % | +| Zoom avant | `⌘ + =` or `⌘ + Plus` | `Ctrl + =` or `Ctrl + Plus` | Zoomer | +| Zoom arrière | `⌘ + -` or `⌘ + Minus` | `Ctrl + -` or `Ctrl + Minus` | Dézoomer | +| Basculer la règle | `⇧ + R` | `⇧ + R` | Afficher ou masquer la règle | +| Basculer la grille pixel | `⇧ + '` | `⇧ + '` | Afficher ou masquer la grille pixel | +| Basculer l'aperçu pixel | `⌘ + ⇧ + ⌥ + P` | `Ctrl + ⇧ + Alt + P` | Basculer l'aperçu pixel (Disabled ↔ dernier 1x/2x) | +| Basculer le mode contour | `⌘ + ⇧ + O` or `⌘ + Y` | `Ctrl + ⇧ + O` or `Ctrl + Y` | Basculer le mode contour (wireframe) | +| Aperçu | `⇧ + Space` | `⇧ + Space` | Prévisualiser la sélection courante | + +## Outils pinceau + +| Action | macOS | Windows/Linux | Description | +| ------------------- | ----- | ------------- | ------------------------------------------------------ | +| Augmenter la taille | `]` | `]` | Augmenter la taille du pinceau quand l'outil est actif | +| Réduire la taille | `[` | `[` | Réduire la taille du pinceau quand l'outil est actif | + +## Touches modificatrices (pendant l'appui) + +Ces touches modificatrices changent le comportement tant qu'elles restent enfoncées : + +| Modificateur | macOS | Windows/Linux | Effet | +| ------------ | ------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------ | +| Shift | `⇧` | `⇧` | Verrouiller l'axe dominant pendant le déplacement, conserver les proportions pendant l'échelle, quantifier la rotation à 15deg | +| Alt/Option | `⌥` | `Alt` | Déplacer avec clonage, transformer depuis le centre, activer l'outil de mesure, activer la symétrie de padding | +| Meta/Cmd | `⌘` | `Ctrl` | Configurer le ciblage du raycast surface sur les objets les plus profonds | +| Control | `Ctrl` | `Ctrl` | Désactiver le snapping de force pendant le déplacement ou la mise à l'échelle | + +## Planifié (réservé) + +Les raccourcis suivants sont définis mais pas encore implémentés : + +- `⇧ + H` - Symétrie horizontale +- `⇧ + V` - Symétrie verticale +- `⌥ + ⌘ + K` / `Alt + Ctrl + K` - Créer un composant +- `⌥ + ⌘ + B` / `Alt + Ctrl + B` - Éjecter un composant +- `Tab` - Plage de texte : augmenter l'indentation +- `⇧ + Tab` - Plage de texte : diminuer l'indentation diff --git a/docs/editor/shortcuts/translations/ja/index.md b/docs/editor/shortcuts/translations/ja/index.md new file mode 100644 index 0000000000..a6790f14ea --- /dev/null +++ b/docs/editor/shortcuts/translations/ja/index.md @@ -0,0 +1,197 @@ +--- +title: Grida エディタのショートカット +description: ツール、選択、編集、レイアウト、表示操作まで、Grida エディタで使えるキーボードショートカットの一覧です。 +keywords: + - grida + - editor + - shortcuts + - keyboard shortcuts + - hotkeys +format: md +doc_tasks: + - update +--- + +# Grida エディタのショートカット + +このガイドは、Grida Canvas Editor で使える公式キーボードショートカットのリファレンスです。ショートカットを使うと、マウスを使わずに操作できるため、作業をすばやく進めてエディタを効率よく操作できます。 + +道具の切り替え、変形、整列、キャンバス表示の管理まで、主要な操作をカテゴリ別に整理しています。各ショートカットには macOS と Windows/Linux の両方のキー表記を併記しています。 + +> **Note:** macOS では `Cmd` (⌘) を `meta`、Windows/Linux では `Ctrl` を `ctrl` として使います。 + +## Tools + +| 操作 | macOS | Windows/Linux | 説明 | +| --------------- | -------------- | -------------- | ------------------------------------------------------ | +| Cursor (Select) | `V` | `V` | 選択ツール | +| Hand tool | `H` or `Space` | `H` or `Space` | キャンバスをパンする（`Space` は押している間だけ有効） | +| Zoom tool | `Z` | `Z` | キャンバスをズームする（押している間だけ有効） | +| Scale tool | `K` | `K` | パラメトリックスケールツール | +| Lasso tool | `Q` | `Q` | ラッソツール（ベクターモード専用） | +| Rectangle tool | `R` | `R` | 長方形を挿入 | +| Ellipse tool | `O` | `O` | 楕円を挿入 | +| Polygon tool | `Y` | `Y` | 多角形を挿入 | +| Text tool | `T` | `T` | テキストを挿入 | +| Line tool | `L` | `L` | 線を描く | +| Arrow tool | `⇧ + L` | `⇧ + L` | 矢印を描く（矢印付きの線） | +| Container tool | `A` or `F` | `A` or `F` | コンテナを挿入 | +| Tray tool | `⇧ + F` | `⇧ + F` | トレイを挿入（整理用セクション） | +| Path tool | `P` | `P` | パスを描く（ペンツール） | +| Pencil tool | `⇧ + P` | `⇧ + P` | 鉛筆で描く | +| Brush tool | `B` | `B` | ブラシツール | +| Eraser tool | `E` | `E` | 消しゴムツール | +| Paint bucket | `G` | `G` | 塗りつぶしツール（ビットマップモード専用） | +| Variable width | `⇧ + W` | `⇧ + W` | 可変幅ツール（ベクターモード専用） | +| Eye dropper | `I` or `⌃ + C` | `I` | 画面上の色を取得 | + +## Selection & Navigation + +| 操作 | macOS | Windows/Linux | 説明 | +| ----------------------- | ------------------- | ------------------- | -------------------------------------- | +| Select all siblings | `⌘ + A` | `Ctrl + A` | 現在の選択と同じ階層の要素をすべて選択 | +| Select children | `Enter` | `Enter` | 現在の選択の子要素をすべて選択 | +| Select parent | `⇧ + Enter` or `\` | `⇧ + Enter` or `\` | 現在の選択の親要素を選択 | +| Select next sibling | `Tab` | `Tab` | 次の兄弟要素を選択 | +| Select previous sibling | `⇧ + Tab` | `⇧ + Tab` | 前の兄弟要素を選択 | +| Escape/Clear | `Escape` or `Clear` | `Escape` or `Clear` | 選択を解除し、モードを終了 | + +## Editing + +| 操作 | macOS | Windows/Linux | 説明 | +| ----------- | ----------------------- | --------------------------- | ------------------------------- | +| Undo | `⌘ + Z` | `Ctrl + Z` | 最後の操作を元に戻す | +| Redo | `⌘ + ⇧ + Z` | `Ctrl + ⇧ + Z` | 取り消した操作をやり直す | +| Cut | `⌘ + X` | `Ctrl + X` | 現在の選択を切り取る | +| Copy | `⌘ + C` | `Ctrl + C` | 現在の選択をコピーする | +| Copy as PNG | `⌘ + ⇧ + C` | `Ctrl + ⇧ + C` | 選択を PNG 画像としてコピーする | +| Paste | `⌘ + V` | `Ctrl + V` | クリップボードから貼り付ける | +| Duplicate | `⌘ + D` | `Ctrl + D` | 現在の選択を複製する | +| Delete | `Delete` or `Backspace` | `Delete` or `Backspace` | 現在の選択を削除する | +| Flatten | `⌘ + E` or `⌥ + ⇧ + F` | `Ctrl + E` or `Alt + ⇧ + F` | 選択をベクターパスへ変換する | + +## Transformation + +| 操作 | macOS | Windows/Linux | 説明 | +| -------------------------- | ------------------ | -------------------- | -------------------------------------------------- | +| Nudge | `Arrow Keys` | `Arrow Keys` | 選択を 1px 移動 | +| Nudge resize (right) | `Ctrl + ⌥ + →` | `Ctrl + Alt + →` | 幅を 1px 増やす | +| Nudge resize (right, 10px) | `Ctrl + ⌥ + ⇧ + →` | `Ctrl + Alt + ⇧ + →` | 幅を 10px 増やす | +| Nudge resize (left) | `Ctrl + ⌥ + ←` | `Ctrl + Alt + ←` | 幅を 1px 減らす | +| Nudge resize (left, 10px) | `Ctrl + ⌥ + ⇧ + ←` | `Ctrl + Alt + ⇧ + ←` | 幅を 10px 減らす | +| Nudge resize (up) | `Ctrl + ⌥ + ↑` | `Ctrl + Alt + ↑` | 高さを 1px 減らす | +| Nudge resize (up, 10px) | `Ctrl + ⌥ + ⇧ + ↑` | `Ctrl + Alt + ⇧ + ↑` | 高さを 10px 減らす | +| Nudge resize (down) | `Ctrl + ⌥ + ↓` | `Ctrl + Alt + ↓` | 高さを 1px 増やす | +| Nudge resize (down, 10px) | `Ctrl + ⌥ + ⇧ + ↓` | `Ctrl + Alt + ⇧ + ↓` | 高さを 10px 増やす | +| Move to front | `]` | `]` | 最前面へ移動（ブラシ使用中はブラシサイズを増やす） | +| Move to back | `[` | `[` | 最背面へ移動（ブラシ使用中はブラシサイズを減らす） | +| Move forward | `⌘ + ]` | `Ctrl + ]` | 1 レイヤー前へ移動 | +| Move backward | `⌘ + [` | `Ctrl + [` | 1 レイヤー後ろへ移動 | + +## Alignment & Distribution + +| 操作 | macOS | Windows/Linux | 説明 | +| ----------------------- | -------------- | ---------------- | ------------------ | +| Align left | `⌥ + A` | `Alt + A` | 左揃え | +| Align right | `⌥ + D` | `Alt + D` | 右揃え | +| Align top | `⌥ + W` | `Alt + W` | 上揃え | +| Align bottom | `⌥ + S` | `Alt + S` | 下揃え | +| Align horizontal center | `⌥ + H` | `Alt + H` | 水平方向中央揃え | +| Align vertical center | `⌥ + V` | `Alt + V` | 垂直方向中央揃え | +| Distribute horizontally | `⌥ + Ctrl + V` | `Alt + Ctrl + V` | 水平方向に均等配置 | +| Distribute vertically | `⌥ + Ctrl + H` | `Alt + Ctrl + H` | 垂直方向に均等配置 | + +## Grouping & Layout + +| 操作 | macOS | Windows/Linux | 説明 | +| -------------------- | ----------- | ---------------- | -------------------------------------- | +| Group | `⌘ + G` | `Ctrl + G` | 現在の選択をグループ化 | +| Ungroup | `⌘ + ⇧ + G` | `Ctrl + ⇧ + G` | 現在の選択をグループ解除 | +| Group with Container | `⌘ + ⌥ + G` | `Ctrl + Alt + G` | 現在の選択をコンテナと一緒にグループ化 | +| Auto-layout | `⇧ + A` | `⇧ + A` | 現在の選択に auto-layout を適用 | + +## Text Formatting + +| 操作 | macOS | Windows/Linux | 説明 | +| ----------------------- | ----------- | ---------------- | --------------------------- | +| Toggle bold | `⌘ + B` | `Ctrl + B` | 太字を切り替える | +| Toggle italic | `⌘ + I` | `Ctrl + I` | 斜体を切り替える | +| Toggle underline | `⌘ + U` | `Ctrl + U` | 下線を切り替える | +| Toggle line-through | `⌘ + ⇧ + X` | `Ctrl + ⇧ + X` | 取り消し線を切り替える | +| Text align left | `⌘ + ⌥ + L` | `Ctrl + Alt + L` | テキストを左揃え | +| Text align center | `⌘ + ⌥ + T` | `Ctrl + Alt + T` | テキストを中央揃え | +| Text align right | `⌘ + ⌥ + R` | `Ctrl + Alt + R` | テキストを右揃え | +| Text align justify | `⌘ + ⌥ + J` | `Ctrl + Alt + J` | テキストを両端揃え | +| Increase font size | `⌘ + ⇧ + >` | `Ctrl + ⇧ + >` | フォントサイズを 1px 増やす | +| Decrease font size | `⌘ + ⇧ + <` | `Ctrl + ⇧ + <` | フォントサイズを 1px 減らす | +| Increase font weight | `⌘ + ⌥ + >` | `Ctrl + Alt + >` | フォントの太さを増やす | +| Decrease font weight | `⌘ + ⌥ + <` | `Ctrl + Alt + <` | フォントの太さを減らす | +| Increase line height | `⌥ + ⇧ + >` | `Alt + ⇧ + >` | 行間を増やす | +| Decrease line height | `⌥ + ⇧ + <` | `Alt + ⇧ + <` | 行間を減らす | +| Increase letter spacing | `⌥ + >` | `Alt + >` | 文字間隔を増やす | +| Decrease letter spacing | `⌥ + <` | `Alt + <` | 文字間隔を減らす | + +## Object Properties + +| 操作 | macOS | Windows/Linux | 説明 | +| -------------------- | ------------ | -------------- | --------------------------------------- | +| Toggle active | `⌘ + ⇧ + H` | `Ctrl + ⇧ + H` | 選択の active 状態を切り替える | +| Toggle locked | `⌘ + ⇧ + L` | `Ctrl + ⇧ + L` | 選択の locked 状態を切り替える | +| Remove fill | `⌥ + /` | `Alt + /` | 選択から fill を削除 | +| Remove stroke | `⇧ + /` | `⇧ + /` | 選択から stroke を削除（幅を 0 に設定） | +| Swap fill and stroke | `⇧ + X` | `⇧ + X` | fill と stroke を入れ替える | +| Set opacity to 0% | `0` (double) | `0` (double) | 不透明度を 0% にする | +| Set opacity to 10% | `1` | `1` | 不透明度を 10% にする | +| Set opacity to 20% | `2` | `2` | 不透明度を 20% にする | +| Set opacity to 30% | `3` | `3` | 不透明度を 30% にする | +| Set opacity to 40% | `4` | `4` | 不透明度を 40% にする | +| Set opacity to 50% | `5` | `5` | 不透明度を 50% にする | +| Set opacity to 60% | `6` | `6` | 不透明度を 60% にする | +| Set opacity to 70% | `7` | `7` | 不透明度を 70% にする | +| Set opacity to 80% | `8` | `8` | 不透明度を 80% にする | +| Set opacity to 90% | `9` | `9` | 不透明度を 90% にする | +| Set opacity to 100% | `0` (single) | `0` (single) | 不透明度を 100% にする | + +## View & Zoom + +| 操作 | macOS | Windows/Linux | 説明 | +| -------------------- | ---------------------- | ---------------------------- | -------------------------------- | +| Zoom to fit | `⇧ + 1` or `⇧ + 9` | `⇧ + 1` or `⇧ + 9` | 全体が収まるようにズーム | +| Zoom to selection | `⇧ + 2` | `⇧ + 2` | 現在の選択にズーム | +| Zoom to 100% | `⇧ + 0` | `⇧ + 0` | 100% 表示 | +| Zoom in | `⌘ + =` or `⌘ + Plus` | `Ctrl + =` or `Ctrl + Plus` | ズームイン | +| Zoom out | `⌘ + -` or `⌘ + Minus` | `Ctrl + -` or `Ctrl + Minus` | ズームアウト | +| Toggle ruler | `⇧ + R` | `⇧ + R` | ルーラー表示を切り替える | +| Toggle pixel grid | `⇧ + '` | `⇧ + '` | ピクセルグリッド表示を切り替える | +| Toggle pixel preview | `⌘ + ⇧ + ⌥ + P` | `Ctrl + ⇧ + Alt + P` | ピクセルプレビューを切り替える | +| Toggle outline mode | `⌘ + ⇧ + O` or `⌘ + Y` | `Ctrl + ⇧ + O` or `Ctrl + Y` | アウトラインモードを切り替える | +| Preview | `⇧ + Space` | `⇧ + Space` | 現在の選択をプレビュー | + +## Brush Tools + +| 操作 | macOS | Windows/Linux | 説明 | +| ------------------- | ----- | ------------- | ---------------------------------- | +| Increase brush size | `]` | `]` | ブラシ使用中にブラシサイズを増やす | +| Decrease brush size | `[` | `[` | ブラシ使用中にブラシサイズを減らす | + +## Modifier Keys (While Pressed) + +これらの修飾キーは、押している間だけ動作を変更します。 + +| 修飾キー | macOS | Windows/Linux | 効果 | +| ---------- | ------ | ------------- | -------------------------------------------------------------------- | +| Shift | `⇧` | `⇧` | 移動時の主軸固定、拡縮時の比率維持、回転を 15° 単位に量子化 | +| Alt/Option | `⌥` | `Alt` | 複製しながらドラッグ、中心基準変形、計測ツール有効化、padding ミラー | +| Meta/Cmd | `⌘` | `Ctrl` | 最も深いオブジェクトを対象に surface raycast targeting を構成 | +| Control | `Ctrl` | `Ctrl` | 移動や拡縮時のスナップを強制的に無効化 | + +## Planned (Reserved) + +次のショートカットは定義されていますが、まだ実装されていません。 + +- `⇧ + H` - 左右反転 +- `⇧ + V` - 上下反転 +- `⌥ + ⌘ + K` / `Alt + Ctrl + K` - コンポーネント作成 +- `⌥ + ⌘ + B` / `Alt + Ctrl + B` - コンポーネント解除 +- `Tab` - テキスト範囲: インデントを増やす +- `⇧ + Tab` - テキスト範囲: インデントを減らす diff --git a/docs/editor/shortcuts/translations/ko/index.md b/docs/editor/shortcuts/translations/ko/index.md new file mode 100644 index 0000000000..3b5b26ce2a --- /dev/null +++ b/docs/editor/shortcuts/translations/ko/index.md @@ -0,0 +1,197 @@ +--- +title: Grida 에디터 단축키 +description: 도구, 선택, 편집, 레이아웃, 보기 제어 전반에서 사용할 수 있는 Grida 에디터 키보드 단축키 안내입니다. +keywords: + - grida + - editor + - shortcuts + - keyboard shortcuts + - hotkeys +format: md +doc_tasks: + - update +--- + +# Grida 에디터 단축키 + +이 문서는 Grida Canvas Editor에서 사용할 수 있는 공식 키보드 단축키 안내서입니다. 단축키를 사용하면 마우스 없이도 주요 동작을 빠르게 수행할 수 있어 작업 속도를 높이고 에디터를 더 효율적으로 탐색할 수 있습니다. + +도구 선택, 변형, 정렬, 캔버스 보기 관리까지 자주 쓰는 동작을 카테고리별로 정리했습니다. 각 단축키는 macOS와 Windows/Linux 기준을 함께 표기해 플랫폼에 맞게 바로 참고할 수 있습니다. + +> **참고:** macOS에서는 `Cmd`(⌘)를 `meta` 키로, Windows/Linux에서는 `Ctrl`을 `ctrl` 키로 사용합니다. + +## 도구 + +| 동작 | macOS | Windows/Linux | 설명 | +| -------------- | ---------------- | ---------------- | ------------------------------------------------- | +| 커서(선택) | `V` | `V` | 선택 도구 | +| 손 도구 | `H` 또는 `Space` | `H` 또는 `Space` | 캔버스 이동 (`Space`는 누르고 있는 동안만 활성화) | +| 줌 도구 | `Z` | `Z` | 캔버스 확대/축소 (누르고 있는 동안 활성화) | +| 스케일 도구 | `K` | `K` | 파라메트릭 스케일 도구 | +| 올가미 도구 | `Q` | `Q` | 올가미 도구 (벡터 모드 전용) | +| 사각형 도구 | `R` | `R` | 사각형 삽입 | +| 타원 도구 | `O` | `O` | 타원 삽입 | +| 다각형 도구 | `Y` | `Y` | 다각형 삽입 | +| 텍스트 도구 | `T` | `T` | 텍스트 삽입 | +| 선 도구 | `L` | `L` | 선 그리기 | +| 화살표 도구 | `⇧ + L` | `⇧ + L` | 화살표 그리기 (화살촉이 있는 선) | +| 컨테이너 도구 | `A` 또는 `F` | `A` 또는 `F` | 컨테이너 삽입 | +| 트레이 도구 | `⇧ + F` | `⇧ + F` | 트레이 삽입 (정리용 섹션) | +| 패스 도구 | `P` | `P` | 패스 그리기 (펜 도구) | +| 연필 도구 | `⇧ + P` | `⇧ + P` | 연필로 그리기 | +| 브러시 도구 | `B` | `B` | 브러시 도구 | +| 지우개 도구 | `E` | `E` | 지우개 도구 | +| 페인트 버킷 | `G` | `G` | 채우기 도구 (비트맵 모드 전용) | +| 가변 두께 도구 | `⇧ + W` | `⇧ + W` | 가변 두께 도구 (벡터 모드 전용) | +| 스포이트 | `I` 또는 `⌃ + C` | `I` | 화면에서 색상 추출 | + +## 선택 및 탐색 + +| 동작 | macOS | Windows/Linux | 설명 | +| ------------------- | --------------------- | --------------------- | --------------------------------------------- | +| 같은 레벨 모두 선택 | `⌘ + A` | `Ctrl + A` | 현재 선택 항목과 같은 레벨의 요소를 모두 선택 | +| 자식 선택 | `Enter` | `Enter` | 현재 선택 항목의 자식을 모두 선택 | +| 부모 선택 | `⇧ + Enter` 또는 `\` | `⇧ + Enter` 또는 `\` | 현재 선택 항목의 부모 선택 | +| 다음 형제 선택 | `Tab` | `Tab` | 다음 형제 요소 선택 | +| 이전 형제 선택 | `⇧ + Tab` | `⇧ + Tab` | 이전 형제 요소 선택 | +| 선택 해제 / 종료 | `Escape` 또는 `Clear` | `Escape` 또는 `Clear` | 선택을 해제하고 현재 모드 종료 | + +## 편집 + +| 동작 | macOS | Windows/Linux | 설명 | +| ---------- | ------------------------- | ----------------------------- | -------------------------------- | +| 실행 취소 | `⌘ + Z` | `Ctrl + Z` | 마지막 작업 취소 | +| 다시 실행 | `⌘ + ⇧ + Z` | `Ctrl + ⇧ + Z` | 마지막으로 취소한 작업 다시 실행 | +| 잘라내기 | `⌘ + X` | `Ctrl + X` | 현재 선택 항목 잘라내기 | +| 복사 | `⌘ + C` | `Ctrl + C` | 현재 선택 항목 복사 | +| PNG로 복사 | `⌘ + ⇧ + C` | `Ctrl + ⇧ + C` | 선택 항목을 PNG 이미지로 복사 | +| 붙여넣기 | `⌘ + V` | `Ctrl + V` | 클립보드에서 붙여넣기 | +| 복제 | `⌘ + D` | `Ctrl + D` | 현재 선택 항목 복제 | +| 삭제 | `Delete` 또는 `Backspace` | `Delete` 또는 `Backspace` | 현재 선택 항목 삭제 | +| 평탄화 | `⌘ + E` 또는 `⌥ + ⇧ + F` | `Ctrl + E` 또는 `Alt + ⇧ + F` | 선택 항목을 벡터 패스로 변환 | + +## 변형 + +| 동작 | macOS | Windows/Linux | 설명 | +| ---------------------------- | ------------------ | -------------------- | ----------------------------------------------------------------- | +| 미세 이동 | `Arrow Keys` | `Arrow Keys` | 선택 항목을 1px 이동 | +| 크기 미세 조정(오른쪽) | `Ctrl + ⌥ + →` | `Ctrl + Alt + →` | 너비를 1px 늘림 | +| 크기 미세 조정(오른쪽, 10px) | `Ctrl + ⌥ + ⇧ + →` | `Ctrl + Alt + ⇧ + →` | 너비를 10px 늘림 | +| 크기 미세 조정(왼쪽) | `Ctrl + ⌥ + ←` | `Ctrl + Alt + ←` | 너비를 1px 줄임 | +| 크기 미세 조정(왼쪽, 10px) | `Ctrl + ⌥ + ⇧ + ←` | `Ctrl + Alt + ⇧ + ←` | 너비를 10px 줄임 | +| 크기 미세 조정(위) | `Ctrl + ⌥ + ↑` | `Ctrl + Alt + ↑` | 높이를 1px 줄임 | +| 크기 미세 조정(위, 10px) | `Ctrl + ⌥ + ⇧ + ↑` | `Ctrl + Alt + ⇧ + ↑` | 높이를 10px 줄임 | +| 크기 미세 조정(아래) | `Ctrl + ⌥ + ↓` | `Ctrl + Alt + ↓` | 높이를 1px 늘림 | +| 크기 미세 조정(아래, 10px) | `Ctrl + ⌥ + ⇧ + ↓` | `Ctrl + Alt + ⇧ + ↓` | 높이를 10px 늘림 | +| 맨 앞으로 이동 | `]` | `]` | 선택 항목을 맨 앞으로 이동 (브러시 도구 사용 시 브러시 크기 증가) | +| 맨 뒤로 이동 | `[` | `[` | 선택 항목을 맨 뒤로 이동 (브러시 도구 사용 시 브러시 크기 감소) | +| 한 단계 앞으로 | `⌘ + ]` | `Ctrl + ]` | 선택 항목을 한 레이어 앞으로 이동 | +| 한 단계 뒤로 | `⌘ + [` | `Ctrl + [` | 선택 항목을 한 레이어 뒤로 이동 | + +## 정렬 및 분배 + +| 동작 | macOS | Windows/Linux | 설명 | +| -------------- | -------------- | ---------------- | ---------------------------- | +| 왼쪽 정렬 | `⌥ + A` | `Alt + A` | 선택 항목을 왼쪽으로 정렬 | +| 오른쪽 정렬 | `⌥ + D` | `Alt + D` | 선택 항목을 오른쪽으로 정렬 | +| 위쪽 정렬 | `⌥ + W` | `Alt + W` | 선택 항목을 위쪽으로 정렬 | +| 아래쪽 정렬 | `⌥ + S` | `Alt + S` | 선택 항목을 아래쪽으로 정렬 | +| 가로 중앙 정렬 | `⌥ + H` | `Alt + H` | 선택 항목을 가로 중앙에 정렬 | +| 세로 중앙 정렬 | `⌥ + V` | `Alt + V` | 선택 항목을 세로 중앙에 정렬 | +| 가로 간격 분배 | `⌥ + Ctrl + V` | `Alt + Ctrl + V` | 선택 항목을 가로로 균등 분배 | +| 세로 간격 분배 | `⌥ + Ctrl + H` | `Alt + Ctrl + H` | 선택 항목을 세로로 균등 분배 | + +## 그룹 및 레이아웃 + +| 동작 | macOS | Windows/Linux | 설명 | +| ----------------- | ----------- | ---------------- | --------------------------------------- | +| 그룹 | `⌘ + G` | `Ctrl + G` | 현재 선택 항목을 그룹화 | +| 그룹 해제 | `⌘ + ⇧ + G` | `Ctrl + ⇧ + G` | 현재 선택 항목의 그룹 해제 | +| 컨테이너로 그룹화 | `⌘ + ⌥ + G` | `Ctrl + Alt + G` | 현재 선택 항목을 컨테이너와 함께 그룹화 | +| 오토 레이아웃 | `⇧ + A` | `⇧ + A` | 현재 선택 항목에 오토 레이아웃 적용 | + +## 텍스트 서식 + +| 동작 | macOS | Windows/Linux | 설명 | +| ------------------ | ----------- | ---------------- | ----------------------- | +| 굵게 토글 | `⌘ + B` | `Ctrl + B` | 굵게 스타일 토글 | +| 기울임꼴 토글 | `⌘ + I` | `Ctrl + I` | 기울임꼴 스타일 토글 | +| 밑줄 토글 | `⌘ + U` | `Ctrl + U` | 밑줄 스타일 토글 | +| 취소선 토글 | `⌘ + ⇧ + X` | `Ctrl + ⇧ + X` | 취소선 스타일 토글 | +| 텍스트 왼쪽 정렬 | `⌘ + ⌥ + L` | `Ctrl + Alt + L` | 텍스트를 왼쪽 정렬 | +| 텍스트 가운데 정렬 | `⌘ + ⌥ + T` | `Ctrl + Alt + T` | 텍스트를 가로 중앙 정렬 | +| 텍스트 오른쪽 정렬 | `⌘ + ⌥ + R` | `Ctrl + Alt + R` | 텍스트를 오른쪽 정렬 | +| 텍스트 양쪽 정렬 | `⌘ + ⌥ + J` | `Ctrl + Alt + J` | 텍스트를 양쪽 정렬 | +| 글자 크기 증가 | `⌘ + ⇧ + >` | `Ctrl + ⇧ + >` | 글자 크기를 1px 증가 | +| 글자 크기 감소 | `⌘ + ⇧ + <` | `Ctrl + ⇧ + <` | 글자 크기를 1px 감소 | +| 글자 두께 증가 | `⌘ + ⌥ + >` | `Ctrl + Alt + >` | 글자 두께 증가 | +| 글자 두께 감소 | `⌘ + ⌥ + <` | `Ctrl + Alt + <` | 글자 두께 감소 | +| 줄 높이 증가 | `⌥ + ⇧ + >` | `Alt + ⇧ + >` | 줄 높이 증가 | +| 줄 높이 감소 | `⌥ + ⇧ + <` | `Alt + ⇧ + <` | 줄 높이 감소 | +| 자간 증가 | `⌥ + >` | `Alt + >` | 자간 증가 | +| 자간 감소 | `⌥ + <` | `Alt + <` | 자간 감소 | + +## 객체 속성 + +| 동작 | macOS | Windows/Linux | 설명 | +| -------------------- | ---------------- | ---------------- | --------------------------------------------- | +| 활성 상태 토글 | `⌘ + ⇧ + H` | `Ctrl + ⇧ + H` | 선택 항목의 활성 상태 토글 | +| 잠금 상태 토글 | `⌘ + ⇧ + L` | `Ctrl + ⇧ + L` | 선택 항목의 잠금 상태 토글 | +| 채우기 제거 | `⌥ + /` | `Alt + /` | 선택 항목의 채우기 제거 | +| 스트로크 제거 | `⇧ + /` | `⇧ + /` | 선택 항목의 스트로크 제거 (너비를 0으로 설정) | +| 채우기/스트로크 교체 | `⇧ + X` | `⇧ + X` | 채우기와 스트로크를 서로 바꿈 | +| 불투명도 0% 설정 | `0` (두 번 누름) | `0` (두 번 누름) | 불투명도를 0%로 설정 | +| 불투명도 10% 설정 | `1` | `1` | 불투명도를 10%로 설정 | +| 불투명도 20% 설정 | `2` | `2` | 불투명도를 20%로 설정 | +| 불투명도 30% 설정 | `3` | `3` | 불투명도를 30%로 설정 | +| 불투명도 40% 설정 | `4` | `4` | 불투명도를 40%로 설정 | +| 불투명도 50% 설정 | `5` | `5` | 불투명도를 50%로 설정 | +| 불투명도 60% 설정 | `6` | `6` | 불투명도를 60%로 설정 | +| 불투명도 70% 설정 | `7` | `7` | 불투명도를 70%로 설정 | +| 불투명도 80% 설정 | `8` | `8` | 불투명도를 80%로 설정 | +| 불투명도 90% 설정 | `9` | `9` | 불투명도를 90%로 설정 | +| 불투명도 100% 설정 | `0` (한 번 누름) | `0` (한 번 누름) | 불투명도를 100%로 설정 | + +## 보기 및 줌 + +| 동작 | macOS | Windows/Linux | 설명 | +| ------------------ | ------------------------ | ------------------------------ | --------------------------------------------- | +| 화면에 맞추기 | `⇧ + 1` 또는 `⇧ + 9` | `⇧ + 1` 또는 `⇧ + 9` | 전체 콘텐츠가 화면에 맞도록 확대/축소 | +| 선택 항목에 맞추기 | `⇧ + 2` | `⇧ + 2` | 현재 선택 항목에 맞춰 확대/축소 | +| 100% 보기 | `⇧ + 0` | `⇧ + 0` | 100% 배율로 보기 | +| 확대 | `⌘ + =` 또는 `⌘ + Plus` | `Ctrl + =` 또는 `Ctrl + Plus` | 확대 | +| 축소 | `⌘ + -` 또는 `⌘ + Minus` | `Ctrl + -` 또는 `Ctrl + Minus` | 축소 | +| 눈금자 토글 | `⇧ + R` | `⇧ + R` | 눈금자 표시 토글 | +| 픽셀 그리드 토글 | `⇧ + '` | `⇧ + '` | 픽셀 그리드 표시 토글 | +| 픽셀 프리뷰 토글 | `⌘ + ⇧ + ⌥ + P` | `Ctrl + ⇧ + Alt + P` | 픽셀 프리뷰 토글 (비활성 ↔ 마지막 사용 1x/2x) | +| 아웃라인 모드 토글 | `⌘ + ⇧ + O` 또는 `⌘ + Y` | `Ctrl + ⇧ + O` 또는 `Ctrl + Y` | 아웃라인 모드(와이어프레임) 토글 | +| 미리보기 | `⇧ + Space` | `⇧ + Space` | 현재 선택 항목 미리보기 | + +## 브러시 도구 + +| 동작 | macOS | Windows/Linux | 설명 | +| ---------------- | ----- | ------------- | ------------------------------------ | +| 브러시 크기 증가 | `]` | `]` | 브러시 도구 사용 중 브러시 크기 증가 | +| 브러시 크기 감소 | `[` | `[` | 브러시 도구 사용 중 브러시 크기 감소 | + +## 수정 키(누르고 있는 동안) + +이 수정 키들은 누르고 있는 동안 동작 방식을 바꿉니다. + +| 수정 키 | macOS | Windows/Linux | 효과 | +| ---------- | ------ | ------------- | ------------------------------------------------------------------- | +| Shift | `⇧` | `⇧` | 이동 시 주 축 고정, 크기 조절 시 비율 유지, 회전 각도 15° 단위 고정 | +| Alt/Option | `⌥` | `Alt` | 드래그 복제, 중심 기준 변형, 측정 도구 활성화, 패딩 미러링 활성화 | +| Meta/Cmd | `⌘` | `Ctrl` | 가장 깊은 객체를 대상으로 표면 레이캐스트 타게팅 구성 | +| Control | `Ctrl` | `Ctrl` | 이동/크기 조절 시 스냅 강제 비활성화 | + +## 예정됨(예약됨) + +다음 단축키는 정의되어 있지만 아직 구현되지 않았습니다. + +- `⇧ + H` - 좌우 반전 +- `⇧ + V` - 상하 반전 +- `⌥ + ⌘ + K` / `Alt + Ctrl + K` - 컴포넌트 생성 +- `⌥ + ⌘ + B` / `Alt + Ctrl + B` - 컴포넌트 해제 +- `Tab` - 텍스트 범위 들여쓰기 증가 +- `⇧ + Tab` - 텍스트 범위 들여쓰기 감소 diff --git a/docs/editor/shortcuts/translations/meta.json b/docs/editor/shortcuts/translations/meta.json new file mode 100644 index 0000000000..8aad8fab3b --- /dev/null +++ b/docs/editor/shortcuts/translations/meta.json @@ -0,0 +1,3 @@ +{ + "translations": ["ko", "ja", "fr"] +} diff --git a/docs/forms/respondent-email-notifications.md b/docs/forms/respondent-email-notifications.md index dc0b4999db..9d1b41228b 100644 --- a/docs/forms/respondent-email-notifications.md +++ b/docs/forms/respondent-email-notifications.md @@ -1,6 +1,15 @@ --- title: Respondent email notifications description: Learn how to send a custom confirmation email to respondents after a form submission in Grida Forms (CIAM verified email required). +keywords: + - grida + - forms + - email notifications + - respondent email + - ciam +format: md +doc_tasks: + - update --- ### Respondent email notifications diff --git a/docs/forms/translations/fr/respondent-email-notifications.md b/docs/forms/translations/fr/respondent-email-notifications.md new file mode 100644 index 0000000000..8f2f9f134c --- /dev/null +++ b/docs/forms/translations/fr/respondent-email-notifications.md @@ -0,0 +1,94 @@ +--- +title: Notifications email aux répondants +description: Apprenez à envoyer un email de confirmation personnalisé aux répondants après une soumission de formulaire dans Grida Forms (email vérifié CIAM requis). +keywords: + - grida + - forms + - email notifications + - respondent email + - ciam +format: md +doc_tasks: + - update +--- + +### Notifications email aux répondants + +Les notifications email aux répondants vous permettent d'envoyer un **email de confirmation personnalisé** à la personne qui a soumis votre formulaire. + +C'est utile pour des formulaires d'inscription ou d'enregistrement lorsque vous voulez : + +- confirmer la soumission +- partager les prochaines étapes +- inclure une référence comme un identifiant de soumission + +### Avant de commencer (CIAM / email vérifié) + +Grida envoie des emails aux répondants **uniquement lorsque CIAM est utilisé** et que le répondant a une **adresse email vérifiée**. + +Concrètement, cela signifie : + +- votre formulaire doit inclure un champ `challenge_email` (vérification email CIAM) +- l'email est envoyé à l'adresse email vérifiée associée à la soumission (et non à un champ libre quelconque) + +### Comment activer les notifications email aux répondants + +1. Ouvrez votre **Form** dans l'éditeur Grida. +2. Dans la barre latérale gauche, cliquez sur [**Connect**](https://grida.co/_/connect). +3. Cliquez sur [**Channels**](https://grida.co/_/connect/channels). +4. Dans **Email Notifications**, trouvez **Respondent email notifications**. +5. Activez **Enable**. +6. Cliquez sur **Save**. + +### Comment personnaliser l'email + +1. Ouvrez [**Connect -> Channels**](https://grida.co/_/connect/channels) -> **Email Notifications** (même écran que ci-dessus). +2. Configurez les champs de l'email : + - **Reply-To** (optionnel) : adresse où les réponses doivent être envoyées (par ex. `support@yourdomain.com`) + - **Subject** : modèle d'objet de l'email + - **From name** (optionnel) : nom d'affichage de l'expéditeur (par ex. `Acme Support`) + - **Body (HTML)** : modèle du corps de l'email en HTML +3. Utilisez l'aperçu intégré pour vérifier l'objet et le contenu. +4. Cliquez sur **Save**. + +### Ce qui est envoyé (vue d'ensemble) + +- **Destinataire** : l'**email vérifié** du répondant (CIAM) +- **Email expéditeur** : une adresse no-reply fixe (le nom d'affichage peut être personnalisé avec **From name**) +- **Moment d'envoi** : après une soumission de formulaire réussie + - si CIAM n'est pas présent ou si l'email n'est pas vérifié, l'envoi est ignoré + +### Templates (variables Handlebars) + +L'objet et le corps prennent en charge les variables de template. + +#### Variables disponibles + +- `{{form_title}}` +- `{{response.idx}}` (index formaté de la soumission) +- `{{fields.}}` (champs soumis par nom de champ) + +#### Exemples + +Objet : + +```txt +Merci pour votre inscription à {{form_title}} +``` + +Corps (HTML) : + +```html +

Merci, {{fields.first_name}} !

+

Nous avons bien reçu votre soumission pour {{form_title}}.

+

Votre numéro d'inscription : {{response.idx}}

+``` + +### Dépannage + +Si les emails ne sont pas envoyés : + +- **CIAM non activé** : vérifiez que votre formulaire inclut un champ `challenge_email` +- **Email non vérifié** : le répondant doit terminer la vérification ; les emails non vérifiés sont ignorés +- **Corps du message manquant** : l'envoi est ignoré si le corps est vide +- **Fiabilité de la livraison** : l'envoi est actuellement best-effort inline. Des retries ou une file d'attente pourront être ajoutés plus tard. diff --git a/docs/forms/translations/ja/respondent-email-notifications.md b/docs/forms/translations/ja/respondent-email-notifications.md new file mode 100644 index 0000000000..0a8d518e2f --- /dev/null +++ b/docs/forms/translations/ja/respondent-email-notifications.md @@ -0,0 +1,94 @@ +--- +title: 回答者向けメール通知 +description: Grida Forms でフォーム送信後に回答者へカスタム確認メールを送る方法を説明します。CIAM による検証済みメールが必要です。 +keywords: + - grida + - forms + - email notifications + - respondent email + - ciam +format: md +doc_tasks: + - update +--- + +### 回答者向けメール通知 + +回答者向けメール通知を使うと、フォームを送信した本人に **カスタム確認メール** を送れます。 + +この機能は、次のようなサインアップや登録フォームで便利です。 + +- 送信完了を確認する +- 次のステップを案内する +- 送信 ID のような参照情報を含める + +### 事前に確認すること（CIAM / 検証済みメール） + +Grida が回答者向けメールを送信するのは、**CIAM を使用している場合のみ** で、かつ回答者のメールアドレスが **検証済み** の場合だけです。 + +実際には、次の意味になります。 + +- フォームに `challenge_email` フィールドが含まれている必要があります +- メールは任意の入力フィールドではなく、送信に紐づいた **検証済みメールアドレス** に送られます + +### 回答者向けメール通知を有効にする方法 + +1. Grida エディタで **Form** を開きます。 +2. 左サイドバーで [**Connect**](https://grida.co/_/connect) をクリックします。 +3. [**Channels**](https://grida.co/_/connect/channels) をクリックします。 +4. **Email Notifications** の中にある **Respondent email notifications** を見つけます。 +5. **Enable** をオンにします。 +6. **Save** をクリックします。 + +### メール内容をカスタマイズする方法 + +1. 同じく [**Connect → Channels**](https://grida.co/_/connect/channels) → **Email Notifications** に移動します。 +2. 次の項目を設定します。 + - **Reply-To**（任意）: 返信先メールアドレス。例: `support@yourdomain.com` + - **Subject**: メール件名テンプレート + - **From name**（任意）: 送信者表示名。例: `Acme Support` + - **Body (HTML)**: メール本文テンプレート（HTML） +3. 内蔵プレビューで件名と本文を確認します。 +4. **Save** をクリックします。 + +### 実際に送られる内容（概要） + +- **宛先**: 回答者の **検証済みメールアドレス**（CIAM） +- **送信元メール**: 固定の no-reply アドレス。表示名は **From name** で変更できます +- **送信タイミング**: フォーム送信が成功した後 + - CIAM がない、またはメールが未検証の場合は送信をスキップします + +### テンプレート変数（Handlebars） + +件名と本文の両方でテンプレート変数を利用できます。 + +#### 利用できる変数 + +- `{{form_title}}` +- `{{response.idx}}`（整形済みの送信番号） +- `{{fields.}}`（フィールド名ごとの送信値） + +#### 例 + +件名: + +```txt +{{form_title}} への登録ありがとうございます +``` + +本文（HTML）: + +```html +

{{fields.first_name}}さん、ありがとうございます！

+

{{form_title}} への送信を受け付けました。

+

登録番号: {{response.idx}}

+``` + +### トラブルシューティング + +メールが送信されない場合は、次を確認してください。 + +- **CIAM が有効でない**: フォームに `challenge_email` フィールドが含まれていることを確認してください +- **メールが未検証**: 回答者がメール検証を完了している必要があります。未検証メールはスキップされます +- **本文テンプレートが未設定**: 本文が空の場合、送信はスキップされます +- **配信の安定性**: 現在の送信はインラインの best-effort 方式です。将来的にリトライやキューイングが追加される可能性があります diff --git a/docs/forms/translations/ko/respondent-email-notifications.md b/docs/forms/translations/ko/respondent-email-notifications.md new file mode 100644 index 0000000000..fa0cc1f24d --- /dev/null +++ b/docs/forms/translations/ko/respondent-email-notifications.md @@ -0,0 +1,94 @@ +--- +title: 응답자 이메일 알림 +description: Grida Forms에서 폼 제출 후 응답자에게 맞춤 확인 이메일을 보내는 방법을 설명합니다. CIAM 검증 이메일이 필요합니다. +keywords: + - grida + - forms + - 이메일 알림 + - 응답자 이메일 + - ciam +format: md +doc_tasks: + - update +--- + +### 응답자 이메일 알림 + +응답자 이메일 알림을 사용하면 폼을 제출한 사람에게 **맞춤 확인 이메일**을 보낼 수 있습니다. + +이 기능은 다음과 같은 회원가입 또는 등록 폼에 유용합니다. + +- 제출이 정상적으로 완료되었음을 확인하기 +- 다음 단계를 안내하기 +- 제출 ID 같은 참조 정보를 전달하기 + +### 시작하기 전에 확인할 점 (CIAM / 검증된 이메일) + +Grida는 **CIAM을 사용하는 경우에만**, 그리고 응답자의 이메일이 **검증된 경우에만** 응답자 이메일을 발송합니다. + +실제로는 다음을 의미합니다. + +- 폼에 `challenge_email` 필드가 있어야 합니다 +- 이메일은 임의의 입력 필드가 아니라 제출에 연결된 **검증된 이메일 주소**로 발송됩니다 + +### 응답자 이메일 알림 활성화 방법 + +1. Grida 에디터에서 **Form**을 엽니다. +2. 왼쪽 사이드바에서 [**Connect**](https://grida.co/_/connect)를 클릭합니다. +3. [**Channels**](https://grida.co/_/connect/channels)를 클릭합니다. +4. **Email Notifications** 아래에서 **Respondent email notifications**를 찾습니다. +5. **Enable** 토글을 켭니다. +6. **Save**를 클릭합니다. + +### 이메일 내용 커스터마이즈 방법 + +1. 위와 동일하게 [**Connect → Channels**](https://grida.co/_/connect/channels) → **Email Notifications**로 이동합니다. +2. 다음 항목을 설정합니다. + - **Reply-To** (선택): 회신을 받을 주소. 예: `support@yourdomain.com` + - **Subject**: 이메일 제목 템플릿 + - **From name** (선택): 발신자 표시 이름. 예: `Acme Support` + - **Body (HTML)**: 이메일 본문 템플릿(HTML) +3. 내장 미리보기로 제목과 본문을 확인합니다. +4. **Save**를 클릭합니다. + +### 어떤 이메일이 발송되나요? (요약) + +- **수신자**: 응답자의 **검증된 이메일 주소** (CIAM) +- **발신 이메일**: 고정된 no-reply 주소. 표시 이름은 **From name**으로 바꿀 수 있습니다 +- **발송 시점**: 폼 제출이 성공한 뒤 + - CIAM이 없거나 이메일이 검증되지 않았다면 발송은 건너뜁니다 + +### 템플릿 변수 (Handlebars) + +제목과 본문은 모두 템플릿 변수를 지원합니다. + +#### 사용 가능한 변수 + +- `{{form_title}}` +- `{{response.idx}}` (형식화된 제출 순번) +- `{{fields.}}` (필드 이름 기준 제출 값) + +#### 예시 + +제목: + +```txt +{{form_title}} 등록이 완료되었습니다 +``` + +본문 (HTML): + +```html +

{{fields.first_name}}님, 감사합니다!

+

{{form_title}} 제출이 정상적으로 접수되었습니다.

+

등록 번호: {{response.idx}}

+``` + +### 문제 해결 + +이메일이 발송되지 않는다면 다음을 확인하세요. + +- **CIAM 미사용**: 폼에 `challenge_email` 필드가 포함되어 있는지 확인하세요 +- **이메일 미검증**: 응답자가 이메일 검증을 완료해야 합니다. 검증되지 않은 이메일은 건너뜁니다 +- **본문 템플릿 누락**: 본문이 비어 있으면 발송이 건너뜁니다 +- **전송 안정성**: 현재 발송은 인라인 best-effort 방식입니다. 추후 재시도나 큐 처리 방식이 추가될 수 있습니다 diff --git a/docs/forms/translations/meta.json b/docs/forms/translations/meta.json new file mode 100644 index 0000000000..8aad8fab3b --- /dev/null +++ b/docs/forms/translations/meta.json @@ -0,0 +1,3 @@ +{ + "translations": ["ko", "ja", "fr"] +} diff --git a/docs/platform/customers/index.md b/docs/platform/customers/index.md index 2e56eb692a..c2f0c9d527 100644 --- a/docs/platform/customers/index.md +++ b/docs/platform/customers/index.md @@ -1,3 +1,17 @@ +--- +title: Customers +description: Learn the Grida customer object, CSV import format, metadata fields, and update behavior. +keywords: + - grida + - platform + - customers + - csv import + - metadata +doc_tasks: + - enhance +format: md +--- + # Customers This object represents a customer of your business. Use it to create recurring charges, save payment and contact information, and track payments that belong to the same customer. @@ -56,7 +70,7 @@ Example: > **CSV Note:** When providing the `tags` within the CSV file, you should provide comma separated text (for example, `"tag1,tag2,tag3"`). The list of tags must be wrapped in quotation marks. -Learn more about [tags](/platform/tags/index.md). +Learn more about [tags](../tags/index.md). ### `metadata` diff --git a/docs/platform/customers/translations/fr/index.md b/docs/platform/customers/translations/fr/index.md new file mode 100644 index 0000000000..8cdeed3635 --- /dev/null +++ b/docs/platform/customers/translations/fr/index.md @@ -0,0 +1,158 @@ +--- +title: Clients +description: Comprendre l'objet client de Grida, le format d'import CSV, les champs metadata et le comportement des mises à jour. +keywords: + - grida + - platform + - customers + - csv import + - metadata +doc_tasks: + - enhance +format: md +--- + +# Clients + +Cet objet représente un client de votre activité. Utilisez-le pour créer des facturations récurrentes, enregistrer les informations de paiement et de contact, et suivre les paiements rattachés à un même client. + +## Objet client + +| Nom du champ | Description | Obligatoire | format | Exemple | mise à jour | unique | +| ------------ | ---------------------------------------- | ----------- | ------ | --------------------------------------- | ----------- | --------------- | +| uid | identifiant client système | Oui | uuidv4 | xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx | Non | Oui | +| uuid | votre identifiant unique du client | Non | uuidv4 | xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx | Oui | Oui (si fourni) | +| name | nom du client | Non | - | John Doe | Oui | Non | +| email | email du client | Non | email | user+1@example.com | Oui | Non | +| phone | numéro de téléphone du client | Non | E.164 | +14155552671 | Oui | Non | +| description | description du client | Non | - | A short description of the customer | Oui | Non | +| tags | liste des tags associés au client | Non | text[] | `["premium", "vip", "new-customer"]` | Oui | Non | +| metadata | metadata clé/valeur rattachées au client | Non | json | `{"my_custom_field_1" : "value", ... }` | Oui | Non | + +### `uid` + +`uid` est l'identifiant unique `uuidv4` généré par le système pour le client. Il ne peut pas être modifié ni fourni par l'utilisateur. + +### `uuid` + +`uuid` est un identifiant unique du client au format `uuidv4`. Il peut être fourni par l'utilisateur. +Cela est utile quand le client est créé dans un autre système et que vous voulez garder la synchronisation entre les deux systèmes. + +Utilisez-le pour garantir l'unicité du client dans votre CRM et les fonctionnalités associées. + +Par exemple : + +- un client issu de votre propre base de données +- un client issu de Salesforce + +### `phone` + +`phone` est le numéro de téléphone du client au format E.164. Si vous ne savez pas comment formater correctement le numéro, vous pouvez utiliser +l'[outil Grida E.164](https://grida.co/tools/e164). + +### `tags` + +Liste des tags associés au client. Les tags sont gérés par projet, peuvent avoir une description et servent à la catégorisation, à la segmentation et au filtrage rapide. + +Les tags sont créés automatiquement s'ils n'existent pas encore lorsqu'ils sont fournis lors d'une création ou d'une mise à jour de client. + +Exemple : + +```json +{ + "tags": ["premium", "vip", "new-customer"] +} +``` + +- Les tags sont scoped au projet et identifiés de manière unique par leur nom. +- Renommer un tag met automatiquement à jour toutes les associations client-tag. +- Supprimer un tag supprime toutes les associations client-tag. (cela ne supprime pas le client) + +> **Note CSV :** Lorsque vous fournissez `tags` dans un fichier CSV, utilisez une chaîne séparée par des virgules, par exemple `"tag1,tag2,tag3"`. La liste doit être entourée de guillemets. + +En savoir plus sur les [tags](../tags/index.md). + +### `metadata` + +Ensemble de paires clé-valeur que vous pouvez rattacher à un client. Cela peut servir à stocker des informations supplémentaires sur l'objet dans un format structuré. + +> **Note CSV :** Lorsque vous fournissez `metadata.*` dans un fichier CSV, vous devez fournir l'objet JSON à plat. + +Par exemple, si vous voulez importer : + +```json +{ + "my_custom_field_1": "value 1", + "my_custom_field_2": "value 2" +} +``` + +Vous devez fournir les valeurs suivantes dans le CSV. + +```csv +metadata.my_custom_field_1,metadata.my_custom_field_2 +value 1,value 2 +``` + +> **IMPORTANT** : La mise à jour partielle de `metadata` n'est pas prise en charge. Dans toutes les opérations, vous devez fournir l'ensemble complet des metadata, y compris les valeurs précédentes. + +--- + +## Travailler avec CSV + +Vous pouvez utiliser un fichier CSV pour insérer ou mettre à jour en masse des données dans l'objet client Grida. + +> L'upsert via fichier CSV n'est pas pris en charge. Utilisez l'API si vous avez besoin d'upsert. + +### Description du fichier CSV client + +| Nom du champ | Description | Obligatoire | format | Exemple | +| ------------ | -------------------------------------- | ----------- | ------ | ------------------------------------ | +| uuid | votre identifiant unique du client | Non | uuidv4 | xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx | +| name | nom du client | Non | - | John Doe | +| email | email du client | Non | email | user+1@example.com | +| phone | numéro de téléphone du client | Non | E.164 | +14155552671 | +| description | description du client | Non | - | A short description of the customer | +| tags | liste de tags séparés par des virgules | Non | - | "tag1,tag2,tag3" | +| metadata.\* | metadata du client | Non | - | value | + +### Insertion + +Lors d'une insertion, vous ne devez fournir que les champs ci-dessous. + +| Nom du champ | Description | Obligatoire | format | Exemple | +| ------------ | -------------------------------------- | ----------- | ------ | ------------------------------------ | +| uuid | votre identifiant unique du client | Non | uuidv4 | xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx | +| name | nom du client | Non | - | John Doe | +| email | email du client | Non | email | user+1@example.com | +| phone | numéro de téléphone du client | Non | E.164 | +14155552671 | +| description | description du client | Non | - | A short description of the customer | +| tags | liste de tags séparés par des virgules | Non | - | "tag1,tag2,tag3" | +| metadata.\* | metadata du client | Non | - | value | + +Bien que `uuid` soit facultatif, vous devez le fournir si vous voulez pouvoir mettre à jour ce client plus tard. + +- [En savoir plus sur `uuid`](#uuid) +- [En savoir plus sur `metadata`](#metadata) + +### Mise à jour (instable) + +Pour faire un upsert, vous devez fournir le champ `uid` ou `uuid` dans le fichier CSV. + +| Nom du champ | Description | Obligatoire | format | Exemple | +| ------------ | --------------------- | ----------- | ------ | ------------------------------------ | +| uid / uuid | identifiant unique | Oui | uuidv4 | xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx | +| name | nom du client | Non | - | John Doe | +| email | email du client | Non | email | user+1@example.com | +| phone | numéro de téléphone | Non | E.164 | +14155552671 | +| description | description du client | Non | - | A short description of the customer | +| metadata.\* | metadata du client | Non | - | value | + +Lors d'une mise à jour, les champs non fournis ne sont pas modifiés. + +**Important** : Pour [`metadata`](#metadata), dès qu'une valeur est fournie, elle remplace l'ensemble des metadata existantes. + +**Important** : Les tags ne peuvent pas être mis à jour via un fichier CSV. [Contactez le support](https://grida.co/contact) pour plus d'informations. + +- [En savoir plus sur `uuid`](#uuid) +- [En savoir plus sur `metadata`](#metadata) diff --git a/docs/platform/customers/translations/ja/index.md b/docs/platform/customers/translations/ja/index.md new file mode 100644 index 0000000000..759d244d1c --- /dev/null +++ b/docs/platform/customers/translations/ja/index.md @@ -0,0 +1,158 @@ +--- +title: Customers +description: Grida の customer object、CSV インポート形式、metadata フィールド、更新動作について説明します。 +keywords: + - grida + - platform + - customers + - csv import + - metadata +format: md +doc_tasks: + - enhance +--- + +# Customers + +このオブジェクトは、あなたのビジネスにおける顧客を表します。定期請求の作成、支払い情報や連絡先情報の保存、同じ顧客に属する支払いの追跡に利用できます。 + +## Customer Object + +| フィールド名 | 説明 | 必須 | 形式 | 例 | 更新 | 一意性 | +| ------------ | ---------------------------- | ------ | ------ | ------------------------------------ | ---- | -------------- | +| uid | システム顧客 ID | はい | uuidv4 | xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx | 不可 | はい | +| uuid | 顧客の外部一意識別子 | いいえ | uuidv4 | xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx | 可 | はい（指定時） | +| name | 顧客名 | いいえ | - | John Doe | 可 | いいえ | +| email | 顧客メールアドレス | いいえ | email | user+1@example.com | 可 | いいえ | +| phone | 顧客電話番号 | いいえ | E.164 | +14155552671 | 可 | いいえ | +| description | 顧客の説明 | いいえ | - | A short description of the customer | 可 | いいえ | +| tags | 顧客に関連付けられたタグ一覧 | いいえ | text[] | `["premium", "vip", "new-customer"]` | 可 | いいえ | +| metadata | 顧客に付与する K:V metadata | いいえ | json | `{"my_custom_field_1":"value"}` | 可 | いいえ | + +### `uid` + +`uid` はシステムが生成する `uuidv4` 形式の一意識別子です。ユーザーが指定したり変更したりすることはできません。 + +### `uuid` + +`uuid` は顧客の `uuidv4` 形式の外部識別子です。ユーザーが指定できます。 + +この値は、別のシステムで作成された顧客レコードと同期したい場合に便利です。 + +また、CRM および関連機能の中で顧客の一意性を保証するためにも利用できます。 + +例: + +- 自社データベース上の顧客 +- Salesforce 上の顧客 + +### `phone` + +`phone` は E.164 形式の顧客電話番号です。正しい形式が分からない場合は、[Grida E.164 tool](https://grida.co/tools/e164) を使って整形できます。 + +### `tags` + +顧客に関連付けるタグの一覧です。タグはプロジェクト単位で管理され、説明を持つことができ、分類、セグメント化、素早いフィルタリングに役立ちます。 + +顧客の作成または更新時に渡したタグがまだ存在しない場合は、自動的に作成されます。 + +例: + +```json +{ + "tags": ["premium", "vip", "new-customer"] +} +``` + +- タグはプロジェクト単位で名前により一意です。 +- タグ名を変更すると、すべての customer-tag 関連付けが自動的に更新されます。 +- タグを削除すると、customer-tag 関連付けのみが削除されます（customer 自体は削除されません）。 + +> **CSV Note:** CSV ファイルで `tags` を渡すときは、`"tag1,tag2,tag3"` のようにカンマ区切りの文字列を二重引用符で囲んで指定してください。 + +[tags](../tags/index.md) も参照してください。 + +### `metadata` + +顧客オブジェクトに付与できるキーと値の metadata です。追加情報を構造化して保存するのに便利です。 + +> **CSV Note:** CSV で `metadata.*` を渡す場合は、フラット化されたキー名で指定してください。 + +たとえば次の JSON をアップロードしたい場合: + +```json +{ + "my_custom_field_1": "value 1", + "my_custom_field_2": "value 2" +} +``` + +CSV では次のように指定します。 + +```csv +metadata.my_custom_field_1,metadata.my_custom_field_2 +value 1,value 2 +``` + +> **IMPORTANT**: `metadata` の部分更新はサポートしていません。metadata を更新する場合は、以前の値も含めた完全な metadata 一式を再度渡す必要があります。 + +--- + +## CSV の利用 + +CSV ファイルを使うと、Grida の customer object に対してデータを一括挿入または更新できます。 + +> CSV ファイル単体での upsert はサポートしていません。upsert が必要な場合は API を利用してください。 + +### Customer CSV file の説明 + +| フィールド名 | 説明 | 必須 | 形式 | 例 | +| ------------ | -------------------------------------- | ------ | ------ | ------------------------------------ | +| uuid | 顧客の外部一意識別子 | いいえ | uuidv4 | xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx | +| name | 顧客名 | いいえ | - | John Doe | +| email | 顧客メールアドレス | いいえ | email | user+1@example.com | +| phone | 顧客電話番号 | いいえ | E.164 | +14155552671 | +| description | 顧客の説明 | いいえ | - | A short description of the customer | +| tags | 顧客に付与するタグのカンマ区切り文字列 | いいえ | - | `"tag1,tag2,tag3"` | +| metadata.\* | 顧客 metadata | いいえ | - | value | + +### 挿入 + +挿入時には、以下のフィールドのみを指定してください。 + +| フィールド名 | 説明 | 必須 | 形式 | 例 | +| ------------ | -------------------------------------- | ------ | ------ | ------------------------------------ | +| uuid | 顧客の外部一意識別子 | いいえ | uuidv4 | xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx | +| name | 顧客名 | いいえ | - | John Doe | +| email | 顧客メールアドレス | いいえ | email | user+1@example.com | +| phone | 顧客電話番号 | いいえ | E.164 | +14155552671 | +| description | 顧客の説明 | いいえ | - | A short description of the customer | +| tags | 顧客に付与するタグのカンマ区切り文字列 | いいえ | - | `"tag1,tag2,tag3"` | +| metadata.\* | 顧客 metadata | いいえ | - | value | + +`uuid` は任意ですが、後で顧客を更新したい場合は指定することを勧めます。 + +- [`uuid` の詳細](#uuid) +- [`metadata` の詳細](#metadata) + +### 更新（Unstable） + +更新するには、CSV ファイルに `uid` または `uuid` フィールドを指定する必要があります。 + +| フィールド名 | 説明 | 必須 | 形式 | 例 | +| ------------ | ------------- | ------ | ------ | ------------------------------------ | +| uid / uuid | 一意識別子 | はい | uuidv4 | xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx | +| name | 顧客名 | いいえ | - | John Doe | +| email | 顧客メール | いいえ | email | user+1@example.com | +| phone | 顧客電話番号 | いいえ | E.164 | +14155552671 | +| description | 顧客説明 | いいえ | - | A short description of the customer | +| metadata.\* | 顧客 metadata | いいえ | - | value | + +更新時には、指定しなかったフィールドは更新されません。 + +**Important**: [`metadata`](#metadata) は、一度指定すると新しい metadata 全体で置き換えられます。 + +**Important**: タグは CSV ファイルでは更新できません。詳細は [support](https://grida.co/contact) に問い合わせてください。 + +- [`uuid` の詳細](#uuid) +- [`metadata` の詳細](#metadata) diff --git a/docs/platform/customers/translations/ko/index.md b/docs/platform/customers/translations/ko/index.md new file mode 100644 index 0000000000..0e790f8e68 --- /dev/null +++ b/docs/platform/customers/translations/ko/index.md @@ -0,0 +1,158 @@ +--- +title: 고객 +description: Grida 고객 객체, CSV 가져오기 형식, 메타데이터 필드, 업데이트 동작을 설명합니다. +keywords: + - grida + - 플랫폼 + - 고객 + - csv 가져오기 + - 메타데이터 +format: md +doc_tasks: + - enhance +--- + +# 고객 + +고객 객체는 비즈니스의 고객을 표현합니다. 이 객체를 사용해 반복 청구를 연결하고, 결제 및 연락처 정보를 저장하고, 같은 고객에 속한 결제를 추적할 수 있습니다. + +## 고객 객체 + +| 필드 이름 | 설명 | 필수 여부 | 형식 | 예시 | 수정 가능 | 고유 여부 | +| ----------- | ------------------------------- | --------- | ------ | ------------------------------------ | --------- | ------------ | +| uid | 시스템 고객 ID | 예 | uuidv4 | xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx | 아니오 | 예 | +| uuid | 외부 시스템 기준 고객 식별자 | 아니오 | uuidv4 | xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx | 예 | 예 (제공 시) | +| name | 고객 이름 | 아니오 | - | John Doe | 예 | 아니오 | +| email | 고객 이메일 | 아니오 | email | user+1@example.com | 예 | 아니오 | +| phone | 고객 전화번호 | 아니오 | E.164 | +14155552671 | 예 | 아니오 | +| description | 고객 설명 | 아니오 | - | 고객에 대한 간단한 설명 | 예 | 아니오 | +| tags | 고객에 연결된 태그 목록 | 아니오 | text[] | `["premium", "vip", "new-customer"]` | 예 | 아니오 | +| metadata | 고객에 대한 추가 메타데이터 K:V | 아니오 | json | `{"my_custom_field_1":"value"}` | 예 | 아니오 | + +### `uid` + +`uid`는 시스템이 생성하는 `uuidv4` 형식의 고유 식별자입니다. 사용자가 직접 제공하거나 수정할 수 없습니다. + +### `uuid` + +`uuid`는 고객의 `uuidv4` 형식 외부 식별자입니다. 사용자가 직접 제공할 수 있습니다. + +이 값은 다른 시스템에서 생성된 고객 레코드와 동기화할 때 유용합니다. + +또한 CRM 및 관련 기능 안에서 고객의 고유성을 보장하는 데 사용할 수 있습니다. + +예: + +- 자체 데이터베이스의 고객 +- Salesforce의 고객 + +### `phone` + +`phone`은 E.164 형식의 고객 전화번호입니다. 형식을 맞추기 어렵다면 [Grida E.164 도구](https://grida.co/tools/e164)를 사용할 수 있습니다. + +### `tags` + +태그는 고객과 연결되는 태그 목록입니다. 태그는 프로젝트 단위로 관리되며, 설명을 가질 수 있고, 분류, 세그먼트 관리, 빠른 필터링에 유용합니다. + +고객 생성 또는 업데이트 시 제공된 태그가 아직 없다면 자동으로 생성됩니다. + +예: + +```json +{ + "tags": ["premium", "vip", "new-customer"] +} +``` + +- 태그는 프로젝트 범위에서 이름 기준으로 고유합니다. +- 태그 이름을 바꾸면 모든 고객-태그 연결이 자동으로 갱신됩니다. +- 태그를 삭제하면 고객-태그 연결만 제거되며 고객 자체는 삭제되지 않습니다. + +> **CSV 참고:** CSV 파일에서 `tags`를 전달할 때는 `"tag1,tag2,tag3"`처럼 쉼표로 구분된 문자열을 큰따옴표로 감싸서 입력해야 합니다. + +[태그 문서](../tags/index.md)도 참고하세요. + +### `metadata` + +고객 객체에 연결할 수 있는 키-값 메타데이터입니다. 추가 정보를 구조화해서 저장할 때 유용합니다. + +> **CSV 참고:** CSV에서 `metadata.*` 필드를 사용할 때는 평탄화된 키 이름으로 전달해야 합니다. + +예를 들어 다음 JSON을 업로드하려면: + +```json +{ + "my_custom_field_1": "value 1", + "my_custom_field_2": "value 2" +} +``` + +CSV는 다음처럼 작성합니다. + +```csv +metadata.my_custom_field_1,metadata.my_custom_field_2 +value 1,value 2 +``` + +> **중요:** `metadata`는 부분 업데이트를 지원하지 않습니다. 메타데이터를 갱신할 때는 기존 값을 포함한 전체 메타데이터를 다시 제공해야 합니다. + +--- + +## CSV로 작업하기 + +CSV 파일을 사용해 Grida 고객 객체에 데이터를 대량으로 삽입하거나 업데이트할 수 있습니다. + +> CSV 파일만으로 upsert는 지원하지 않습니다. upsert가 필요하면 API를 사용해야 합니다. + +### 고객 CSV 파일 필드 설명 + +| 필드 이름 | 설명 | 필수 여부 | 형식 | 예시 | +| ----------- | ---------------------------- | --------- | ------ | ------------------------------------ | +| uuid | 외부 시스템 기준 고객 식별자 | 아니오 | uuidv4 | xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx | +| name | 고객 이름 | 아니오 | - | John Doe | +| email | 고객 이메일 | 아니오 | email | user+1@example.com | +| phone | 고객 전화번호 | 아니오 | E.164 | +14155552671 | +| description | 고객 설명 | 아니오 | - | 고객에 대한 간단한 설명 | +| tags | 태그를 쉼표로 나열한 문자열 | 아니오 | - | `"tag1,tag2,tag3"` | +| metadata.\* | 고객 메타데이터 | 아니오 | - | value | + +### 삽입 + +삽입 시에는 아래 필드만 제공해야 합니다. + +| 필드 이름 | 설명 | 필수 여부 | 형식 | 예시 | +| ----------- | ---------------------------- | --------- | ------ | ------------------------------------ | +| uuid | 외부 시스템 기준 고객 식별자 | 아니오 | uuidv4 | xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx | +| name | 고객 이름 | 아니오 | - | John Doe | +| email | 고객 이메일 | 아니오 | email | user+1@example.com | +| phone | 고객 전화번호 | 아니오 | E.164 | +14155552671 | +| description | 고객 설명 | 아니오 | - | 고객에 대한 간단한 설명 | +| tags | 태그를 쉼표로 나열한 문자열 | 아니오 | - | `"tag1,tag2,tag3"` | +| metadata.\* | 고객 메타데이터 | 아니오 | - | value | + +`uuid`는 선택 사항이지만, 나중에 고객을 업데이트하려면 제공하는 것이 좋습니다. + +- [`uuid` 더 알아보기](#uuid) +- [`metadata` 더 알아보기](#metadata) + +### 업데이트 (불안정) + +업데이트하려면 CSV 파일에 `uid` 또는 `uuid` 필드를 제공해야 합니다. + +| 필드 이름 | 설명 | 필수 여부 | 형식 | 예시 | +| ----------- | --------------- | --------- | ------ | ------------------------------------ | +| uid / uuid | 고객 식별자 | 예 | uuidv4 | xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx | +| name | 고객 이름 | 아니오 | - | John Doe | +| email | 고객 이메일 | 아니오 | email | user+1@example.com | +| phone | 고객 전화번호 | 아니오 | E.164 | +14155552671 | +| description | 고객 설명 | 아니오 | - | 고객에 대한 간단한 설명 | +| metadata.\* | 고객 메타데이터 | 아니오 | - | value | + +업데이트 시 제공하지 않은 필드는 변경되지 않습니다. + +**중요**: [`metadata`](#metadata)는 한 번 제공되면 새 메타데이터 전체로 교체됩니다. + +**중요**: 태그는 CSV 파일로 업데이트할 수 없습니다. 자세한 내용은 [support](https://grida.co/contact)로 문의하세요. + +- [`uuid` 더 알아보기](#uuid) +- [`metadata` 더 알아보기](#metadata) diff --git a/docs/platform/customers/translations/meta.json b/docs/platform/customers/translations/meta.json index 618869d70a..8aad8fab3b 100644 --- a/docs/platform/customers/translations/meta.json +++ b/docs/platform/customers/translations/meta.json @@ -1,3 +1,3 @@ { - "translations": ["ko"] + "translations": ["ko", "ja", "fr"] } diff --git a/docs/platform/index.md b/docs/platform/index.md index 645723d0b2..839a0a78d1 100644 --- a/docs/platform/index.md +++ b/docs/platform/index.md @@ -1,10 +1,18 @@ --- id: intro +title: Grida Platform +description: Platform documentation for Grida customers, tags, and related product features. +keywords: + - grida + - platform + - customers + - tags +format: md --- # Grida Platform -Grida Platform documentation for API and platform features. +Grida Platform documentation for customer records, tags, and related product features. ## Sections diff --git a/docs/platform/tags/index.md b/docs/platform/tags/index.md index 296a5b528a..395c4cdeab 100644 --- a/docs/platform/tags/index.md +++ b/docs/platform/tags/index.md @@ -1,3 +1,15 @@ +--- +title: Tags +description: Understand how tags work in Grida for categorization, segmentation, and filtering. +keywords: + - grida + - platform + - tags + - categorization + - filtering +format: md +--- + # Tags Tags are labels used to categorize, segment, and filter resources within your project. They allow you to organize your data clearly and flexibly. @@ -38,4 +50,4 @@ When associating tags with a resource, use the following structure: Currently, tags are supported for the following resources: -- [**Customer**](/platform/customers/index.md): Organize, segment, and manage your customers efficiently using tags. +- [**Customer**](../customers/index.md): Organize, segment, and manage your customers efficiently using tags. diff --git a/docs/platform/tags/translations/fr/index.md b/docs/platform/tags/translations/fr/index.md new file mode 100644 index 0000000000..d316a61c6a --- /dev/null +++ b/docs/platform/tags/translations/fr/index.md @@ -0,0 +1,53 @@ +--- +title: Tags +description: Comprendre le fonctionnement des tags dans Grida pour la catégorisation, la segmentation et le filtrage. +keywords: + - grida + - platform + - tags + - categorization + - filtering +format: md +--- + +# Tags + +Les tags sont des étiquettes utilisées pour catégoriser, segmenter et filtrer les ressources de votre projet. Ils vous aident à organiser vos données de façon claire et flexible. + +## Structure d'un tag + +Un tag se compose de : + +| Champ | Description | Obligatoire | Format | Exemple | +| ------------- | ----------------------------------------- | ----------- | ------ | ------------------------ | +| `name` | identifiant unique du tag | Oui | text | `"premium-user"` | +| `color` | indicateur visuel pour le tag | Non | hex | `"#ff0000"` | +| `description` | contexte ou détails optionnels sur le tag | Non | text | `"High-value customers"` | + +## Fonctionnalités + +- **Scope projet :** les tags sont uniques dans le contexte d'un projet. +- **Création automatique :** les tags sont créés automatiquement s'ils n'existent pas quand vous les associez à une ressource. +- **Gestion simple :** renommer un tag met automatiquement à jour toutes les références associées. + +## Exemple d'utilisation + +Lorsque vous associez des tags à une ressource, utilisez la structure suivante : + +```json +{ + "tags": ["premium-user", "new-customer", "vip"] +} +``` + +## Bonnes pratiques + +- Utilisez des noms clairs et descriptifs pour les identifier facilement. +- Utilisez les couleurs pour distinguer visuellement les catégories de tags. +- Revoyez et nettoyez régulièrement vos tags pour garder votre projet organisé. + +## Ressources prises en charge + +Actuellement, les tags sont pris en charge pour les ressources suivantes : + +- [**Clients**](../customers/index.md) : organisez, segmentez et gérez efficacement vos clients avec des tags. diff --git a/docs/platform/tags/translations/ja/index.md b/docs/platform/tags/translations/ja/index.md new file mode 100644 index 0000000000..683e447252 --- /dev/null +++ b/docs/platform/tags/translations/ja/index.md @@ -0,0 +1,53 @@ +--- +title: Tags +description: Grida でタグを使ってリソースを分類、セグメント化、フィルタリングする方法を説明します。 +keywords: + - grida + - platform + - tags + - categorization + - filtering +format: md +--- + +# Tags + +タグは、プロジェクト内のリソースを分類、セグメント化、フィルタリングするためのラベルです。データをより明確かつ柔軟に整理できます。 + +## Tag Structure + +タグは次のフィールドで構成されます。 + +| フィールド | 説明 | 必須 | 形式 | 例 | +| ------------- | ---------------------------- | ------ | ---- | ------------------------ | +| `name` | タグの一意識別子 | はい | text | `"premium-user"` | +| `color` | タグを識別する視覚的な色 | いいえ | hex | `"#ff0000"` | +| `description` | タグの補足説明やコンテキスト | いいえ | text | `"High-value customers"` | + +## Features + +- **プロジェクト単位:** タグはプロジェクトの文脈ごとに一意です。 +- **自動作成:** リソースにタグを関連付ける際、存在しないタグは自動的に作成されます。 +- **管理しやすい:** タグ名を変更すると、関連する参照はすべて自動的に更新されます。 + +## Usage Example + +リソースにタグを関連付けるときは、次の形式を使用します。 + +```json +{ + "tags": ["premium-user", "new-customer", "vip"] +} +``` + +## Best Practices + +- 分かりやすく説明的な名前を使ってください。 +- 色を活用してタグのカテゴリを視覚的に区別してください。 +- タグは定期的に見直して整理してください。 + +## Supported Resources + +現在、タグは次のリソースで利用できます。 + +- [**Customer**](../customers/index.md): タグを使って顧客を整理、セグメント化、管理できます。 diff --git a/docs/platform/tags/translations/ko/index.md b/docs/platform/tags/translations/ko/index.md new file mode 100644 index 0000000000..67635cc0a8 --- /dev/null +++ b/docs/platform/tags/translations/ko/index.md @@ -0,0 +1,53 @@ +--- +title: 태그 +description: Grida에서 태그를 사용해 리소스를 분류, 세분화, 필터링하는 방법을 설명합니다. +keywords: + - grida + - 플랫폼 + - 태그 + - 분류 + - 필터링 +format: md +--- + +# 태그 + +태그는 프로젝트 안의 리소스를 분류하고, 세분화하고, 필터링하기 위한 레이블입니다. 데이터를 더 명확하고 유연하게 정리할 수 있게 도와줍니다. + +## 태그 구조 + +태그는 다음 필드로 구성됩니다. + +| 필드 | 설명 | 필수 여부 | 형식 | 예시 | +| ------------- | ------------------------- | --------- | ---- | ------------------------ | +| `name` | 태그의 고유 식별자 | 예 | text | `"premium-user"` | +| `color` | 태그를 구분하는 시각 정보 | 아니오 | hex | `"#ff0000"` | +| `description` | 태그 설명 또는 맥락 | 아니오 | text | `"High-value customers"` | + +## 특징 + +- **프로젝트 범위:** 태그는 프로젝트 단위로 고유합니다. +- **자동 생성:** 리소스에 태그를 연결할 때 없는 태그는 자동으로 생성됩니다. +- **쉬운 관리:** 태그 이름을 바꾸면 연결된 참조가 자동으로 업데이트됩니다. + +## 사용 예시 + +리소스에 태그를 연결할 때는 다음과 같이 사용합니다. + +```json +{ + "tags": ["premium-user", "new-customer", "vip"] +} +``` + +## 권장 사항 + +- 식별하기 쉬운 명확한 이름을 사용하세요. +- 색상을 활용해 태그 유형을 구분하세요. +- 태그를 주기적으로 검토하고 정리하세요. + +## 지원 리소스 + +현재 태그는 다음 리소스에서 지원됩니다. + +- [**고객**](../customers/index.md): 태그를 사용해 고객을 정리하고 세분화하고 관리할 수 있습니다. diff --git a/docs/platform/tags/translations/meta.json b/docs/platform/tags/translations/meta.json new file mode 100644 index 0000000000..8aad8fab3b --- /dev/null +++ b/docs/platform/tags/translations/meta.json @@ -0,0 +1,3 @@ +{ + "translations": ["ko", "ja", "fr"] +} diff --git a/docs/platform/translations/fr/index.md b/docs/platform/translations/fr/index.md new file mode 100644 index 0000000000..2d1b844aee --- /dev/null +++ b/docs/platform/translations/fr/index.md @@ -0,0 +1,19 @@ +--- +title: Plateforme Grida +description: Documentation de plateforme pour les clients Grida, les tags et les fonctionnalités produit associées. +keywords: + - grida + - platform + - customers + - tags +format: md +--- + +# Plateforme Grida + +Cette section documente les fiches clients, les tags et les fonctionnalités produit associées dans Grida Platform. + +## Sections + +- [Clients](customers) - objet client, import CSV et gestion des clients +- [Tags](tags) - structure des tags et façons de les utiliser pour la catégorisation diff --git a/docs/platform/translations/ja/index.md b/docs/platform/translations/ja/index.md new file mode 100644 index 0000000000..a50a1e0069 --- /dev/null +++ b/docs/platform/translations/ja/index.md @@ -0,0 +1,19 @@ +--- +title: Grida Platform +description: Grida の顧客、タグ、および関連プロダクト機能に関するプラットフォーム文書です。 +keywords: + - grida + - platform + - customers + - tags +format: md +--- + +# Grida Platform + +Grida Platform の顧客レコード、タグ、および関連プロダクト機能を扱う文書です。 + +## セクション + +- [Customers](customers) - 顧客オブジェクト、CSV インポート、顧客管理 +- [Tags](tags) - 分類に使うタグの構造と利用方法 diff --git a/docs/platform/translations/ko/index.md b/docs/platform/translations/ko/index.md new file mode 100644 index 0000000000..82e9d44eb4 --- /dev/null +++ b/docs/platform/translations/ko/index.md @@ -0,0 +1,19 @@ +--- +title: Grida 플랫폼 +description: Grida의 고객, 태그, 관련 제품 기능에 대한 플랫폼 문서입니다. +keywords: + - grida + - 플랫폼 + - 고객 + - 태그 +format: md +--- + +# Grida 플랫폼 + +Grida 플랫폼의 고객 레코드, 태그, 관련 제품 기능을 다루는 문서입니다. + +## 섹션 + +- [고객](customers) — 고객 객체, CSV 가져오기, 고객 관리 +- [태그](tags) — 분류를 위한 태그 구조와 사용법 diff --git a/docs/platform/translations/meta.json b/docs/platform/translations/meta.json new file mode 100644 index 0000000000..8aad8fab3b --- /dev/null +++ b/docs/platform/translations/meta.json @@ -0,0 +1,3 @@ +{ + "translations": ["ko", "ja", "fr"] +} diff --git a/docs/support/index.mdx b/docs/support/index.mdx index 965aeae40b..22b4980eb5 100644 --- a/docs/support/index.mdx +++ b/docs/support/index.mdx @@ -1,3 +1,9 @@ +--- +title: Support +description: Temporary support docs staging page that is not ready for the published documentation surface. +draft: true +--- + # Support for issuing new support ticket, visit https://grida.co/contact diff --git a/docs/translations/fr/index.md b/docs/translations/fr/index.md new file mode 100644 index 0000000000..14ad1c27dc --- /dev/null +++ b/docs/translations/fr/index.md @@ -0,0 +1,55 @@ +--- +id: intro +title: Documentation Grida +description: Guides produit, workflows Figma, docs Forms, docs Platform et références techniques pour Grida. +keywords: + - grida + - documentation + - canvas editor + - forms + - figma + - assistant + - platform +format: md +--- + +# Documentation Grida + +Grida est un éditeur canvas open source et un moteur de rendu, avec des produits et des workflows autour de l'interopérabilité Figma, des formulaires, des outils de plateforme et du rendu headless. + +Ce site est le point d'entrée principal de la documentation produit. Si vous découvrez Grida, commencez par la section qui correspond à ce que vous voulez faire. + +## Commencer ici + +- Utilisez [Editor](./editor/features/README.md) si vous travaillez dans l'éditeur Grida et cherchez des docs de fonctionnalités ou d'aide sur les workflows. +- Utilisez [With Figma](./with-figma/index.md) si vous importez depuis Figma, utilisez Assistant ou configurez un workflow lié à Figma. +- Utilisez [Forms](./forms/respondent-email-notifications.md) si vous travaillez sur des flux de formulaire, des notifications ou le traitement des réponses. +- Utilisez [Platform](./platform/index.md) si vous travaillez avec l'infrastructure produit, les clients, les tags ou les fonctionnalités de plateforme. +- Utilisez [Canvas SDK](./canvas/sdk/index.md) si vous intégrez ou embarquez les capacités canvas de Grida. + +## Domaines produit + +- [Editor](./editor/features/README.md) pour les fonctionnalités de l'éditeur et les interactions. +- [With Figma](./with-figma/index.md) pour les guides d'interopérabilité, les workflows d'import et la surface produit Assistant maintenue. +- [Forms](./forms/respondent-email-notifications.md) pour les docs utilisateur liées aux formulaires. +- [Platform](./platform/index.md) pour les docs produit et plateforme. +- [Canvas SDK](./canvas/sdk/index.md) pour l'embed canvas et la surface SDK. +- [Design](./design/blend-mode.md) pour les notes orientées design et les docs sur le modèle visuel, comme le comportement des réseaux vectoriels. + +## Références et docs techniques + +- [Reference](./reference/index.md) pour les références techniques stables et les spécifications. +- [Working Group](./wg/index.md) pour les notes de conception, l'architecture, les propositions et les plans d'implémentation. +- [Math](./math/kappa.md) pour les notes techniques de support utilisées par le moteur de rendu et la géométrie. +- [Packages](./packages/index.md) pour les points d'entrée au niveau package, comme `@grida/refig`. + +## Anciennes docs ou docs spécialisées + +- [CLI](./cli/index.md) est conservé pour compatibilité, mais doit être considéré comme obsolète sauf si une tâche le cible explicitement. +- `docs/@designto-code/**` est synchronisé depuis une source externe et reste en place comme matériau de référence. + +## Liens du projet + +- [Repository](https://github.com/gridaco/grida) +- [Website](https://grida.co) +- [Slack](https://grida.co/join-slack) diff --git a/docs/translations/ja/index.md b/docs/translations/ja/index.md new file mode 100644 index 0000000000..c1846aec6d --- /dev/null +++ b/docs/translations/ja/index.md @@ -0,0 +1,55 @@ +--- +id: intro +title: Grida ドキュメント +description: Grida の製品ガイド、Figma ワークフロー、フォーム文書、プラットフォーム文書、技術リファレンス。 +keywords: + - grida + - documentation + - canvas editor + - forms + - figma + - assistant + - platform +format: md +--- + +# Grida ドキュメント + +Grida はオープンソースのキャンバスエディタ兼レンダリングエンジンであり、Figma 連携、フォーム、プラットフォーム機能、ヘッドレスレンダリングに関する製品とワークフローを提供します。 + +このサイトは Grida の製品ドキュメントの主要な入口です。初めて使う場合は、今やりたい作業に合うセクションから始めてください。 + +## ここから始める + +- Grida エディタ内の機能ドキュメントやワークフローガイドを探している場合は [Editor](./editor/features/README.md) を参照してください。 +- Figma からのインポート、Assistant の利用、Figma 関連の設定を行う場合は [With Figma](./with-figma/index.md) を参照してください。 +- フォームフロー、通知、回答処理を扱う場合は [Forms](./forms/respondent-email-notifications.md) を参照してください。 +- 顧客、タグ、プラットフォーム機能などのプロダクト基盤を扱う場合は [Platform](./platform/index.md) を参照してください。 +- Grida キャンバスを埋め込んだり統合したりする場合は [Canvas SDK](./canvas/sdk/index.md) を参照してください。 + +## 製品ドキュメント領域 + +- [Editor](./editor/features/README.md): エディタ機能と操作フローのドキュメント +- [With Figma](./with-figma/index.md): 連携ガイド、インポートワークフロー、継続的に保守されている Assistant ドキュメント +- [Forms](./forms/respondent-email-notifications.md): フォーム関連のユーザードキュメント +- [Platform](./platform/index.md): プラットフォーム／プロダクト文書 +- [Canvas SDK](./canvas/sdk/index.md): キャンバス埋め込みと SDK の文書 +- [Design](./design/blend-mode.md): ベクターネットワークなどの視覚モデルやデザイン寄りの文書 + +## リファレンスと技術文書 + +- [Reference](./reference/index.md): 安定した技術リファレンスと仕様 +- [Working Group](./wg/index.md): 設計ノート、アーキテクチャ、提案、実装計画 +- [Math](./math/kappa.md): レンダラや幾何処理で参照する補助技術ノート +- [Packages](./packages/index.md): `@grida/refig` などパッケージ別の入口 + +## 古い文書または特殊な文書 + +- [CLI](./cli/index.md) は互換性のために残されていますが、明示的に対象にする作業でない限り deprecated とみなしてください。 +- `docs/@designto-code/**` は外部ソースから同期される参考資料です。 + +## プロジェクトリンク + +- [Repository](https://github.com/gridaco/grida) +- [Website](https://grida.co) +- [Slack](https://grida.co/join-slack) diff --git a/docs/translations/ko/index.md b/docs/translations/ko/index.md index 848d4a0603..67a09c6195 100644 --- a/docs/translations/ko/index.md +++ b/docs/translations/ko/index.md @@ -21,31 +21,31 @@ Grida는 오픈소스 캔버스 에디터이자 렌더링 엔진이며, Figma ## 여기서 시작하세요 -- Grida 에디터 안에서 기능 문서나 작업 흐름 가이드를 찾고 있다면 [Editor](../../editor/features/README.md)를 보세요. -- Figma에서 가져오기, Assistant 사용, Figma 관련 설정이 목적이라면 [With Figma](../../with-figma/index.md)를 보세요. -- 폼 흐름, 알림, 응답 처리를 다루고 있다면 [Forms](../../forms/respondent-email-notifications.md)를 보세요. -- 제품 인프라, 고객, 태그, 플랫폼 기능을 다루고 있다면 [Platform](../../platform/index.md)을 보세요. -- Grida 캔버스를 임베드하거나 통합하고 있다면 [Canvas SDK](../../canvas/sdk/index.md)를 보세요. +- Grida 에디터 안에서 기능 문서나 작업 흐름 가이드를 찾고 있다면 [Editor](./editor/features/README.md)를 보세요. +- Figma에서 가져오기, Assistant 사용, Figma 관련 설정이 목적이라면 [With Figma](./with-figma/index.md)를 보세요. +- 폼 흐름, 알림, 응답 처리를 다루고 있다면 [Forms](./forms/respondent-email-notifications.md)를 보세요. +- 제품 인프라, 고객, 태그, 플랫폼 기능을 다루고 있다면 [Platform](./platform/index.md)을 보세요. +- Grida 캔버스를 임베드하거나 통합하고 있다면 [Canvas SDK](./canvas/sdk/index.md)를 보세요. ## 제품 문서 영역 -- [Editor](../../editor/features/README.md): 에디터 기능과 인터랙션 문서 -- [With Figma](../../with-figma/index.md): 연동 가이드, 가져오기 워크플로우, 유지보수 중인 Assistant 제품 문서 -- [Forms](../../forms/respondent-email-notifications.md): 폼 관련 사용자 문서 -- [Platform](../../platform/index.md): 플랫폼/제품 문서 -- [Canvas SDK](../../canvas/sdk/index.md): 캔버스 임베드 및 SDK 문서 -- [Design](../../design/blend-mode.md): 벡터 네트워크 같은 시각 모델과 디자인 중심 문서 +- [Editor](./editor/features/README.md): 에디터 기능과 인터랙션 문서 +- [With Figma](./with-figma/index.md): 연동 가이드, 가져오기 워크플로우, 유지보수 중인 Assistant 제품 문서 +- [Forms](./forms/respondent-email-notifications.md): 폼 관련 사용자 문서 +- [Platform](./platform/index.md): 플랫폼/제품 문서 +- [Canvas SDK](./canvas/sdk/index.md): 캔버스 임베드 및 SDK 문서 +- [Design](./design/blend-mode.md): 벡터 네트워크 같은 시각 모델과 디자인 중심 문서 ## 레퍼런스 및 기술 문서 -- [Reference](../../reference/index.md): 안정적인 기술 레퍼런스와 스펙 -- [Working Group](../../wg/index.md): 설계 노트, 아키텍처, 제안, 구현 계획 -- [Math](../../math/kappa.md): 렌더러와 기하 처리에 필요한 보조 기술 문서 -- [Packages](../../packages/index.md): `@grida/refig` 같은 패키지 진입점 문서 +- [Reference](./reference/index.md): 안정적인 기술 레퍼런스와 스펙 +- [Working Group](./wg/index.md): 설계 노트, 아키텍처, 제안, 구현 계획 +- [Math](./math/kappa.md): 렌더러와 기하 처리에 필요한 보조 기술 문서 +- [Packages](./packages/index.md): `@grida/refig` 같은 패키지 진입점 문서 ## 오래되었거나 특수한 문서 -- [CLI](../../cli/index.md)는 호환성을 위해 유지되지만, 특정 작업이 아니라면 deprecated 문서로 취급해야 합니다. +- [CLI](./cli/index.md)는 호환성을 위해 유지되지만, 특정 작업이 아니라면 deprecated 문서로 취급해야 합니다. - `docs/@designto-code/**`는 외부 소스에서 동기화되는 참고 자료입니다. ## 프로젝트 링크 diff --git a/docs/translations/meta.json b/docs/translations/meta.json index 618869d70a..8aad8fab3b 100644 --- a/docs/translations/meta.json +++ b/docs/translations/meta.json @@ -1,3 +1,3 @@ { - "translations": ["ko"] + "translations": ["ko", "ja", "fr"] } diff --git a/docs/with-figma/guides/how-to-get-fig-file.md b/docs/with-figma/guides/how-to-get-fig-file.md index 025e1d3310..55a571b70c 100644 --- a/docs/with-figma/guides/how-to-get-fig-file.md +++ b/docs/with-figma/guides/how-to-get-fig-file.md @@ -1,3 +1,16 @@ +--- +title: How to save a local .fig copy from Figma +description: Download a local .fig file from Figma so you can import it into Grida. +keywords: + - figma + - fig file + - import + - grida +format: md +doc_tasks: + - update +--- + # How to Save a Local .fig Copy from Figma This guide explains how to download a .fig file from Figma to import into Grida. diff --git a/docs/with-figma/guides/how-to-get-personal-access-token.md b/docs/with-figma/guides/how-to-get-personal-access-token.md index 9c7711949b..3e5a48fbdb 100644 --- a/docs/with-figma/guides/how-to-get-personal-access-token.md +++ b/docs/with-figma/guides/how-to-get-personal-access-token.md @@ -1,18 +1,36 @@ --- -title: "How to get Figma Personal Access Token" -version: 0.1.0 -revision: 1 +title: How to get a Figma personal access token +description: Generate a Figma personal access token for Grida workflows that require direct Figma API access. +keywords: + - figma + - personal access token + - api token + - grida +format: md +doc_tasks: + - update --- -# Getting Personal Access Token from Figma +# How to get a Figma personal access token -Follow the steps below to get a personal access token. +Follow these steps to create a personal access token in Figma. 1. Sign in to your Figma account. -2. Visit https://www.figma.com/developers/api#access-tokens -3. Click `"+ Get personal access token" -4. Copy the value when present. +2. Open [Figma developers: personal access tokens](https://www.figma.com/developers/api#access-tokens). +3. Click **Get personal access token**. +4. Enter a label for the token if Figma prompts you. +5. Copy the token value and store it somewhere secure. -## Why will I need explicit `personalAccessToken`? +## When you may need `personalAccessToken` -Most of the Grida products have figma authentication flow in-the-box, but if you are a insider, or beta products user, or want to dynamically use other's account to access the design, you'll need to use `personalAccessToken` to authenticate. +Most Grida products use built-in Figma authentication, but some workflows still need an explicit `personalAccessToken`. + +Common cases: + +- internal or beta workflows that have not yet adopted the full OAuth flow +- scripts or tools that access the Figma API directly +- workflows where you temporarily need to authenticate against a different Figma account + +## Security note + +Treat your personal access token like a password. Do not paste it into public documents, screenshots, or issue threads. diff --git a/docs/with-figma/guides/how-to-get-sharable-design-link.md b/docs/with-figma/guides/how-to-get-sharable-design-link.md index 9246aa7c6b..3dfaca1548 100644 --- a/docs/with-figma/guides/how-to-get-sharable-design-link.md +++ b/docs/with-figma/guides/how-to-get-sharable-design-link.md @@ -1,26 +1,41 @@ --- -title: "How to get Figma Design link" -version: 0.1.0 -revision: 1 +title: How to get a shareable Figma design link +description: Copy a Figma link to a frame or file so you can share it or use it in Grida workflows. +keywords: + - figma + - share link + - design link + - grida +format: md +doc_tasks: + - update --- -# How do I get Sharable design link from Figma? +# How to get a shareable Figma design link -## How to copy link to the frame +## Copy a link to a frame -1. Open figma file, navigate to frame you want to copy the link of. -2. Right-click on the frame, -3. Navigate to **Copy/Paste as**, and select **Copy link**. +1. Open the Figma file and navigate to the frame you want to share. +2. Right-click the frame. +3. Open **Copy/Paste as**. +4. Select **Copy link**. -Now you have a link to the frame. this can be used for sharing the design, or passing the design as an input for Grida. +You now have a direct link to that frame. You can share it with collaborators or use it as input in Grida workflows. - +## Copy a link to the whole file -## How to copy link to the entire file +1. Open the Figma file. +2. Click **Share** in the top-right corner. +3. Click **Copy link**. -1. Open figma file, on the top-right corner, click on **Share**, -2. Click on **Copy link**. +The copied URL may include a `node-id` query parameter, for example: -This will give you a link looks like `https://www.figma.com/file/XXXXXXX/grida.co?node-id=0000%3A0000` -For to specifically indicate the entire fike, you have to remove the following part of the link: `?node-id=~` -Wich will look like this - `https://www.figma.com/file/XXXXXXX` (e.g. `https://www.figma.com/file/Gaznaw1QHppxvs9UkqNOb0`) +```txt +https://www.figma.com/file/XXXXXXX/example-file?node-id=0%3A1 +``` + +If you want a link to the whole file instead of a specific node, remove the `?node-id=...` portion so the URL looks like: + +```txt +https://www.figma.com/file/XXXXXXX/example-file +``` diff --git a/docs/with-figma/guides/translations/fr/how-to-get-fig-file.md b/docs/with-figma/guides/translations/fr/how-to-get-fig-file.md new file mode 100644 index 0000000000..a94a9c2111 --- /dev/null +++ b/docs/with-figma/guides/translations/fr/how-to-get-fig-file.md @@ -0,0 +1,111 @@ +--- +title: Comment enregistrer une copie locale `.fig` depuis Figma +description: Téléchargez un fichier `.fig` local depuis Figma afin de pouvoir l'importer dans Grida. +keywords: + - figma + - fig file + - import + - grida +format: md +doc_tasks: + - update +--- + +# Comment enregistrer une copie locale `.fig` depuis Figma + +Ce guide explique comment télécharger un fichier `.fig` depuis Figma pour l'importer dans Grida. + +> **Note:** Le format de fichier `.fig` est propriétaire et peut changer sans préavis. Si vous rencontrez des problèmes lors de l'import de fichiers `.fig`, veuillez [nous les signaler](https://github.com/gridaco/grida/issues) ou contacter le support. Vos retours nous aident à maintenir les imports opérationnels. + +## Prérequis + +- Vous devez avoir au moins l'accès **can view** au fichier +- Le propriétaire du fichier ne doit pas avoir restreint la copie et le partage +- Si vous ne voyez pas l'option **Save local copy**, contactez le propriétaire du fichier + +## Dans Figma Desktop ou Web + +1. Ouvrez votre fichier Figma +2. Cliquez sur **Main menu** (coin supérieur gauche) +3. Allez dans **File -> Save local copy...** +4. Choisissez un emplacement sur votre ordinateur +5. Cliquez sur **Save** + +Le fichier sera enregistré avec l'extension `.fig` (fichiers Figma Design). + +## Emplacement du fichier selon le système d'exploitation + +Après l'enregistrement, vous trouverez vos fichiers `.fig` à l'emplacement que vous avez choisi : + +**macOS** + +- Dossier Téléchargements par défaut : `~/Downloads/` +- Emplacements personnalisés : partout où vous avez choisi de l'enregistrer + +**Windows** + +- Dossier Téléchargements par défaut : `C:\Users\YourUsername\Downloads\` +- Emplacements personnalisés : partout où vous avez choisi de l'enregistrer + +**Linux** + +- Dossier Téléchargements par défaut : `~/Downloads/` +- Emplacements personnalisés : partout où vous avez choisi de l'enregistrer + +## Que contient un fichier `.fig` ? + +Un fichier `.fig` contient : + +- toutes les pages (canvases) de votre document Figma +- la hiérarchie complète des nœuds avec leurs propriétés +- les données vectorielles, fills, strokes et effects +- le contenu texte et sa mise en forme +- les définitions de composants et leurs instances + +**Non inclus :** + +- l'historique des versions +- les commentaires +- le lien avec le fichier d'origine (le fichier importé est traité comme un nouveau fichier) + +## Importer dans Grida + +Une fois que vous avez un fichier `.fig` : + +1. Ouvrez Grida Canvas playground +2. Cliquez sur le menu du logo (en haut à gauche) +3. Sélectionnez **Import Figma** +4. Dans l'onglet **.fig File**, cliquez sur **Select .fig File** +5. Choisissez votre fichier `.fig` téléchargé +6. Vérifiez les pages qui seront importées +7. Cliquez sur **Yes, Import** + +Chaque page Figma deviendra une scène Grida. + +> **Note:** Les composants du fichier importé deviennent de nouveaux composants principaux. Les instances se connecteront à ces nouveaux composants et ne recevront plus les mises à jour du fichier Figma d'origine. + +## Dépannage + +**Impossible de trouver l'option "Save local copy"** + +- Le propriétaire du fichier a peut-être restreint la copie et le partage +- Vous n'avez peut-être pas les autorisations suffisantes (au moins "can view" est requis) +- Contactez le propriétaire du fichier pour demander l'accès ou lui demander de télécharger le fichier pour vous + +**"Failed to parse .fig file"** + +- Vérifiez qu'il s'agit bien d'un fichier `.fig` valide téléchargé depuis Figma +- Essayez de télécharger le fichier à nouveau +- Vérifiez que le fichier n'est pas corrompu (la taille doit sembler raisonnable) +- Le format `.fig` a peut-être changé (voir l'avertissement ci-dessus) + +**"No pages found"** + +- Le fichier `.fig` est peut-être vide ou ne contient aucun nœud de canvas +- Ouvrez le fichier dans Figma pour vérifier qu'il contient bien du contenu + +## Ressources associées + +- [Figma Help: Save a local copy of files](https://help.figma.com/hc/en-us/articles/8403626871063-Save-a-local-copy-of-files) +- [Figma Help: Download files from Figma](https://help.figma.com/hc/en-us/articles/360041003114-Download-files-from-Figma) +- [Copy & Paste from Figma](../../editor/features/copy-paste-figma.md) - méthode alternative d'import via le presse-papiers diff --git a/docs/with-figma/guides/translations/fr/how-to-get-personal-access-token.md b/docs/with-figma/guides/translations/fr/how-to-get-personal-access-token.md new file mode 100644 index 0000000000..168876b6b9 --- /dev/null +++ b/docs/with-figma/guides/translations/fr/how-to-get-personal-access-token.md @@ -0,0 +1,36 @@ +--- +title: Comment obtenir un token d'accès personnel Figma +description: Générez un token d'accès personnel Figma pour les workflows Grida qui nécessitent un accès direct à l'API Figma. +keywords: + - figma + - personal access token + - api token + - grida +format: md +doc_tasks: + - update +--- + +# Comment obtenir un token d'accès personnel Figma + +Suivez ces étapes pour créer un token d'accès personnel dans Figma. + +1. Connectez-vous à votre compte Figma. +2. Ouvrez [Figma developers: personal access tokens](https://www.figma.com/developers/api#access-tokens). +3. Cliquez sur **Get personal access token**. +4. Saisissez un libellé pour le token si Figma vous le demande. +5. Copiez la valeur du token et stockez-la dans un endroit sûr. + +## Quand vous pouvez avoir besoin de `personalAccessToken` + +La plupart des produits Grida utilisent l'authentification Figma intégrée, mais certains workflows ont encore besoin d'un `personalAccessToken` explicite. + +Cas fréquents : + +- workflows internes ou bêta qui n'ont pas encore adopté le flux OAuth complet +- scripts ou outils qui accèdent directement à l'API Figma +- workflows où vous devez temporairement vous authentifier avec un autre compte Figma + +## Note de sécurité + +Traitez votre token d'accès personnel comme un mot de passe. Ne le collez pas dans des documents publics, des captures d'écran ou des fils d'issues. diff --git a/docs/with-figma/guides/translations/fr/how-to-get-sharable-design-link.md b/docs/with-figma/guides/translations/fr/how-to-get-sharable-design-link.md new file mode 100644 index 0000000000..0606815183 --- /dev/null +++ b/docs/with-figma/guides/translations/fr/how-to-get-sharable-design-link.md @@ -0,0 +1,41 @@ +--- +title: Comment obtenir un lien partageable vers un design Figma +description: Copiez un lien Figma vers une frame ou un fichier pour le partager ou l'utiliser dans des workflows Grida. +keywords: + - figma + - share link + - design link + - grida +format: md +doc_tasks: + - update +--- + +# Comment obtenir un lien partageable vers un design Figma + +## Copier un lien vers une frame + +1. Ouvrez le fichier Figma et allez à la frame que vous voulez partager. +2. Faites un clic droit sur la frame. +3. Ouvrez **Copy/Paste as**. +4. Sélectionnez **Copy link**. + +Vous avez maintenant un lien direct vers cette frame. Vous pouvez le partager avec vos collaborateurs ou l'utiliser comme entrée dans des workflows Grida. + +## Copier un lien vers tout le fichier + +1. Ouvrez le fichier Figma. +2. Cliquez sur **Share** en haut à droite. +3. Cliquez sur **Copy link**. + +L'URL copiée peut inclure un paramètre de requête `node-id`, par exemple : + +```txt +https://www.figma.com/file/XXXXXXX/example-file?node-id=0%3A1 +``` + +Si vous voulez un lien vers tout le fichier plutôt que vers un nœud spécifique, supprimez la partie `?node-id=...` afin que l'URL ressemble à ceci : + +```txt +https://www.figma.com/file/XXXXXXX/example-file +``` diff --git a/docs/with-figma/guides/translations/ja/how-to-get-fig-file.md b/docs/with-figma/guides/translations/ja/how-to-get-fig-file.md new file mode 100644 index 0000000000..3a0c49d2f3 --- /dev/null +++ b/docs/with-figma/guides/translations/ja/how-to-get-fig-file.md @@ -0,0 +1,111 @@ +--- +title: Figma からローカル .fig コピーを保存する方法 +description: Grida にインポートするために Figma からローカル `.fig` ファイルをダウンロードする方法です。 +keywords: + - figma + - fig file + - import + - grida +format: md +doc_tasks: + - update +--- + +# Figma からローカル .fig コピーを保存する方法 + +このガイドでは、Grida にインポートするために Figma から `.fig` ファイルをダウンロードする方法を説明します。 + +> **Note:** `.fig` ファイル形式は Figma 独自のものであり、予告なく変更される可能性があります。`.fig` ファイルのインポートで問題が起きた場合は、[issue を報告する](https://github.com/gridaco/grida/issues) かサポートへ連絡してください。 + +## Requirements + +- ファイルに対して少なくとも **can view** 権限が必要です +- ファイルオーナーがコピーや共有を制限していない必要があります +- **Save local copy** オプションが見えない場合は、ファイルオーナーに確認してください + +## Figma Desktop または Web の場合 + +1. Figma ファイルを開きます +2. **Main menu**（左上）をクリックします +3. **File → Save local copy...** を開きます +4. 保存先を選びます +5. **Save** をクリックします + +ファイルは `.fig` 拡張子で保存されます（Figma Design files）。 + +## OS ごとの保存場所 + +保存後、`.fig` ファイルは選択した場所で見つけられます。 + +**macOS** + +- デフォルトの Downloads フォルダ: `~/Downloads/` +- カスタム保存先: 保存時に選んだ場所 + +**Windows** + +- デフォルトの Downloads フォルダ: `C:\Users\YourUsername\Downloads\` +- カスタム保存先: 保存時に選んだ場所 + +**Linux** + +- デフォルトの Downloads フォルダ: `~/Downloads/` +- カスタム保存先: 保存時に選んだ場所 + +## `.fig` ファイルに含まれるもの + +`.fig` ファイルには次の内容が含まれます。 + +- Figma ドキュメント内のすべてのページ（キャンバス） +- プロパティを含む完全なノード階層 +- ベクターデータ、fills、strokes、effects +- テキスト内容とスタイル +- コンポーネント定義とインスタンス + +**含まれないもの:** + +- バージョン履歴 +- コメント +- 元のファイルとの接続（インポート後は新しいファイルとして扱われます） + +## Grida へインポートする + +`.fig` ファイルを用意したら: + +1. Grida Canvas playground を開きます +2. 左上のロゴメニューをクリックします +3. **Import Figma** を選びます +4. **.fig File** タブで **Select .fig File** をクリックします +5. ダウンロードした `.fig` ファイルを選びます +6. インポートされるページを確認します +7. **Yes, Import** をクリックします + +各 Figma ページは Grida scene に変換されます。 + +> **Note:** インポートされたファイル内のコンポーネントは新しい main component になります。インスタンスはその新しいコンポーネントに接続され、元の Figma ファイルから更新を受け取り続けることはありません。 + +## Troubleshooting + +**"Save local copy" オプションが見つからない** + +- ファイルオーナーがコピーや共有を制限している可能性があります +- 権限が不足している可能性があります（少なくとも `"can view"` が必要です） +- ファイルオーナーにアクセスを依頼するか、代わりにダウンロードしてもらってください + +**".fig file" の解析に失敗する** + +- Figma からダウンロードした有効な `.fig` ファイルであることを確認してください +- もう一度ダウンロードしてみてください +- ファイルが破損していないか確認してください +- `.fig` 形式が変更された可能性があります + +**"No pages found"** + +- `.fig` ファイルが空か、キャンバスノードを含んでいない可能性があります +- Figma で開いて実際に内容があるか確認してください + +## Related Resources + +- [Figma Help: Save a local copy of files](https://help.figma.com/hc/en-us/articles/8403626871063-Save-a-local-copy-of-files) +- [Figma Help: Download files from Figma](https://help.figma.com/hc/en-us/articles/360041003114-Download-files-from-Figma) +- [Copy & Paste from Figma](../../editor/features/copy-paste-figma.md) - クリップボードを使う代替インポート方法 diff --git a/docs/with-figma/guides/translations/ja/how-to-get-personal-access-token.md b/docs/with-figma/guides/translations/ja/how-to-get-personal-access-token.md new file mode 100644 index 0000000000..49f065670e --- /dev/null +++ b/docs/with-figma/guides/translations/ja/how-to-get-personal-access-token.md @@ -0,0 +1,36 @@ +--- +title: Figma personal access token を取得する方法 +description: Grida のワークフローで Figma API へ直接アクセスする必要がある場合に使う personal access token の作成方法です。 +keywords: + - figma + - personal access token + - api token + - grida +format: md +doc_tasks: + - update +--- + +# Figma personal access token を取得する方法 + +Figma で personal access token を作成する手順は次のとおりです。 + +1. Figma アカウントにサインインします。 +2. [Figma developers: personal access tokens](https://www.figma.com/developers/api#access-tokens) を開きます。 +3. **Get personal access token** をクリックします。 +4. Figma が求める場合は、トークンのラベルを入力します。 +5. 生成されたトークン値をコピーし、安全な場所に保管します。 + +## `personalAccessToken` が必要になる場合 + +ほとんどの Grida 製品では組み込みの Figma 認証を使いますが、一部のワークフローでは明示的な `personalAccessToken` が必要です。 + +代表的なケース: + +- まだ完全な OAuth フローへ移行していない内部向けまたはベータ機能 +- Figma API に直接アクセスするスクリプトやツール +- 一時的に別の Figma アカウントで認証する必要があるワークフロー + +## Security note + +personal access token はパスワードと同じように扱ってください。公開ドキュメント、スクリーンショット、issue スレッドに貼り付けないでください。 diff --git a/docs/with-figma/guides/translations/ja/how-to-get-sharable-design-link.md b/docs/with-figma/guides/translations/ja/how-to-get-sharable-design-link.md new file mode 100644 index 0000000000..a5e069d23f --- /dev/null +++ b/docs/with-figma/guides/translations/ja/how-to-get-sharable-design-link.md @@ -0,0 +1,41 @@ +--- +title: 共有可能な Figma デザインリンクを取得する方法 +description: フレームまたはファイルへの Figma リンクをコピーして共有したり、Grida のワークフローで使ったりする方法です。 +keywords: + - figma + - share link + - design link + - grida +format: md +doc_tasks: + - update +--- + +# 共有可能な Figma デザインリンクを取得する方法 + +## フレームへのリンクをコピーする + +1. Figma ファイルを開き、共有したいフレームへ移動します。 +2. フレームを右クリックします。 +3. **Copy/Paste as** を開きます。 +4. **Copy link** を選びます。 + +これで、そのフレームに直接リンクする URL を取得できます。共同作業者に共有したり、Grida のワークフロー入力として使えます。 + +## ファイル全体へのリンクをコピーする + +1. Figma ファイルを開きます。 +2. 右上の **Share** をクリックします。 +3. **Copy link** をクリックします。 + +コピーされた URL には、次のように `node-id` クエリパラメータが含まれる場合があります。 + +```txt +https://www.figma.com/file/XXXXXXX/example-file?node-id=0%3A1 +``` + +特定ノードではなくファイル全体へのリンクが必要な場合は、`?node-id=...` 部分を削除して次のようにします。 + +```txt +https://www.figma.com/file/XXXXXXX/example-file +``` diff --git a/docs/with-figma/guides/translations/ko/how-to-get-fig-file.md b/docs/with-figma/guides/translations/ko/how-to-get-fig-file.md new file mode 100644 index 0000000000..bf9b7d8c7d --- /dev/null +++ b/docs/with-figma/guides/translations/ko/how-to-get-fig-file.md @@ -0,0 +1,111 @@ +--- +title: Figma에서 로컬 .fig 파일 저장하기 +description: Grida로 가져오기 위해 Figma에서 로컬 `.fig` 파일을 다운로드하는 방법입니다. +keywords: + - figma + - fig 파일 + - 가져오기 + - grida +format: md +doc_tasks: + - update +--- + +# Figma에서 로컬 .fig 파일 저장하기 + +이 가이드는 Grida로 가져올 수 있도록 Figma에서 `.fig` 파일을 다운로드하는 방법을 설명합니다. + +> **참고:** `.fig` 파일 형식은 Figma의 독점 포맷이며 예고 없이 바뀔 수 있습니다. `.fig` 파일 가져오기에 문제가 생기면 [이슈를 남겨 주세요](https://github.com/gridaco/grida/issues) 또는 지원팀에 문의해 주세요. + +## 요구 사항 + +- 최소 **can view** 권한이 있어야 합니다 +- 파일 소유자가 복사 및 공유를 제한하지 않아야 합니다 +- **Save local copy** 메뉴가 보이지 않으면 파일 소유자에게 문의하세요 + +## Figma Desktop 또는 Web에서 저장하기 + +1. Figma 파일을 엽니다. +2. 왼쪽 위의 **Main menu**를 클릭합니다. +3. **File → Save local copy...**로 이동합니다. +4. 저장할 위치를 선택합니다. +5. **Save**를 클릭합니다. + +파일은 `.fig` 확장자로 저장됩니다. + +## 운영체제별 파일 위치 + +저장 후 `.fig` 파일은 선택한 위치에서 찾을 수 있습니다. + +**macOS** + +- 기본 Downloads 폴더: `~/Downloads/` +- 사용자 지정 위치: 저장할 때 직접 선택한 위치 + +**Windows** + +- 기본 Downloads 폴더: `C:\Users\YourUsername\Downloads\` +- 사용자 지정 위치: 저장할 때 직접 선택한 위치 + +**Linux** + +- 기본 Downloads 폴더: `~/Downloads/` +- 사용자 지정 위치: 저장할 때 직접 선택한 위치 + +## `.fig` 파일에 포함되는 내용 + +`.fig` 파일에는 다음이 포함됩니다. + +- Figma 문서의 모든 페이지(캔버스) +- 속성을 포함한 전체 노드 계층 구조 +- 벡터 데이터, 채우기, 스트로크, 효과 +- 텍스트 내용과 스타일 +- 컴포넌트 정의와 인스턴스 + +**포함되지 않는 항목:** + +- 버전 히스토리 +- 댓글 +- 원본 Figma 파일과의 연결성(가져온 뒤에는 새 파일처럼 취급됨) + +## Grida로 가져오기 + +`.fig` 파일을 준비했다면: + +1. Grida Canvas playground를 엽니다. +2. 왼쪽 위 로고 메뉴를 클릭합니다. +3. **Import Figma**를 선택합니다. +4. **.fig File** 탭에서 **Select .fig File**을 클릭합니다. +5. 다운로드한 `.fig` 파일을 선택합니다. +6. 가져올 페이지를 검토합니다. +7. **Yes, Import**를 클릭합니다. + +각 Figma 페이지는 Grida scene으로 변환됩니다. + +> **참고:** 가져온 파일의 컴포넌트는 새로운 main component가 됩니다. 인스턴스는 이 새 컴포넌트에 연결되며 원본 Figma 파일의 업데이트를 계속 받지는 않습니다. + +## 문제 해결 + +**`Save local copy` 옵션이 보이지 않을 때** + +- 파일 소유자가 복사 및 공유를 제한했을 수 있습니다 +- 권한이 충분하지 않을 수 있습니다. 최소 `"can view"` 권한이 필요합니다 +- 파일 소유자에게 권한 요청 또는 다운로드를 부탁하세요 + +**`.fig file` 파싱 실패** + +- Figma에서 받은 유효한 `.fig` 파일인지 확인하세요 +- 파일을 다시 다운로드해 보세요 +- 파일이 손상되지 않았는지 확인하세요 +- `.fig` 포맷이 변경되었을 수 있습니다 + +**페이지를 찾을 수 없음** + +- `.fig` 파일이 비어 있거나 캔버스 노드가 없을 수 있습니다 +- Figma에서 파일을 열어 실제 콘텐츠가 있는지 확인하세요 + +## 관련 자료 + +- [Figma Help: Save a local copy of files](https://help.figma.com/hc/en-us/articles/8403626871063-Save-a-local-copy-of-files) +- [Figma Help: Download files from Figma](https://help.figma.com/hc/en-us/articles/360041003114-Download-files-from-Figma) +- [Figma에서 복사 & 붙여넣기](../../editor/features/copy-paste-figma.md) - 클립보드 기반 대안 가져오기 방식 diff --git a/docs/with-figma/guides/translations/ko/how-to-get-personal-access-token.md b/docs/with-figma/guides/translations/ko/how-to-get-personal-access-token.md new file mode 100644 index 0000000000..48faaa773d --- /dev/null +++ b/docs/with-figma/guides/translations/ko/how-to-get-personal-access-token.md @@ -0,0 +1,36 @@ +--- +title: Figma personal access token 가져오기 +description: Grida 워크플로우에서 직접 Figma API 접근이 필요할 때 사용할 personal access token을 생성하는 방법입니다. +keywords: + - figma + - personal access token + - api token + - grida +format: md +doc_tasks: + - update +--- + +# Figma personal access token 가져오기 + +다음 순서로 Figma personal access token을 생성할 수 있습니다. + +1. Figma 계정에 로그인합니다. +2. [Figma developers: personal access tokens](https://www.figma.com/developers/api#access-tokens) 페이지를 엽니다. +3. **Get personal access token**을 클릭합니다. +4. 필요하다면 토큰 이름 또는 라벨을 입력합니다. +5. 생성된 토큰 값을 복사해서 안전한 곳에 보관합니다. + +## `personalAccessToken`이 필요한 경우 + +대부분의 Grida 제품은 기본 Figma 인증 흐름을 사용하지만, 일부 워크플로우에서는 명시적인 `personalAccessToken`이 필요합니다. + +대표적인 경우: + +- 아직 OAuth 흐름이 완전히 적용되지 않은 내부 또는 베타 기능 +- Figma API에 직접 접근하는 스크립트나 도구 +- 다른 Figma 계정으로 일시적으로 인증해야 하는 경우 + +## 보안 주의사항 + +personal access token은 비밀번호처럼 취급해야 합니다. 공개 문서, 스크린샷, 이슈 댓글에 노출하지 마세요. diff --git a/docs/with-figma/guides/translations/ko/how-to-get-sharable-design-link.md b/docs/with-figma/guides/translations/ko/how-to-get-sharable-design-link.md new file mode 100644 index 0000000000..d3d78f69c8 --- /dev/null +++ b/docs/with-figma/guides/translations/ko/how-to-get-sharable-design-link.md @@ -0,0 +1,41 @@ +--- +title: 공유 가능한 Figma 디자인 링크 가져오기 +description: 프레임 또는 파일 링크를 복사해 공유하거나 Grida 워크플로우에 사용하는 방법입니다. +keywords: + - figma + - 공유 링크 + - 디자인 링크 + - grida +format: md +doc_tasks: + - update +--- + +# 공유 가능한 Figma 디자인 링크 가져오기 + +## 프레임 링크 복사하기 + +1. Figma 파일을 열고 공유하려는 프레임으로 이동합니다. +2. 프레임을 우클릭합니다. +3. **Copy/Paste as**를 엽니다. +4. **Copy link**를 선택합니다. + +이제 해당 프레임으로 바로 연결되는 링크가 복사됩니다. 팀원과 공유하거나 Grida 워크플로우 입력값으로 사용할 수 있습니다. + +## 파일 전체 링크 복사하기 + +1. Figma 파일을 엽니다. +2. 오른쪽 위의 **Share**를 클릭합니다. +3. **Copy link**를 클릭합니다. + +복사된 URL에는 다음처럼 `node-id` 쿼리 파라미터가 포함될 수 있습니다. + +```txt +https://www.figma.com/file/XXXXXXX/example-file?node-id=0%3A1 +``` + +특정 노드가 아니라 파일 전체를 가리키는 링크가 필요하다면 `?node-id=...` 부분을 제거해 다음 형태로 사용하세요. + +```txt +https://www.figma.com/file/XXXXXXX/example-file +``` diff --git a/docs/with-figma/guides/translations/meta.json b/docs/with-figma/guides/translations/meta.json new file mode 100644 index 0000000000..8aad8fab3b --- /dev/null +++ b/docs/with-figma/guides/translations/meta.json @@ -0,0 +1,3 @@ +{ + "translations": ["ko", "ja", "fr"] +} diff --git a/docs/with-figma/index.md b/docs/with-figma/index.md index a7a2709b3b..c114a4b150 100644 --- a/docs/with-figma/index.md +++ b/docs/with-figma/index.md @@ -1,3 +1,17 @@ +--- +title: Grida with Figma +description: Learn how Grida works with Figma, including Assistant docs, import workflows, and practical setup guides. +keywords: + - grida + - figma + - import + - assistant + - design workflow +format: md +doc_tasks: + - update +--- + # Grida with Figma Grida provides seamless integration with Figma, enabling designers to transfer work between tools without friction. @@ -48,8 +62,8 @@ The conversion pipeline maps Figma properties to Grida equivalents: ## Guides -- [How to get Personal Access Token](./guides/how-to-get-personal-access-token.md) -- [How to get Sharable Design Link](./guides/how-to-get-sharable-design-link.md) +- [How to get a Figma personal access token](./guides/how-to-get-personal-access-token.md) +- [How to get a shareable Figma design link](./guides/how-to-get-sharable-design-link.md) - [How to save a local .fig copy](./guides/how-to-get-fig-file.md) ## Technical Details diff --git a/docs/with-figma/translations/fr/index.md b/docs/with-figma/translations/fr/index.md new file mode 100644 index 0000000000..f6083d6468 --- /dev/null +++ b/docs/with-figma/translations/fr/index.md @@ -0,0 +1,74 @@ +--- +title: Grida avec Figma +description: Apprenez comment Grida fonctionne avec Figma, y compris les docs Assistant, les workflows d'import et les guides pratiques de configuration. +keywords: + - grida + - figma + - import + - assistant + - design workflow +format: md +doc_tasks: + - update +--- + +# Grida avec Figma + +Grida s'intègre naturellement à Figma, ce qui permet aux designers de transférer leur travail entre les deux outils sans friction. + +> **⚠️ Important** +> +> L'intégration presse-papiers avec Figma repose sur le format interne de Figma, qui peut changer sans préavis. Si le collage depuis Figma cesse de fonctionner, veuillez [signaler un problème](https://github.com/gridaco/grida/issues/new). + +## Fonctionnalités + +### Assistant + +La documentation Grida Assistant maintenue se trouve maintenant dans cette section : + +- [Assistant](./assistant/01-intro.mdx) +- [Design Assistant](./assistant/design-assistant/index.mdx) + +### Importer depuis Figma + +Copiez des nœuds depuis Figma et collez-les directement dans Grida. L'éditeur détecte automatiquement le format du presse-papiers Figma et convertit les nœuds vers le format natif Grida, en préservant : + +- la hiérarchie et la structure des nœuds +- les propriétés visuelles (fills, strokes, effects, transforms) +- les styles et contenus texte +- les données vectorielles et les paths +- les relations entre composants + +**En savoir plus** : [Copy & Paste from Figma](../editor/features/copy-paste-figma.md) + +### Types de nœuds pris en charge + +Grida prend en charge l'import des types de nœuds Figma les plus courants : + +- **Conteneurs** : Frames, Components, Component Instances, Sections, Groups +- **Formes** : Rectangles, Ellipses, Lines, Polygons, Stars +- **Vecteurs** : Vector paths, Boolean operations +- **Texte** : Text nodes avec préservation complète du style + +### Compatibilité des propriétés + +Le pipeline de conversion mappe les propriétés Figma vers leurs équivalents Grida : + +- **Effects** : Drop shadows, inner shadows, layer blur, background blur +- **Strokes** : Weight, align, cap, join, dash patterns, miter limit +- **Fills** : Solid colors, gradients (linear, radial, angular, diamond), images +- **Corners** : Radius, smoothing, individual corner radii +- **Transforms** : Position, size, rotation (extraite de la matrice) + +## Guides + +- [Comment obtenir un token d'accès personnel Figma](./guides/how-to-get-personal-access-token.md) +- [Comment obtenir un lien partageable vers un design Figma](./guides/how-to-get-sharable-design-link.md) +- [Comment enregistrer une copie locale en `.fig`](./guides/how-to-get-fig-file.md) + +## Détails techniques + +Pour les détails d'implémentation et l'architecture du pipeline de conversion, voir : + +- [Figma Import Technical Spec](../editor/features/copy-paste-figma.md) +- [Figma IO Package Documentation](https://grida.co/docs/reference/io-figma) diff --git a/docs/with-figma/translations/ja/index.md b/docs/with-figma/translations/ja/index.md new file mode 100644 index 0000000000..dcbb6852be --- /dev/null +++ b/docs/with-figma/translations/ja/index.md @@ -0,0 +1,74 @@ +--- +title: Grida と Figma +description: Assistant 文書、インポートワークフロー、実務向けセットアップガイドを含む Grida と Figma の連携文書です。 +keywords: + - grida + - figma + - import + - assistant + - design workflow +format: md +doc_tasks: + - update +--- + +# Grida と Figma + +Grida は Figma と自然に連携し、デザイナーがツール間を行き来しながら作業できるようにします。 + +> **⚠️ Important Notice** +> +> Figma のクリップボード連携は Figma の内部フォーマットに依存しているため、予告なく変更される場合があります。Figma からの貼り付けが突然動かなくなった場合は、[issue を報告してください](https://github.com/gridaco/grida/issues/new)。 + +## Features + +### Assistant + +現在保守されている Grida Assistant の文書は、このセクションにあります。 + +- [Assistant](./assistant/01-intro.mdx) +- [Design Assistant](./assistant/design-assistant/index.mdx) + +### Figma からインポート + +Figma でノードをコピーし、そのまま Grida に貼り付けられます。エディタは Figma のクリップボード形式を自動検出し、Grida のネイティブ形式へ変換します。変換時には次の情報をできるだけ保持します。 + +- ノード階層と構造 +- 視覚プロパティ（fills、strokes、effects、transforms） +- テキストスタイルと内容 +- ベクターデータとパス +- コンポーネント関係 + +**詳細**: [Copy & Paste from Figma](../editor/features/copy-paste-figma.md) + +### 対応ノードタイプ + +Grida は一般的な Figma ノードタイプをインポートできます。 + +- **コンテナ**: Frames, Components, Component Instances, Sections, Groups +- **シェイプ**: Rectangles, Ellipses, Lines, Polygons, Stars +- **ベクター**: Vector paths, Boolean operations +- **テキスト**: スタイルを保持した Text nodes + +### プロパティ互換性 + +変換パイプラインは、次の Figma プロパティを Grida の対応表現へマッピングします。 + +- **Effects**: Drop shadows, inner shadows, layer blur, background blur +- **Strokes**: Weight, align, cap, join, dash patterns, miter limit +- **Fills**: Solid colors, gradients (linear, radial, angular, diamond), images +- **Corners**: Radius, smoothing, individual corner radii +- **Transforms**: Position, size, rotation (matrix から抽出) + +## Guides + +- [Figma personal access token を取得する方法](./guides/how-to-get-personal-access-token.md) +- [共有可能な Figma デザインリンクを取得する方法](./guides/how-to-get-sharable-design-link.md) +- [ローカル `.fig` コピーを保存する方法](./guides/how-to-get-fig-file.md) + +## Technical Details + +実装詳細と変換パイプラインのアーキテクチャについては、次を参照してください。 + +- [Figma Import Technical Spec](../editor/features/copy-paste-figma.md) +- [Figma IO Package Documentation](https://grida.co/docs/reference/io-figma) diff --git a/docs/with-figma/translations/ko/index.md b/docs/with-figma/translations/ko/index.md new file mode 100644 index 0000000000..eb170d9a0c --- /dev/null +++ b/docs/with-figma/translations/ko/index.md @@ -0,0 +1,74 @@ +--- +title: Grida와 Figma +description: Assistant 문서, 가져오기 워크플로우, 실무 가이드를 포함한 Grida와 Figma 연동 문서입니다. +keywords: + - grida + - figma + - 가져오기 + - assistant + - 디자인 워크플로우 +format: md +doc_tasks: + - update +--- + +# Grida와 Figma + +Grida는 Figma와 자연스럽게 연결되어 디자이너가 도구 사이를 오가며 작업할 수 있도록 돕습니다. + +> **⚠️ 중요 안내** +> +> Figma 클립보드 연동은 Figma 내부 포맷에 의존하므로 예고 없이 변경될 수 있습니다. Figma에서 붙여넣기가 갑자기 동작하지 않으면 [이슈를 남겨 주세요](https://github.com/gridaco/grida/issues/new). + +## 기능 + +### Assistant + +현재 유지 관리되는 Grida Assistant 문서는 다음 위치에 있습니다. + +- [Assistant](./assistant/01-intro.mdx) +- [Design Assistant](./assistant/design-assistant/index.mdx) + +### Figma에서 가져오기 + +Figma에서 노드를 복사한 뒤 Grida에 바로 붙여넣을 수 있습니다. 에디터는 Figma 클립보드 포맷을 자동으로 감지하고 Grida 포맷으로 변환하며, 다음 정보를 최대한 유지합니다. + +- 노드 계층 구조 +- 시각 속성(채우기, 스트로크, 효과, 변형) +- 텍스트 스타일과 내용 +- 벡터 데이터와 경로 +- 컴포넌트 관계 + +**자세히 보기**: [Figma에서 복사 & 붙여넣기](../editor/features/copy-paste-figma.md) + +### 지원 노드 유형 + +Grida는 일반적인 Figma 노드 유형을 가져올 수 있습니다. + +- **컨테이너**: Frame, Component, Component Instance, Section, Group +- **도형**: Rectangle, Ellipse, Line, Polygon, Star +- **벡터**: Vector path, Boolean operation +- **텍스트**: 스타일을 유지한 Text node + +### 속성 호환성 + +변환 파이프라인은 다음과 같은 Figma 속성을 Grida 속성으로 매핑합니다. + +- **효과**: Drop shadow, inner shadow, layer blur, background blur +- **스트로크**: 두께, 정렬, cap, join, dash pattern, miter limit +- **채우기**: 단색, 그라디언트(linear, radial, angular, diamond), 이미지 +- **코너**: 반경, smoothing, 개별 코너 반경 +- **변형**: 위치, 크기, 회전(matrix에서 추출) + +## 가이드 + +- [Figma personal access token 가져오기](./guides/how-to-get-personal-access-token.md) +- [공유 가능한 Figma 디자인 링크 가져오기](./guides/how-to-get-sharable-design-link.md) +- [로컬 `.fig` 파일 저장하기](./guides/how-to-get-fig-file.md) + +## 기술 세부사항 + +구현 세부사항과 변환 파이프라인 구조는 다음 문서를 참고하세요. + +- [Figma 가져오기 기술 문서](../editor/features/copy-paste-figma.md) +- [Figma IO 패키지 문서](https://grida.co/docs/reference/io-figma) diff --git a/docs/with-figma/translations/meta.json b/docs/with-figma/translations/meta.json new file mode 100644 index 0000000000..8aad8fab3b --- /dev/null +++ b/docs/with-figma/translations/meta.json @@ -0,0 +1,3 @@ +{ + "translations": ["ko", "ja", "fr"] +}