# Manipuler les objets

## Insérer des objets

### Raccourcis

| Action               | Raccourcis |
| -------------------- | ---------- |
| Insérer un rectangle | R          |
| Insérer un oval      | O          |
| Insérer un artboard  | A          |
| Insérer une ligne    | L          |
| Insérer du texte     | T          |

## Positionnement

### Bonnes pratiques

{% hint style="success" %}
**DOs**

* Placer des guides pour les marges de page globales
* Avoir et connaître sa grille de [marges](https://bamtech.gitbook.io/ux-ui-standards/ui-standards/margins)
* Bien positionner son élément immédiatement
  {% endhint %}

{% hint style="danger" %}
**DON'Ts**

* Placer les éléments à l'oeil uniquement
* Placer les éléments sur des fractions de pixels (19,34...)
  {% endhint %}

### Raccourcis

| Action                                                               | Raccourcis                     |
| -------------------------------------------------------------------- | ------------------------------ |
| Déplacer la sélection de 1pt dans une direction                      | ← → ↑ ↓                        |
| Déplacer la sélection de 10pt dans une direction                     | shift  +  ← → ↑ ↓              |
| Toggle affichage des guides                                          | ctrl + R                       |
| Mesurer la distance entre un élément sélectionné et un autre élément | hold alt + hover sur l'élément |
| Sélectionner un élément dans un groupe (sans ouvrir le groupe)       | cmd + click                    |
| Garder un alignement au déplacement                                  | shift + déplacement            |

## Dimensionnement

### Bonnes pratiques

{% hint style="success" %}
**DOs**

* Dimensionner les éléments sur la même grille que la grille de marges
* Mettre les éléments à la bonne dimension dès qu'ils sont placés
  {% endhint %}

{% hint style="info" %}
**TIPS :**

* On peut facilement redimensionner les éléments en faisant des calculs simples (+ - \* / %) dans les inputs de l'inspecteur
  {% endhint %}

{% hint style="danger" %}
**DON'Ts**

* Dimensionner les éléments à l'oeil uniquement
  {% endhint %}

### Raccourcis

| Action                                                                | Raccourcis            |
| --------------------------------------------------------------------- | --------------------- |
| Redimensionner un élément en gardant les proportions                  | shift + click & drag  |
| Redimensionner un élément sélectionné d'1pt                           | cmd + ← → ↑ ↓         |
| Redimensionner un élément sélectionné de 10pt                         | shift + cmd + ← → ↑ ↓ |
| Focus le premier input dans l'inspecteur pour une élément sélectionné | alt + tab             |
| Passer au prochain input dans l'inspecteur                            | tab                   |

## Edition

### Bonnes pratiques

{% hint style="success" %}
**DOs**

* Utiliser des layer styles pour des styles qui se répètent souvent comme les ombres et les dégradés
* Ajouter toutes les couleurs du Styleguide dans les couleurs de document
  {% endhint %}

{% hint style="info" %}
**TIPS :**

* Edit > Find and Replace Color pour remplacer une couleur par une autre partout dans le fichier Sketch
  {% endhint %}

### Raccourcis

| Action                                            | Raccourcis |
| ------------------------------------------------- | ---------- |
| Toggle les bordures d'un objet                    | B          |
| Toggle le fill d'un objet                         | F          |
| Utiliser le color picker pour l'objet sélectionné | ctrl + C   |