├── .gitignore ├── Awesome-Design-Conferences.md ├── Awesome-Design-Plugins.md ├── Awesome-Design-UI-Kits.md ├── Contribution_Guidelines.md ├── LICENSE ├── Media ├── Abstract.png ├── Adobe XD (1).png ├── Adobe XD.png ├── Awesome Design Conferences.png ├── Awesome Design Plugins.png ├── Awesome Design UI Kits.png ├── Awesome-design-tools-cover.png ├── Maze.png ├── Porkbun.png ├── ProtoPie.png ├── SuperNova.png ├── adk-logo.svg ├── adobe-xd.svg ├── awesome-design-tools-joins-abstract-cover.png ├── desktop.svg ├── figma.svg ├── flawless-feedback.png ├── free.svg ├── invision-studio.svg ├── mac.svg ├── open-source.svg ├── photoshop.svg ├── sketch.svg ├── smartphone-mobile-phone-svgrepo-com.svg └── web.svg ├── README.md ├── docs ├── assets │ ├── .DS_Store │ ├── favicon-adk │ │ ├── favicon-114.png │ │ ├── favicon-120.png │ │ ├── favicon-144.png │ │ ├── favicon-152.png │ │ ├── favicon-16.png │ │ ├── favicon-160.png │ │ ├── favicon-196.png │ │ ├── favicon-32.png │ │ ├── favicon-57.png │ │ ├── favicon-60.png │ │ ├── favicon-72.png │ │ ├── favicon-76.png │ │ └── favicon-96.png │ ├── favicon-adp │ │ ├── favicon-114.png │ │ ├── favicon-120.png │ │ ├── favicon-144.png │ │ ├── favicon-152.png │ │ ├── favicon-16.png │ │ ├── favicon-160.png │ │ ├── favicon-196.png │ │ ├── favicon-32.png │ │ ├── favicon-57.png │ │ ├── favicon-60.png │ │ ├── favicon-72.png │ │ ├── favicon-76.png │ │ └── favicon-96.png │ ├── favicon │ │ ├── favicon-114.png │ │ ├── favicon-120.png │ │ ├── favicon-144.png │ │ ├── favicon-152.png │ │ ├── favicon-16.png │ │ ├── favicon-160.png │ │ ├── favicon-196.png │ │ ├── favicon-32.png │ │ ├── favicon-57.png │ │ ├── favicon-60.png │ │ ├── favicon-72.png │ │ ├── favicon-76.png │ │ └── favicon-96.png │ └── svg │ │ ├── adk-logo.svg │ │ ├── filter-icon-violet.svg │ │ ├── filter-icon.svg │ │ ├── kits-icon-selected.svg │ │ ├── kits-icon-unselected.svg │ │ ├── labels │ │ ├── adobe-xd.svg │ │ ├── figma.svg │ │ └── sketch.svg │ │ ├── logo-plugins.svg │ │ ├── logo.svg │ │ ├── plugin-icon-selected.svg │ │ ├── plugins-icon-unselected.svg │ │ ├── promotion │ │ ├── abstract-logo.svg │ │ ├── maze-logo.svg │ │ ├── porkbun │ │ │ ├── porkbun-logo.png │ │ │ ├── porkbun-logo@2x.png │ │ │ └── porkbun-logo@3x.png │ │ ├── protopie-logo.svg │ │ ├── supernova-logo.svg │ │ └── xd-logo.svg │ │ ├── search-icon.svg │ │ ├── tools-icon-selected.svg │ │ └── tools-icon-unselected.svg ├── css │ ├── design-tools-style.css │ └── normalize.css ├── index-kits.html ├── index-plugins.html ├── index.html ├── js │ └── script.js ├── modules │ ├── Templates.js │ ├── addAllPromoBanners.js │ ├── addBackgroundColorToLogo.js │ ├── addContributeButtonForAddendum.js │ ├── addHamburgerMenu.js │ ├── addHeader.js │ ├── addIDsForHeadings.js │ ├── addLinksToNavigationElements.js │ ├── addScripts.js │ ├── addWelcomeArticle.js │ ├── config │ │ ├── plugins.js │ │ ├── tools.js │ │ └── ui-kits.js │ ├── createPromoBanner.js │ ├── editHead.js │ ├── favicon │ │ ├── favicon-adk.js │ │ ├── favicon-adp.js │ │ └── favicon-adt.js │ ├── helpers │ │ ├── createLinkForID.js │ │ ├── deleteAllIconsInDescription.js │ │ ├── getCssFile.js │ │ ├── getJS.js │ │ └── removeAllImages.js │ ├── removeListInAddendum.js │ ├── tweakDescriptionOfArticleTopic.js │ ├── tweakToolContainer.js │ └── view │ │ └── promotionBanner.js ├── pull_request_template.md └── server.js ├── index.js ├── package-lock.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | docs/index.html 3 | -------------------------------------------------------------------------------- /Awesome-Design-Conferences.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | # Awesome Design Conferences 4 | * [Awesome Design Tools](https://github.com/LisaDziuba/Awesome-Design-Tools) 5 | * [Awesome Design Plugins](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Awesome-Design-Plugins.md) 6 | * [Awesome Design UI Kits](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Awesome-Design-UI-Kits.md) 7 | 8 |
9 | 10 |

11 | Awesome-Design-Conferences 12 | 13 |

14 | 15 |

16 | awesome PRs Welcome 17 |

