Yep, his new tool will make his last one obsolete. This would allow everyone at Microsoft to organize and search for icons much more easily inside Figma without having to go through an intermediary tool. Plans for the future So, what’s next for our tireless overachiever? 😉 In the coming months Jackie wants to develop a converter that, with one click, could take all 4000+ icons from his Icon Library and turn them into Figma components.
Once he’s done building the last few features and fixing the remaining bugs, he’ll share it more publicly to other Microsoft teams to extend the tool’s impact. His coworkers are helping him find bugs and suggesting new features, however it’s already wormed itself into many designers’ workflow. Instantly it was a hit (see pile of emails below for evidence.)Ĭurrently, Jackie’s working on a V2 of his Icon Library. At this point he didn’t think too much about the distribution, he just sent a simple email with a link to the tool to his team, then it spread to the rest of the design studio through word-of-mouth. He hosted the tool on Microsoft Azure, a cloud-computing service for building and managing services and applications that is open to the public. DistributionĪfter three weeks of not sleeping a whole lot, the first version of his Icon Library was ready. He copied the list of icon names into an Excel spreadsheet then converted that into a JSON file to use in his code. Presto. Next he found a Microsoft documentation page with all the icons and their corresponding class names used by engineers. He downloaded and extracted the files and got the actual unicode characters of each icon. What Jackie’s tool does is allow designers to search and copy the ‘icon character’ easily in one central location. Previously, designers had to keep a file with a bunch of icon characters that they used often so they could copy and paste in their designs. Instead, you have to copy the ‘icon character’ and paste it into your design to use. The challenge with icons is that you cannot ‘type’ the icons using your keyboard since there are many more characters than keys on a keyboard.
Collect and extract the icons from the company’s repositoryįor those not in the know, icons are normally stored in a font file. With a real problem in mind that needed fixing, he felt more than motivated to learn along the way.ģ.
Apps like iconjar how to#
For example, Meteor’s tutorial taught Jackie how to build a database for a to-do list, and he extended that concept to creating a database for his icon library. He took a React tutorial on Meteor’s website, and applied what he learned to build the icon library. It allowed him to build both the front-end and back-end databases without spending too much time mastering a new programming language. He had some experience with HTML, CSS and Javascript from creating his portfolio website, so he decided to leverage that existing knowledge by tapping a beginner-friendly Javascript library called Meteor.js. Once he was finished with the design, he needed to build it. (These days Jackie uses Figma - we’ve become the primary design tool for Microsoft’s Cloud and AI design studio teams 💪.) He took inspiration from IconJar’s design and mocked up a similar version, styling it in Microsoft’s Fabric design language. Design and develop your tool with the wisdom of a designer and engineerĪs an early step, he built a basic version of his planned icon library’s UI in Sketch. He wanted to keep the project a secret and launch it as a fun surprise for his coworkers, so he worked on it after-hours. He decided he’d need to build a tool from scratch to meet the company’s unique needs.
Apps like iconjar mac#
It was Mac only - a big turn-off to the company who created Windows.It wasn’t browser-based, meaning the icons couldn’t live in the cloud.Jackie knew he wanted everyone the autonomy to contribute tags for icons. It didn’t have the ability to share and crowdsource tags.The best Icon Library with organizing and copy/paste capabilities that he could find was IconJar, but it still lacked several features Microsoft needed: Next, he looked for existing products on the market. He talked to several designers at Microsoft and watched their design processes in action to best understand their icon issues. Research the competitive landscape and your users’ needsįirst, like any designer worth their salt, Jackie did his preliminary research.
0 kommentar(er)
