I’m looking to find a full-time product design role in Berlin. I plan to expand on this idea at some point in time. I owe big time to the design team at Careem, who were so supportive in initiatives such as this one. Whipped up a name and an app icon and that's all, version one of Graphite was ready after a week or so. The Iconify Collection is a set of over 650 glyph icons. Supports a simple filter function to filter through the icons based on a search query. 650 Individual SVG files Adobe Illustrator composite file IconJar import included. Graphite displays all the icons within the viewport and loads more of them progressively when they scroll up to the New data structure that I would use within Graphite.Īpart from the "click to copy SVG to clipboard" part, everything else is pretty straight forward in terms of markup. All I needed to do is to manipulate the JSON file using JQ to create a The de-compressed file now contains a folder of icons and a JSON file with all the tags associated with them. Simply de-compressing the file using zlib seemed to do the trick. But here is an outline of my process and I'll spare you the majority of technical details forįirst, I needed to figure out a way to extract the tags from the Iconjar file that came with the streamline icon set. The point of side projects is to learn something new through experiments.Įven though it is very tempting to write a step by step tutorial of how I went about building Graphite, it is out of this case study's context.
#Iconjar file to json windows#
The audience included product designers, marketing designers, developers, and product managers, which meant that this application had to work on macOS, Windows and Linux. Most people in the team seemed to want a desktop application,Īnd they had their reasons that convinced me. I asked the team to choose between a menu bar application, web or a desktop app, the three possible forms of how this application could work.
Also, this tool was built for Microsoft's internal use and was not available for us. We already had them tagged out of the box. Our reasons align with the article above, tagging icons was not our use-case. When I did the initial round of research, I came across how someone built a fantastic tool closer to what we The bigger problem was to maintain a single source of truth that everyone had access to, the designers and eventually the development teams. The meticulously crafted tags that came out of the box with streamline icon-set didn't work within Figma. Ideal experience at the time (we used streamline icons). Searching through 30k icons within Figma wasn't an Some of us used Iconjar, and the others preferred using icons as shared assets within Figma. Better collaboration and shared resources were vital.Īn idea to build an icon organiser/browser was born during one of these team workshop sessions. It wasĪpparent that we needed to find ways to deliver a consistent user experience and establish visual consistency across different verticals. We started by discussing the problems we dealt with as designers at Careem. Also, Github Pages.ĭuring the early days of working out a strategy for developing a design system at Careem, we got the entire team together in a room once a week for an hour.
#Iconjar file to json code#
Github Version code and collaborate with developers. Best IDE there is.Ĭodekit Cannot think of web development without this nifty little tool. Sublime Tried atom and all, But this one takes the cake. Not me.Įlectron Make platform agnostic desktop apps with HTML, CSS & JS. Javascript Programming language of the web that everyone loves to hate. I still use it to do that odd job that Figma cannot handle.ĬSS CSS powers the style and character of the internet. Sketch First UI design tool I ever loved. Real-time collaboration with design, product and development. Your browser doesn't support video playback.įigma Best UI design tool yet. No DOM elements are moved in and out of the tree. Filtering is done by setting display: none on the elements that don’t match. The DOM elements are all generated as a giant innerHTML call, for performance reasons. Getting 3600 emojis displayed initially was a huge perf hit, but lazy loading the images solved that nicely
Loading all of the data and dynamically generating the emoji elements. Processing the original JSON file from #1 several times by merging the keyword data with the file name. Mapping the file names with the emoji data from Github that contains keywords The script will create a folder on your desktop named. Drop 1 or more IconJar files onto the IconJarExtractor droplet. Double-click the file named JSON Helper.zip and copy the extracted file to your Applications folder.
#Iconjar file to json full#
Getting a full list of Twemojis from the file system into a JSON format, done via a PHP script! Usage Download this script to your Mac computer and extract the ZIP file. The app isn’t overly tricky or complicated in what it does, but the real fun was in getting the emoji data to power the keywords and filtering/browsing.