18 | 19 | ## How to Use and Contribute 20 | 21 | * Now you are in **Awesome Design Conferences** section, if you need tools & plugins — go to [Awesome Design Tools](https://github.com/LisaDziuba/Awesome-Design-Tools) & [Awesome Design Plugins](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Awesome-Design-Plugins.md). 22 | * To find the conference, go through the Table of Contents or search for a keyword (for example, "UX", "prototyping"). 23 | * Ask [Lisa](https://twitter.com/LisaDziuba) on Twitter. 24 | 25 | If you found some great design conference, just send a Pull Request with respect to our [Contribution Guidelines](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Contribution_Guidelines.md) (they're very simple, please take a look). Design tools should be submitted [here](https://github.com/LisaDziuba/Awesome-Design-Tools), plugins - [here](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Awesome-Design-Plugins.md), and conferences in this file. And don't forget to add the location and date at the end of each conference. Now I'd love to see your suggestions! 26 | 27 | 28 | 29 |
30 | 31 |
32 | 33 | ## Table of Content 34 | 35 | * [January](#january) 36 | * [February](#february) 37 | * [March](#march) 38 | * [April](#april) 39 | * [May](#may) 40 | * [June](#june) 41 | * [July](#july) 42 | * [August](#august) 43 | * [September](#september) 44 | * [October](#october) 45 | * [December](#december) 46 | 47 |
48 | 49 |
50 | 51 | 52 |
53 | 54 | ### January 55 | | Name | About | Dates | Location | 56 | |---|---|---|---| 57 | | [Workshop: Getting started with Sketch App](https://www.sketch.com/community/groups/munich/?event=2020-01-15)| a meetup for designers interested in Sketch. Join it to share knowledge, discover tricks, plugins and new workflows or see how others utilise the powerful tool. | January 15 | München, Germany | 58 | | [CLT Sketch Meetup](https://www.sketch.com/community/groups/charlotte/?event=2020-01-15) | an official Sketch meetup for designers and developers in Charlotte. Share knowledge, trade tips, and hear about new plugins and resources. Meet local designers and members of the Sketch team, learn more about the app and have fun with likeminded people. | January 15 | Charlotte, USA | 59 | | [In/Visible Talks](https://invisibletalks.com/conference-2020/) | a conference for creative professionals that celebrates the art of design. It focuses on fresh takes and honest talks about the process, inspiration, and challenges behind the creative practice. | January 16 | San Francisco, USA | 60 | | [Sketch Dallas January Meetup Event](https://www.sketch.com/community/groups/dallas/?event=2020-01-21) | an official Sketch meetup for designers and developers in Dallas. Share knowledge, trade tips, and hear about new plugins and resources. Meet local designers, learn more about the app and have fun with likeminded people. | January 21 | Dallas, USA | 61 | | [Awwwards Conference Tokyo](https://conference.awwwards.com/tokyo/) | a digital thinkers conference is coming to Tokyo! It brings you the hottest topics and newest technologies on User Experience, UI Design, Web Design and Development, Animation, Technology, Branding, Trends, Creativity and much more. | January 22-24 | Tokyo, Japan | 62 | | [New Adventures](https://newadventuresconf.com/2020/) | a digital design conference where you'll explore speculative and critical design, radical inclusivity, climate, sustainability, and much more. | January 22-23 | Nottingham, UK | 63 | | [Workshop: How to master Sketch & Design Systems](https://www.sketch.com/community/groups/munich/?event=2020-01-23) | a meetup for designers interested in Sketch. Share knowledge, discover tricks, plugins and new workflows or see how others utilise the powerful tool. | January 23 | München, Germany | 64 | | [Humanising Design](https://www.meetup.com/figma-africa/events/267044435/) | Figma's meetup where you'll dive into cognitive UI/UX principles that can be used to create delightful experiences for users. | January 25 | Lagos, Nigeria | 65 | 66 |
67 | 68 |
69 | 70 | ### February 71 | | Name | About | Dates | Location | 72 | |---|---|---|---| 73 | | [IxDA](https://interaction20.ixda.org/) | a mix of workshops, talks, and hands-on experiences aimed at inspiring designers around the world. It brings together the brightest minds in design, science, philosophy, psychology, and business. | February 2-7 | Milan, Italy | 74 | | [Pause Fest](https://www.pausefest.com.au/) | a festival for business and creativity with a mission to bring diverse intelligence together to fuel the next generation forward. | February 5-7 | Melbourne, Australia | 75 | | [Outcome](http://outcomeconf.com/) | a conference that talks about startups, products, UX and design from a storytelling perspective. | February 8 | Chandigarh, India | 76 | | [Sketch Dallas February Meetup Event](https://www.sketch.com/community/groups/dallas/?event=2020-02-11) | an official Sketch meetup for designers and developers in Dallas. Share knowledge, trade tips, and hear about new plugins and resources. Meet local designers, learn more about the app and have fun with likeminded people. | February 11 | Dallas, USA | 77 | | [Brand New: First Round](https://underconsideration.com/firstround/) | a one-day showcase of original presentations made to clients showing initial design explorations for logo, identity, and branding projects. | February 14 | Portland, USA | 78 | | [Figma Africa Enugu Meetup](https://www.meetup.com/figma-africa/events/266832410/) | Figma's event where you'll explore places where people could go and get resources and inspiration for their design and finally.| February 15 | Lagos, Nigeria | 79 | | [UXistanbul](https://uxistanbul.org/) | the first UX conference of Turkey that gathers UX and Usability professionals from the world’s leading companies in Istanbul, to share their experiences. | February 18 | Istanbul, Turkey 80 | | [Awwwwards Conference Amsterdam](https://conference.awwwards.com/amsterdam) | a digital design awards platform for designers, developers, and digital dreamers. It brings you the hottest topics and newest technologies on User Experience, UI Design, Web Design and Development, Animation, Technology, Branding, Trends, Creativity and much more. | February 19-21 | Amsterdam, Netherlands | 81 | | [Mouvo](https://mouvo.cz/) | a festival presenting motion design in all its forms – as a creative field as well as an outlet for personal expression. | February 21-22 | Prague, Czech Republic | 82 | | [FITC Amsterdam 2020](https://fitc.ca/event/am20/) | groundbreaking design and tech event on the future of innovation, design and all the cool stuff in between. | February 24-25 | Amsterdam, Netherlands | 83 | 84 |
85 | 86 |
87 | 88 | ### March 89 | | Name | About | Dates | Location | 90 | |---|---|---|---| 91 | | [The UX Conference in London](https://theuxconf.com/) | design conference that’s not about trends & buzzwords, but collaboration between designers and communication between each other: internal company politics, presenting the value of design and speaking the same language with different stakeholders. | March 2-3 | London, UK | 92 | | [Leading Design San Francisco](https://leadingdesign.com/conferences/sanfran-2020) | brings together experts who lead design teams, oversee design direction and instill a culture of design within their organizations. | March 4-6 | San Francisco, USA | 93 | | [NO/BS Conference](https://nobs.events/) | is a place where like-minded people can get together, listen to some amazing stories and cut through all that. | March 11-12 | Melbourne, Australia | 94 | | [SXSW Interactive](https://www.sxsw.com) | it covers all aspects, from futuristic product design to design-thinking approaches that can be applied to numerous other disciplines, businesses, and organizations. This programming will examine how design informs our interactions, shapes our experiences, and plays a critical role in problem-solving. | March 13-22 | Austin, USA | 95 | | [IAM Weekend](https://www.iam-internet.com/weekend) | the annual gathering for creative thinkers & doers who care about the futures of the internet. Originally created as a collective research and learning initiative with an independent, ad-free, alternative and purpose-driven mindset. | March 19-21 | Barcelona, Spain | 96 | | [UX Copenhagen](https://uxcopenhagen.com/) | a two-day conference for professionals working with UX design. You will hear about some of the newest trends in UX and Design, presented by a diverse panel of speakers ranging from gurus to people new to the field. | March 30-31 | Copenhagen, Denmark | 97 | | [AIGA Design Conference](https://designconference.aiga.org/) | brings the design community together in a once-in-a-lifetime, cross-disciplinary exchange of ideas about the changing world of design. | March 30 - April 1 | Pittsburgh, USA | 98 | 99 | 100 |
101 | 102 |
103 | 104 | ### April 105 | | Name | About | Dates | Location | 106 | |---|---|---|---| 107 | | [UIArchConf](http://uiarchconf.com/) | a conference and training event for those who work as UI Architects. Here you'll explore the various aspects of UI Architecture and the massive role a UI architect plays in an organization. | April 1-3 | New Orleans, USA | 108 | | [Creative South](https://www.creativesouth.com/) | a weekend of creative thinking, collaboration, and exploration. Enjoy workshops, talks focused on process & experience, and networking in the design community. | April 2-4 | Columbus, USA | 109 | | [The Y Conference](https://sandiego.aiga.org/programs/y-conference/) | a national-caliber design conference. It brings together industry thinkers, innovators, and change-makers for two days of creativity and collaboration. | April 3-4 | San Diego, USA | 110 | | [Offset](https://www.iloveoffset.com/) | a three-day creative conference. Celebrating creativity and bringing together the best in International and Irish creative talent in graphic design, illustration, street and fine art, film, photography, moving image and much, much more. | April 3-5 | Dublin, Ireland | 111 | | [UXcamp Amsterdam](https://uxcampams.com/) | a BarCamp where you can share your knowledge, stories, and ideas about User Experience Design and related disciplines. As a free one-day unconference event, it's made by the community for the community. There are no spectators, only contributors. | April 4 | Amsterdam, Netherlands | 112 | | [An Event Apart Washington, D.C.](https://aneventapart.com/) | the web design conference for UX & front-end experts. Three days of design, code, and content for interaction designers and developers. Packed with tips, techniques, and insights into the future from industry shakers and shapers. | April 13-15 | Washington, D.C., USA | 113 | | [Crop Baton Rouge](https://www.cropcons.com/) | a two-day celebration of creativity, community, inspiration, learning & more. Find out inspiring talks and knowledge dropping workshops together with vendors, live events, live music, after-parties. | April 16-18 | Baton Rouge, USA | 114 | | [Design Week Portland](https://designportland.org/festival/2020) | celebrates design as their city’s most promising cultural and economic resource. Their purpose is to explore process, craft, and practice across disciplines through a city’s vibrant design programming. | April 18-24 | Portland, USA | 115 | | [FITC Toronto 2020](https://fitc.ca/event/to20/) | an event showcasing the best the world has to offer in design, digital development, media and innovation in creative technologies – it’s three days and nights of presentations, parties, installations and performances that unite and transform the industry. | April 19-21 | Toronto, Canada | 116 | | [SmashingConf SF](https://smashingconf.com/sf-2020/) | a friendly, inclusive event that is focused on front-end and UX, but it covers everything web, be it interface design or machine learning. Live sessions on performance, accessibility, interface design, copywriting, designing for emotion, debugging and fancy CSS/JS techniques. | April 21-22 | San Francisco, USA | 117 | | [OFFF Barcelona 2020](https://offf.barcelona/pins/offf-barcelona-2020/) | a three-day journey of conferences, workshops, activities, and performances. All for the community of designers: sound, graphic, motion designers, thinkers, theorists and more. | April 23-25 | Barcelona, Spain | 118 | | [beyond tellerrand](https://beyondtellerrand.com/events/dusseldorf-2020) | the affordable single-track event where creativity and technology meet. | April 27-29 | Düsseldorf, Germany | 119 | 120 | 121 |
122 | 123 |
124 | 125 | ### May 126 | | Name | About | Dates | Location | 127 | |---|---|---|---| 128 | | [UX Burlington](https://www.uxburlington.com/) | an annual single-day conference, focused on what it really takes to build great digital user experiences on the web, in apps, and beyond. | May 1 | Burlington, USA | 129 | | [Pixel Up!](https://pixelup.co.za/) | South Africa's premier UX and design conference that brings together UX and UI designers, UX writers, researchers, and product managers. | May 4-6 | Cape Town, South Africa | 130 | | [HOW Design Live](https://www.howdesignlive.com/) | a four-day conference and 3-day expo for design, marketing and creative professionals, with a focus on in-house practitioners in major corporate brands and design firms. | May 4-7 | Boston, Massachusetts | 131 | | [and& Leuven](https://www.andleuven.com/en) | an innovation festival that brings together changemakers of today to inspire curious minds of all backgrounds. It provides a platform for interdisciplinary innovation that aims to transform our society & acts upon the challenges we face today. | May 6-9 | Leuven, Belgium | 132 | | [An Event Apart Seattle](https://aneventapart.com/) | the web design conference for UX & front-end experts. Three days of design, code, and content for interaction designers and developers. Packed with tips, techniques, and insights into the future from industry shakers and shapers. | May 11-13 | Seattle, USA | 133 | | [Camp Digital](https://www.wearesigma.com/campdigital/2020/) | an inspirational conference that brings together the digital, design and UX communities for a series of seminars exploring the latest thinking in our industry. | May 13 | Manchester, UK | 134 | | [D&AD FESTIVAL 2020](https://www.dandad.org/en/d-ad-creative-advertising-design-festival/) | a three-day immersion in the world’s best craft, creativity and culture for the global creative industries. | May 19-21 | London, UK | 135 | | [UXLx](https://www.ux-lx.com/) | four days of inspiring talks and hands-on workshops featuring top industry speakers. | May 19-22 | Lisbon, Portugal | 136 | | [webinale](https://webinale.de/en) | the conference for product owners, web designers, and frontend coders. It combines user experience with code and offers a variety of topics that are important for digital professionals nowadays. | May 25-29 | Berlin, Germany | 137 | | [UX London](https://2020.uxlondon.com/) | a three-day UX event by Clearleft, combining inspirational talks with in-depth workshops presented by some of the industry’s biggest names. | May 27-29 | London, UK | 138 | 139 |
140 | 141 |
142 | 143 | ### June 144 | | Name | About | Dates | Location | 145 | |---|---|---|---| 146 | | [CreativePro Week](https://creativeproweek.com/) | the HOW-TO conference for creative professionals who design, create, or edit in Adobe InDesign, Photoshop, Illustrator, Microsoft PowerPoint, and other creative tools. | June 1-5 | Austin, USA | 147 | | [Fluxible](https://www.fluxible.ca/) | a gathering of people who share an interest in user experience design and the fields with which it intersects. Fluxible is an inclusive, cooperative environment where everyone is welcomed, open dialogue is encouraged, and all perspectives are appreciated. | June 1-7 | Waterloo, Canada | 148 | | [UXR Collective](https://uxrconference.com/) | brings together people from across the globe who are committed to championing their users, surfacing better insights, and bettering the tech ecosystem. | June 3-5 | Toronto, Canada | 149 | | [99U Conference](https://conference.99u.com/) | Adobe’s career resource and annual conference, helping creatives of all stripes supercharge their work and make their ideas happen. | June 3-5 | New York, USA | 150 | | [Birmingham Design Festival](https://birminghamdesignfestival.org.uk/) | a celebration of the local, national and international design industry held in the UK every June. | June 5-6 | Birmingham, UK | 151 | | [Eyeo Festival](http://eyeofestival.com/) | brings together creative coders, data designers, and creators working at the intersection of data, art & technology for talks, workshops, labs, and events. | June 8-11 | Minneapolis, USA | 152 | | [SmashingConf](https://smashingconf.com/austin-2020) | an inclusive, practical and friendly conference on front-end, design and UX, with CSS/JS techniques, accessibility, performance, privacy, internationalization, designing for mobile, HTML email and real-life case studies. | June 9-10 | Austin, USA | 153 | | [Dsgnday](https://dsgnday.nl/) | a full-day conference with eight presentations about web design and user experience. Expect plenty of practical advice on designing for the web—on any device. | June 11 | Amsterdam, Netherlands | 154 | | [ICON11: The Illustration Conference](https://theillustrationconference.org/) | gathering of illustrators, designers, educators, representatives, and art buyers exploring illustration today. | June 28-July 1 | Kansas City, USA | 155 | | [An Event Apart Boston](https://aneventapart.com/) | the web design conference for UX & front-end experts. Three days of design, code, and content for interaction designers and developers. Packed with tips, techniques, and insights into the future from industry shakers and shapers. | June 29-July 1 | Boston, USA | 156 | 157 |
158 | 159 |
160 | 161 | ### July 162 | | Name | About | Dates | Location | 163 | |---|---|---|---| 164 | | [Design/Content](https://content.design/) | the conference for designers & content strategists. Hear from industry leaders about crafting experiences and telling stories that shape the future of the web. A day of workshops, two days of talks, and thoughtful extras in one of the most beautiful cities. | July 15-17 | Vancouver, Canada | 165 | | [SIGGRAPH](https://s2020.siggraph.org/) | the forum where inspiration creates progress. Collaborate with our forward-thinking community to find the most transformative advancements across computer graphics and interactive techniques. | July 19-23 | Washington, USA | 166 | 167 |
168 | 169 |
170 | 171 | ### August 172 | | Name | About | Dates | Location | 173 | |---|---|---|---| 174 | | [RAD Summit 2020](https://radsummit.co/) | the camp-style conference for people who build awesome products. rad summit is a colorado experience built specifically for designers, product managers, artists, leaders, devs, entrepreneurs, and people who love the fresh smell of pine. | August 13-16 | Denver, CO | 175 | | [An Event Apart Minneapolis](https://aneventapart.com/) | the web design conference for UX & front-end experts. Three days of design, code, and content for interaction designers and developers. Packed with tips, techniques, and insights into the future from industry shakers and shapers. | August 17-19 | Minneapolis, USA | 176 | | [Loupe2020](https://www.framer.com/loupe/#signup) | a conference from Framer on interactive design and creative coding. Talks from designers, prototypers, and developers on the way they work and their creative process. There are also Framer X workshops so that attendees can get some practical stuff at the end of the conference. | August 19-21 | Amsterdam, Netherlands | 177 | 178 |
179 | 180 |
181 | 182 | ### September 183 | | Name | About | Dates | Location | 184 | |---|---|---|---| 185 | | [SmashingConf](https://smashingconf.com/freiburg-2020) | friendly, inclusive events that are focused on real-world problems and solutions. Their focus is on front-end and UX but we cover everything web, be it UI design or machine learning. | September 7-8 | Freiburg, Germany | 186 | | [Circles](https://circlesconference.com/) | a three-day creative design conference, bringing together designers and makers from around the globe. Learning from transformative thinkers and connecting with like-minded innovators, it provides a space where you’ll be challenged to push yourself in the creative process. | September 10-11 | Richardson, USA | 187 | | [dConstruct](https://2020.dconstruct.org/) | an affordable, one-day conference aimed at those designing and building the latest generation of web-based applications. | September 11 | Brighton, UK | 188 | | [Digital Labin](https://digitalab.in/) | a two-day ICT conference bringing you top of the line keynote speakers in web, mobile and software design and development. Additionally, we are happy to have professional workshops, many networking activities and a party to remember. | September 25-26 | Labin, Croatia | 189 | 190 |
191 | 192 |
193 | 194 | ### October 195 | | Name | About | Dates | Location | 196 | |---|---|---|---| 197 | | [An Event Apart Orlando](https://aneventapart.com/) | the web design conference for UX & front-end experts. Three days of design, code, and content for interaction designers and developers. Packed with tips, techniques, and insights into the future from industry shakers and shapers. | October 5-7 | Orlando, USA | 198 | | [Adobe MAX](https://max.adobe.com/) | Adobe's annual events where you can learn the latest Adobe announcements, attend 300+ sessions, labs, creativity workshops and network with each other. | October 19-21 | Los Angeles, USA | 199 | | [SmashingConf](https://smashingconf.com/ny-2020/) | an inclusive, practical and friendly conference on front-end, design and UX, with CSS/JS techniques, accessibility, performance, privacy and real-life case studies. | October 20-21 | New York, USA | 200 | | [Seattle Interactive Conference](https://seattleinteractive.com/) | is a celebration of the incredible work happening at the intersection of technology, creativity and industry. They spotlight innovation in experience, design, and strategy. They believe in the power of creative thinking, and that data and technology can be leveraged to help us make better, intentional choices. | October 20-22 | Seattle, USA 201 | | [Brand New Conference](https://underconsideration.com/brandnewconference/) | a two-day event on corporate and brand identity with some of today’s most active and influential practitioners from around the world. | October 22-23 | Austin, USA 202 | | [Design Thinkers](https://designthinkers.com/) | Canada's largest annual graphic design conference, connecting designers from around the world. | October 24-25 | Toronto, Canada | 203 | | [Creative Works](https://conference.creativeworks.co/) | a conference is for creative professionals who are serious about their craft and want to sharpen their skills and learn how others work. Dozens of talks, workshops, vendors, and afterparties that encourage inspiration, connection, and growth among creative professionals. | October 2020 | Memphis, USA | 204 | 205 |
206 | 207 |
208 | 209 | ### December 210 | | Name | About | Dates | Location | 211 | |---|---|---|---| 212 | | [An Event Apart San Francisco](https://aneventapart.com/) | the web design conference for UX & front-end experts. Three days of design, code, and content for interaction designers and developers. Packed with tips, techniques, and insights into the future from industry shakers and shapers. | December 14-16 | San Francisco, USA | 213 | 214 | 215 | 216 |
217 | 218 |
219 | 220 | ### Addendum (Reference & Inspiration) 221 | 222 | Awesome Design Tools & Plugins & Conferences are curated by [Lisa Dziuba](https://twitter.com/LisaDziuba) & [Valia Havruliyk](https://twitter.com/ValiaHavryliuk) from Flawless team. And it was hugely inspired by articles from the design community and Prototypr.io Toolbox made by our good friend Graeme Fulton. If you found some great design tool, plugins or conferences, please [suggest it](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Contribution_Guidelines.md). Thanks for making this project awesome :) 223 | 224 |
225 | 226 | 227 | -------------------------------------------------------------------------------- /Contribution_Guidelines.md: -------------------------------------------------------------------------------- 1 | # 📜 Contribution Guidelines 2 | ### for Awesome Design Tools, Plugins, Design Conferences, UI Kits 3 | 4 | If you would like to contribute, just send a Pull Request. Please follow these rules: 5 | * Search previous suggestions before making a new one to prevent duplicates. 6 | * Try to make your Pull Request descriptive and check all questions in the PR template. 7 | * End all descriptions with a full stop/period and remove trailing whitespace. 8 | * Check spelling and grammar. 9 | * Please, add appropriate tags. 10 | * If you submit a design tool to the Awesome Design Tools repo, please put the tool in the alphabetical order. All tools are great, so we want to treat them equally. 11 | * If you submit a design conference to the Awesome Design Conferences repo, please put the conference according to the date. The earliest conference should be first. It's just easy to perceive. 12 | * New categories are welcomed if you have 2+ tools, plugins, UI Kits, or conferences to submit to that category. 13 | 14 | 15 | ## 📍 One tool, plugin, UI Kit or conference can go only to one category 16 | For example, in Awesome Design Tools, every category presents some design work or task. Many design tools allow us to solve multiple tasks. But in this list, one tool with full description & link is always submitted only to one category (section). Why do so? Because we want to avoid many duplications and misunderstanding around tool functionality. 17 | 18 | However, if the tool can be used for another task, just mention the tool name in the additional sentence at the end of another category, like here: `You can also do prototyping with Figma, Adobe XD, Sketch and InVision Studio, which are mentioned in the UI Design Tools section.` 19 | 20 | 21 | ## 🔗 Link Format 22 | * Please, use the following format for the links in Pull Requests: ``[Tool\Plugin\UI Kit\Conference](link) — description``. The description should start from the lower-case letter unless it's starting with the tool name. 23 | 24 | * Please, add the appropriate labels: 25 | * ![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg) for free tools. **Free means** entirely free tools, not freemium or those which have free trial, free limited functionality. For adding label just copy & paste the following snippet: ``![free.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/free.svg)`` 26 | * ![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg) for open-source tools. Use the following snippet: ``![open-source.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/open-source.svg)`` 27 | * ![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg) for Mac only tools. Use the following snippet: ``![mac.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/mac.svg)`` 28 | * ![Sketch](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/sketch.svg) for Sketch plugins and UI Kits: `![Sketch](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/sketch.svg)` 29 | * ![Adobe XD](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/adobe-xd.svg) for XD plugins and UI Kits: `![Adobe XD](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/adobe-xd.svg)` 30 | * ![Figma](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/figma.svg) for Figma plugins and UI Kits: `![Figma](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/figma.svg)` 31 | * ![InVision Stusio](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/invision-studio.svg) for InVision Studio: `![InVision Stusio](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/invision-studio.svg)` 32 | * ![Mobile](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/smartphone-mobile-phone-svgrepo-com.svg) for Mobile UI Kits: `![Mobile](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/smartphone-mobile-phone-svgrepo-com.svg)` 33 | * ![Web](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/web.svg) for UI Kits which can be used for websites, web app and other web products: `![Web](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/web.svg)` 34 | * ![Desktop](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/desktop.svg) for desktop UI Kits: `![Desktop](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/desktop.svg)` 35 | 36 | 37 | ## Review Workflow 38 | We will do our best to review your submission as soon as we can. Please, consider that we have a full-time job in our startup :) Your contribution might be rejected if the tool, UI Kit, plugin or conferences didn't pass our curation. Of course, this is very subjective and if you think we are being unfair, do let us know. 39 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Lisa Dziuba 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Media/Abstract.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/Media/Abstract.png -------------------------------------------------------------------------------- /Media/Adobe XD (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/Media/Adobe XD (1).png -------------------------------------------------------------------------------- /Media/Adobe XD.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/Media/Adobe XD.png -------------------------------------------------------------------------------- /Media/Awesome Design Conferences.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/Media/Awesome Design Conferences.png -------------------------------------------------------------------------------- /Media/Awesome Design Plugins.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/Media/Awesome Design Plugins.png -------------------------------------------------------------------------------- /Media/Awesome Design UI Kits.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/Media/Awesome Design UI Kits.png -------------------------------------------------------------------------------- /Media/Awesome-design-tools-cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/Media/Awesome-design-tools-cover.png -------------------------------------------------------------------------------- /Media/Maze.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/Media/Maze.png -------------------------------------------------------------------------------- /Media/Porkbun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/Media/Porkbun.png -------------------------------------------------------------------------------- /Media/ProtoPie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/Media/ProtoPie.png -------------------------------------------------------------------------------- /Media/SuperNova.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/Media/SuperNova.png -------------------------------------------------------------------------------- /Media/adk-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9659587E-EF92-4A00-A660-D91F849A257C 5 | Created with sketchtool. 6 | 7 | 8 | 9 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Media/adobe-xd.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 67C5A0D6-5EC7-4EB6-B0AA-3D22564ACFA1 5 | Created with sketchtool. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Media/awesome-design-tools-joins-abstract-cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/Media/awesome-design-tools-joins-abstract-cover.png -------------------------------------------------------------------------------- /Media/desktop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /Media/figma.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | E4D6A3B6-10C8-463E-8A77-596D7A5CC2CE 5 | Created with sketchtool. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /Media/flawless-feedback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/Media/flawless-feedback.png -------------------------------------------------------------------------------- /Media/invision-studio.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Media/mac.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Media/open-source.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Media/photoshop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 9 | 10 | 15 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /Media/sketch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5B108AAF-111D-43D8-B969-BD9A55E68A64 5 | Created with sketchtool. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /Media/smartphone-mobile-phone-svgrepo-com.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 7 | 8 | 11 | 13 | 14 | 16 | 18 | 20 | 22 | 24 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /Media/web.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 12 | 18 | 24 | 30 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /docs/assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/.DS_Store -------------------------------------------------------------------------------- /docs/assets/favicon-adk/favicon-114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon-adk/favicon-114.png -------------------------------------------------------------------------------- /docs/assets/favicon-adk/favicon-120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon-adk/favicon-120.png -------------------------------------------------------------------------------- /docs/assets/favicon-adk/favicon-144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon-adk/favicon-144.png -------------------------------------------------------------------------------- /docs/assets/favicon-adk/favicon-152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon-adk/favicon-152.png -------------------------------------------------------------------------------- /docs/assets/favicon-adk/favicon-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon-adk/favicon-16.png -------------------------------------------------------------------------------- /docs/assets/favicon-adk/favicon-160.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon-adk/favicon-160.png -------------------------------------------------------------------------------- /docs/assets/favicon-adk/favicon-196.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon-adk/favicon-196.png -------------------------------------------------------------------------------- /docs/assets/favicon-adk/favicon-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon-adk/favicon-32.png -------------------------------------------------------------------------------- /docs/assets/favicon-adk/favicon-57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon-adk/favicon-57.png -------------------------------------------------------------------------------- /docs/assets/favicon-adk/favicon-60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon-adk/favicon-60.png -------------------------------------------------------------------------------- /docs/assets/favicon-adk/favicon-72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon-adk/favicon-72.png -------------------------------------------------------------------------------- /docs/assets/favicon-adk/favicon-76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon-adk/favicon-76.png -------------------------------------------------------------------------------- /docs/assets/favicon-adk/favicon-96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon-adk/favicon-96.png -------------------------------------------------------------------------------- /docs/assets/favicon-adp/favicon-114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon-adp/favicon-114.png -------------------------------------------------------------------------------- /docs/assets/favicon-adp/favicon-120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon-adp/favicon-120.png -------------------------------------------------------------------------------- /docs/assets/favicon-adp/favicon-144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon-adp/favicon-144.png -------------------------------------------------------------------------------- /docs/assets/favicon-adp/favicon-152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon-adp/favicon-152.png -------------------------------------------------------------------------------- /docs/assets/favicon-adp/favicon-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon-adp/favicon-16.png -------------------------------------------------------------------------------- /docs/assets/favicon-adp/favicon-160.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon-adp/favicon-160.png -------------------------------------------------------------------------------- /docs/assets/favicon-adp/favicon-196.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon-adp/favicon-196.png -------------------------------------------------------------------------------- /docs/assets/favicon-adp/favicon-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon-adp/favicon-32.png -------------------------------------------------------------------------------- /docs/assets/favicon-adp/favicon-57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon-adp/favicon-57.png -------------------------------------------------------------------------------- /docs/assets/favicon-adp/favicon-60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon-adp/favicon-60.png -------------------------------------------------------------------------------- /docs/assets/favicon-adp/favicon-72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon-adp/favicon-72.png -------------------------------------------------------------------------------- /docs/assets/favicon-adp/favicon-76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon-adp/favicon-76.png -------------------------------------------------------------------------------- /docs/assets/favicon-adp/favicon-96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon-adp/favicon-96.png -------------------------------------------------------------------------------- /docs/assets/favicon/favicon-114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon/favicon-114.png -------------------------------------------------------------------------------- /docs/assets/favicon/favicon-120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon/favicon-120.png -------------------------------------------------------------------------------- /docs/assets/favicon/favicon-144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon/favicon-144.png -------------------------------------------------------------------------------- /docs/assets/favicon/favicon-152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon/favicon-152.png -------------------------------------------------------------------------------- /docs/assets/favicon/favicon-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon/favicon-16.png -------------------------------------------------------------------------------- /docs/assets/favicon/favicon-160.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon/favicon-160.png -------------------------------------------------------------------------------- /docs/assets/favicon/favicon-196.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon/favicon-196.png -------------------------------------------------------------------------------- /docs/assets/favicon/favicon-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon/favicon-32.png -------------------------------------------------------------------------------- /docs/assets/favicon/favicon-57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon/favicon-57.png -------------------------------------------------------------------------------- /docs/assets/favicon/favicon-60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon/favicon-60.png -------------------------------------------------------------------------------- /docs/assets/favicon/favicon-72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon/favicon-72.png -------------------------------------------------------------------------------- /docs/assets/favicon/favicon-76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon/favicon-76.png -------------------------------------------------------------------------------- /docs/assets/favicon/favicon-96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/favicon/favicon-96.png -------------------------------------------------------------------------------- /docs/assets/svg/adk-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9659587E-EF92-4A00-A660-D91F849A257C 5 | Created with sketchtool. 6 | 7 | 8 | 9 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /docs/assets/svg/filter-icon-violet.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | filter-icon 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /docs/assets/svg/filter-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | search-icon 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /docs/assets/svg/kits-icon-selected.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 809279DA-3C01-4619-8588-0B6FBFD3EF13 5 | Created with sketchtool. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /docs/assets/svg/kits-icon-unselected.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9CBD9806-432E-4049-A8DE-4898D83FBA66 5 | Created with sketchtool. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /docs/assets/svg/labels/adobe-xd.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 67C5A0D6-5EC7-4EB6-B0AA-3D22564ACFA1 5 | Created with sketchtool. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /docs/assets/svg/labels/figma.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | E4D6A3B6-10C8-463E-8A77-596D7A5CC2CE 5 | Created with sketchtool. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /docs/assets/svg/labels/sketch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5B108AAF-111D-43D8-B969-BD9A55E68A64 5 | Created with sketchtool. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /docs/assets/svg/logo-plugins.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 059F6B97-0B3D-42CF-96AF-2426D55D5E0B 5 | Created with sketchtool. 6 | 7 | 8 | 9 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /docs/assets/svg/plugin-icon-selected.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 40705D8A-BCC7-48F7-814E-FDB8063DBB9F 5 | Created with sketchtool. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /docs/assets/svg/plugins-icon-unselected.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | F6CB63FC-58C8-4012-BD1C-A034BC93E98D 5 | Created with sketchtool. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /docs/assets/svg/promotion/abstract-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | B557AFDE-085A-4616-9012-1A58006D71DF 5 | Created with sketchtool. 6 | 7 | 8 | 9 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /docs/assets/svg/promotion/maze-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CA695A20-18CC-4C8A-B323-A76BE1719A4C 5 | Created with sketchtool. 6 | 7 | 8 | 9 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /docs/assets/svg/promotion/porkbun/porkbun-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/svg/promotion/porkbun/porkbun-logo.png -------------------------------------------------------------------------------- /docs/assets/svg/promotion/porkbun/porkbun-logo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/svg/promotion/porkbun/porkbun-logo@2x.png -------------------------------------------------------------------------------- /docs/assets/svg/promotion/porkbun/porkbun-logo@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goabstract/Awesome-Design-Tools/dc60e63c248c44acb42f09fb0c985b77b5fe4bf5/docs/assets/svg/promotion/porkbun/porkbun-logo@3x.png -------------------------------------------------------------------------------- /docs/assets/svg/promotion/protopie-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | C0B40BF6-1174-4137-A74B-5FF9967FF87F 5 | Created with sketchtool. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /docs/assets/svg/promotion/supernova-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | F58739A5-EC35-4CAF-9A96-8A3813904B8E 5 | Created with sketchtool. 6 | 7 | 8 | 9 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /docs/assets/svg/promotion/xd-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 56FF3D09-AF5C-48EA-BA2B-0B04FB273D48 5 | Created with sketchtool. 6 | 7 | 8 | 9 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /docs/assets/svg/search-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | EC8AD269-FBF7-400F-A976-B09CC0221EE5 5 | Created with sketchtool. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /docs/assets/svg/tools-icon-selected.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 36955B56-68D6-4AEB-95EC-319326AFB705 5 | Created with sketchtool. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /docs/assets/svg/tools-icon-unselected.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5271BAD8-CA6B-43F2-BEF2-48D9CBFFFF49 5 | Created with sketchtool. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /docs/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { /* 1 */ 178 | overflow: visible; 179 | } 180 | 181 | /** 182 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 183 | * 1. Remove the inheritance of text transform in Firefox. 184 | */ 185 | 186 | button, 187 | select { /* 1 */ 188 | text-transform: none; 189 | } 190 | 191 | /** 192 | * Correct the inability to style clickable types in iOS and Safari. 193 | */ 194 | 195 | button, 196 | [type="button"], 197 | [type="reset"], 198 | [type="submit"] { 199 | -webkit-appearance: button; 200 | } 201 | 202 | /** 203 | * Remove the inner border and padding in Firefox. 204 | */ 205 | 206 | button::-moz-focus-inner, 207 | [type="button"]::-moz-focus-inner, 208 | [type="reset"]::-moz-focus-inner, 209 | [type="submit"]::-moz-focus-inner { 210 | border-style: none; 211 | padding: 0; 212 | } 213 | 214 | /** 215 | * Restore the focus styles unset by the previous rule. 216 | */ 217 | 218 | button:-moz-focusring, 219 | [type="button"]:-moz-focusring, 220 | [type="reset"]:-moz-focusring, 221 | [type="submit"]:-moz-focusring { 222 | outline: 1px dotted ButtonText; 223 | } 224 | 225 | /** 226 | * Correct the padding in Firefox. 227 | */ 228 | 229 | fieldset { 230 | padding: 0.35em 0.75em 0.625em; 231 | } 232 | 233 | /** 234 | * 1. Correct the text wrapping in Edge and IE. 235 | * 2. Correct the color inheritance from `fieldset` elements in IE. 236 | * 3. Remove the padding so developers are not caught out when they zero out 237 | * `fieldset` elements in all browsers. 238 | */ 239 | 240 | legend { 241 | box-sizing: border-box; /* 1 */ 242 | color: inherit; /* 2 */ 243 | display: table; /* 1 */ 244 | max-width: 100%; /* 1 */ 245 | padding: 0; /* 3 */ 246 | white-space: normal; /* 1 */ 247 | } 248 | 249 | /** 250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 251 | */ 252 | 253 | progress { 254 | vertical-align: baseline; 255 | } 256 | 257 | /** 258 | * Remove the default vertical scrollbar in IE 10+. 259 | */ 260 | 261 | textarea { 262 | overflow: auto; 263 | } 264 | 265 | /** 266 | * 1. Add the correct box sizing in IE 10. 267 | * 2. Remove the padding in IE 10. 268 | */ 269 | 270 | [type="checkbox"], 271 | [type="radio"] { 272 | box-sizing: border-box; /* 1 */ 273 | padding: 0; /* 2 */ 274 | } 275 | 276 | /** 277 | * Correct the cursor style of increment and decrement buttons in Chrome. 278 | */ 279 | 280 | [type="number"]::-webkit-inner-spin-button, 281 | [type="number"]::-webkit-outer-spin-button { 282 | height: auto; 283 | } 284 | 285 | /** 286 | * 1. Correct the odd appearance in Chrome and Safari. 287 | * 2. Correct the outline style in Safari. 288 | */ 289 | 290 | [type="search"] { 291 | -webkit-appearance: textfield; /* 1 */ 292 | outline-offset: -2px; /* 2 */ 293 | } 294 | 295 | /** 296 | * Remove the inner padding in Chrome and Safari on macOS. 297 | */ 298 | 299 | [type="search"]::-webkit-search-decoration { 300 | -webkit-appearance: none; 301 | } 302 | 303 | /** 304 | * 1. Correct the inability to style clickable types in iOS and Safari. 305 | * 2. Change font properties to `inherit` in Safari. 306 | */ 307 | 308 | ::-webkit-file-upload-button { 309 | -webkit-appearance: button; /* 1 */ 310 | font: inherit; /* 2 */ 311 | } 312 | 313 | /* Interactive 314 | ========================================================================== */ 315 | 316 | /* 317 | * Add the correct display in Edge, IE 10+, and Firefox. 318 | */ 319 | 320 | details { 321 | display: block; 322 | } 323 | 324 | /* 325 | * Add the correct display in all browsers. 326 | */ 327 | 328 | summary { 329 | display: list-item; 330 | } 331 | 332 | /* Misc 333 | ========================================================================== */ 334 | 335 | /** 336 | * Add the correct display in IE 10+. 337 | */ 338 | 339 | template { 340 | display: none; 341 | } 342 | 343 | /** 344 | * Add the correct display in IE 10. 345 | */ 346 | 347 | [hidden] { 348 | display: none; 349 | } -------------------------------------------------------------------------------- /docs/js/script.js: -------------------------------------------------------------------------------- 1 | const chooseMd = document.location.href 2 | .split('/') 3 | .pop() 4 | .includes('plugin') 5 | ? 'Plugins' 6 | : 'Tools'; 7 | 8 | function toggleMenuChange() { 9 | document.querySelector('.nav').classList.toggle('nav--visible'); 10 | document 11 | .querySelector('.hamburger-menu') 12 | .classList.toggle('hamburger-menu--change'); 13 | } 14 | 15 | document.querySelector('.hamburger-menu').onclick = function() { 16 | toggleMenuChange(); 17 | }; 18 | 19 | document.querySelectorAll('.nav a').forEach(link => { 20 | if (window.innerWidth < 959) { 21 | link.onclick = function() { 22 | toggleMenuChange(); 23 | }; 24 | } 25 | }); 26 | 27 | class Nav { 28 | constructor(navElements, activeClass) { 29 | this.navElements = document.querySelectorAll(navElements); 30 | this.activeClass = activeClass; 31 | } 32 | 33 | scroll() { 34 | const { navElements, activeClass } = this; 35 | navElements.forEach(navLink => { 36 | const sectionId = navLink.getAttribute('href'); 37 | document.addEventListener('scroll', () => { 38 | const sectionDom = document.querySelector(sectionId), 39 | sectionRect = sectionDom.getBoundingClientRect(), 40 | { top, bottom, height } = sectionRect; 41 | 42 | if ((bottom > 96 && top + height >= 96 && top < 96) || top == 96) { 43 | navLink.classList.add(activeClass); 44 | } else { 45 | navLink.classList.remove(activeClass); 46 | } 47 | }); 48 | }); 49 | } 50 | } 51 | 52 | const bookmark = new Nav('.nav a', 'active'); 53 | bookmark.scroll(); 54 | 55 | const automaticScroll = () => { 56 | const nav = document.querySelector('.nav ul'); 57 | document.addEventListener('scroll', () => { 58 | const bodyHeight = document.body.offsetHeight; 59 | const bodyScrollTop = document.body.scrollTop; 60 | const navHeight = nav.getBoundingClientRect().height; 61 | const quarterOfNavHeight = navHeight / 4; 62 | 63 | const res = (bodyScrollTop / bodyHeight) * 100; 64 | if (res > 20 && res < 40) { 65 | nav.scrollTop = quarterOfNavHeight; 66 | } else if (res > 40 && res < 55) { 67 | nav.scrollTop = navHeight * 0.8; 68 | } else if (res > 55 && res < 70) { 69 | nav.scrollTop = navHeight * 1.35; 70 | } else if (res > 70 && res < 85) { 71 | nav.scrollTop = navHeight * 1.5; 72 | } else if (res > 85 && res < 100) { 73 | nav.scrollTop = navHeight * 2; 74 | } else { 75 | nav.scrollTop = 0; 76 | } 77 | }); 78 | }; 79 | automaticScroll(); 80 | 81 | // search input 82 | String.prototype.capitalize = function() { 83 | return this.charAt(0).toUpperCase() + this.slice(1); 84 | }; 85 | 86 | document 87 | .querySelector('.js-search-input') 88 | .addEventListener('input', function(e) { 89 | document.removeEventListener('scroll', automaticScroll, true); 90 | ('use strict'); 91 | 92 | const inputContent = e.target.value; 93 | const paragraphs = document.querySelectorAll('main .tool'); 94 | const banner = document.querySelectorAll('.banner'); 95 | const promoBanner = document.querySelectorAll('.promo-banner'); 96 | const articleHeaders = document.querySelectorAll('main article > header'); 97 | // const addendum = document.querySelector('#addendum'); 98 | const welcome = document.querySelector('.welcome'); 99 | const promotionBanner = document.querySelectorAll( 100 | '.promotion-banner-wrapper' 101 | ); 102 | const elementsToHide = [ 103 | ...banner, 104 | ...promoBanner, 105 | ...articleHeaders, 106 | welcome, 107 | ...promotionBanner 108 | ]; 109 | 110 | if (inputContent.length > 0) { 111 | elementsToHide.forEach(banner => banner.classList.add('-hidden')); 112 | } else if (inputContent.length === 0) { 113 | elementsToHide.forEach(banner => banner.classList.remove('-hidden')); 114 | } 115 | 116 | function handle(text) { 117 | const bool = 118 | inputContent || inputContent.capitalize() || inputContent.toUpperCase(); 119 | if (text.innerHTML.search(bool) >= 0) { 120 | text.classList.remove('-hidden'); 121 | } else { 122 | text.classList.add('-hidden'); 123 | } 124 | } 125 | 126 | paragraphs.forEach(text => handle(text)); 127 | }); 128 | 129 | // add event for nav button when clicking on it while searching 130 | 131 | document.querySelectorAll('.nav a').forEach(button => 132 | button.addEventListener('click', e => { 133 | e.preventDefault(); 134 | if (window.innerWidth) 135 | // make an empty input 136 | document.querySelector('.js-search-input').value = ''; 137 | 138 | // scroll a bit less due to nav fixed positioning 139 | window.scrollTo( 140 | 0, 141 | document.querySelector(e.target.getAttribute('href')).offsetTop - 90 142 | ); 143 | }) 144 | ); 145 | 146 | // handle modal window for filtering by application 147 | if (document.querySelector('.js-open-modal-filter')) { 148 | document 149 | .querySelector('.js-open-modal-filter') 150 | .addEventListener('click', e => { 151 | e.target.classList.toggle('-active'); 152 | document.querySelector('.sort-tool-modal').classList.toggle('-hidden'); 153 | }); 154 | } 155 | 156 | // filter by application logic 157 | function sortByApplication(event) { 158 | // toggle styles for button that was handled; 159 | const { target } = event; 160 | target.classList.toggle('-active'); 161 | 162 | const targetAttr = target.getAttribute('app'); 163 | const allLabels = document.querySelectorAll(`.label[for="${targetAttr}"]`); 164 | const buttons = [ 165 | ...document.querySelectorAll('.sort-tool-modal__btn-choose') 166 | ]; 167 | 168 | const sortedButtons = buttons.filter(button => 169 | button.classList.contains('-active') 170 | ); 171 | const activeApps = sortedButtons.map(button => button.getAttribute('app')); 172 | 173 | ga( 174 | 'send', 175 | 'event', 176 | `Awesome design ${chooseMd} - Filter (State of Platforms)`, 177 | 'Click', 178 | activeApps.join('-') 179 | ); 180 | ga( 181 | 'send', 182 | 'event', 183 | `Awesome design ${chooseMd} - Filter (Clicked Platform Name)`, 184 | 'Click', 185 | targetAttr 186 | ); 187 | 188 | allLabels.forEach(label => { 189 | const toolContainer = 190 | label.parentElement.parentElement.parentElement.parentElement; 191 | const list = toolContainer.parentElement; 192 | const sectionContainer = list.parentElement; 193 | const attr = label.getAttribute('for'); 194 | if (activeApps.includes(attr)) { 195 | toolContainer.classList.remove('-hidden'); 196 | } else { 197 | toolContainer.classList.add('-hidden'); 198 | } 199 | 200 | const arr = [...list.children].filter( 201 | tool => !tool.classList.contains('-hidden') 202 | ); 203 | if (arr.length === 0) { 204 | sectionContainer.classList.add('-hidden'); 205 | } else { 206 | sectionContainer.classList.remove('-hidden'); 207 | } 208 | }); 209 | } 210 | 211 | document 212 | .querySelectorAll('.sort-tool-modal__btn-choose') 213 | .forEach(button => button.addEventListener('click', sortByApplication)); 214 | 215 | document.querySelectorAll('.tool').forEach(tool => { 216 | tool.addEventListener( 217 | 'click', 218 | e => { 219 | e.stopPropagation(); 220 | const target = e.currentTarget; 221 | const title = target.children[1].children[0].children[0].textContent; 222 | const categoryName = target.parentElement.parentElement.id; 223 | const platforms = [ 224 | ...target.children[1].children[0].children[1].children 225 | ].map(a => a.getAttribute('for')); 226 | 227 | ga( 228 | 'send', 229 | 'event', 230 | `Awesome design ${chooseMd} - Plugin (Title)`, 231 | 'Click', 232 | title 233 | ); 234 | ga( 235 | 'send', 236 | 'event', 237 | `Awesome design ${chooseMd} - Plugin (CategoryName)`, 238 | 'Click', 239 | categoryName 240 | ); 241 | ga( 242 | 'send', 243 | 'event', 244 | `Awesome design ${chooseMd} - Plugin (Platform)`, 245 | 'Click', 246 | platforms.join('-') 247 | ); 248 | }, 249 | true 250 | ); 251 | }); 252 | 253 | document.querySelectorAll('.nav ul li a').forEach(a => { 254 | a.addEventListener( 255 | 'click', 256 | e => { 257 | const { target } = e; 258 | const title = target.innerText; 259 | 260 | ga( 261 | 'send', 262 | 'event', 263 | ` Awesome design ${chooseMd} - Category (Title)`, 264 | 'Click', 265 | title 266 | ); 267 | }, 268 | true 269 | ); 270 | }); 271 | 272 | if (window.innerWidth >= 960) { 273 | const active = document.querySelector('.header-top__nav-item.-active'); 274 | document.querySelectorAll('.header-top__nav-item').forEach(a => { 275 | a.onmouseover = e => { 276 | if (!e.target.classList.contains('-active')) { 277 | active.classList.remove('-open'); 278 | } else { 279 | e.target.classList.add('-open'); 280 | } 281 | }; 282 | 283 | a.onmouseout = e => { 284 | if (!active.classList.contains('-open')) { 285 | active.classList.add('-open'); 286 | } 287 | }; 288 | }); 289 | } 290 | 291 | const showBannerTop = () => { 292 | const sEl = el => document.querySelector(el); 293 | 294 | setTimeout(() => { 295 | sEl('.header-top').classList.remove('header-top--hide-banner'); 296 | }, 0); 297 | // if (window.innerWidth < 768) { 298 | // sEl('.nav-container').removeClass('nav-container--hide-banner') 299 | // } 300 | 301 | sEl('.banner__close').onclick = () => { 302 | sEl('.header-top').classList.add('header-top--hide-banner'); 303 | }; 304 | }; 305 | showBannerTop(); 306 | -------------------------------------------------------------------------------- /docs/modules/Templates.js: -------------------------------------------------------------------------------- 1 | const getCssFile = require('./helpers/getCssFile'); 2 | const CONFIG = require('./config/tools'); 3 | 4 | const normalizeCss = getCssFile('normalize'); 5 | const mainCss = getCssFile('design-tools-style'); 6 | const { 7 | promoFlawlessFeedbackBanner__title, 8 | promoFlawlessFeedbackBanner__description, 9 | promoFlawlessFeedbackBanner__link, 10 | } = CONFIG; 11 | 12 | const Templates = { 13 | analytics: ` 14 | 15 | 20 | 21 | 22 | 23 | 35 | `, 36 | promoFlawlessFeedbackBanner: ` 37 | 38 |
39 |

