It amazes me how easily we adapt and respond to visuals. Not only is functionality important to software development, but design is also pretty important. Because time is a limited commodity, usability and intuition are important factors when encouraging users to adopt a new system. And generally, the visual elements of the system determine how quickly users are able to learn a new application. Design includes many different aspects – color, layout, fonts, sizes, etc. You have to be strategic with your design elements, including those micro-images we call icons. Those seemingly small symbols ultimately make a big impact on user navigability and comprehension.
Who else but Google has created a style guide for all of their applications and shared it on the interwebs for everyone to use. Material Design is basically a design language that Google created to unify digital interfaces and experiences. They offer lots of good UI/UX design ideas in this document and a bunch of free resources. Who doesn’t like free stuff? One of those free things is a whole set of icons, nice ones. You can browse through them here: https://material.io/icons/.
Let me show you how to use the icons in FileMaker Pro. From the Material Design site, you can download the icon in a variety of formats. The best format for FileMaker Pro is SVG, of course. One of my colleagues, through some research, trial and error figured out the best way to import these icons into FileMaker Pro.
Step 1: Select the icon and download it as an SVG.
Step 2: Open this file up in your friendly local text editor. When you open it up, it should look like this:
Step 3: Delete the line containing fill="none". This step is a bit tricky because the text might be in different places depending on the file. But you want to always delete the line that includes fill="none" text. Be sure to delete the entire line.
After deleting it, the file should look like this:
If you're wondering why you have to delete the line that includes the fill=“none” text, let me explain. Unlike some applications, FileMaker Pro only supports a single color icon so all the objects in the icon have to be the same color. The line you delete describes a square that is the same size as the icon itself (24x24). If we leave this line in place, it will draw a 24x24 square covering the icon, resulting in a 24x24 solid square icon in the color you choose…not that useful. Another option would be to change the size of the square so instead of “0h24v24H0z” (24x24) it would be “0h0v0H0z” (0x0), then it would just disappear.
Step 4: Import into FileMaker Pro! Create a button then navigate to the icon editing options. Click the plus (+) button to import the file you just edited.
Select the file and you’re done! You should now have that fancy new icon from the omniscient Google in your FileMaker solution.
You can watch a demo here.
Good luck! And special thanks to Matt Stanford at The Support Group for figuring this out in the first place. Let us know if you get stuck or have any questions.
And let us introduce you to placeholders.
Feature photo by Harpal Singh on Unsplash