Aller au contenu
  • billets
    33
  • commentaire
    1
  • vues
    866

Comment utiliser les icônes Material Design dans FileMaker ?

FileMaker, Inc

111 vues

Cette article est une version traduite de l’article d’origine publié par The Support Group, membre Platinum de FileMaker Business Alliance.

1*lxKEhxEox8u4uGA3iFJLfw.png

Je suis toujours étonné de voir à quel point nous nous adaptons et réagissons facilement aux visuels. Non seulement la fonctionnalité est importante pour le développement de logiciels, mais le design est également très important. Puisque le temps est une ressource limitée, l’ergonomie et l’intuitivité sont des facteurs clés pour encourager les utilisateurs à adopter une nouvelle application. En général, les éléments visuels déterminent la rapidité avec laquelle les utilisateurs peuvent s’approprier une nouvelle application. Le design comprend de multiples et diverses aspects — la couleur, la mise en page, les polices, les tailles, etc. Il convient donc d’être stratégique avec les éléments de design, y compris les micro-images que nous appelons icônes. Ces symboles, en apparence petits, ont en fait un grand impact sur la navigabilité pour l’utilisateur et sa compréhension d’une application.

Qui d’autre que Google a créé un guide de style pour toutes ses applications et l’a partagé sur les interwebs pour que tout le monde puisse l’utiliser. Material Design est essentiellement un langage de design que Google a créé pour unifier les interfaces et les expériences digitales. Ces derniers offrent de nombreuses bonnes idées de conception UI / UX dans ce document et un tas de ressources gratuites. Qui n’aime pas les trucs gratuits? Une de ces choses gratuites est un ensemble de belles icônes. Vous pouvez les consulter ici: https://material.io/icons/.

Laissez-moi vous montrer comment utiliser ces icônes dans FileMaker. Sur le site Material Design, vous pouvez télécharger l’icône dans différents formats. Le meilleur format pour FileMaker est, bien sûr, SVG. Un de mes collègues, à travers des recherches, des essais et quelques erreurs a trouvé le meilleur moyen d’importer ces icônes dans FileMaker Pro.

Étape 1: Sélectionnez l’icône et téléchargez-la en tant que SVG.

1*28cIG_lf9_eupWyRIswK0Q.png

Étape 2: Ouvrez ce fichier dans votre éditeur de texte local convivial. Lorsque vous l’ouvrez, cela devrait ressembler à ceci:

1*IeqeETHUUiaTNrCckMUvOA.png

Étape 3: Supprimer la ligne contenant fill = “none”. Cette étape est un peu difficile car le texte peut se trouver à différents endroits en fonction du fichier. Mais il faut toujours supprimer la ligne qui contient le texte fill = “none”. Assurez-vous de supprimer toute la ligne.

1*NKeOGLl4XRb2tefCYjTVVg.png

Après l’avoir supprimée, le fichier devrait ressembler à ceci:

1*sF2H4eajsevMPhvYmGDcfQ.png

Si vous vous demandez pourquoi vous devez supprimer la ligne qui contient le texte fill = “none”, laissez-moi vous expliquer. Contrairement à certaines applications, FileMaker ne prend en charge qu’une seule icône de couleur, les objets de l’icône doivent donc être de la même couleur. La ligne que vous supprimez décrit un carré de la même taille que l’icône (24x24). Si nous laissons cette ligne en place, elle dessine un carré de 24x24 couvrant l’icône, ce qui donne une icône carrée de 24x24 dans la couleur que vous choisissez … pas très utile. Une autre option serait de changer la taille du carré donc au lieu de “0h24v24H0z” (24x24) ce serait “0h0v0H0z” (0x0), et il disparaitrait alors.

Étape 4: Importation dans FileMaker ! Créez un bouton, puis accédez aux options d’édition d’icône. Cliquez sur le bouton plus (+) pour importer le fichier que vous venez d’éditer.

1*klAgwuc7Dmi1nRuFotdbNg.png

Sélectionnez le fichier et vous avez terminé! Vous devriez maintenant avoir cette nouvelle icône de l’omniscient Google dans votre solution FileMaker.

1*f23El0TUhksgIpe9N1LzWA.png

Vous pouvez regarder une démo ici (en anglais).

Bonne chance! Et merci tout particulièrement à Matt Stanford de The Support Group pour avoir découvert cela en premier lieu.

Faites-nous savoir si vous rencontrez des difficultés ou si avez des questions.

Trouver plus de conseils et astuces sur FileMaker

Cet article a été rédigé par Eric Sterbenk et publié à l’origine sur le blog blog.supportgroup.com.

stat?event=post.clientViewed&referrerSource=full_rss&postId=fed4db2b6850

Comment utiliser les icônes Material Design dans FileMaker ? was originally published in FileMaker Fr on Medium, where people are continuing the conversation by highlighting and responding to this story.


Afficher la totalité du billet



0 Commentaire


Commentaires recommandés

Il n’y a aucun commentaire à afficher.

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant
×