${promoFlawlessFeedbackBanner__title}

40 |

${promoFlawlessFeedbackBanner__description}

41 |
42 |
Request Access
45 | `, 46 | createIcons: (favicon) => ` 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | `, 61 | createTitle: (title) => `${title}`, 62 | createMeta: (meta) => ` 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | `, 87 | fonts: ` 88 | 89 | `, 90 | styleExternal: ` 91 | 92 | 93 | `, 94 | styleInner: ` 95 | 99 | `, 100 | }; 101 | 102 | module.exports = Templates; 103 | -------------------------------------------------------------------------------- /docs/modules/addAllPromoBanners.js: -------------------------------------------------------------------------------- 1 | const promotionBanner = require('./view/promotionBanner'); 2 | 3 | const addAllPromoBanners = (window) => { 4 | // promotionBanner( 5 | // window, 6 | // { 7 | // className: '-supernova', 8 | // logo: '-supernova', 9 | // title: 'Supernova', 10 | // description: 'Convert any mobile design into full-fledged native applications', 11 | // link: { 12 | // href: 'http://bit.ly/2ZwUoEq', 13 | // className: '-supernova', 14 | // text: 'Try Supernova Studio', 15 | // }, 16 | // }, 17 | // [ 18 | // '#code-export', '#collaboration', '#developers-handoff', 19 | // '#design-to-code-tools', '#collaboration-tools' 20 | // ] 21 | // ); 22 | promotionBanner( 23 | window, 24 | { 25 | className: '-abstract', 26 | logo: '-abstract', 27 | title: 'Abstract', 28 | description: 'We centralize design decisions, feedback, Sketch files, and specs for your team.', 29 | link: { 30 | href: 'https://www.abstract.com/campaigns/collaboration/?&utm_medium=Partner-Advertising&utm_source=PA-Native-Digital&utm_campaign=CY19-PA-FlawlessApp-1018-Sept12&utm_term=designplugins&utm_content=Sponsored', 31 | className: '-abstract', 32 | text: 'Get a free, 14-day trial', 33 | }, 34 | }, 35 | [ 36 | '#version-control', '#plugin-development', '#animation-tools', '#gradient-tools', 37 | '#ui-design-tools', '#design-version-control', '#design-system-tools', 38 | '#accessibility', '#copy--paste', '#map-generation', 39 | '#visual-debugging-tools' 40 | ] 41 | ); 42 | // promotionBanner( 43 | // window, 44 | // { 45 | // className: '-protopie', 46 | // logo: '-protopie', 47 | // title: 'ProtoPie', 48 | // description: 'Interactive prototyping for all digital products', 49 | // link: { 50 | // href: 'http://bit.ly/33KtOpN', 51 | // className: '-protopie', 52 | // text: 'Try for Free', 53 | // }, 54 | // }, 55 | // [ 56 | // '#prototyping', '#plugins-collection', 57 | // '#prototyping-tools', '#mockup-tools', '#user-flow-tools' 58 | // ] 59 | // ); 60 | // promotionBanner( 61 | // window, 62 | // { 63 | // className: '-maze', 64 | // logo: '-maze', 65 | // title: 'Maze', 66 | // description: 'Maze is a user testing platform that turns your prototype into actionable insights.', 67 | // link: { 68 | // href: 'http://bit.ly/35I1q9q', 69 | // className: '-maze', 70 | // text: 'Try for Free', 71 | // }, 72 | // }, 73 | // [ 74 | // '#analytics-and-user-research', '#user-flows', 75 | // '#experience-monitoring', '#user-research-tools' 76 | // ] 77 | // ); 78 | // promotionBanner( 79 | // window, 80 | // { 81 | // className: '-porkbun', 82 | // logo: '-porkbun', 83 | // title: 'Get your free .design domain name!', 84 | // description: `Thinking of building your portfolio? .design is like .com, and .net, but it's more relevant to what you do as a designer.`, 85 | // hasImage: true, 86 | // // image1x: 'https://flawlessapp.io/images/designtools/porkbun/porkbun-logo.png', 87 | // // image2x: 'https://flawlessapp.io/images/designtools/porkbun/porkbun-logo@2x.png', 88 | // // image3x: 'https://flawlessapp.io/images/designtools/porkbun/porkbun-logo@3x.png', 89 | // link: { 90 | // href: 'http://bit.ly/2VQVTJ8', 91 | // className: '-porkbun', 92 | // text: 'Get 1-year Free', 93 | // }, 94 | // }, 95 | // [ 96 | // '#website-and-html-export', '#code-highlight', '#presentation-and-preview', 97 | // '#screenshot-software', '#design-inspiration', '#illustrations' 98 | // ] 99 | // ); 100 | // promotionBanner( 101 | // window, 102 | // { 103 | // className: '-xd', 104 | // logo: '-xd', 105 | // title: 'Adobe XD', 106 | // description: 'Design at the speed of thought.', 107 | // link: { 108 | // href: 'https://adobe.ly/33HVSdf', 109 | // className: '-xd', 110 | // text: 'Use For Free', 111 | // }, 112 | // }, 113 | // [ 114 | // '#generate-ui-element', 115 | // '#tools-for-learning-design', '#design-handoff-tools' 116 | // ] 117 | // ); 118 | } 119 | 120 | module.exports = addAllPromoBanners; -------------------------------------------------------------------------------- /docs/modules/addBackgroundColorToLogo.js: -------------------------------------------------------------------------------- 1 | const tinycolor = require('tinycolor2'); 2 | 3 | const addBackgroundColorToLogo = ({ document }) => { 4 | const backgroundColorsHSL = [ 5 | '240,78.8%,87.1%', '270,78.8%,87.1%', '340.5,76.9%,89.8%', '0,78.8%,87.1%', '30,79.6%,80.8%', 6 | '150,79.6%,80.8%', '176.3,38%,74.7%', '253.3,94.7%,92.5%', '15.7,86.7%,85.3%', '198.8,88.9%,89.4%', 7 | '71.7,97.6%,83.5%', '271,93.9%,93.5%', '4.4,36%,85.3%', '14.6,95.3%,83.1%', '35.3,95.7%,81.6%', 8 | '140.4,36.2%,72.9%', '193.8,38.7%,75.7%', '251,71.4%,83.5%', '30.3,79.9%,70.8%', '30,79.6%,80.8%', 9 | '60,79.6%,80.8%', '180,79.6%,80.8%', '210,79.6%,80.8%', '210,79.6%,80.8%', '0,79.6%,80.8%', 10 | '0,78.7%,90.8%', '271.6,77.1%,81.2%', '271.6,77.1%,81.2%', '61.6,77.1%,81.2%', '121.6,77.1%,81.2%', 11 | '181.6,77.1%,81.2%', '181.6,77.1%,81.2%', '241.6,77.1%,81.2%', '0,0%,78%', '0,41.1%,78%', 12 | '121.6,77.1%,81.2%', '121.6,77.1%,81.2%', '121.6,77.1%,81.2%', 13 | ]; 14 | 15 | const createHsvFontColor = (hsv) => { 16 | const color = tinycolor(`hsl(${hsv})`); 17 | const splitted = color.toHsvString().split(','); 18 | const saturation = parseFloat(splitted[1]); 19 | const lightness = parseFloat(splitted[2]); 20 | return `${[splitted[0],`${saturation+15}%`,`${lightness-13}%`].join(',')})`; 21 | } 22 | const categories = document.querySelectorAll('article'); 23 | categories.forEach((category, colorNumber = 0) => { 24 | const logos = category.querySelectorAll('.tool__asset'); 25 | logos.forEach((logo) => { 26 | const color = tinycolor(createHsvFontColor(backgroundColorsHSL[colorNumber])); 27 | logo.style.backgroundColor = `hsl(${backgroundColorsHSL[colorNumber]})`; 28 | logo.style.color = color.toRgbString(); 29 | }); 30 | colorNumber += 1; 31 | }) 32 | } 33 | 34 | module.exports = addBackgroundColorToLogo; 35 | -------------------------------------------------------------------------------- /docs/modules/addContributeButtonForAddendum.js: -------------------------------------------------------------------------------- 1 | const addContributeButtonForAddendum = ({ document }) => { 2 | const article = document.querySelector('#addendum'); 3 | const button = document.createElement('a'); 4 | button.href = 'https://github.com/LisaDziuba/Awesome-Design-Tools'; 5 | const classNames = ['btn', 'btn-contribute', 'image-gh']; 6 | classNames.map(className => button.classList.add(className)); 7 | button.innerHTML = 'Contribute on GitHub'; 8 | if (article) { 9 | article.appendChild(button); 10 | } 11 | } 12 | 13 | module.exports = addContributeButtonForAddendum; 14 | -------------------------------------------------------------------------------- /docs/modules/addHamburgerMenu.js: -------------------------------------------------------------------------------- 1 | const addHamburgerMenu = ({ document }) => { 2 | const parent = document.querySelector('.header-inner'); 3 | const hamburger = document.createElement('div'); 4 | hamburger.classList.add('hamburger-menu'); 5 | hamburger.innerHTML = ` 6 |
7 |
8 |
9 | `; 10 | parent.appendChild(hamburger); 11 | } 12 | 13 | module.exports = addHamburgerMenu; 14 | -------------------------------------------------------------------------------- /docs/modules/addHeader.js: -------------------------------------------------------------------------------- 1 | const addHeader = ( 2 | { document }, 3 | title = 'Awesome Design Tools', 4 | logo, 5 | nav, 6 | isTool = false, 7 | isPlugin = false, 8 | isKit = false 9 | ) => { 10 | const header = document.querySelector('.header-top'); 11 | header.classList.add('header-top--hide-banner'); 12 | const { loop } = nav; 13 | 14 | const defineProductName = () => 15 | (isTool && `Awesome Design Tools`) || 16 | (isPlugin && `Awesome Design Plugins`) || 17 | (isKit && `Awesome Design Kits`); 18 | 19 | header.innerHTML = ` 20 | 31 |
32 | 36 | 51 | ${ 52 | isTool 53 | ? ` 54 | 55 | ` 56 | : `` 57 | } 58 | ${ 59 | isPlugin 60 | ? ` 61 |
62 | 63 | 64 |
65 |
Show plugins for:
66 |
67 | 68 | 69 | 70 |
71 |
72 |
73 | ` 74 | : `` 75 | } 76 | ${ 77 | isKit 78 | ? ` 79 |
80 | 81 | 82 |
83 |
Show plugins for:
84 |
85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 |
93 |
94 |
95 | ` 96 | : `` 97 | } 98 |
99 | `; 100 | }; 101 | 102 | module.exports = addHeader; 103 | -------------------------------------------------------------------------------- /docs/modules/addIDsForHeadings.js: -------------------------------------------------------------------------------- 1 | const createLinkForID = require('./helpers/createLinkForID'); 2 | 3 | const addIDsForHeadings = ({ document }) => { 4 | const categoryTitles = document.querySelectorAll('body > h3'); 5 | categoryTitles.forEach(title => title.id = createLinkForID(title.innerHTML)); 6 | } 7 | 8 | module.exports = addIDsForHeadings; 9 | -------------------------------------------------------------------------------- /docs/modules/addLinksToNavigationElements.js: -------------------------------------------------------------------------------- 1 | const addLinksToNavigationElements = ({ document }) => { 2 | const navListLinks = document.querySelectorAll('.nav li a'); 3 | navListLinks.forEach((item) => { 4 | const oldHref = item.href; 5 | item.href = `#${oldHref.split(`#`)[1]}`; 6 | }); 7 | } 8 | 9 | module.exports = addLinksToNavigationElements; 10 | -------------------------------------------------------------------------------- /docs/modules/addScripts.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | 4 | const getJS = () => ( 5 | fs.readFileSync(path.normalize(`${__dirname}/../js/script.js`), 'utf8') 6 | ) 7 | 8 | const addScripts = ({ document }) => { 9 | const scriptTag = document.createElement('script'); 10 | scriptTag.innerHTML = getJS(); 11 | document.querySelector('body').appendChild(scriptTag); 12 | } 13 | 14 | module.exports = addScripts; 15 | -------------------------------------------------------------------------------- /docs/modules/addWelcomeArticle.js: -------------------------------------------------------------------------------- 1 | const addWelcomeArticle = ( 2 | { document }, 3 | { 4 | logoClassName, 5 | title, 6 | description, 7 | button, 8 | } 9 | ) => { 10 | const main = document.querySelector('body > main'); 11 | const article = document.createElement('article'); 12 | article.classList.add('welcome'); 13 | article.innerHTML = ` 14 |
15 |

