Figma est un super outil vectoriel, mais, paradoxalement, il lui manque quelques formats vectoriels d’importation.
Imaginons que l’on vous fasse parvenir un fichier EPS, PDF ou AI (et, surtout pour ce dernier que vous n’ayez pas la suite Adobe sous la main — Illustrator/Acrobat Pro —).
Il vous est impossible de l’importer/convertir directement dans Figma en format SVG, un comble, d’autant que PDF et EPS sont des formats d’export de Figma!
Workflow/Plusieurs méthodes …
Méthode 1
Étape 1 : AI to PDF via un lecteur PDF
- Ouvrez le fichier .AI ou .EPS dans Aperçu [Mac], Acrobat Reader ou autre. (oui, Aperçu sait lire et afficher un .ai/.eps en conservant les données vectoriel).
- Exportez au format PDF
Étape 2 : PDF/EPS to SVG
- Si vous avez Sketch vous pouvez ouvrir le PDF ou directement un fichier .eps (qui est un format d’import reconnu par Sketch) puis :
- Soit l’exporter en SVG.
- Soit Utiliser la commande “Copy SVG Code” avec un clic-droit sur l’objet puis le coller dans Figma.
- Si vous n’avez pas Sketch, vous pouvez télécharger Inkscape qui est un éditeur vectoriel OpenSource, le copier-coller entre les Inkscape et Figma fonctionne, apparemment.
Méthode 2
En utilisant un service de conversion en ligne comme convertio.co.
Note sur les conversions SVG
Premièrement, et surtout!, ne convertissez en SVG que depuis une source vectorielle, PDF ou EPS… Ne jamais partir d’un fichier Bitmap (Gif, JPG, PNG, etc…).
Les fichiers issus de convert.io, de même que ceux issus d’une conversion directe eps > sketch, peuvent avoir des différences ou des interprétations “exotiques”.
Par exemple, mauvaise interprétation des couleurs/dégradés, des masques ou groupes. Un logo noir peut apparaître “cyan” dans Sketch après conversion, ou avoir un décalage d’un pixel (décimale non arrondie).
C’est pourquoi je recommande de vérifier le rendu de l’EPS ou du AI dans Aperçu ou un lecteur PDF et de faire les ajustements nécessaires dans Sketch ou Figma.
Optimisation SVG
Vous pouvez (devriez) utiliser un outil tel qu’ImageOptim‘ pour alléger votre SVG (et autres formats d’image web) des informations inutiles. Le gain peut être de 20 à 50%. ImageOptim s’intègre à la fonction d’export de Sketch/Figma et compresse à la volée.
Exemple, j’exporte de Sketch ou Figma, le SVG passe à la moulinette automatiquement. Si vous souhaitez exporter un FULL SVG, il faudra penser à désactiver momentanément la compression.
Hope that helps!
