Showing preview only (5,593K chars total). Download the full file or copy to clipboard to get everything.
Repository: goabstract/Awesome-Design-Tools
Branch: master
Commit: dc60e63c248c
Files: 43
Total size: 5.3 MB
Directory structure:
gitextract_hbp102tg/
├── .gitignore
├── Awesome-Design-Conferences.md
├── Awesome-Design-Plugins.md
├── Awesome-Design-UI-Kits.md
├── Contribution_Guidelines.md
├── LICENSE
├── README.md
├── docs/
│ ├── css/
│ │ ├── design-tools-style.css
│ │ └── normalize.css
│ ├── index-kits.html
│ ├── index-plugins.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.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
node_modules
docs/index.html
================================================
FILE: Awesome-Design-Conferences.md
================================================
<div class="hidden-in-page">
# Awesome Design Conferences
* [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)
* [Awesome Design UI Kits](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Awesome-Design-UI-Kits.md)
</div>
<p align="center">
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Awesome%20Design%20Conferences.png" alt="Awesome-Design-Conferences"/>
</a>
</p>
<p align="center">
<img alt="awesome" src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" /> <img alt="PRs Welcome" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" />
</p>
## How to Use and Contribute
* 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).
* To find the conference, go through the Table of Contents or search for a keyword (for example, "UX", "prototyping").
* Ask [Lisa](https://twitter.com/LisaDziuba) on Twitter.
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!
</div>
<header class='header header-top -mint'></header>
<div class="nav">
## Table of Content
* [January](#january)
* [February](#february)
* [March](#march)
* [April](#april)
* [May](#may)
* [June](#june)
* [July](#july)
* [August](#august)
* [September](#september)
* [October](#october)
* [December](#december)
</div>
<main>
<article id="january">
### January
| Name | About | Dates | Location |
|---|---|---|---|
| [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 |
| [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 |
| [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 |
| [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 |
| [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 |
| [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 |
| [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 |
| [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 |
</article>
<article id="february">
### February
| Name | About | Dates | Location |
|---|---|---|---|
| [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 |
| [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 |
| [Outcome](http://outcomeconf.com/) | a conference that talks about startups, products, UX and design from a storytelling perspective. | February 8 | Chandigarh, India |
| [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 |
| [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 |
| [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 |
| [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
| [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 |
| [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 |
| [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 |
</article>
<article id="march">
### March
| Name | About | Dates | Location |
|---|---|---|---|
| [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 |
| [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 |
| [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 |
| [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 |
| [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 |
| [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 |
| [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 |
</article>
<article id="april">
### April
| Name | About | Dates | Location |
|---|---|---|---|
| [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 |
| [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 |
| [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 |
| [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 |
| [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 |
| [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 |
| [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 |
| [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 |
| [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 |
| [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 |
| [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 |
| [beyond tellerrand](https://beyondtellerrand.com/events/dusseldorf-2020) | the affordable single-track event where creativity and technology meet. | April 27-29 | Düsseldorf, Germany |
</article>
<article id="may">
### May
| Name | About | Dates | Location |
|---|---|---|---|
| [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 |
| [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 |
| [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 |
| [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 |
| [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 |
| [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 |
| [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 |
| [UXLx](https://www.ux-lx.com/) | four days of inspiring talks and hands-on workshops featuring top industry speakers. | May 19-22 | Lisbon, Portugal |
| [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 |
| [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 |
</article>
<article id="june">
### June
| Name | About | Dates | Location |
|---|---|---|---|
| [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 |
| [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 |
| [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 |
| [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 |
| [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 |
| [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 |
| [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 |
| [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 |
| [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 |
| [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 |
</article>
<article id="july">
### July
| Name | About | Dates | Location |
|---|---|---|---|
| [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 |
| [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 |
</article>
<article id="august">
### August
| Name | About | Dates | Location |
|---|---|---|---|
| [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 |
| [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 |
| [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 |
</article>
<article id="september">
### September
| Name | About | Dates | Location |
|---|---|---|---|
| [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 |
| [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 |
| [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 |
| [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 |
</article>
<article id="october">
### October
| Name | About | Dates | Location |
|---|---|---|---|
| [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 |
| [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 |
| [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 |
| [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
| [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
| [Design Thinkers](https://designthinkers.com/) | Canada's largest annual graphic design conference, connecting designers from around the world. | October 24-25 | Toronto, Canada |
| [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 |
</article>
<article id="december">
### December
| Name | About | Dates | Location |
|---|---|---|---|
| [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 |
</article>
<article id="addendum">
### Addendum (Reference & Inspiration)
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 :)
</article>
================================================
FILE: Awesome-Design-Plugins.md
================================================
<div class="hidden-in-page">
# Awesome Design Plugins
* [Awesome Design Tools](https://github.com/LisaDziuba/Awesome-Design-Tools)
* [Awesome Design UI Kits](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Awesome-Design-UI-Kits.md)
* [Awesome Design Conferences](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Awesome-Design-Conferences.md)
<div class="hidden-in-page">
<p align="center">
<a href="https://flawlessapp.io/designplugins">
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Awesome%20Design%20Plugins.png" alt="Awesome-Design-Plugins"/>
</a>
<img alt="awesome" src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" />
<img alt="PRs Welcome" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" />
</p>
</div>
## How to Use and Contribute
* Now you are in **Awesome Design Plugins** section, if you need tools — go to [Awesome Design Tools](https://github.com/LisaDziuba/Awesome-Design-Tools).
* To find the tool, go through the Table of Contents or search for a keyword (for example, "animation", "prototyping").
* Ask [Lisa](https://twitter.com/LisaDziuba) on Twitter.
If you found some great design tool or plugin, just send a Pull Request concerning 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) and plugins in this file. We use such labels for Sketch , Adobe XD  and Figma  plugins, don't forget to add them. Now I'd love to see your suggestions!
</div>
<header class='header header-top -mint'></header>
<div class="nav">
## Table of Content
* [Accessibility](#accessibility)
* [Align & Arrange Plugins](#align--arrange)
* [Analytics](#analytics)
* [Charts](#charts)
* [Code Export](#code-export)
* [Code Highlight](#code-highlight)
* [Collaboration](#collaboration)
* [Color Management](#color-management)
* [Copy & Paste](#copy--paste)
* [Data Generation](#data-generation)
* [Developers Handoff](#developers-handoff)
* [Document Optimisation](#document-optimisation)
* [Document Organisation](#document-organisation)
* [Layout & Padding](#layout--padding)
* [Export](#export)
* [Generate UI](#generate-ui-element)
* [Guides & Grids](#guides--grids)
* [Images Management](#images-management)
* [Import](#import)
* [Map Generation](#map-generation)
* [Mockup Plugins](#mockup-plugins)
* [Other](#other)
* [PDF Export](#pdf-export-plugins)
* [Plugin Development](#plugin-development)
* [Plugin Managers](#plugin-managers)
* [Plugins Collection](#plugins-collection)
* [Presentation & Preview](#presentation--preview)
* [Prototyping](#prototyping)
* [3D Perspective](#three-d-perspective)
* [Rename Helper](#rename-helper)
* [Resize](#resize)
* [Selection Enhancement](#selection-enhancement)
* [Shortcut & Keyboard](#shortcut--keyboard)
* [State Management](#state-management)
* [Style Management](#style-management)
* [Symbols & Components](#symbols--components-management)
* [Text Management](#text-management)
* [Translation & Localization](#translation--localization)
* [Typeface](#typeface)
* [UI Kits](#ui-kits)
* [User Flows](#user-flows)
* [Version Control](#version-control)
* [Website & HTML Export](#website--html-export)
* [Workflow Improvements](#workflow-improvements)
* [Zoom Enhancement](#zoom-enhancement)
</div>
<main>
<article id="accessibility">
### Accessibility
<div class="hidden-in-page">
<p align="center">
<a href="http://bit.ly/33Q3AC0">
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Abstract.png" alt="Abstract"/>
</a>
</p>
</div>
* [Stark](http://www.getstark.co) — ensure your design is accessible and high contrast for every type of color blindness.  
* [Cluse](https://cluse.cc) — a free and open-source Sketch plugin that allows you to test the color contrast of your design for accessibility and adjust colors without interrupting your workflow. 
* [Color Contrast Analyser](https://github.com/getflourish/Sketch-Color-Contrast-Analyser) — a Sketch plugin that calculates the color contrast of two selected layers and evaluates it against the WCAG2.0. 
* [Check Contrast](https://github.com/lifeofmle/check-contrast) — allows you to select layers in Sketch and get realtime feedback about the contrast ratio. 
* [Contrast](https://github.com/romannurik/Sketch-Contrast#readme) — a Sketch plugin to show a pass/fail type contrast report. 
* [Sketch Color Contrast Analyzer](https://github.com/eaugustine/Sketch-Color-Contrast-Analyzer) — a Sketch plugin that calculates the color contrast of two layers and evaluates them against MCOE's guidelines. 
* [A11y - Color Contrast Checker](https://www.figma.com/c/plugin/733159460536249875) — ensure your text is readable for users by adhering to WCAG (Web Content Accessibility Guidelines) standards. 
* [Color Blind](https://www.figma.com/c/plugin/733343906244951586) — it allows you to view your designs in the 8 different types of color vision deficiencies. 
* [Able – Friction free accessibility](https://www.figma.com/c/plugin/734693888346260052) — able makes accessibility easy while looking and feeling like Figma! 
* [Contrast](https://www.figma.com/c/plugin/748533339900865323) — contrast makes it easy to check the contrast ratios of colors as you work. 
* [A11y - Focus Orderer](https://www.figma.com/c/plugin/731310036968334777) — quickly annotate your designs’ focus/tab order flow. Why? Because not everyone uses a mouse cursor to navigate through online experiences; some people use the keyboard and/or other input devices. 
* [Arabic & RTL Support](https://www.figma.com/c/plugin/732290356467065314) — write Arabic and RTL text in Figma with ease. 
* [VisualEyes](https://www.figma.com/c/plugin/740542057689267294) — measure the attention of your design inside Figma. 
* [RTL support](https://www.figma.com/c/plugin/739739050044773150) — flip RTL languages like Hebrew and Arabic. 
* [RTLPLZ - RTL Support](https://www.figma.com/c/plugin/742121299910255177) — write RTL text in Figma with fewer tears. 
* [Epilepsy Blocker](https://www.figma.com/c/plugin/746367992714028465) — with this plugin you can make your designs accessible and safe for people with photosensitive epilepsy and also stay ADA Compliant. 
* [LTR to RTL by Alon Gruss](alon.gruss+xdplug@gmail.com) — use Ctrl+h or Cmd+h to flip from LTR text to RTL. 
* [Func Creatives by Yaron Elharar](https://sugarsweetapps.com/func-creatives/) — adds custom shortcuts to Adobe XD, plus voice commands on Windows. 
</article>
<article id="align--arrange">
### Align & Arrange
* [Auto Arrange Artboards](https://github.com/srbsingh3/autoarrange) — automatically arrange the order of your artboards in the layer list according to their position on the canvas. 
* [Aligny](https://github.com/stefan0uh/sketch-aligny) — an alignment enhance plugin for Sketch. 
* [Sequence Artboard Names](https://github.com/tbrasington/Sequence-Sketch-Artboards) — simple sequencing of all artboards within a Sketch Document. 
* [Sketch Align To Grid](https://github.com/pravdomil/sketch-align-to-grid) — let's align selection to grid. 
* [Sketch Groupie](https://github.com/aparajita/sketch-groupie) — sketch plugin providing commands to align layers with their parent group. 
* [Sketch Guides](http://guides.pratikshah.website/) — allows you to quickly generate guides for a selected element and helps you achieve web development's famous grid (column) behavior in Sketch. 
* [IconFlower](https://medium.com/sketch-app-sources/sketch-app-plugin-iconflower-8fc84eef53d6) — arrange icons, images, and shapes in Phyllotaxis ( leaf arrangement) patterns. Leaf arrangement pattern in a sunflower, for example. 
* [Organize Symbols](https://github.com/marianomike/sketch-organizesymbols) — a Sketch plugin that arranges symbol artboards. 
* [BaseAlign](https://github.com/abynim/BaseAlign) — a Sketch Plugin to align Text Layers by their baselines. 
* [Artboard Tools](https://github.com/frankko/Artboard-Tools) — a Sketch plugins for arranging artboards and navigating between artboards. 
* [Align To](https://github.com/LucienLee/AlignTo) — a Sketch 3 plugin that aligns layers relative to more options. 
* [Align artboards and symbols](https://github.com/richardgazdik/sketch-align) — group and align your Sketch symbols and artboards by name. 
* [Bootstrap Helpers](https://github.com/konki-vienna/sketch-bootstrap-helpers) — a plugin to help to work with bootstrap grids and grids in general. It allows to create (Bootstrap) grids and align and de-/increase the width of layers accordingly. 
* [Symbol Override Padding](https://github.com/franklymrshankly/Symbol-Override-Padding) — add bottom padding to a symbol override. 
* [Symbol Organizer](https://github.com/sonburn/symbol-organizer) — organize your symbols page and layer list, based on the symbol names. 
* [Symbol and Artboard Organizer](https://github.com/Myrronth/symbol-and-artboard-organizer) — organize your symbols and artboards. 
* [Sketchplugin Align Artboards](https://github.com/doubco/sketchplugin-align-artboards) — easily aligns all artboards vertical or horizontal by name. Uses the same convention as the Sketch export folder structure 'parent/child'. 
* [Modulizer](https://github.com/Falkeyn/Modulizer) — modulizer plug-in for Sketch.app allows you easy control paddings for buttons, modules and areas. If your module has the background you can set fixed paddings and easily restore it for any content changes. 
* [Pull to Center](https://github.com/delighted/sketch-pull-to-center) — pull to center: Move selected shapes or layers toward the center of the artboard. 
* [SketchDistributor](https://github.com/PEZ/SketchDistributor) — distribute selection objects vertically or horizontally with a given spacing between them. 
* [Sort Me](https://github.com/romashamin/sort-me-sketch) — sort artboards and layers by name. 
* [Move It](https://github.com/dawidw/move-it) — a Sketch plugin that lets you move selected layers vertically and horizontally. 
* [Distribute Layers](https://github.com/wonderbit/sketch-distribute-layers) — a Sketch plug-in to distribute layers evenly. 
* [Optically for Sketch](http://designplugins.com/optically) — automated and mathematically precise optical adjustments in Sketch. 
* [SizeArtboard](https://github.com/BrendanMiller/SizeArtboard) — a Sketch Plugin for wrapping a new artboard around what you've selected. 
* [Butter](https://github.com/pberrecloth/butter-sketch-plugin) — this plugin will butt your layers together. 
* [Stacker](https://github.com/ScottSavarie/stacker) — a Sketch plugin to stack a selection horizontally or vertically. 
* [Sketch Arrange Artboards](https://github.com/kenmoore/sketch-arrange-artboards) — layout all artboards in a grid with a user-specified number of rows. 
* [SnipSnap](https://github.com/wescraig/SnipSnap) — remove extra padding on multiple layers or artboards with ease. 
* [Sketch Plugin Skew](https://github.com/mheesakkers/sketch-plugin-skew) — a Sketch plugin for skewing (or shearing) shapes horizontally or vertically. 
* [Align To Padding](https://github.com/franklymrshankly/Align-to-padding) — align layers in a group with padding applied. 
* [Paddit](https://github.com/franklymrshankly/Paddit) — a Sketch plugin that adjusts a group's background to the content with padding. 
* [Divider](https://github.com/jawayang/Sketch-Divider) — a plugin for Sketch to equal division layers by a container. 
* [Super Tidy](https://www.figma.com/c/plugin/731260060173130163) — a Figma plugin to easily align, rename and reorder your frames based in their canvas position. 
* [Sort It](https://www.figma.com/c/plugin/731324768889901500) — sort selected Frames or Layers by names. 
* [Swap](https://www.figma.com/c/plugin/739493471028643540) — easily swap two selected objects. 
* [Sorter](https://www.figma.com/c/plugin/742038190980789811) — a small utility plugin to help you sort/re-order layers in Figma. 
* [Align To](https://www.figma.com/c/plugin/742450159822269057) — align layers to a specific layer, and have that layer stay fixed while the other layers move. 
* [Reverse Layer Order](https://www.figma.com/c/plugin/738853407874474111) — this plugin will reverse the order of the selected layers. 
* [Golden Ratio Align & Resize](https://www.figma.com/c/plugin/747059755185517110) — with this plugin, it's easy to use the Golden Ratio just everywhere you need it. 
* [Distribute By](https://www.figma.com/c/plugin/761098431161143653) — a lightweight plugin that spaces elements evenly by the pixel. Distribute items vertically or horizontally from the edges or the centers. 
* [Swapper](https://constanting.com/#contact) — a plugin that allows swapping position of two selected elements. 
* [Apply Bounds](alexdobras@gmail.com) — copy and paste bounds: the position and/or the dimension from an item to reposition other items in bulk. Works with multiple items across multiple artboards. 
* [Mask Fit](info@paolobiagini.com) — a command-like plugin that allows fitting images to their mask. 
* [Artboard Plus](https://github.com/rodi01/Artboard-Plus-XD/blob/master/README.md) — artboard tools to speed up your Adobe XD workflow. Rearrange artboards into the grid, sort them by name or create an artboard around the selection. 
* [Invisible Space](https://twitter.com/kenji_clown5) — add invisible space for isolation area around a logo, hit area wider than icon button looks, padding/margin of web component. You can create a gap around the selected objects by entering a padding value or separate value Top/Left/Bottom/Right. 
* [Singari](https://sttk3.com/) — align/distribute to the key object. This plugin treats the last selected one as a key object. 
* [Remove Decimal Numbers](https://www.eslamnasser.com/) — get that pixel-perfect design by removing the decimal numbers from element's width, height, rotation, x and y values. 
* [TrimIt](https://github.com/peterflynn/xd-trimit) — quickly trim Artboards and Area Text to perfectly fit their content, and snap Repeat Grid size to the closest whole grid cell. This plugin is open source and only about 150 lines of code! 
* [Move Items to Adjacent Place](https://onthehead.com) — move/duplicate items to adjacent places (left, top, right, bottom). 
</article>
<!-- <div class="hidden-in-page">
<p align="center">
<a href="http://bit.ly/35I1q9q">
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Maze.png" alt="Maze"/>
</a>
</p>
</div> -->
<article id="analytics">
### Analytics
* [Attention Insight](https://www.attentioninsight.com) — improve design performance with pre-launch analytics.  
* [Visualeyes](https://github.com/loceye/sketch-visualeyes) — generate attention heatmaps in seconds. 
* [Useberry](https://www.useberry.com/integrations/adobe-xd/) — user testing feedback and users’ behavior insights with heatmaps, video recordings, user flows, time bars and follow-up questions. 
* [Userlytics](https://www.userlytics.com/faq) — allows you to easily configure and create a user experience test directly from your XD prototype so you can watch and listen to your target Persona interact with and answer questions. 
* [UserTesting](support@usertesting.com) — the UserTesting plugin enables you to seamlessly transition from designing a digital experience to soliciting immediate customer validation. 
* [User journey](https://github.com/mcoulthurst/xd-user-journey/blob/master/README.md) — this plugin renders a user journey map from external CSV text data. 
* [Mupixa](https://mupixa.com) — allows you to leverage the full potential of your prototypes by conducting usability research fast and effortlessly.  
* [Vempathy](https://vempathy.tech/plugins/adobe-xd/) — get feedback on your design where it matters: users emotional reactions. With the Vempathy plugin you will build better digital experiences with rapid customer feedback and analysis powered by AI. 
</article>
<article id="charts">
### Charts
* [Sketchy Pies](https://github.com/abynim/sketchy-pies) — a Sketch plugin to magically convert regular circle layers into pie charts! 
* [AEFlowchart](https://github.com/tadija/AEFlowchart) — Flowchart diagram plugin for Bohemian Coding Sketch app. 
* [Flowmate](https://github.com/wodory/flowmate) — a Sketch plugin to draw flowchart and diagram. 
* [Segmented Circle](https://github.com/design4use/gb-sketch-segmentcircle) — create precise segmented circular graphics for diagrams, instrumentation, and analytics. 
* [Sparkliner](https://github.com/Volorf/Sparkliner) — easy way to make sparkline graph. 
* [Freeman Finchart Sketchplugin](https://github.com/freeman990/Freeman-FinChart-SketchPlugin) — draw a financial charts like candle-stick or line charts like a boss. 
* [Charts](https://www.figma.com/c/plugin/731451122947612104) — charts allows you to generate charts that can be added and edited within your Figma document. 
* [Chart](https://www.figma.com/c/plugin/734590934750866002) — chart is a plugin for Figma that uses real or random data to create the most popular charts. 
* [simpleflow](https://www.figma.com/c/plugin/751821593330638172) — makes it easy to create a flowchart with customizing a theme, you can choose the color, the dashed style or even the curvature of the flowchart. 
* [Datavizer](https://www.figma.com/c/plugin/736737028247625415) — create a bar chart, scatter plot, or line chart easily with your data. 
* [Odin Chart](https://app.odinchart.com/faq) — a tool for a chart and map design in Adobe XDBring your own spreadsheet or use randomly generated data to place your designs in XD. This plugin requires a free account with Odin Chart. Sign up is easy and can be done through the plugin. 
</article>
<!-- <div class="hidden-in-page">
<p align="center">
<a href="http://bit.ly/2ZwUoEq">
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/SuperNova.png" alt="Supernova"/>
</a>
</p>
</div> -->
<article id="code-export">
### Code Export
* [iosViews](https://github.com/Charimon/iosViews) — a Sketch plugin to generate iOS view code. 
* [Copy Swift Code](https://github.com/ngs/sketchplugin-swift-color) — a Sketch plugin for generating UIColor and NSColor initializer Swift code from fill color of selected layers. 
* [Copy Objective-C Code](https://github.com/jaimeeee/sketchplugin-objc-color) — a Sketch plugin for generating UIColor and NSColor initializer Objective-C code from fill color of selected layers. 
* [CSS Sprite Mixin](https://github.com/littlebusters/Sketch-CSS-Sprite-Mixin) — copy mixin code for SCSS, Less and Stylus to the clipboard in Sketch 3. 
* [Sketch Markup Listify](https://github.com/marisaroque/sketch-markup-listify) — a Sketch plugin for convert and copy text layers into HTML lists. 
* [Copy Framer Code](https://github.com/perrysmotors/copy-framer-code) — a Sketch plugin that copies any selected layer to the clipboard as code that can be pasted straight into a Framer prototype. 
* [Cracker9 Sketch Plugin](https://github.com/Cracker9/cracker9-sketch-plugin) — cracker9 code-snippet sketch plugin. 
* [Sketch To View](https://github.com/kiranpuppala/sketch-to-view) — generate android views from sketch. 
* [DesignToken2Code](https://github.com/m-yoshiro/DesignToken2Code) — convert design tokens to SCSS variables as code. 
* [Sketch Color Vars](https://github.com/philsinatra/Sketch-Color-Vars) — a Sketch plugin that will export the fill color of selected layers to SCSS, LESS and CSS files. 
* [typex](https://github.com/reinvanoyen/typex) — highly configurable text styles to the web (CSS, sass, HTML, JSON, ...) export plugin 
* [SVG to React Component](https://github.com/reeli/sketch-svg-to-react-component) — a Sketch plugin to compress SVG and transform it to React (include React Native) components. By copy React component directly to your clipboard or export as files. 
* [PaintCode Code Generator](https://www.paintcodeapp.com/sketch) — convert your Sketch drawings into Swift or Objective-C. 
* [Copy as React Component (JSX)](https://github.com/jasondonnette/sketch-copy-as-react-component) — generate React components from Sketch with a keyboard shortcut. 
* [scssketch](https://github.com/devmynd/scssketch) — custom tools for living the ultimate the TAND&M; life. Built with love and care by Sarah Aslanifar, Drew Vosburg, and Max Oppenheimer. 
* [imgcook](https://github.com/taobaofed/imgcook) — a cook who can transform the design to code. 
* [Presto-Dom-Gen](https://github.com/iarthstar/presto-dom-code) — generates Presto Dom Code from Sketch Layers. 
* [bztone-plugin](https://github.com/wangjunwangjunwang/sketch2pixi-plugin) — convert Sketch layers to JSON. 
* [Sketch Exchanger](https://github.com/littlebusters/Sketch-Exchanger) — convert from Sketch to JSON w/assets and JSON w/assets to Sketch. 
* [CSSketch](https://github.com/JohnCoates/CSSketch) — CSS Stylesheet integration to improve your workflow, with Less support. Attach once, updates your design automatically on stylesheet changes. 
* [StyleClip](https://github.com/liawesomesaucer/StyleClip) — a Sketch plugin that copies an element's styles directly to your Mac clipboard. Supports CSS & SCSS. 
* [Sketch Style To React Native](https://github.com/futantan/sketch-style-to-react-native) — a Sketch plugin that copies an element's styles in React Native way directly to your Mac clipboard. 
* [CSSGen](https://www.figma.com/c/plugin/742750636238601912) — generate CSS Preprocessors SASS/LESS from your local Figma styles. 
* [Icon2Code](https://www.figma.com/c/plugin/741549820671978943) — easily create a JSON file for your fellow developers with everything they need to create a custom Icon component using their favorite framework or library (React, Angular, Vue, etc.). 
* [Copy CSS to Clipboard](https://github.com/peterflynn/xd-copy-css-code) — quickly copy CSS code for text styles, colors, gradients, shadows, etc. to the clipboard. This plugin is open source and only 200 lines of code! 
* [convert scss variables](workdrive0306@gmail.com) — Xd plugin for frontend engineer, Xd object to scss color and font size and font family variables. 
* [Lightning Storm](http://exportkit.com/help) — create web, mobile and desktop apps instantly. 
</article>
<!-- <div class="hidden-in-page">
<p align="center">
<a href="http://bit.ly/2VQVTJ8">
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Porkbun.png" alt="Porkbun"/>
</a>
</p>
</div> -->
<article id="code-highlight">
### Code Highlight
* [Sketch Syntax Highlighter](https://danielguillan.github.io/sketch-syntax-highlighter/) — automatically highlight the syntax of any code snippet, right within Sketch. 
* [Sketch Codelight](https://github.com/somebee/sketch-codelight) — highlight code inside Text layers in Sketch 
</article>
<!-- <div class="hidden-in-page">
<p align="center">
<a href="http://bit.ly/2ZwUoEq">
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/SuperNova.png" alt="Supernova"/>
</a>
</p>
</div> -->
<article id="collaboration">
### Collaboration
* [Google Sheets Content Sync](https://github.com/DWilliames/Google-sheets-content-sync-sketch-plugin) — edit and collaborate on your content in Google Sheets, then sync in back to your sketch files. 
* [Sync](https://github.com/nolastan/sync.sketchplugin) — use Google Sheets to sync typography across your team. 
* [Dapollo](https://www.yuque.com/dapollo/group/welcome) — design and Development Platform(一站式设计开发工作台) 
* [Prott Sketch Plugin](https://github.com/goodpatch/Prott-Sketch-Plugin) — sync Sketch artboards to Prott like a boss. 
* [Plot](https://plotapp.co) — collaborate with your design team in a new way 
* [Frontify Plugin](https://github.com/Frontify/sketch) — connecting your brand and design worlds 
* [Sketch Sync](https://sensive.co) — create a collaboration hub for your Sketch files. 
* [Quopi](https://github.com/LukeFinch/Quopi) — fetches copy from the comments on your Abstract branch 
* [Kopie](https://kopie.io) — the copy-editing tool for web and product design 
* [Figma Chat](https://www.figma.com/c/plugin/742073255743594050) — this plugin helps you to interact inside your files with other peoples. 
* [Status](https://www.figma.com/c/plugin/742769304454952644) — when collaborating on features with multiple designers and developers, it can be hard to keep track of which designs are ready to be implemented and what is still a work in progress. 
* [GoProof](support@goproof.net) — the GoProof plugin for Adobe XD brings proofing and collaboration on prototypes into the GoProof ecosystem, enabling app and web designers to manage XD work alongside all their other Adobe Creative Cloud media in an effortless and natural workflow. 
* [Slope](hello@goslope.com) — an easy way for teams to manage creative projects and tasks. With the Slope plugin, designers will be able to view a list of their tasks in XD that they are assigned to in Slope, and then request feedback or approval from stakeholders. 
* [Bluescape](support@bluescape.com) — interface with Bluescape, a visual collaboration platform, without having to leave Adobe Creative Cloud.- Export your Adobe designs directly to a workspace- Receive and respond to comments- Import images into your working document from BluescapeTo access the plugin, you will need a Bluescape account. 
* [Mixed](https://mixed.io) — Share on Mixed – communicate with voice, collaborate in real-time. Annotate, feedback & sketch together with simple visual tools. 
</article>
<article id="color-management">
### Color Management
* [Adjustments](https://www.figma.com/c/plugin/798711644668166520/Adjustments) - HSL color adjustment plugin for Figma. Tweak hue, saturation and lightness values of multiple selected objects simultaneously. 
* [sketch-retain-text-color](https://github.com/johnmcclumpha/sketch-retain-text-color) — retain the original color of text layers when applying a Text Style. 
* [color-locator](https://github.com/anavarromartin/sketch-color-locator) — find all instances of a HEX color. 
* [add-colors-to-palette](https://github.com/johnmcclumpha/sketch-add-colors-to-palette) — quickly and easily add colors from the fills of selected layers in a Sketch file to the document palette. 
* [color-swatcher](https://github.com/akiersky/color-swatcher) — a Sketch plugin to analyze document colors and show the WCAG color contrast value. 
* [add-selected-colors](https://github.com/jorgemartins/add-selected-colors) — add selected colors to document palette, sketch plugin. 
* [import-colors](https://github.com/Ashung/import-colors-sketch) — import colors from swatches file to Sketch. 
* [ColorSpark for Sketch](https://colorspark.app/sketch) — a simple tool to help designers discover unique colors and gradients directly in Sketch. 
* [keyColor](https://github.com/KevinGutowski/keyColor) — a Sketch plugin to apply colors via the keyboard. 
* [sketch-easing-gradients](https://github.com/larsenwork/sketch-easing-gradient) — supercharge your gradients in Sketch with no-linear color mix and custom color spaces 
* [Bonsai Standards](https://github.com/thechinesekid/bonsai-plugin) — update all the colors in an artboard to the latest Bonsai colors. 
* [Chromata](https://github.com/abnamrocoesd/Chromata) — find rogue colors 
* [Sketch Icons](https://github.com/AMoreaux/Sketch-Icons) — import your icons, apply a color mask and create a dynamic icons library. 
* [Sketch WCAG](https://github.com/bryanberger/sketch-wcag) — a Sketch plugin that lets you contrast test your entire color palette against the WCAG guidelines all at once. 
* [Sketch Palette Generator](https://github.com/awkward/sketch-palette-generator) — output a JSON color palette to Sketch. 
* [Appalette](https://github.com/Carlosarturo28/Appalette) — a Sketch plugin that lets you find the color palette of (almost) any App. 
* [CopyColor](https://github.com/poyi/CopyColor) — a plugin that provides a shortcut to copy layer fill color, border color, or text color to your clipboard for Sketch 4. 
* [QuickColor](https://github.com/colesperks/QuickColor) — a Sketch plugin that lets you quickly apply colors from the color palette to selected elements. 
* [arrowfy](https://github.com/joclin/arrowfy) — add a simple arrowhead to end of selected paths. Matches color and weight. 
* [Open Color Plugin for Sketch](http://opencolor.tools/) — a Sketch plugin to support the open color file format 
* [Prism](https://github.com/LaloMrtnz/Prism) — creates a beautiful artboard color palette with all your 'Document Colors' and their respective color label in a variety of formats. 
* [Copy Color as HSLA](https://github.com/peterwooley/copy-color-as-hsla) — a plugin to copy the fill, border, or text color of the selected layer to the clipboard as HSLA. 
* [Sketch Image Average Color](https://github.com/AntonioJMartinez/sketch-ImageAverageColor) — a plugin to save and use the average color of an image. 
* [Colorpeek](https://github.com/peterwooley/colorpeek-sketch-plugin) — gathers the colors used in your selected layers and shows them in Colorpeek. 
* [Color Picker Plus](https://github.com/heysketch/sketch-color-picker-plus) — set borders color using standard Sketch color picker 
* [Sass Colors](https://github.com/arshad/Sketch-Sass-Colors) — displays colors as preconfigure Sass variables for Sketch. 
* [Sketch Palettes](https://github.com/andrewfiorillo/sketch-palettes) — a Sketch plugin that lets you save and load colors in the color picker 
* [Material Design Color Palette](https://github.com/t32k/material-design-color-palette) — a Sketch app plugin for displaying Google material design color palette. 
* [Copy SCSS Colors](https://github.com/graphical-iain/Copy-SCSS-Colors) — a Sketch.app Plugin to copy colors to clipboard as SCSS variable definitions. 
* [Color Copier](https://github.com/mfouquet/Color-Copier) — a Sketch plugin to quickly copy color RGB/HEX values. 
* [Style Inventory](https://github.com/getflourish/Sketch-Style-Inventory) — generate a visual style sheet with all colors and text styles that you are using in Sketch. 
* [Swap Fill & Border](https://github.com/nathco/Swap-Fill-Border) — a Sketch.app plugin for swapping fill and border colors. 
* [Sketch iOS Bar Color Calculator](https://github.com/einancunlu/Sketch-iOS-Bar-Color-Calculator) — a Sketch plugin that calculates and applies the correct color for you to get actual design color after applying it to a translucent UIToolbar or UINavigationBar. 
* [Chromatic Sketch](https://github.com/petterheterjag/chromatic-sketch) — create good-looking and perceptually uniform gradients and color scales. 
* [Palette Stripes](https://github.com/sureskumar/palette-stripes) — generate palette stripes in sketch from shape fills. 
* [Alembic](https://alembicforsketch.com) — a Sketch plugin to extract a color palette from any layer that contains bitmap data. 
* [Chain](https://lalomts.github.io/Chain/) — dynamic color relations in Sketch. 
* [Replace Colour](https://github.com/lewishowles/sketch-replace-colour) — Replace all fill or text colours matching the selected layer 
* [Convert To Grayscale](https://github.com/mheesakkers/sketch-plugin-convert-to-grayscale) — a simple Sketch plugin to convert selected shapes to grayscale colors 
* [HSL Color Picker](https://github.com/Ashung/HSL_Color_Picker) — HSL Color Picker for Sketch 
* [Randomcolors](https://github.com/avadhbsd/RandomColors) — a Sketch App Plugin For Applying Random Colors To A Selection Of Objects. 
* [Sketch Color Palette](https://github.com/nerd0geek1/SketchColorPalette) — a Sketch Plugin to generate .clr(Color Palette) file from selected layers. 
* [Sketch Swatches](https://github.com/Ashung/Sketch_Swatches) — a swatches plugin for Sketch, include Material Design, Open Color, RAL, TOYO, Pantone and more. 
* [ColorBrightness](https://github.com/andex/ColorBrightness) — Color Brightness sketch plugin 
* [Colormate](https://github.com/themainingredient/colormate) — a sketch plugin that will help you figure out how in the hell you ended up with 457 different greys, instead of the 1 grey Mandy gave you in the handover. 
* [img-pal-gen](https://github.com/iarthstar/Image2Palette) — generates Color Palette from Image Layer 
* [Blender](https://github.com/bunnieabc/Blender) — a sketch plugin to create awesome gradient layers 
* [GGradient](https://github.com/andex/ggradient) — simple way to create perfect gradient 
* [CoolHue](https://github.com/webkul/coolhue) — coolest handpicked Gradient Palette for super amazing stuff 
* [Palette](https://www.figma.com/c/plugin/742549221432366731) — palette helps you create the perfect color palette through machine learning from Colormind. 
* [Image Palette](https://www.figma.com/c/plugin/731841207668879837) — extracts a color palette of 5 different colors from the selected images. 
* [uiGradients](https://www.figma.com/c/plugin/744909029427810418) — adds gradients to groups, text and frames in a single click. 
* [Color Palettes](https://www.figma.com/c/plugin/740832935938649295) — find the best color palette from the huge list of best color palettes. 
* [Color filters...](https://www.figma.com/c/plugin/735658738614175372) — a simple plugin that allows you to quick convert all the colors in you selected layers or frames. 
* [Dominant Color Toolkit](https://www.figma.com/c/plugin/744725347356614754) — generate a palette from an image to magically populate your designs. 
* [Brands Colors](https://www.figma.com/c/plugin/740232388085828578) — find the best color from the world's best brands and cool apps. 
* [Chroma](https://www.figma.com/c/plugin/739237058450529919) — create bulk color styles from the selection. 
* [GradientiMe](https://www.figma.com/c/plugin/739800909357948721) — simply generates a rectangle layer with the gradient selected. 
* [Color Designer](https://www.figma.com/c/plugin/739475857305927370) — the plugin generates shades, tints, and color harmonies based on select layers or local styles. 
* [Invert Color](https://www.figma.com/c/plugin/738840049488759901) — invert backgrounds, fills, strokes & effects colors. Apply change to multiple selected shapes, texts, frames etc. 
* [Color Compass](https://www.figma.com/c/plugin/754415266574382747) — this plugin was designed to make choosing colors a more accurate and efficient affair by generating interactive swatches using a single base color. 
* [Color Combinator](https://www.figma.com/c/plugin/755559299451656995) — a Figma plugin for exploring different combinations of colors among elements. 
* [Chromatic Figma](https://www.figma.com/c/plugin/759433498184507623) — lets you use other color spaces than RGB, such as Lab and Lch, to create good-looking and perceptually uniform gradients and color scales. 
* [Compliments](https://www.figma.com/c/plugin/741291546405622147) — use this simple plugin to find complementary, split complementary, triad, tetrad, monochromatic, and analogous colors to a selected layer's fill. 
* [Photo to Palette](https://www.figma.com/c/plugin/744287694483504163) — generates colour palette from selected images. 
* [Navigator](https://www.figma.com/c/plugin/739558587628004077) — an easy way to find and apply color styles from your current document. 
* [Shadow Picker](https://www.figma.com/c/plugin/744987207861965946) — quickly apply various shadows to layers with just 2 clicks. 
* [Instant Color](https://abdnahid.com) — generate 470+ colors of Ant Design, Tailwind and Flutter in your artboard. 
* [Random Colors by Alon Gruss](alon.gruss+xdplug@gmail.com) — Randomly generated color objects! 
* [material palette](https://t.me/savedata_space) — on-screen material palette 
* [ColorSpark](https://github.com/lukecjohnson/ColorSpark-for-XD) — ColorSpark for Adobe XD allows designers to quickly generate random colors and gradients directly in their XD projects. With ColorSpark, designers are sure to discover truly unique colors and striking gradients. 
* [Color Scale](https://github.com/masa-sumimoto/adobe-xd-color-scale) — a plugin that can generate color scales. Select one Text, Rectangle, or Ellipse node and run the plugin. You can get graded colors from the node fill color towards white, black, complementary colors etc. You can also get a color scale by selecting two specific nodes. 
* [GDS palette](https://github.com/mcoulthurst/xd-gds-palette/blob/master/README.md) — import color palette used in the GOV.UK Design System. 
* [create color palette](workdrive0306@gmail.com) — XD plugin for frontend engineer, Xd object to color palettes. 
* [Complex Gradients](mightyskeet@gmail.com) — several useful tools for gradient fills. 
* [Color Blender](https://github.com/peterflynn/xd-color-blender) — fill colors across a set of selected objects. Can also auto-create the intermediate objects by cloning if you only have two objects selected. 
* [Chromatic Gradients](https://github.com/aancuta/XD-chromaticPlugin) — this XD plugin lets you create an approximation of a gradient in other color spaces, like LAB. 
* [Color Ranger](https://qooqee.com/crhelp) — colorRanger gives you the power to adjust brightness, saturation, hue and color depth in one click. 
* [Select Same Color](can@canpoyrazoglu.com) — when an item is selected, allows quick selection of items with the same fill, border, or shadow. Supports both solid colors and linear gradients. 
* [Material Color Pallets](n.bhargavvenky@gmail.com) — this Plugin Provides Material Color Pallets to Use in your Project. 
</article>
<article id="copy--paste">
### Copy & Paste
* [Copy to All](https://github.com/wuwa/sketch-copy-to-all) — sketch - copy to all artboards plugin 
* [Duplicate to New Artboard](https://github.com/delighted/sketch-duplicate-to-new-artboard) — a Sketch plugin to duplicate the current selection(s) to new artboard(s). 
* [Duplicator](https://github.com/turbobabr/Duplicator) — a Sketch 3 plugin that takes the currently selected layers and copies them one or multiple times in a specified direction. 
* [Sketch Repeat](https://github.com/keremciu/sketch-repeat) — this plugin helps you easily duplicate your objects to all Artboards. 
* [Sketch Copy Paste Layout Settings](https://github.com/FrancisVega/sketch-copy-paste-layout-settings) — copy layout settings from one artboard and paste into multiples artboards. 
* [Clipboard to Tilled Fill](https://github.com/midiway/Clipboard2TilledFill) — allows you to copy an image file from Finder (PNG, JPG) and set it as a tilled fill of selected shape(s). 
* [Paste Direct](https://github.com/yudiz-solutions/paste-direct) — design like a guitarist! 
* [Proportional Replicator](https://github.com/AleLudovici/sketch-proportional-replicator) — this plugin for Sketch takes the selected layer and create new rectangles with sizes proportional to it. 
* [Better Paste](https://github.com/kenmoore/Sketch-Better-Paste) — paste like it was meant to be--into the artboard you're viewing. 
* [Component Cloner](https://www.figma.com/c/plugin/736564662640346811) — with component cloner, you can select component instances you want to copy and they'll be assigned to a new copy of their original master component. 
* [Blend](https://www.figma.com/c/plugin/735442706723922553) — blend plugin allows you to copy any object along the path. 
* [Paste to Fill](https://www.figma.com/c/plugin/740097744539225981) — copy an image and paste it as fill on your selected layers. 
* [Paste to Mask](https://www.figma.com/c/plugin/741413612560725424) — use your selected layers as Mask for the image in your clipboard. 
* [Multiply](https://www.figma.com/c/plugin/751760002167220558) — quickly multiply a layer in rows, columns or both (grid) 
</article>
<article id="data-generation">
### Data Generation
<div class="hidden-in-page">
<p align="center">
<a href="http://bit.ly/33Q3AC0">
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Abstract.png" alt="Abstract"/>
</a>
</p>
</div>
* [Iconscout](https://github.com/iconscout/icondrop) — get access to 2 million+ icons, illustration, and stock images right into your design app.   
* [liveplanet-sketch-datasupplier](https://github.com/Craigtut/liveplanet-sketch-datasupplier) — supply's real data from Live Planet's api to sketch for testing designs 
* [jerryipsum](https://github.com/vinceangeloni/jerryipsum) — a Seinfeld data plugin for Sketch. 
* [Turkish Data](https://github.com/ozgurgunes/Sketch-Turkish-Data) — Turkish data supplier plugin. 
* [Airtabledata](https://sketchairtabledataplugin.com/) — use your Airtable data in your Sketch symbols 
* [CSV Mail Merge](https://github.com/jdwolk/sketch-csv-mailmerge) — a lightweight Sketch plugin for importing data from .csv files using "{}" text sections. 
* [chemofill](https://github.com/ahadik/chemofill) — a Chemical Structure data supplier plugin. 
* [VK-Data](https://github.com/VKCOM/vkdata-sketchplugin) — a plugin for using data from your account at vk.com 
* [PersianSupplier](https://github.com/hiradarshadi/PersianSupplier) — a Sketch Plugin for supplying dynamic Persian data. 
* [Sketch Data Faker](https://github.com/paintedbicycle/sketch-data-faker) — a Sketch data plugin providing data for you mockups from Faker.js 
* [stuffing](https://github.com/Ashung/Sketch-Stuffing) — a DataSupplier plugin which supplies Chinese data. 
* [Chippen charts](https://github.com/smallmultiples/sketch-chippencharts) — a bar chart creator for your mockups using random data. Change the size of the selected rectangles. Works for both horizontal and vertical bar charts. Made with love in Chippendale. 
* [chart](https://github.com/pavelkuligin/chart) — create the most popular types of charts by real or random data 
* [TinyFaces](https://github.com/maximedegreve/TinyFaces-Sketch-Plugin) — fill the content with random avatars & data 
* [Sketch Export Text](https://github.com/exevil/Sketch-Export-Text) — it helps you to save all text data on the current page in customizable format and filter the excess. 
* [Sketch Shopify Data Populator](https://github.com/levinmejia/sketch-shopify-data-populator) — a Sketch App plugin to populate your designs with meaningful ecommerce data. Goodbye Lorem Ipsum. Hello JSON. 
* [Sketch JSON Parser](https://github.com/kvendrik/sketch-json-parser) — replaces layer values in groups with JSON data 
* [Sketch Data Populator](https://github.com/preciousforever/sketch-data-populator) — a Sketch App plugin to populate your documents with meaningful data. Goodbye Lorem Ipsum. Hello JSON. 
* [Mail Merge](https://github.com/kumo/sketch-mail-merge) — a Sketch plugin that allows you to duplicate a layer/artboard and replace the text with CSV data. 
* [Content Generator](https://github.com/timuric/Content-generator-sketch-plugin) — a Sketch app plugin for generating dummy data such as avatars, names, photos, geo data etc. 
* [Sketch Data Studio](http://thetylerwolf.github.io/sketch-data-studio) — a Sketch plugin to generate charts and data for data tables. 
* [Foreign Ipsum](https://github.com/3raxton/foreignipsum) — generate text for your mockups in multiple languages. 
* [Random Ipsom](https://github.com/fliptopbox/random-ipsom) — a latin text generator similar to Lorem Ipsum. The plugin outputs randomly ordered paragraph text with three variations. You can use a random word count, a specific word count or inject random content into the existing text blocks. 
* [Fake Chinese Name for Sketch](https://github.com/JJYing/fake-chinese-name-for-sketch) — generate Chinese names for text layers. 
* [Sketch Lorem Ipsum 2017](https://github.com/freeauto/sketch-lorem-ipsum-2017) — a Sketch plugin to generate "lorem ipsum" text. 
* [English and Persian Lorem Ipsum](https://github.com/Rezaaa/english-and-persian-lorem-ipsum) — a Sketch extension to generate English and Persian lorem ipsum text. 
* [Bacon Ipsum](https://github.com/zcallan/sketch-bacon-ipsum) — a simple & easy Bacon Ipsum text generator for Sketch. 
* [charapara](https://github.com/kd-co/charapara-sketch-extension) — Charapara, an initiative by Kerala Designers Collaborative (KDCo), is a dummy text generator for Malayalam 
* [BRData](https://github.com/jonathasbsouza/brdata) — gerador de dados contextualizados com a realidade brasileira. 
* [Sketch Ipsum](https://github.com/BohemianCoding/sketch-ipsum) — a DataSupplier plugin that fills your text layers with random Lorem Ipsum 
* [Unsplasher](https://github.com/perrysmotors/sketch-unsplasher) — fills shapes or symbols with images from Unsplash 
* [P5 Sketchplugin](https://github.com/jacopocolo/p5-sketchplugin) — a plugin for using p5.js code inside Sketch 
* [Jane Doe](https://github.com/konki-vienna/jane_doe) — this Sketch Data plugin adds localized profile names (powered by uinames.com) to your design. - Get diversity into your content. 
* [Shutterstock](https://www.shutterstock.com/explore/shutterstock-sketch-plugin) — access Shutterstock's stunning images without leaving your workspace. 
* [Design Systems](https://github.com/Ashung/design-systems) — it helps you find out popular design systems and download the official Sketch UI kit. 
* [Day Player](https://github.com/tylergaw/day-player) — a collection of Sketch Plugins for creating placeholder images. 
* [JSON to Layers](https://github.com/littlebusters/JSON-to-Layers) — convert to Layers on Sketch from JSON (with Fireworks PNG structure). 
* [Artwork Fetcher](https://github.com/mmth/sketch-artwork-fetcher) — a Sketch plugin for fetching artworks from Last.fm web-service and filling selected shapes with them. Allows fetching artworks by their album and/or artist names. 
* [Logo Fetcher](https://github.com/soulchild/sketch-logo-fetcher) — place logos from either the Logos API (SVG format) or Clearbit API (PNG format) 
* [Unsplash It](https://github.com/fhuel/Unsplash-It-Sketch) — a plugin to quickly include great-looking image from Unsplash.com in your Sketch projects. 
* [Date Generator](https://github.com/bshorta/date-generator-sketch) — a random date generator plugin for Sketch 
* [Sketch Icon Fetcher](https://github.com/sagishrieber/sketch-any-icon-fetcher) — this plugin will let you insert any website's favicon, or iOS/Android app's icon into your design 
* [SketchContentSync](https://github.com/contentsync/SketchContentSync) — sync sketch files with google docs. 
* [Diverse UI Sketch Plugin](https://github.com/reneepadgham/diverseui-sketch-plugin) — the official Sketch plugin for Diverse UI. 
* [Logodrop](https://github.com/Iconscout/logodrop) — a Sketch Plugin to get brand logos right into Sketch App. 
* [Drake](https://github.com/okcoker/Drake-Sketch-Plugin) — a Sketch plugin for generating dummy Drake content such as photos and lyrics. 
* [Sketch Cats](https://github.com/pravdomil/Sketch-cats) — render layers in Sketch as various images of cats 
* [Event Badges By David](https://github.com/designforhuman/event-badges-by-david) — a Sketch plugin to make a large number of name tags for any kind of events 
* [100 Shapesum](https://github.com/markaleksanderh/100-shapesum) — a Lorem Ipsum Sketch plugin based on 100 Shapes tone of voice. 
* [uiLogos](https://github.com/realvjy/uiLogos-sketch-plugin) — insert professionally designed dummy logos of companies. 
* [Seoul](https://github.com/sunkibaek/Seoul) — a sketch data supplier plugin for random Korean names. 
* [IBAN Generator](https://github.com/idriesalbender/iban-sketch-plugin) — generate random International Bank Account Numbers (IBAN) 
* [String Value Puller](https://github.com/YannickWidmer/sketch_strings_puller) — a plugin to handle pull string values from github repositories. 
* [foodreau](https://github.com/maxdavid/sketch-foodreau) — a data supplier plugin for populating designs with real food recipes. 
* [Brandfolder](https://github.com/brandfolder/sketch-plugin-brandfolder) — easily use your digital assets from Brandfolder right within your favorite platform for digital design! 
* [Excel Content Sync](https://github.com/wousser/SketchExcelContentSync) — decouple and Sync multi-language content between Excel and Sketch 
* [Unsplash](https://www.figma.com/c/plugin/738454987945972471) — insert beautiful images from Unsplash straight into your designs. 
* [Content Reel](https://www.figma.com/c/plugin/731627216655469013) — need content for your layouts? Content Reel helps you easily pull text strings, avatars and icons into your designs. 
* [Lorem ipsum](https://www.figma.com/c/plugin/736000994034548392) — generate ‘Lorem ipsum’ to fill your text layers with dummy text. 
* [Google Sheets Sync](https://www.figma.com/c/plugin/735770583268406934) — Sync content from Google Sheets directly into your Figma file. 
* [Avatars](https://www.figma.com/c/plugin/739659977030056719) — add random user avatars to your designs with one click. 
* [Brandfetch](https://www.figma.com/c/plugin/733590967040604714) — tired of looking for a company's logo? Check this plugin.
* [Table Generator](https://www.figma.com/c/plugin/735922920471082658) — Table Generator plugin automates the addition of tabular data. 
* [Humaaans for Figma](https://www.figma.com/c/plugin/739503328703046360) — this plugin brings the amazing illustrations library called Humaaans by Pablo Stanley to Figma. 
* [Data Lab](https://www.figma.com/c/plugin/740286071386014712) — paste random or real data into text layers and components easily. 
* [QR Code Generator](https://www.figma.com/c/plugin/735650288109030027) — ‘QR Code Generator’ helps you to quickly create a Vector QR code. 
* [Photos](https://www.figma.com/c/plugin/745428728979155171) — search and insert photos from Flickr into your Figma files. 
* [Random Name Generator](https://www.figma.com/c/plugin/742770131320902341) — select text layers and run the plugin to populate them with random names, or just run the plugin and get a new text layer with a random name. 
* [Lorem Ipsum Generator](https://www.figma.com/c/plugin/742039398983091764) — Lorem Ipsum Generator, with two clicks generates random text in Figma. 
* [User Profile](https://janisrozenfelds.com/user-profile-plugin) — enables designers to display beautiful generated avatars in your design prototype.  
* [Avatars generator](https://www.figma.com/c/plugin/746656816456492537) — Avatars Generator creates unique, AI-generated photos of a fictional persons. 
* [Smart Data](https://www.figma.com/c/plugin/751874861800404329) — Smart Data inserts random data according to the text layer name. 
* [Airtable to Figma](https://www.figma.com/c/plugin/741940457537193498) — this plugin allows you to effortlessly pull text and images from an Airtable database and inject them straight into your Figma components. 
* [Simple Table Generator](https://www.figma.com/c/plugin/754386961063964303) — this plugin generate tables with information from Excel/Google Sheet. 
* [Data From Local](https://www.figma.com/c/plugin/759249283654441170) — insert data from local TXT files or images. 
* [Random Key Generator](https://www.figma.com/c/plugin/761525248810814854) — quickly generate a random data string with alphabets, numerals, and symbols depending on your needs for use as IDs and secrets in your mocks. 
* [Flags](https://www.figma.com/c/plugin/749888869584535589) — add country flags to your Figma designs. 
* [JSON Populate](https://www.figma.com/c/plugin/749195619095691211) — use your own real JSON data to populate your text layers. 
* [sigils](https://www.figma.com/c/plugin/755929849994721127) — Sigils is an avatar generated for Urbit IDs. 
* [Figmoji](https://www.figma.com/c/plugin/736612173445813953) — add emojis seamlessly onto your designs. 
* [Table Master 3000](https://www.figma.com/c/plugin/758316324890482782) — easily switch between column work and row work. 
* [Placeholder Image](https://twitter.com/ispykenny) — Placeholder Image for your designs and wireframes. All images are provided by https://placeholder.com/ 
* [Unsplash Random Image](amirzenoozi72@gmail.com) — this plugin just generate a random image for your design 
* [This Person Does Not Exist](https://uifaces.co/tpdne-plugin) — add computer-generated photos of fictional people to your mockups. This plugin uses the thispersondoesnotexist.com website by Nvidia as a source for the photos and images.weserv.nl as a proxy and resizes tool. 
* [Lorem Ipsum](https://xdplugins.pabloklaschka.de/support#Lorem) — a small plugin to insert placeholder text that fits your needs. 
* [Wikify](https://nurecas.com/wikify-a-plugin-for-adobe-xd) — a plugin with which you can populate fields with Wikipedia content. Select a text field or an image container or both, run the plugin and type in what content you want to populate the fields with. Enjoy! (Please note that the licenses of the content have to be acquired and used separately.) 
* [Movie Posters](jakovcevski@gmail.com) — import movie posters in your designs with a click. 
* [uilogos](https://github.com/realvjy/uilogos-XD) — uiLogos allow you to Insert professionally designed dummy logos of company and 190+ Country flags directly into mockup. 
* [User Images](mail@dpandey.com.np) — this plugin fills selected shapes with random user photos using randouser.me's API. Plugin needs internet connection on your machine to work. 
* [Airtable](https://support.airtable.com/hc/en-us/articles/360009887334) — forget lorem ipsum: iterate with real content in your designs when you connect Adobe XD to an Airtable database of UI copy, images, and more. 
* [Google Sheets](https://googlesheetsforadobexd.impekable.com) — a plugin that enables designers within XD to enrich their designs with real content and data from Google Sheets. 
* [ContentGenerator](andreea.marica11@yahoo.com) — a content Generator plugin helps you generate randomised content for your design. 
* [Data Populator](feedback@datapopulator.com) — a plugin to populate your design mockups with meaningful data. Goodbye Lorem Ipsum. Hello JSON. 
* [QR Code Maker for XD](agata@chuwa-print.co.jp) — create QR Code in the current document. This plugin will work 8 bit binary mode with UTF-8. The error level will set low. 
* [UI Faces](https://uifaces.co) — avatars for design mockups.  
</article>
<!-- <div class="hidden-in-page">
<p align="center">
<a href="http://bit.ly/2ZwUoEq">
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/SuperNova.png" alt="Supernova"/>
</a>
</p>
</div> -->
<article id="developers-handoff">
### Developers Handoff
* [Sketch Measure](https://github.com/utom/sketch-measure) — make it fun to create a spec for developers and teammates! Automatically generating html page with one click, inspect all the design details including CSS Styles on it offline. 
* [Marketch](http://tudou527.github.io/marketch/) — a Sketch 3 plug-in for automatically generating html page that can measure and get CSS styles on it. 
* [Sympli](https://sympli.io) — perfect your collaboration with Sympli. Share specs and assets, then inspect designs and make pixel-perfect apps faster online or with plugins for Android Studio and Xcode.  
* [Avocode Sketch Plugin](https://avocode.com/download?origin=sketch) — sync Sketch designs to Avocode. 
* [Inker8](https://github.com/inker8/sketch-plugin) — a spec exporter for Sketch which can copy text/css/svg icons with only one click. 
* [Sketch Storyboard](https://github.com/BriteSnow/sketch-storyboard) — export a full story flow and dev spec in one shortcut. 
* [SwiftColorPalette](https://github.com/nahitheper/SwiftColorPalette) — a Sketch plugin that generates Swift Color Theme with enums 
* [Mockplus iDoc](https://idoc.mockplus.com/download/sketch) — generating Assets and Specs Automatically, Make Design Collaboration Easier  
* [Lanhu App](https://lanhuapp.com/mac) — automatic generate specs for developers and share assets 
* [AEIconizer](https://github.com/tadija/AEIconizer) — iOS icon generator plugin for Bohemian Coding Sketch app. 
* [Zeplin](https://zeplin.io) — a Zeplin Sketch Plugin. 
* [MockingBot](https://modao.cc/sketch) — MockingBot Sketch Plugin, Your sweet Sketch companion making your handoff process more efficient than ever 
* [Figma Measure](https://www.figma.com/c/plugin/739918456607459153) — a plugin for easy measurement of sizes. 
* [inker8](https://github.com/inker8/xd-plugin) — export design spec to measure positions, copy CSS and export icons. Make writing CSS and UI fun. 
</article>
<article id="document-optimisation">
### Document Optimisation
* [File Cleaner](https://github.com/monzo/file-cleaner) — keep your Sketch files immaculately clean and in order. 
* [SketchCleaner](http://www.sketchcleaner.com/) — a Sketch plugin that helps you get your design files as clean as a whistle. 
* [Pixel Perfecter](https://github.com/swiadek/pixel-perfecter-sketch-plugin) — pixel-perfecter helps you find pixel imperfect layers in your documents. 
* [Sketch Pixel Cleanup](https://github.com/stackdevelopment/sketch-pixel-cleanup) — a plugin for Sketch to fix all of those partial pixels 
* [Cleanup Useless Groups](https://github.com/bomberstudios/Cleanup-Useless-Groups) — a Sketch plugin that cleans up your layer list by removing empty groups and flattening deeply nested groups. 
* [Mise En Place](https://github.com/madwaro/MiseEnPlace) — a Sketch plug-in that helps you prep before you start cooking your designs. 
* [Unused Style Remover](https://github.com/sonburn/unused-style-remover) — remove the unused layer and text styles. 
* [Remove all Disabled Styles](https://github.com/ErikFontanel/sketch-remove-all-disabled-styles) — a simple plugin that removes all disabled styles from all layers in the current selection. 
* [Delete Hidden Layers](https://www.figma.com/c/plugin/750292779381900360) — delete all hidden layers (also locked) at the current page except layers in components. 
</article>
<article id="document-organisation">
### Document Organisation
* [Annotations](https://github.com/BaguetteEngineering/annotations-sketch-plugin) — Hide/show layer groups named 'Annotations'. 
* [Context for Sketch](https://getcontext.app) — Add to your document pins linking to prototypes, inspirations, examples or anything else on the web. 
* [Sketch Notebook](http://marcosvid.al/sketch-notebook) — Sketch Plugin to make documenting design easier. 
* [Todo Sketch Plugin](https://github.com/andrewdbass/Todo-Sketch-Plugin) — simple tool to create todo notes for your sketch file 
* [Moodboard Builder ](http://reinvently.com/moodboard-builder-sketch-plugin/) — A streamlined Sketch plugin for creating mood boards quickly and easily. Just do a search, check the suitable images, and - voila - you have a beautiful mood board. Keep inspired! 💡 
* [Notes](https://github.com/cshdllr/Notes) — A sketch plugin for taking notes 
* [Sketch Focus](https://sketchfocus.com) — A new plugin for Sketch that boosts your productivity by keeping you on-task. 
* [Changelog](https://github.com/jacopocolo/changelog.sketchplugin) — A simple Sketch plugin to generate artboard-based changelogs 
* [PinLog](https://github.com/zhongerxin/PinLog) — A plugin that would help you note your changeLog and can help other people to find the change in sketch 
* [Todo](https://www.figma.com/c/plugin/747822968977461925) — Simple todo list plugin to check off your tasks inside Figma! 
* [Notepad](https://www.figma.com/c/plugin/739527655081183968) — Use Notepad to add a place for notes to your Figma documents. 
* [Figma Format](https://www.figma.com/c/plugin/732774680197470712) — lets you format your canvas by grouping them by the names. 
* [LayerMaid](https://www.figma.com/c/plugin/732617369306910191) — LayerMaid will go through the entire layer panel and organize it; top to bottom, left to right. 
* [Project Scaffold](https://www.figma.com/c/plugin/747372158567878238) — This plugin Generates a Scaffold for your Product design project in just 1 click. 
* [Link to Documentation](https://www.figma.com/c/plugin/748783469068559194) — Open documentation pages from your components. 
* [work in progress](https://www.figma.com/c/plugin/761641569499378065) — The plugin quickly marks layouts that are in work or don’t approve finally. 
* [Visibility](https://www.figma.com/c/plugin/739089407370404321) — Changes the visibility of objects with a name that includes "~visibility" 
* [Page No](contact@starlit-studio.com) — Automatically insert page numbers into your artboards based on their arrangement. 
* [Notes and Annotations](https://tourdexd.com/plugin/notes-and-annotations/) — With Notes and Annotations you can easily add interactive notes based on provided templates or create your own look and feel. With two simple buttons, you can easily hide or show all notes in the entire document. 
* [Bookmarks](https://www.derekknox.com/articles/bookmarks-adobe-xd-plugin) — Bookmark document zoom and pan locations.- Jump around large documents with ease- Jump to areas of interest when presenting designs, user flows, etc.- Jump to a bird's-eye view of all artboards in one view- Bookmarks persist in the document so they're shared with team members automatically- Nickname bookmarks for easier understanding of their zoom and pan location 
</article>
<article id="layout--padding">
### Layout & Padding
* [Dynamic button plugin for Sketch.app 3.5](https://github.com/fuggfuggfugg/sketch-dynamic-button-3.5) — Dynamic button plug-in for Sketch.app 3.5 allows you to create buttons with fixed paddings no matter what text you add. 
* [Dynamic Symbol Button](https://github.com/herrkris/sketch-dynamic-symbol-button) — Adds the ability to have dynamic symbol buttons that resizes when the text changes.  — Automated padding, spacing, and alignment for your Sketch layers 
* [Symbol Spacer Sketch Plugin](https://github.com/novemberfiveco/symbol-spacer-sketch-plugin) — Automatically resize spacing symbols to correct size when changing to a different one 
* [Relabel Button](https://github.com/kenmoore/Sketch-Relabel-Button) — Update a button's label and it gets resized automatically, preserving existing padding. 
* [Auto Layout](https://animaapp.github.io/Auto-Layout/) — Responsive design inside Sketch. Design for all screen sizes on one artboard. 
* [Sketch Constraints](https://github.com/bouchenoiremarc/Sketch-Constraints) — A plugin that integrates constraints in Sketch to layout layers. 
* [Pixel Perfect](https://github.com/materik/sketchplugin-pixelperfect) — Plugin for Sketch for handling layout and sizing of layers automatically based on their names. 
* [Compo](https://github.com/romashamin/compo-sketch) — Makes it easier to work with interface components in Sketch 
* [Toggle Constrain Proportions](https://github.com/ErikFontanel/sketch-toggle-constrain-proportions) — Toggles the constrain proportions setting with keyboard shortcut ⌘ + P. Sketch v39+ compatible. 
* [Method](https://github.com/KikeSz/Method-Sketch-Plugin) — Tool to apply your methodology systems 
* [Sketch Flex Layout](https://github.com/hrescak/Sketch-Flex-Layout) — Plugin for Sketch allowing for CSS Flexbox layouts using stylesheets and prototypes. 
* [Viewports](https://www.figma.com/c/plugin/732240841094697441) — Make sure that your mobile designs are covering a reasonable share of the market! Select one or more frames and Viewports will let you change their sizes to your preferred device. 
* [Paddet](https://www.figma.com/c/plugin/734548932196004433) — Paddet is a small tool that will help you automatically apply padding to frames. 
* [Responsify](https://www.figma.com/c/plugin/743654854885744527) — A Figma plugin to quickly test your designs across multiple device sizes. 
* [Dynamic Component Resizer](https://www.figma.com/c/plugin/734140091470043718) — With this plugin, you'll be able to setup components and resize their instances while maintaining the spacings that you've set in the master. 
* [Paddi](https://www.figma.com/c/plugin/746314565953874339) — Paddi helps you to set paddings for a Group, a Frame, or a Component. 
* [AutoLayout](https://www.figma.com/c/plugin/755300155155835622) — AutoLayout dynamically lays out layers in frames and updates the layout when the dimensions of child layers change. 
* [Stacks](https://www.figma.com/c/plugin/745754288876102954) — Stacks provide extensive, semi-automated control over the spacing, direction, and alignment of layers. 
</article>
<article id="export">
### Export
* [Sketch Slicer](https://github.com/d4rekanguok/sketch-slicer) — Create slice layers from selected layers, with padding or set a fixed size. 
* [slicer](https://github.com/ozzik/slicer) — Your friendly Sketch slicing helper 
* [Design Token Exporter](https://github.com/here-erhe/Design-Token-Exporter) — Simple Design Token Exporter 
* [sketch-export-to](https://github.com/mascardoso/sketch-export) — Export an artboard layer to json or markdown 
* [slice-it](https://github.com/deepakshrma/sketch-slice-it) — Slice-it tool, Export the slices from the local sketch file in png, jpeg, svg 
* [Drafta](https://github.com/fragmentlv/drafta) — Export designs directly to Drafta 
* [Caravel](https://github.com/CaravelDesign/caravel.sketchplugin) — Export your artboards directly to Caravel projects. 
* [Squash](https://github.com/mcansh/squash-sketchplugin) — Export and optimize images with Realmac Squash 
* [ImageOptim Sketch Plugin](https://github.com/ImageOptim/sketch-plugin) — A Plugin for Sketch that compresses exported images using ImageOptim. 
* [Export Symbols](https://github.com/marianomike/sketch-exportsymbols) — Sketch Plugin that exports all symbols as pngs to a specified folder 
* [Android Res Export](https://github.com/Ashung/Android_Res_Export) — Export Android resources in Sketch, include PNG assets, app icon, nine-patch image and vector drawable. 
* [Atomic Sketch Plugin](https://atomic.io/sketch) — Exports Sketch Files to Atomic 
* [Base64 PNG Export](https://github.com/jawayang/Sketch-Base64-PNG-Export) — sketch plugin for Export Data URI 
* [IconSlate](https://github.com/kodlian/IconSlate-sketchplugin) — Export icons (icns,ico,...) from Sketch using Icon Slate. 
* [Export to Indigo](https://indigo.infragistics.com/sketch-home) — Generate Indigo Studio projects from your artboards to create interactive, animated prototypes. Get real user feedback through included usability studies with video replays. 
* [sendTo](https://github.com/udi-gindi/sendTo) — Export layer as an email attachment 
* [Page Export](https://github.com/charliecm/sketch-page-export) — A simple Sketch plugin for exporting page(s). 
* [Gretel](https://github.com/StyleShare/Gretel) — A Sketch plugin that flattens files after exporting. 
* [ImageCodeExporter](https://github.com/funfungo/ImageCodeExporter) — a plugin that exports your sketch layer for code usage 
* [SVG-BEM](https://github.com/mLihs/svg-bem) — a plugin for SVG export to convert IDs to Classes, create BEM Styled Naming Based on Layers. Uses SVGO to compress and Clean up SVGs, right when you export them. Based on the SVGO Compressor Plugin 
* [rename-export](https://github.com/TheSonOfThomp/Batch-Export-Rename) — Use this plugin to batch export layers with consistent filenames 
* [Somino](https://github.com/melsomino/sketch-somino) — Attachable styles, Advanced clipboard, Silent export 
* [Lottie Sketch Export](https://github.com/buba447/Lottie-Sketch-Export) — Native Sketch plugin for exporting Artboards and Symbols into Lottie JSON 
* [Awesome Image Compressor](https://github.com/naoyawatanabe/awesome-image-compressor) — Compress exported image assets 
* [Sketch Image Compressor](https://github.com/BohemianCoding/sketch-image-compressor) — A Plugin that compresses bitmap assets, right when you export them. This Plugin *requires* Sketch 3.8. 
* [Nucleus](https://github.com/levtolstoi/Nucleus) — Plugin for creating Atomic Design concept in Sketch and export scss-map for front-end 
* [sketch2vd](https://github.com/alexjlockwood/sketch2vd) — A Sketch plugin that exports selected layers to VectorDrawable for Android. 
* [SVGO Export](https://github.com/josephmcasey/sketch-plugin-svgo-unique-id) — Uses SVGO to compress exported SVG assets 
* [Icon Tools](https://github.com/oodesign/icon-tools) — Sketch.app plugin to clean icons and to prepare them for a clean export without tints and masks. 
* [giancartboard](https://github.com/MattCowBoy/giancartboard) — Sketch plugin to export artboards in folders automatically numbered 
* [Sync To Slides](https://websiddu.github.io/sync-to-slides/) — Sync to Slides is a Sketch plugin that will help you upload your artboards to Google Slides directly without an export step 
* [Justinmind Sketch](https://github.com/vconesa/justinmind-sketch) — You can export artboards, layers, and pages you’ve made in Sketch to Justinmind and turn them into interactive shareable prototypes. 
* [Sketch2AE](https://github.com/bigxixi/Sketch2AE) — A Sketch plugin to export sketch file to Adobe After Effect 
* [App Asset Export](https://github.com/work4blue/sketch-app-asset-export) — Sketch3 plugin, One key export Android/iOS App icons. 
* [Export More](https://github.com/nathco/Export-More) — Sketch.app plugin for exporting ICNS and GIFs 
* [Shared Text Styles](https://github.com/nilshoenson/shared-text-styles) — Easily import and export your Text Styles in Sketch. 
* [Sheetie](https://github.com/JoeManto/Sheetie) — Sketch 3 Plugin that makes a SpriteSheets to export or use 
* [ScreenFork](https://github.com/screenfork/ScreenFork) — ScreenFork is the Sketchapp plugin that export screens and their variants based on Layer prefix 
* [SVGO Compressor](https://sketchapp.com/extensions/plugins/svgo-compressor/) — A Plugin that compresses SVG assets using SVGO, right when you export them. This Plugin requires Sketch 3.8. 
* [Sketch Export Generator](https://github.com/kang-chen/sketch-export-generator) — Sketch plugin to export assets at different scale sizes 
* [Export to Proto.io](https://proto.io) — Give life to your Sketch designs! Export all or selected artboards to Proto.io screens, preserving layer positioning and hierarchy. By exporting to Proto.io you can link screens together, add interactions and animations. 
* [Sketch Export Sizes Generator](https://github.com/devxoul/sketch-export-sizes-generator) — A simple plugin for Sketch that generates export sizes of layers. 
* [ScrollMotion](https://github.com/jonmmay/sketch-scrollmotion) — Sketch plugin to export ScrollMotion 
* [Export for Replia](https://github.com/bunguu/SketchExportForRepliaPlugin) — Sketch Plugins to export selected artboard or layers for Replia. 
* [Xport](https://github.com/abynim/Xport) — A Sketch Plugin to export image assets directly to Xcode 
* [Better Android Export](https://github.com/nickstamas/Sketch-Better-Android-Export) — A plugin for exporting layers for Android. Supports transparency and 1x and 2x base sizes. 
* [smartboards](https://github.com/elihorne/smartboards) — Smartboards aims to make managing and exporting artboards easier in Sketch. 
* [Export Assets](https://github.com/GeertWille/sketch-export-assets) — A Sketch plugin that allows you to quickly export assets for Android, iOS, Windows Phone, and the Web. 
* [Clear Export Options](https://github.com/emrerussia/sketch-clear-export-options) — Clear export options for all elements on all pages in a Sketch file. 
* [Timeline](https://timeline.animaapp.com) — Create beautiful timeline animations and export GIF or MP4 
* [Quick Export as PNG](https://github.com/richardgazdik/sketch-quickexport) — Quick Export layers/artboards/symbols as PNG Plugin for Sketch. 
* [Seca](https://github.com/iGenius-Srl/Seca) — Your friendly Sketch slicing helper for symbols 
* [library-audit](https://github.com/naughtandcross/sketch-library-audit) — Export Symbol and Shared Style data from any Sketch Library to CSV. 
* [Miro plugin for Sketch](https://github.com/RealtimeBoard/sketch_plugin) — Add, share and discuss your Sketch artboards with the team in Miro (formerly RealtimeBoard). The plugin allows to sync the artboards with the boards in one click 
* [SketchingOn](https://www.workingon.co) — Quickly select and share work in progress with your team via WorkingOn. 
* [zeroheight](https://zeroheight.com) — Document your design system using beautifully simple style guides synced with Sketch and code 
* [Droplr](https://droplr.com/integrations/sketch/) — Droplr for Sketch lets designers quickly and easily share their Artboards 
* [PhraseApp Sketch Plugin](https://phraseapp.com/sketch) — Sync your design content from Sketch with PhraseApp 
* [Snatch](https://github.com/ZhichengChen/snatch) — Sketch plugin which uploads layer to CDN directly. 
* [Storyboard Export](https://github.com/cranksoftwaredev/SketchPlugins) — Export Sketch based designs to be used within Crank Software's Storyboard Suite 
* [Sketch to Trello](https://github.com/jclappiway/sketch-to-trello) — Export Sketch Artboard to Trello 
* [Upload to CloudApp](https://github.com/delighted/sketch-upload-to-cloudapp) — Upload to CloudApp: Upload the current artboard or page to CloudApp. 
* [Framer Inventory 2.0 for Sketch](http://timurnurutdinov.github.io/framerinventory/) — Sketch plugin to generate FramerJS prototypes. Just have your motion done. 
* [WeTransfer](https://github.com/WeTransfer/Sketch-Plugin) — Share artboards and pages via WeTransfer 
* [Hubble Sketch Plugin](https://github.com/inthepocket/hubble-sketch-plugin) — A Sketch plugin to extract assets and primitives and send them to Hubble.app 
* [Dribbble](https://github.com/dribbble/dribbble-sketch) — Share your creative process directly to the Dribbble community from within Sketch. 
* [AEUX](https://github.com/google/sketch2ae) — Transfer layer to After Effects 
* [projecthuddle](https://github.com/ajgagnon/projecthuddle-sketch-sync) — Syncs sketch files with ProjectHuddle mockup projects. 
* [Sketch TinyPng compressor](https://github.com/alxrm/sketch-tinypng-compressor) — A Plugin that compresses bitmap assets using TinyPNG API. This Plugin *requires* Sketch 3.8. 
* [Coffee Slice](https://github.com/KivyGogh/coffee-slice) — A Sketch plugin to make the standard slicing with a user-given viewBox size automatically and creating multiple sizes(1x/2x/3x) of your slices, you can choose to autosave in a path or not. 
* [Specify (Alpha)](https://specifyapp.com) — Export styles and assets to your Specify Libraries. 
* [Advanced SVG Export](https://www.figma.com/c/plugin/782713260363070260) — optimize SVG before exporting without leaving Figma. Uses SVGO under the hood. ![figma.svg]
* [Android Resources Export](https://www.figma.com/c/plugin/735452896889481850) — Export multiple sizes PNG from a selected slice or exportable layer, with a fixed folder structure (drawable-xhdpi, etc..) and valid name. 
* [iOS Export Settings](https://www.figma.com/c/plugin/747172434405306948) — This plugin automatically applies the correct export settings for every required iOS App Icon size and density. 
* [iOSPNGExporter](https://www.figma.com/c/plugin/745898698224781628) — This plugin helps you to create the most common used export settings for iOS PNG icons, including a @2x size and a @3x size. 
* [icns/ico Generator](https://www.figma.com/c/plugin/742318143106037364) — A Figma plugin to export Frame nodes to .ico (Windows) and/or .icns (Mac) files. 
* [Export .zip](https://www.figma.com/c/plugin/747228167548695118) — Easily export assets from Figma directly into a .zip file. 
* [Archiver](https://www.figma.com/c/plugin/738907708841687244) — Archiving frames within a design lifecycle is good practice to ensure that design assets are not lost, while also not getting in the way of current work. 
* [Slicer](https://www.figma.com/c/plugin/755582372562882351) — A Figma plugin to make easier to slice multiple objects. 
* [Justinmind for XD](https://www.justinmind.com/community/) — Bring your artboards, pages and layers to Justinmind, and turn your designs into an interactive, shareable prototype. Compatible with Justinmind version 8.6 and up. Once exported the resulting file can be opened with the Justinmind application available at www.justinmind.com 
* [Copy SVG Code](https://github.com/stursby/xd-copy-svg-code-plugin/issues) — Plugin to generate SVG code from the selection. 
* [Advanced Export](https://t.me/savedata_space) — this plugin provide code from xd for developers - Colors For Android,CSS,LESS,SCSS - Artboard mockup for Xaml - Name of Artboards 
* [UWP icons export](http://misjavansitteren.nl/) — Create assets / icons for UWP in the formats 100, 125, 150, 200, and 400. 
* [Export as React Component](https://bitbucket.org/joeherold/export-react/issues) — Select elements and or groups in your artboard, and export them as react functional components. Name of Group / Element ist the Component Name. (AppIcon => AppIconComponent.js) 
* [Export only one size](https://github.com/nikoladev/xd-export/) — Do you ever need to export something at 3x scale and then find yourself deleting all the 1x and 2x versions? This plugin lets you choose a scale to export at and then only exports at that scale. 
* [XDA Exporter](https://github.com/teach310/Xd2uGUI) — Export Artboard Info as xda.You can use xda file to any other soft to generate screen. 
* [Dribbble](https://dribbble.com/contact) — The Dribbble plugin allows you to share your creative process directly to the Dribbble community without ever leaving Adobe XD. Post on behalf of yourself or your team, schedule shots, and more. 
* [CloudApp](support@getcloudapp.com) — CloudApp's Adobe XD plugin is the quickest way to share screenshots of artboards and assets without leaving XD. Capture your work with a secure and shareable link for accelerated collaboration with both clients and colleagues. 
* [Custom Export](hi@chrometaphore.com) — Export selected Layers and Artboards to any custom scale. 
* [Trello](https://docs.google.com/forms/d/e/1FAIpQLSeRCfX71_Fg6RVvS-x9IFXFkDnmHgqBwbBYH9wbP-uOqDKp2g/viewform) — Easily send XD assets to Trello. Share artboards and layers with your team without leaving XD. Trello's simple visual interface helps you manage creative tasks with ease. 
* [Sisense Blox Template](https://support.sisense.com) — Create Sisense BloX JSON template by selecting your designed items then Ctrl-option-C on Mac and Ctrl-alt-C on a PC, then paste it on Sisense+BloX and you are done!. 
* [Artboard Deep Link](alexdobras@gmail.com) — Fast obtain the exact web link (URL) of the selected artboard for you to paste it in a browser to see your project directly opening at that. 
* [Artboard for PDF](shingo2000@gmail.com) — Create artboards for exporting as PDF files. You Can Select Size (A3 - B5) and Orientation (Landscape or Portrait). 
* [XD2Sketch](https://xd2sketch.com) — Export XD files directly to Sketch using our converter. 
</article>
<!-- <div class="hidden-in-page">
<p align="center">
<a href="https://adobe.ly/33HVSdf">
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Adobe%20XD%20(1).png" alt="Abobe XD"/>
</a>
</p>
</div> -->
<article id="generate-ui-element">
### Generate UI Element
* [Radial Lines](https://github.com/herrhelms/radial-lines-sketch) — Generate lines originating from a certain coordinate of an artboard. 
* [Super Shapes](https://github.com/sureskumar/super-shapes) — Generate complex organic super-shapes using super formula. 
* [6Spiral](https://github.com/matej-marjanovic/6Spiral-Sketch-Plugin) — 6Spiral is a sketch plugin to draw spiral shapes (archimedean and logarithmic spirals) and it also allows you to convert the 2D spirals into 3D-like helix shapes at a specified isometric angle. 
* [Sketch Tiles](https://github.com/kumo/sketch-tiles) — A Sketch plugin for playing with seamless tiles. 
* [Mosaic](https://github.com/tomorrowkey/sketch3-mosaic-plugin) — A plugin for Sketch3 to apply mosaic easily. 
* [Egmont Plugin](https://github.com/interfacemarket/Egmont-plugin) — Sketch plugin for creating squircle shapes. 
* [Skatter](https://github.com/joshdjuric/Skatter) — A plugin with tools (currently very basic tools) to assist with creating patterns out of shapes. 
* [triangle-field](https://github.com/0la0/triangle-fields) — Generate Delaunay triangle tessellation inside a shape. 
* [Sketch QR Code](https://github.com/lerte/sketch-qr-code) — A Plugin for generating SVG QR Code in the Sketch app. 
* [Blobs](https://www.figma.com/c/plugin/739208439270091369) — Create organic blob shapes with the click of a button. 
* [Isometric](https://www.figma.com/c/plugin/741184519069077841) — Isometric allows you to create isometric layers without manually having to set them up. 
* [Pattern Hero](https://www.figma.com/c/plugin/740556241021336678) — Pattern Hero enables you to place selected elements or frames in a grid to create patterns. 
* [Get Waves](https://www.figma.com/c/plugin/745619465174154496) — Get Waves is a free SVG wave generator to make unique SVG waves for your next design. 
* [Make blob](https://www.figma.com/c/plugin/740172168964577201) — Make blob and add it on your page. 
* [Sprinkle](https://www.figma.com/c/plugin/734501601239074381) — Make it rain with confetti. 
* [Confetti](http://www.sketchconfetti.com) — Confetti for Figma lets anyone create gorgeous confetti patterns.   
* [Metaball](https://www.figma.com/c/plugin/743754408199479204) — Metaball plugin generates 2D-Metaball shapes from circle objects. 
* [Wave & Сurve](https://www.figma.com/c/plugin/745971189153303901) — With "Wave & Surve" you can easily create a variety of waves and interesting patterns. 
* [Random layout generator](https://www.figma.com/c/plugin/755525134262262553) — An inadequate tool for randomly generating endless layouts. 
* [Squiggly](https://www.figma.com/c/plugin/753395020416512502) — A plugin for generating squiggles. 
* [Button Generator](https://www.figma.com/c/plugin/750298912003944521) — Button Generator does what it says on the box, it generates button components with no fuss. 
* [Flutter Icon Generator](https://medium.com/@tamjeed) — Generates the App Icons for a given Flutter project. Select the root folder of the flutter app to have Android and iOS App icon generated. The selected object in Adobe XD should be of 100x100 size 
* [triangle](kenny.krosky@gmail.com) — Quickly add triangle elements to your design that you can customize the stroke - stroke width - stroke color - fill color. 
* [regular polygon](yuji.arai@romantist.jp) — It is a plugin that draws a regular polygon 
* [star shape plugin](http://romantist.jp/blog/star-shape) — It is a plug-in that draws star-shaped figures. 
* [Widgets for XD](n.bhargavvenky@gmail.com) — Widgets for XD is a great plugin that creates commonly seen plugins in smartphones with a single click or a shortcut 
</article>
<article id="guides--grids">
### Guides & Grids
* [Evenly Distributed Guides](https://github.com/herrhelms/even-guides-sketch) — Add evenly distributed guides to artboards. 
* [Gridy](https://github.com/Volorf/Gridy) — An easy way of creating guidelines 
* [Remove All Guides](https://github.com/ichik/removeallguides) — Removes all the guides from selected artboards. 
* [Copy & Paste Guides](https://github.com/pixelpillow/copy-paste-guides) — Easily copy, paste or remove guides from/to your artboard(s). 
* [Bootstrap Guides](https://github.com/tomoyukikashiro/Sketch-bootstrap-guides) — Generate guides along with twitter bootstrap grid system. 
* [Sketch Guides](https://github.com/luvmex/Sketch-Guides) — Add Guides to edges and midpoints at once. 
* [Ps Guides](https://github.com/pratikjshah/PS-Guides) — Quickly generate Guides for a selected element in Sketch 
* [Bootstrap Grid](https://github.com/De-La-Vega/BootstrapGrid) — Sketch plugin inserts the correct bootstrap grid in nested blocks. 
* [Sketch Guides](http://guides.pratikshah.website/) — Quickly generate Guides for a selected element in Sketch 
* [GuideGuide](https://guideguide.me) — Quickly and easily create grids and manipulate guides with a consistent UI in Photoshop, Illustrator, and Sketch 
* [Gutter Cutter](https://github.com/GCampi/gutter-cutter) — A Sketch plugin to create custom grids with guides 
* [Grid Layer](https://github.com/franklymrshankly/Grid-Layer) — Create columns or gutters as layers. Useful if you need a grid on a component level. 
* [Sketch Grid Master](https://github.com/exevil/sketch-grid-master) — Grid Master is a Sketch plugin that fixes long-standing bugs and adds new functionality related to work with Grid and Layout. 
* [Guide Mate](https://www.figma.com/c/plugin/739342962452731553) — Guide Mate is a Figma plugin that helps you add complex guides to your design with ease. 
* [Clear Guides](https://www.figma.com/c/plugin/753903260307779121) — Clears guides! If you have one or more frames selected it will clear the guides in those frames. If there is nothing selected, it will clear the guides on the current page. 
* [Grids Plus](https://sugarsweetapps.com/contact/?utm_source=Plugin&utm_medium=Direct&utm_campaign=Contact%20Page%20Before%20Installation) — The Only Grid Plugin That Focuses On Work Ready Pixel Perfect Grids CreationGrids Plus+ focuses on usable grids, grids that are pixel perfect (no decimals XX.241 grid placements), it takes the same approach. 
* [RepeatGrid Fitter](https://paper.dropbox.com/doc/Repeat-Grid-Fitter-Support--APqpBnFaWjjO6cjwiwV0SpPXAQ-bG0aYLxvVgVpth0tJjkhC) — It makes a repeat grid's size fix to fit the rows and the columns. And you can hide some items. for example, 2(rows) by 4(columns) equals 8 (items). but only 6 items shown. 
</article>
<article id="images-management">
### Images Management
* [Place Linked Bitmap](https://github.com/frankko/Place-Linked-Bitmap) — A plugin to place external bitmap files into Sketch and update Sketch layers after external bitmaps are updated 
* [Replace Images](https://github.com/shakemno/sketch-replace-images) — Sketch 3 plugin to replace (as in update) existing images by name in a sketch document. 
* [Sketch User Flows](https://github.com/ribot/sketch-user-flow-docs) — This plugin lets you link images in a document with an external image file and update them all at once. 
* [Clipboard Fill](https://github.com/ScottSavarie/Clipboard-Fill) — Sketch plugin to paste an image from your clipboard as the fill for any shape 
* [ImageExtractorSketch](https://github.com/mendyismyname/ImageExtractorSketch) — Extract background fill image in Sketch 
* [Sketch Image Replaste](https://github.com/mheesakkers/sketch-image-replaste) — A simple Sketch plugin for replacing images with the copied image of your clipboard. 
* [Images Reinvented](https://github.com/roydigerhund/Images-Reinvented) — A better way to use images in Sketch. 
* [Reset Image Aspect Ratio](https://github.com/perrysmotors/reset-image-aspect-ratio) — A Sketch plugin that resets the aspect ratio of selected images. 
* [Advanced Responsive Images Default](https://github.com/Nkzq/advanced-responsive-images-default) — Generate default images according to the sizes given. 
* [Spooky](https://github.com/eliasjulian/spooky-sketch) — Is this image spooky enough? You'll never have to ask yourself that question again. Happy Halloween! 
* [Image tracer](https://www.figma.com/c/plugin/735707089415755407) — traces black & white bitmap images, and turns them into a vector layer. 
* [Dither](https://www.figma.com/c/plugin/752462766270432644) — Add dithering effects to your images right there in Figma. 
* [Autocrop](https://www.figma.com/c/plugin/740702788263758004) — Automatically crop the extra space surrounding an image. 
* [Image Optimizer](https://github.com/irajashekarb/Image-Optimizer) — Image Optimizer is a compression tool that lets designers compress the images within Adobe XD. 
* [Tunda Image](satriamaxt@gmail.com) — With Tunda Image you can place any image at the internet to your shape via the direct image or you can place any image in google image to your shape just copy the image address in your browser and paste it to Tunda Image and the image will be placed to your shape. 
* [Masked Image Shadows](https://github.com/jonenzl/xd-masked-image-shadows/issues) — Quickly and easily add drop shadows to masked images. 
* [Image minify](https://github.com/shingo2000/xd-plugin-image-minify) — Image minify reduces the image quality and resolution of the image layer. By optimizing the image used, it reduces the file size when exporting to a PDF file. 
* [Pixabay image finder](jeanpr117@gmail.com) — Give me words and I'll give you pixabay images. Simple! Shortcut: Ctrl+Shift+I 
</article>
<article id="import">
### Import
<div class="hidden-in-page">
<p align="center">
<a href="http://bit.ly/33Q3AC0">
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Abstract.png" alt="Abstract"/>
</a>
</p>
</div>
* [Stash](https://www.stash.diamonds) — Import artboards from Stash to Sketch 
* [Bolt](http://boltplugin.com/) — Import screenshots faster 
* [Import SVG as Artboards](https://github.com/mathieudutour/import-svg-as-artboard) — Import SVG files as Artboards. 
* [Envato Elements](https://github.com/envato/extensions-sketch-plugin) — Envato Elements Sketch plugin makes it easy to import a select range of Web and Mobile UI Kits from Envato Elements! 
* [SVG Insert](https://github.com/tankxu/SVG-Insert) — Insert SVG code as a Layer. 
* [Android Screenshot](https://github.com/sylvainleris/fr.y3s.sketch.screenshot) — A Sketch plugin to take screenshots of Android device connected over USB. 
* [PasteSVG](https://www.figma.com/c/plugin/740559260731517035) — This plugin allows you to convert svg code into icon and put it inside the figma. 
* [Tailwind CSS](https://www.figma.com/c/plugin/738806869514947558) — Generate styles and other cool stuff straight out of your tailwind config file? This plugin already supports adding your color styles and has more features coming up in the future. 
* [HTML To Figma](https://www.figma.com/c/plugin/747985167520967365) — Easily convert any webpage to Figma layers by URL. 
* [SVG to JSX](https://www.figma.com/c/plugin/749818562498396194) — This plugin allows you to copy SVG code as a react component so that you don't have to transform it. 
* [PPT for XD](https://twitter.com/dvrvrm) — Converts XD files to PPT file with images. 
* [Inspect](https://www.unykvis.com/en/contactos) — Inspect allow you to collect images, colors, styles and other information from you site. Now you no longer need to leave Adobe XD to inspect a website. 
* [Mimic](https://tourdexd.com/plugin/mimic/) — Extract colors, font names and images from the web. Useful plugin to kickstart designs based off of something out in the wild. 
</article>
<article id="map-generation">
### Map Generation
* [Map Creator for Sketch](https://github.com/terence55/sketch-map-creator) — Plugin to visually create a static map(BaiduMap, MapBox, GoogleMap) with custom options, and location search is available now 
* [Sketch Maps](https://github.com/bouchenoiremarc/Sketch-Maps) — A Sketch plugin that uses the Mapbox API to fill layers with specific and custom maps. 
* [Sketch Map Generator](https://github.com/eddiesigner/sketch-map-generator) — Plugin to fill a layer with a map generated from a location (Powered by Google Maps) 
* [Mapsicle](https://www.figma.com/c/plugin/736458162635847353) — With Mapsicle, you can quickly and seamlessly place maps in your mockups. 
* [Map Maker](https://www.figma.com/c/plugin/731312569747199418) — Map Maker allows you to make a customized map blazing fast. 
* [Maps generator](https://github.com/boopeshmahendran/AdobeXD-maps/blob/master/README.md) — Generate maps using the Google Maps API. Enter a place name or latitude and longitude and click Generate Map. It's that simple! You can also change the Map Type, Zoom Level and add Custom Styles. 
</article>
<article id="mockup-plugins">
### Mockup Plugins
* [Artboard Studio Mockups](https://www.figma.com/c/plugin/750673765607708804/Artboard-Studio-Mockups) — Get access to more than 5300 world-class quality Artboard Studio mockup items right inside your Figma files. Easily render Figma frames into real-life product mockups with a click of a button. More items are added to our ever-growing library every day. 
</article>
<article id="other">
### Other
* [Tabula Rasa](https://github.com/avk/sketch-tabula-rasa) — Add blank backgrounds to transparent artboards 
* [Remove.bg](https://github.com/mathieudutour/sketch-remove-bg) — Remove image background in a single click 
* [Label Layers](https://github.com/franklymrshankly/Label_Layers) — A Sketch plugin that labels selected layers 
* [sketch-camera-hotkeys](https://github.com/jayhxmo/sketch-camera-hotkeys) — Navigate around and present more efficiently 
* [Sketch a Sketch](https://github.com/mathieudutour/sketch-a-sketch) — Bringing the iconic knobs from the famous toy to Sketch. 
* [Sketch Line2rect](https://github.com/KevinvBre/Sketch-Line2Rect) — Replace Lines by Rectangles in Sketch 
* [Composite SVG](https://github.com/alanfraneo/svg-composite) — A Sketch plugin to create a composite SVG file from sketch artboards 
* [toggleLayers](https://github.com/KevinGutowski/toggleLayers) — One action to toggle layers on / off so that you can more easily remap this to a custom keyboard shortcut. 
* [lazyboards](https://github.com/lazybearcreations/sketch-lazyboards) — Artboard tools to help you with tedious batch tasks. 
* [Sketch Replace Layer](https://github.com/daneden/sketch-replace-layer) — Replace selected layer(s) with copied content/layer(s) 
* [Puzzle Tokens](https://github.com/ingrammicro/puzzle-tokens) — Sketch.app plugin to apply design tokens to Sketch layers 
* [Sketch Iconscope](https://github.com/ziven27/Sketch-IconScope) — Wrap the Icon with a square(4n) scope. 
* [Roller](https://github.com/toyboxsystems/roller) — Roller is the first Linter for Designers. It works just like spell-check but within your Sketch files. 
* [Assistant](https://github.com/jordansinger/Assistant) — Talk to Sketch 
* [Y Tools](https://github.com/yued-fe/y-tools) — Sketch plugin tools yued-fe.TM 
* [Lightwire](https://github.com/alex-matt/sketch-lightwire-plugin) — Plugin with ready-to-use wireframes that help you to bring your ideas to life fast and easy. You can find necessary wireframes using categories or search. 
* [Perfecto-](https://github.com/pranusarna94/Perfecto-) — A sketch plugin to round off all sub-pixel layers at once 
* [draw-and-render](https://github.com/nichenqin/draw-and-render-sketch-plugin) — A plugin to render canvas to sketch 
* [Sketch Split Shape](https://github.com/kupe517/sketch-split-shape) — Sketch plugin to split up a rectangle evenly by a user-generated value 
* [Separate Shapes](https://github.com/PEZ/SketchSeparateShapes) — A Sketch-app plugin that does a ”boolean” separate operation on two selected shapes. Like divide in Pathfinder in Adobe Illustrator. 
* [Sketch Topographic](https://github.com/ziven27/Sketch-topographic) — Display Topographic Information 
* [Units](https://github.com/dploeger/sketch-plugin-units) — A Sketch plugin for working with print units (inch, cm, mm) in Sketch's pixel world. 
* [Z Rating](https://github.com/pranusarna94/z-rating) — Sketch plugin for designers @zomato to quickly change and maintain restaurant ratings 
* [Smartling](https://smartling.github.io/smartling-sketch-plugin/) — Plugin for Sketch that allows you to translate and pseudo-localize designs using the Smartling platform. 
* [Gifmock For Sketch](https://github.com/stevenfabre/Gifmock-for-Sketch) — Easily create GIFs from your mocks 
* [Sketch Show Layer Info](https://github.com/MrPeak/sketch-show-layer-info) — Show selected layer's ObjectID, Class and ID. It is of great use for plugin development or file parsing. 
* [Table of Contents](https://github.com/youwenliang/Table-of-Contents) — Sketch plugin for generating a table of contents for documentations 
* [Sketch Marginbox](https://github.com/FrancisVega/sketch-marginbox) — Simple script to create layers as margins 
* [Nudge Corner Radius](https://github.com/DWilliames/nudge-corner-radius-sketch-plugin) — Increase/decrease the corner radius of a rectangle, or path nodes — with easy keyboard shortcuts 
* [Rotate Artboard Orientation](https://github.com/mmilano/sketch-rotate-artboards) — Rotate the orientation of an artboard - from portrait to landscape, and vice versa. 
* [Sketch RTL](https://github.com/devinmancuso/sketch-rtl) — Automatically create RTL layouts of your designs with this plugin for Bohemian Coding's Sketch 3 
* [Rotator](https://github.com/pberrecloth/rotator-sketch-plugin) — Rotate objects at preset amounts 
* [SketchTape](https://github.com/rjungemann/SketchTape.sketchplugin) — Connect two shapes in the Sketch app. 
* [webalize](https://github.com/Vesely/webalize) — Sketch plugin to webalize layers name. 
* [Sketch to VR](https://github.com/auxdesigner/Sketch-to-VR) — Personal fun project - turn your mocks into VR 
* [Specify](https://github.com/ElliotEKJ/specify) — Quickly generate a rectangle or oval with specific dimensions and positioning. 
* [Sketch Wakatime](https://github.com/wakatime/sketch-wakatime) — A Plugin to update your WakaTime stats automatically from Sketch. 
* [Formr](https://github.com/lessthanzero/Formr) — Helps to maintain simple proportions of layers and artboards 
* [Toggle NoPrint](https://github.com/sudilkovsky/Toggle-NoPrint-Visibility-Sketch-Plugin) — Toggle Visibility of 'NoPrint' layers in Sketch 
* [Unlock All Layers & Unlock Hover](https://github.com/truthlabs/sketch-unlock-all-layers) — Unlock all layers on the current artboard using ⌘⌥L 
* [Sketch Nearest 8](https://github.com/acollurafici/Sketch-Nearest-8) — Sketch Plugin to round shape size to the nearest multiple of 8 
* [Split & Divide](https://github.com/KrevedAccky/SketchSplitDivide) — Split and Divide plugins for the Sketch3 app. 
* [WordCloud](https://github.com/ediathome/WordCloud) — Create basic word clouds and tag clouds. 
* [Single Border](https://github.com/sureskumar/single-border) — Add single borders with advanced controls. 
* [Sketch Play](http://sureskumar.com/sketchplay/) — Create game plays directly from the Sketch app. 
* [Loose!](https://github.com/teeerevor/loose-sketch-plugin) — Turn your lines into arrows 
* [QRCode for Sketch Local Sharing](https://github.com/dex1t/QRCode-for-Sketch-Local-Sharing) — This plugin show QR Code for Local Sharing URL (Sketch 3.4 Feature). Read this QR code when checking your design on a smartphone. 
* [Library Replacer](https://github.com/BohemianCoding/library-replacer-sketchplugin) — Quickly replace instances of shared Symbols and Styles. 
* [Install Library Bundle](https://github.com/bomberstudios/install-library-bundle) — Installs a bunch of shared Sketch Libraries at once, because life is too short for clicking links. 
* [Remove BG](https://www.figma.com/c/plugin/738992712906748191) — Remove the background of images automatically with just a single click - using the remove.bg API. 
* [Border](https://www.figma.com/c/plugin/740014625507871586) — Quickly add single borders in Frame. 
* [Gifs](https://www.figma.com/c/plugin/748092648919348948) — Your perfect design needs the perfect gif. 
* [Multiplayer Pong](https://www.figma.com/c/plugin/749261072790710247) — The first video game implemented as a Figma plugin is also the first video game ever: Pong. 
* [Tumble](https://www.figma.com/c/plugin/736084415195819692) — Tumble makes shapes fall down. Put your shapes in a frame, select them and run Tumble. 
* [Thanos UI](https://www.figma.com/c/plugin/751125845433636076) — Thanos UI removes random half of the selected elements. 
* [Silicon Connector](support@siliconpublishing.com) — Silicon Connector for Adobe XD is a plugin that lets you access your Dropbox account from within Adobe XD. After authenticating with your username and password, you can navigate folders in your Dropbox account, search for assets, and use them in your designs. 
* [Animated Digital Clock Timer](https://github.com/lelayf/AdobeXD-animated-digital-clock-timer) — This plugin lets you easily add custom animated countdown timers to your artboards using auto-animate transitions. It is useful if you design mobile apps that rely on time-based interactions supported by an actual timer or stopwatch in the UI. 
* [inMotion ignite](https://guide-ignite.inmotionnow.com/help) — Create inMotion ignite proofs from your artboards directly in Adobe XD! 
* [Move Items Dialog](https://onthehead.com) — Move items Like Illustrator Dialog. 
</article>
<article id="pdf-export-plugins">
### PDF Export Plugins
* [PDF Export](https://github.com/DWilliames/PDF-export-sketch-plugin) — Export all pages, current page or selected artboards into a PDF — based on a range of settings 
* [Auto PDF Exporter nSlicer](https://github.com/Atim33/autopdfexporter-sketch-plugin/) — A Sketch Plugin to auto-export all '[S]' Prefix artboards to a single pdf. 
* [Artboards to PDF](https://github.com/andrewfiorillo/sketch-artboards-to-pdf) — Sketch plugin to export artboards to PDF slideshow, from either the current page or from all pages 
* [Numbering Machine](https://github.com/akolpakov/sketch-numbering-machine) — Sketch plugin to generate IDs or Numbers for documents and export to PDF. Useful if you need to generate thousands of pages with the same template but with different IDs. 
* [Print Export](https://github.com/BohemianCoding/print-export-sketchplugin) — Export artboards or pages to a PDF for printing 
</article>
<article id="plugin-development">
### Plugin Development
<div class="hidden-in-page">
<p align="center">
<a href="http://bit.ly/33Q3AC0">
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Abstract.png" alt="Abstract"/>
</a>
</p>
</div>
* [Sketch DevTools](https://github.com/skpm/sketch-dev-tools) — See your plugin logs, inspect the state of Sketch documents, explore actions, and more 
* [Get It](https://www.figma.com/c/plugin/739958206151827292) — Get It helps in building Figma plugins by letting you prototype pieces of your plugin in Figma and copy their verbose syntax to your clipboard. 
* [Inspector](https://www.figma.com/c/plugin/760351147138040099) — Speed up plugin development with an easy way to view and explore node properties. 
* [Node Inspector](https://www.figma.com/c/plugin/758276196886757462) — View and copy node properties for plugin development. This plugin is only useful for plugin developers. 
</article>
<article id="plugin-managers">
### Plugin Managers
* [SketchReloadPlugins](https://github.com/liangjingyang/SketchReloadPlugins) — Reload Plugins. 
* [Plugin Reloader](https://github.com/TheNounProject/SketchPluginReloader) — A simple plugin to reload other plugins 
* [Sketch Plugin Monster](https://github.com/PeachScript/sketch-plugin-monster) — A Sketch plugin for managing all plugin shortcuts. 
</article>
<!-- <div class="hidden-in-page">
<p align="center">
<a href="http://bit.ly/33KtOpN">
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/ProtoPie.png" alt="ProtoPie"/>
</a>
</p>
</div> -->
<article id="plugins-collection">
### Plugins Collection
* [Utility Belt](https://github.com/frankko/UtilityBelt) — An always-expanding collection of simple, focused plugins for Sketch. 
* [Sketch Mate](https://github.com/getflourish/Sketch-Mate) — These plugins will make you best friends with Sketch. 
* [Sketch Layer Tools](https://github.com/hrescak/Sketch-Layer-Tools) — A box for random useful sketch commands meant to make work with layers easier. It contains most of my previous commands and plugins combined, plus a bunch of new ones. 
* [Sketch Commands](https://github.com/bomberstudios/sketch-commands) — A collection of script commands for Bohemian Coding's Sketch.app 
* [ZEN Sketch](https://github.com/FrancisVega/ZEN-Sketch) — A collection of Sketch plugins 
* [Handy Tools](https://github.com/webpatch/Handy-Tools) — Some handy tools for Sketch 
* [Artboard Tricks](https://github.com/romannurik/Sketch-ArtboardTricks) — Artboard Tricks plugin for Sketch 
* [Automate Sketch](https://github.com/Ashung/Automate-Sketch) — Make Sketch more efficient. A lot of useful plugins in one. 
* [Kitchen](https://github.com/ant-design/kitchen) — Make your design work delicious 🍽 
* [SketchPlugins](https://github.com/eachandother/SketchPlugins) — Only contains a single plugin for the moment: Artboards to Pages. Takes all of the artboards on a page and create a new page for each of them, using the artboard name as the new page name. 
* [Powerful Tools](https://www.figma.com/c/plugin/740040684939274087) — This plugin contains a couple of tools that empower you to fill your design with random dates, IDs, numbers, Chinese names or English names. It also includes a color palette and a mirror that connects an image to a certain frame. 
* [Resco for XD](https://www.resco.net/contact-support/) — Resco for XD plugin is for users that use the customization tool, Woodford, by Resco. You can export images, create color themes and generate the main app icon for stores. 
</article>
<!-- <div class="hidden-in-page">
<p align="center">
<a href="http://bit.ly/2VQVTJ8">
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/Porkbun.png" alt="Porkbun"/>
</a>
</p>
</div> -->
<article id="presentation--preview">
### Presentation & Preview
* [Timelapse](https://timelapsesketch.com) — Create beautiful high-speed videos of your work in Sketch and show off your progress. 
* [Dockpreview](https://github.com/fnky/sketch-dockpreview) — A Sketch plugin that lets you preview your current artboard in the Dock. 
* [Sketch Server](https://github.com/matt-curtis/Sketch-Server) — A Sketch Plugin that creates a local web server for your Sketch Documents. 
* [MagicPresenter](https://github.com/MagicSketch/MagicPresenter) — Sketch Plugin to Present Slides or Deck directly in Sketch 3 
* [Browser Preview](https://github.com/lukasoppermann/browser-preview) — Quickly preview an artboard in your browser. 
* [represent.](https://getrepresent.com) — Present your UX/UI Designs lightning fast on the client's devices without leaving Sketch. 
* [Sketch Preview](https://github.com/marcisme/sketch-preview) — This Sketch plugin provides a preview command (⌘P) that will open a specially named slice in Skala Preview. The plugin works by exporting the first slice named Preview to Sketch's cache directory and opening that file in Skala Preview. 
* [Quick Presentation](https://github.com/timothywhalin/Sketch-Quick-Presentation) — A Sketch plugin to quickly share multiple artboards with an optional title. 
* [Masker](https://www.figma.com/c/plugin/743170618365358883) — Masker allows you to easily overlay devices on selected layers in your project. 
* [Autocover](https://www.figma.com/c/plugin/742583620684903056) — Figma currently creates a screenshot from the first page of your design document. 
* [File Thumbnails](https://www.figma.com/c/plugin/743199058431264556) — Create beautiful thumbnails for your projects to make your Figma file grid more convenient, fast and easier on the eyes. 
* [Cover Generator](https://www.figma.com/c/plugin/745146759001708690) — A very simple plugin that takes a name, description, and status as input and generates a cover Image for your Figma file. 
</article>
<!-- <div class="hidden-in-page">
<p align="center">
<a href="http://bit.ly/33KtOpN">
<img src="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/ProtoPie.png" alt="ProtoPie"/>
</a>
</p>
</div> -->
<article id="prototyping">
### Prototyping
* [Sketch Browser Preview](https://github.com/FreakLand/sketch-browser-preview) — Generates a preview (⌘ + ⇧ + .) of your current artboard and shows in your web browser. 
* [AnimateMate](https://github.com/Creatide/AnimateMate) — Create your animations directly in Sketch 
* [Prototypes Invision ↔︎ Sketch](https://github.com/mathieudutour/prototypes-invision-sketch) — Translate your prototyping links back and forth between Sketch and Invision 
* [Marvel Prototyping](https://www.figma.com/c/plugin/733702238760085035) — Seamlessly sync frames from Figma to new or existing Marvel projects, allowing you to quickly create prototypes or get audio and video feedback using our new User Testing feature. 
* [Figmotion](https://www.figma.com/c/plugin/733025261168520714) — Figmotion is an animation tool built right in Figma. 
</article>
<article id="three-d-perspective">
### Three D Perspective
* [Sketch Isometric](https://github.com/sureskumar/sketch-isometric) — Generate Isometric views from Artboards and Rectangles. 
* [Angle](https://designcode.io/angle) — Apply perspective transforms on-screen mockups. Auto-detect screens by resolution and works on shapes and symbols.  
* [Magic Mirror](http://magicmirror.design) — Perspective Transformation for Sketch Artboards 
* [Roto](https://www.figma.com/c/plugin/733184376355671573) — Roto extrudes and rotates shapes in 3D. 
* [SkewDat](https://www.figma.com/c/plugin/741472919529947576) — Live skew any shape and fine-tune with simple non-destructive controls. 
* [Easometric](https://www.figma.com/c/plugin/750743440401413268) — With Easometric it is really easy to create isometric layers & groups. 
* [Rotato](https://rotato.xyz/help) — Get your designs on the screens of photorealistic 3D iPhones and other devices. MacOS app on rotato.xyz. Not available for Windows yet. 
</article>
<article id="rename-helper">
### Rename Helper
* [Symbol Master Renamer](https://github.com/miguelangelnarvaezgo/symbol-master-renamer) — Simple plugin to rename and organizing the master symbols with '/'. 
* [2O3T Tools](https://github.com/2o3t/2o3t-Sketch-Tools) — Easy Tools, batch rename layers and artboards, etc. 
* [Enumerator](https://github.com/ScottSavarie/Enumerator) — Sketch plugin to rename and number your artboards or layers based on their x,y position 
* [Rename Instances](https://github.com/exevil/sketch-rename-instances) — Tiny single-command Sketch plugin that renames every symbol instance with its master's name. 
* [Rename It](https://renameit.design) —
gitextract_hbp102tg/ ├── .gitignore ├── Awesome-Design-Conferences.md ├── Awesome-Design-Plugins.md ├── Awesome-Design-UI-Kits.md ├── Contribution_Guidelines.md ├── LICENSE ├── README.md ├── docs/ │ ├── css/ │ │ ├── design-tools-style.css │ │ └── normalize.css │ ├── index-kits.html │ ├── index-plugins.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.json
SYMBOL INDEX (11 symbols across 6 files)
FILE: docs/js/script.js
function toggleMenuChange (line 8) | function toggleMenuChange() {
class Nav (line 27) | class Nav {
method constructor (line 28) | constructor(navElements, activeClass) {
method scroll (line 33) | scroll() {
function handle (line 116) | function handle(text) {
function sortByApplication (line 157) | function sortByApplication(event) {
FILE: docs/modules/Templates.js
constant CONFIG (line 2) | const CONFIG = require('./config/tools');
FILE: docs/modules/config/plugins.js
constant CONFIG (line 17) | const CONFIG = {
FILE: docs/modules/config/tools.js
constant CONFIG (line 17) | const CONFIG = {
FILE: docs/modules/config/ui-kits.js
constant CONFIG (line 17) | const CONFIG = {
FILE: docs/server.js
function page (line 9) | function page(req, res, name) {
Condensed preview — 43 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (5,747K chars).
[
{
"path": ".gitignore",
"chars": 29,
"preview": "node_modules\ndocs/index.html\n"
},
{
"path": "Awesome-Design-Conferences.md",
"chars": 24629,
"preview": "<div class=\"hidden-in-page\">\n\n# Awesome Design Conferences\n* [Awesome Design Tools](https://github.com/LisaDziuba/Awesom"
},
{
"path": "Awesome-Design-Plugins.md",
"chars": 277183,
"preview": "<div class=\"hidden-in-page\">\n\n# Awesome Design Plugins \n* [Awesome Design Tools](https://github.com/LisaDziuba/Awesome-D"
},
{
"path": "Awesome-Design-UI-Kits.md",
"chars": 100696,
"preview": "<div class=\"hidden-in-page\">\n\n# Awesome Design UI Kits\n* [Awesome Design Tools](https://github.com/LisaDziuba/Awesome-De"
},
{
"path": "Contribution_Guidelines.md",
"chars": 4807,
"preview": "# 📜 Contribution Guidelines\n### for Awesome Design Tools, Plugins, Design Conferences, UI Kits\n\nIf you would like to con"
},
{
"path": "LICENSE",
"chars": 1068,
"preview": "MIT License\n\nCopyright (c) 2019 Lisa Dziuba\n\nPermission is hereby granted, free of charge, to any person obtaining a cop"
},
{
"path": "README.md",
"chars": 143693,
"preview": "<div class=\"hidden-in-page\">\n\n# Awesome Design Tools\n\n- [Awesome Design Plugins](https://github.com/LisaDziuba/Awesome-D"
},
{
"path": "docs/css/design-tools-style.css",
"chars": 1103542,
"preview": ":root {\n --black: #1b1c26;\n --blue: #0054d7;\n --gray: #e6e6e6;\n --light-brown: #faac52;\n --light-blue: #c5e8fa;\n -"
},
{
"path": "docs/css/normalize.css",
"chars": 6137,
"preview": "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n ==========================="
},
{
"path": "docs/index-kits.html",
"chars": 1372733,
"preview": "<html><head>\n <title>Awesome Design UI Kits</title>\n \n <meta charset=\"utf-8\">\n <meta"
},
{
"path": "docs/index-plugins.html",
"chars": 1939343,
"preview": "<html><head>\n <title>Awesome Design Plugins</title>\n \n <meta charset=\"utf-8\">\n <meta"
},
{
"path": "docs/js/script.js",
"chars": 8403,
"preview": "const chooseMd = document.location.href\n .split('/')\n .pop()\n .includes('plugin')\n ? 'Plugins'\n : 'Tools';\n\nfunctio"
},
{
"path": "docs/modules/Templates.js",
"chars": 4790,
"preview": "const getCssFile = require('./helpers/getCssFile');\nconst CONFIG = require('./config/tools');\n\nconst normalizeCss = getC"
},
{
"path": "docs/modules/addAllPromoBanners.js",
"chars": 4510,
"preview": "const promotionBanner = require('./view/promotionBanner');\n\nconst addAllPromoBanners = (window) => {\n // promotionBan"
},
{
"path": "docs/modules/addBackgroundColorToLogo.js",
"chars": 1760,
"preview": "const tinycolor = require('tinycolor2');\n\nconst addBackgroundColorToLogo = ({ document }) => {\n\tconst backgroundColorsHS"
},
{
"path": "docs/modules/addContributeButtonForAddendum.js",
"chars": 495,
"preview": "const addContributeButtonForAddendum = ({ document }) => {\n\tconst article = document.querySelector('#addendum');\n\tconst "
},
{
"path": "docs/modules/addHamburgerMenu.js",
"chars": 376,
"preview": "const addHamburgerMenu = ({ document }) => {\n\tconst parent = document.querySelector('.header-inner');\n\tconst hamburger ="
},
{
"path": "docs/modules/addHeader.js",
"chars": 4888,
"preview": "const addHeader = (\n { document },\n title = 'Awesome Design Tools',\n logo,\n nav,\n isTool = false,\n isPlugin = fals"
},
{
"path": "docs/modules/addIDsForHeadings.js",
"chars": 291,
"preview": "const createLinkForID = require('./helpers/createLinkForID');\n\nconst addIDsForHeadings = ({ document }) => {\n\tconst cate"
},
{
"path": "docs/modules/addLinksToNavigationElements.js",
"chars": 280,
"preview": "const addLinksToNavigationElements = ({ document }) => {\n\tconst navListLinks = document.querySelectorAll('.nav li a');\n\t"
},
{
"path": "docs/modules/addScripts.js",
"chars": 367,
"preview": "const fs = require('fs');\nconst path = require('path');\n\nconst getJS = () => (\n\tfs.readFileSync(path.normalize(`${__dirn"
},
{
"path": "docs/modules/addWelcomeArticle.js",
"chars": 607,
"preview": "const addWelcomeArticle = (\n\t{ document },\n\t{\n\t\tlogoClassName,\n\t\ttitle,\n\t\tdescription,\n\t\tbutton,\n\t}\n) => {\n\tconst main ="
},
{
"path": "docs/modules/config/plugins.js",
"chars": 2724,
"preview": "const {\n favicon196,\n favicon160,\n favicon152,\n favicon144,\n favicon120,\n favicon114,\n favicon96,\n "
},
{
"path": "docs/modules/config/tools.js",
"chars": 2830,
"preview": "const {\n favicon196,\n favicon160,\n favicon152,\n favicon144,\n favicon120,\n favicon114,\n favicon96,\n "
},
{
"path": "docs/modules/config/ui-kits.js",
"chars": 2719,
"preview": "const {\n favicon196,\n favicon160,\n favicon152,\n favicon144,\n favicon120,\n favicon114,\n favicon96,\n "
},
{
"path": "docs/modules/createPromoBanner.js",
"chars": 820,
"preview": "const Templates = require('./Templates');\n\nconst createPromoBanner = ({ document }, link = 'https://flawlessapp.io/feedb"
},
{
"path": "docs/modules/editHead.js",
"chars": 820,
"preview": "const Templates = require('./Templates');\n\nconst editHead = ({ document }, title, meta, icons, isProduction) => {\n\tconst"
},
{
"path": "docs/modules/favicon/favicon-adk.js",
"chars": 57827,
"preview": "const image = {\n favicon16: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAb"
},
{
"path": "docs/modules/favicon/favicon-adp.js",
"chars": 59823,
"preview": "const image = {\n favicon16: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAd"
},
{
"path": "docs/modules/favicon/favicon-adt.js",
"chars": 443580,
"preview": "const image = {\n favicon16: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAp"
},
{
"path": "docs/modules/helpers/createLinkForID.js",
"chars": 112,
"preview": "const createLinkForID = (str) => (\n\tstr.toLowerCase().split(' ').join('-')\n)\n\nmodule.exports = createLinkForID;\n"
},
{
"path": "docs/modules/helpers/deleteAllIconsInDescription.js",
"chars": 259,
"preview": "const deleteAllIconsInDescription = ({ document }) => {\n\tconst toolDescription = document.querySelectorAll('.tool__descr"
},
{
"path": "docs/modules/helpers/getCssFile.js",
"chars": 199,
"preview": "const fs = require('fs');\nconst path = require('path');\n\nconst getCssFile = (file) => (\n\tfs.readFileSync(path.normalize("
},
{
"path": "docs/modules/helpers/getJS.js",
"chars": 339,
"preview": "// const getJS = () => (\n// \tfs.readFileSync(path.normalize(`${__dirname}/docs/js/script.js`), 'utf8')\n// )\n\n// const ad"
},
{
"path": "docs/modules/helpers/removeAllImages.js",
"chars": 193,
"preview": "const removeAllImages = ({ document }) => {\n\tfor (let i= document.images.length; i-->0;)\n document.images[i].parentNo"
},
{
"path": "docs/modules/removeListInAddendum.js",
"chars": 324,
"preview": "const removeListInAddendum = ({ document }) => {\n\tconst article = document.querySelector('#addendum');\n\tif (article) {\n\t"
},
{
"path": "docs/modules/tweakDescriptionOfArticleTopic.js",
"chars": 661,
"preview": "const createLinkForID = require('./helpers/createLinkForID');\n\nconst tweakDescriptionOfArticleTopic = ({ document }) => "
},
{
"path": "docs/modules/tweakToolContainer.js",
"chars": 3839,
"preview": "const capitalizeFirstLetter = (string) => (\n string.charAt(0).toUpperCase() + string.slice(1)\n);\n\nconst removeEmojis "
},
{
"path": "docs/modules/view/promotionBanner.js",
"chars": 1533,
"preview": "const PromotionBanner = (modifier) => `\n <a class=\"promotion-banner ${modifier.className}\" href=\"${modifier.link.href"
},
{
"path": "docs/pull_request_template.md",
"chars": 551,
"preview": "## Checklist\n\n* [x] I made something good today 💐.\n* [ ] I put links in the correct format: ``[Tool](link) — description"
},
{
"path": "docs/server.js",
"chars": 385,
"preview": "const http = require('http');\nconst path = require('path');\nconst fs = require('fs');\n\nhttp.createServer((req, res) => {"
},
{
"path": "index.js",
"chars": 4034,
"preview": "const fs = require('fs');\nconst md = new require('markdown-it')('commonmark');\nconst jsdom = require('jsdom');\nconst { J"
},
{
"path": "package.json",
"chars": 1027,
"preview": "{\n \"name\": \"Awesome-Design-Tools\",\n \"version\": \"1.0.0\",\n \"description\": \"<p align=\\\"center\\\"> <a href=\\\"https://f"
}
]
About this extraction
This page contains the full source code of the goabstract/Awesome-Design-Tools GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 43 files (5.3 MB), approximately 1.4M tokens, and a symbol index with 11 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.