${title}

16 |

17 | ${description} 18 |

19 | Contribute on GitHub 20 | `; 21 | main.insertBefore(article, main.childNodes[0]); 22 | } 23 | 24 | module.exports = addWelcomeArticle; 25 | -------------------------------------------------------------------------------- /docs/modules/config/plugins.js: -------------------------------------------------------------------------------- 1 | const { 2 | favicon196, 3 | favicon160, 4 | favicon152, 5 | favicon144, 6 | favicon120, 7 | favicon114, 8 | favicon96, 9 | favicon76, 10 | favicon72, 11 | favicon60, 12 | favicon57, 13 | favicon32, 14 | favicon16, 15 | } = require('../favicon/favicon-adp'); 16 | 17 | const CONFIG = { 18 | markdownFile: `./Awesome-Design-Plugins.md`, 19 | index: `./docs/index-plugins.html`, 20 | promoFlawlessFeedbackBanner__title: 'Leave feedback on iOS apps', 21 | promoFlawlessFeedbackBanner__description: 'Turn UI issues & Bugs Into Jira tickets or Trello cards', 22 | promoFlawlessFeedbackBanner__link: 'https://flawlessapp.io/feedback', 23 | main: { 24 | title: 'Awesome Design Plugins', 25 | themeColor: '#F2FAF5', 26 | bodyColorScheme: '-green', 27 | logoClassName: '-logo-adp', 28 | head: { 29 | title: 'Awesome Design Plugins', 30 | meta: { 31 | title: 'Awesome Design Plugins', 32 | themeColor: '#F2FAF5', 33 | description: 'Design plugins', 34 | image: 'https://flawlessapp.io/images/designtools/awesome-design-tools-sharable-image-general.png', 35 | siteURL: 'https://flawlessapp.io/designplugins', 36 | }, 37 | favicon: { 38 | '196': favicon196, 39 | '160': favicon160, 40 | '152': favicon152, 41 | '144': favicon144, 42 | '120': favicon120, 43 | '114': favicon114, 44 | '96': favicon96, 45 | '76': favicon76, 46 | '72': favicon72, 47 | '60': favicon60, 48 | '57': favicon57, 49 | '32': favicon32, 50 | '16': favicon16, 51 | }, 52 | }, 53 | nav: { 54 | loop: [ 55 | { 56 | title: 'Tools', 57 | href: '/designtools', 58 | isActive: false, 59 | className: '-tool', 60 | }, 61 | { 62 | title: 'Plugins', 63 | href: '/designplugins', 64 | isActive: true, 65 | className: '-plugin', 66 | }, 67 | { 68 | title: 'UI Kits', 69 | href: '/designkits', 70 | isActive: false, 71 | className: '-kit', 72 | }, 73 | ], 74 | }, 75 | welcomeArticle: { 76 | title: 'Awesome Design Plugins', 77 | logoClassName: '-logo-adp', 78 | description: `All the best design plugins for Sketch, Adobe XD, and Figma, gathered in one place.`, 79 | button: { 80 | href: 'https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Awesome-Design-Plugins.md', 81 | }, 82 | }, 83 | 84 | }, 85 | }; 86 | 87 | module.exports = CONFIG; 88 | -------------------------------------------------------------------------------- /docs/modules/config/tools.js: -------------------------------------------------------------------------------- 1 | const { 2 | favicon196, 3 | favicon160, 4 | favicon152, 5 | favicon144, 6 | favicon120, 7 | favicon114, 8 | favicon96, 9 | favicon76, 10 | favicon72, 11 | favicon60, 12 | favicon57, 13 | favicon32, 14 | favicon16, 15 | } = require('../favicon/favicon-adt'); 16 | 17 | const CONFIG = { 18 | markdownFile: `./README.md`, 19 | index: `./docs/index.html`, 20 | promoFlawlessFeedbackBanner__title: 'Leave feedback on iOS apps', 21 | promoFlawlessFeedbackBanner__description: 'Turn UI issues & Bugs Into Jira tickets or Trello cards', 22 | promoFlawlessFeedbackBanner__link: 'https://flawlessapp.io/feedback', 23 | main: { 24 | title: 'Awesome Design Tools', 25 | themeColor: '#0054d7', 26 | bodyColorScheme: '-blue', 27 | logoClassName: '-logo-adt', 28 | head: { 29 | title: 'Awesome Design Tools', 30 | meta: { 31 | title: 'Awesome Design Tools', 32 | themeColor: '#0054d7', 33 | description: 'The best design tools for everything — from wireframing and prototyping to animation, accessibility, AR, design systems and sound design.', 34 | image: 'https://flawlessapp.io/images/designtools/awesome-design-tools-sharable-image-general.png', 35 | siteURL: 'https://flawlessapp.io/designtools', 36 | }, 37 | favicon: { 38 | '196': favicon196, 39 | '160': favicon160, 40 | '152': favicon152, 41 | '144': favicon144, 42 | '120': favicon120, 43 | '114': favicon114, 44 | '96': favicon96, 45 | '76': favicon76, 46 | '72': favicon72, 47 | '60': favicon60, 48 | '57': favicon57, 49 | '32': favicon32, 50 | '16': favicon16, 51 | }, 52 | }, 53 | nav: { 54 | loop: [ 55 | { 56 | title: 'Tools', 57 | href: '/designtools', 58 | isActive: true, 59 | className: '-tool', 60 | }, 61 | { 62 | title: 'Plugins', 63 | href: '/designplugins', 64 | isActive: false, 65 | className: '-plugin', 66 | }, 67 | { 68 | title: 'UI Kits', 69 | href: '/designkits', 70 | isActive: false, 71 | className: '-kit', 72 | }, 73 | ], 74 | }, 75 | welcomeArticle: { 76 | title: 'Awesome Design Tools', 77 | logoClassName: '-logo-adt', 78 | description: `The best design tools for everything. Curated by Lisa Dziuba & Valia Havruliyk from Flawless team.`, 79 | button: { 80 | href: 'https://github.com/LisaDziuba/Awesome-Design-Tools', 81 | }, 82 | }, 83 | }, 84 | } 85 | 86 | module.exports = CONFIG; 87 | -------------------------------------------------------------------------------- /docs/modules/config/ui-kits.js: -------------------------------------------------------------------------------- 1 | const { 2 | favicon196, 3 | favicon160, 4 | favicon152, 5 | favicon144, 6 | favicon120, 7 | favicon114, 8 | favicon96, 9 | favicon76, 10 | favicon72, 11 | favicon60, 12 | favicon57, 13 | favicon32, 14 | favicon16, 15 | } = require('../favicon/favicon-adk'); 16 | 17 | const CONFIG = { 18 | markdownFile: `./Awesome-Design-UI-Kits.md`, 19 | index: `./docs/index-kits.html`, 20 | promoFlawlessFeedbackBanner__title: 'Leave feedback on iOS apps', 21 | promoFlawlessFeedbackBanner__description: 'Turn UI issues & Bugs Into Jira tickets or Trello cards', 22 | promoFlawlessFeedbackBanner__link: 'https://flawlessapp.io/feedback', 23 | main: { 24 | title: 'Awesome Design UI Kits', 25 | themeColor: '#850289', 26 | bodyColorScheme: '-violet', 27 | logoClassName: '-logo-adk', 28 | head: { 29 | title: 'Awesome Design UI Kits', 30 | meta: { 31 | title: 'Awesome Design UI Kits', 32 | themeColor: '#850289', 33 | description: 'Design kits', 34 | image: 'https://flawlessapp.io/images/designtools/awesome-design-tools-sharable-image-general.png', 35 | siteURL: 'https://flawlessapp.io/designplugins', 36 | }, 37 | favicon: { 38 | '196': favicon196, 39 | '160': favicon160, 40 | '152': favicon152, 41 | '144': favicon144, 42 | '120': favicon120, 43 | '114': favicon114, 44 | '96': favicon96, 45 | '76': favicon76, 46 | '72': favicon72, 47 | '60': favicon60, 48 | '57': favicon57, 49 | '32': favicon32, 50 | '16': favicon16, 51 | }, 52 | }, 53 | nav: { 54 | loop: [ 55 | { 56 | title: 'Tools', 57 | href: '/designtools', 58 | isActive: false, 59 | className: '-tool', 60 | }, 61 | { 62 | title: 'Plugins', 63 | href: '/designplugins', 64 | isActive: false, 65 | className: '-plugin', 66 | }, 67 | { 68 | title: 'UI Kits', 69 | href: '/designkits', 70 | isActive: true, 71 | className: '-kit', 72 | }, 73 | ], 74 | }, 75 | welcomeArticle: { 76 | title: 'Awesome Design UI Kits', 77 | logoClassName: '-logo-adk', 78 | description: `All the best design plugins for Sketch, Adobe XD, and Figma, gathered in one place.`, 79 | button: { 80 | href: 'https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Awesome-Design-UI-Kits.md', 81 | }, 82 | }, 83 | 84 | }, 85 | }; 86 | 87 | module.exports = CONFIG; 88 | -------------------------------------------------------------------------------- /docs/modules/createPromoBanner.js: -------------------------------------------------------------------------------- 1 | const Templates = require('./Templates'); 2 | 3 | const createPromoBanner = ({ document }, link = 'https://flawlessapp.io/feedback') => { 4 | const banner = document.createElement('a'); 5 | const { promoFlawlessFeedbackBanner } = Templates; 6 | banner.classList.add('promo-banner'); 7 | banner.classList.add('promo-banner--flawless-feedback'); 8 | banner.href = link; 9 | banner.innerHTML = promoFlawlessFeedbackBanner; 10 | 11 | const bannerParents = [ 12 | '#accessibility-tools', 13 | '#user-research-tools', 14 | '#prototyping-tools', 15 | '#visual-debugging-tools', 16 | ]; 17 | 18 | try { 19 | bannerParents.map(parent => document.querySelector(parent) && document.querySelector(parent).appendChild(banner.cloneNode(true))); 20 | } catch(err) { 21 | console.log(err); 22 | } 23 | 24 | } 25 | 26 | module.exports = createPromoBanner; 27 | -------------------------------------------------------------------------------- /docs/modules/editHead.js: -------------------------------------------------------------------------------- 1 | const Templates = require('./Templates'); 2 | 3 | const editHead = ({ document }, title, meta, icons, isProduction) => { 4 | const head = document.querySelector('head'); 5 | const { 6 | createTitle, 7 | createMeta, 8 | createIcons, 9 | fonts, 10 | styleInner, 11 | styleExternal, 12 | analytics, 13 | } = Templates; 14 | 15 | if (isProduction !== false) { 16 | head.innerHTML = ` 17 | ${createTitle(title)} 18 | ${createMeta(meta)} 19 | ${createIcons(icons)} 20 | ${styleInner} 21 | ${fonts} 22 | ${analytics} 23 | `; 24 | } else { 25 | head.innerHTML = ` 26 | ${createTilte(title)} 27 | ${createMeta(meta)} 28 | ${createIcons(icons)} 29 | ${fonts} 30 | ${styleExternal} 31 | `; 32 | } 33 | } 34 | 35 | module.exports = editHead; 36 | -------------------------------------------------------------------------------- /docs/modules/helpers/createLinkForID.js: -------------------------------------------------------------------------------- 1 | const createLinkForID = (str) => ( 2 | str.toLowerCase().split(' ').join('-') 3 | ) 4 | 5 | module.exports = createLinkForID; 6 | -------------------------------------------------------------------------------- /docs/modules/helpers/deleteAllIconsInDescription.js: -------------------------------------------------------------------------------- 1 | const deleteAllIconsInDescription = ({ document }) => { 2 | const toolDescription = document.querySelectorAll('.tool__description p img'); 3 | toolDescription.forEach((image) => image.parentNode.removeChild(image)); 4 | } 5 | 6 | module.exports = deleteAllIconsInDescription; 7 | -------------------------------------------------------------------------------- /docs/modules/helpers/getCssFile.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | 4 | const getCssFile = (file) => ( 5 | fs.readFileSync(path.normalize(`${__dirname}/../../css/${file}.css`), 'utf8') 6 | ) 7 | 8 | module.exports = getCssFile; 9 | -------------------------------------------------------------------------------- /docs/modules/helpers/getJS.js: -------------------------------------------------------------------------------- 1 | // const getJS = () => ( 2 | // fs.readFileSync(path.normalize(`${__dirname}/docs/js/script.js`), 'utf8') 3 | // ) 4 | 5 | // const addScripts = ({ document }) => { 6 | // const scriptTag = document.createElement('script'); 7 | // scriptTag.innerHTML = getJS(); 8 | // document.querySelector('body').appendChild(scriptTag); 9 | // } 10 | 11 | // module.exports = addScripts; 12 | -------------------------------------------------------------------------------- /docs/modules/helpers/removeAllImages.js: -------------------------------------------------------------------------------- 1 | const removeAllImages = ({ document }) => { 2 | for (let i= document.images.length; i-->0;) 3 | document.images[i].parentNode.removeChild(document.images[i]); 4 | } 5 | 6 | module.exports = removeAllImages; 7 | -------------------------------------------------------------------------------- /docs/modules/removeListInAddendum.js: -------------------------------------------------------------------------------- 1 | const removeListInAddendum = ({ document }) => { 2 | const article = document.querySelector('#addendum'); 3 | if (article) { 4 | const lists = article.querySelectorAll('ul'); 5 | lists.forEach((list) => 6 | list.innerHTML.includes('undefined') && 7 | list.parentNode.removeChild(list) 8 | ); 9 | } 10 | } 11 | 12 | module.exports = removeListInAddendum; 13 | -------------------------------------------------------------------------------- /docs/modules/tweakDescriptionOfArticleTopic.js: -------------------------------------------------------------------------------- 1 | const createLinkForID = require('./helpers/createLinkForID'); 2 | 3 | const tweakDescriptionOfArticleTopic = ({ document }) => { 4 | const topics = document.querySelectorAll('main > article'); 5 | topics.forEach((topic) => { 6 | const splittedHeader = topic.innerHTML.split('