docs/index-plugins.html - master - githubmirror/Awesome-Design-Tools

docs/index-plugins.html
23 394 строки2 MB
website production update
10 фев 2020, 17:19
10 фев 2020, 17:193e924f4
<html><head>
            <title>Awesome Design Plugins</title>
            
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="theme-color" content="#F2FAF5">
        <meta name="description" content="Design plugins">
        <meta name="image" content="https://flawlessapp.io/images/designtools/awesome-design-tools-sharable-image-general.png">
        <!-- Schema.org for Google -->
        <meta itemprop="name" content="Awesome Design Plugins">
        <meta itemprop="description" content="Design plugins">
        <meta itemprop="image" content="https://flawlessapp.io/images/designtools/awesome-design-tools-sharable-image-general.png">
        <!-- Twitter -->
        <meta name="twitter:card" content="summary">
        <meta name="twitter:title" content="Awesome Design Plugins">
        <meta name="twitter:description" content="Design plugins">
        <meta name="twitter:site" content="https://flawlessapp.io/designplugins">
        <meta name="twitter:creator" content="@flawlessappio">
        <!-- Open Graph general (Facebook, Pinterest & Google+) -->
        <meta name="og:title" content="Awesome Design Plugins">
        <meta name="og:description" content="Design plugins">
        <meta name="og:image" content="https://flawlessapp.io/images/designtools/awesome-design-tools-sharable-image-general.png">
        <meta name="og:url" content="https://flawlessapp.io/designplugins">
        <meta name="og:site_name" content="Awesome Design Plugins">
        <meta name="fb:admins" content="1685880598347240">
        <meta name="og:type" content="website">
    
            
        <link rel="icon" type="image/png" href="data:image/png;base64,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" sizes="196x196">
        <link rel="icon" type="image/png" href="data:image/png;base64,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" sizes="160x160">
        <link rel="icon" type="image/png" href="data:image/png;base64,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" sizes="96x96">
        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAdpJREFUOBF9U7FOG0EQnRnv7t357IM7GzsEqnwBBQVS+AK6lFTJp+Q7IoRERUlHS0VBEYkvcKRIETIKssA4GJ/ZzczZvrstzBR78+bNvtudnUFY2t7Vt83J7OUQHO4CggHnsBEE0zDQY0nBBjpwkCPCMMrt7fXh6SIuZPJ9/wib+jzoxQmFWkKltbMNaLbjEovDIk+8Ht8enFziztmXzuPg98A5lwgpAtHHdvEVLJZ92AId+MIiEs/dLtn8+Wi1WZLtNIfJrxHMx1OBhY3u/4K1dgWLr3OQvGjaI978yWMEMPt6x1d0C8ZZB6PhQxGv53JanzgnrAdXvp1bsK/5CsJ8xicbT0pcOAiauCLoR2uIfGr6/K9G8oHeHJIXqQFsEJBRtQjX582vg5BrBXQaeZsFKOO/hMTWCphOU/jK+DattF3hpae44staV5xOQu68SlvKtNnLQBtTJbEn3alYuHrwJW16VecRC6X9Lijt16NI5dZWrD6oyzYiXRZP/pj2M0CqTlPP5YMNiXTrkkW4txdm+q3Ckf7PtrvvbX6SoaI/Xy8eCPFYRChSoGMDG90UZIjWmcyBDJNMZNkpMlSt7fhzmIQddKiAF0/A8TgTzrjkd0rBzc/9H4/C/wd/FYsXjeDSIgAAAABJRU5ErkJggg==" sizes="16x16">
        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA7pJREFUWAmtV81u20YQnuXuklxKpERJjRrUgYHkDWyggHpSj8m9h9rP0DcIAh/yBkWPPcYG+gDtMTnFSIC2aJBDDy1ao+2hMGTrxxIlitRmhzFtSuZStOAFJO7OfDvzcXe4O0NgTeu+PGBiq0f7p8wIzTHJws2wIrPjtG/NzqUIXBmIZvzqy4Molec9lwwiAB3+/v+bPaXYl4R0QEo3byLKLNuGeruhU6fyESFwTAh5Uft86/AVWSa0RKD+/IttYpMj1hQdKnhqoPDpeFVwfa8QkyoTIqb99a87351cydIOOo/C2c8SZBNl1OFgNivAXCuFaJ+1lg92RWj1WYUi0SOmvZuSMFDZPeiyKJwepc5RFk/mEPzTh/EfPYgGUxRp27DXhyica/VZhZTQlMpXVx4wlCcEfoGLPRVNnSww7S/CCIL/BjD+qwfxND+epLLaPz2HxWKRTit8Knhn8PbfPQQlBGIp9wtnKOUiiGDy9xnE41kuNI4iGJyegQraXP2qUJFOfCYEiGK0CsgdL6TalgHIeZyrDqchDM+HubpVIa4Cykjnh6/Eu/d/TlYBRWNes8H+rKaFlA1Kf/qAGxcOt7WWNIq5CkoZ5a8CThme9SHWrFLWpAh61Agm8yQas4oy/XiSH5A4V6qtQhLrWiBGxLAtlsTBOvCqfjHTE0BsOJ0lv9V52fHM8slGzhMjS2do1ux1fzoOrgea3sYEDJNqTF6L5yUOp40J0Mr6I1qWOJg2IkCrFhBaYg9gPWYjAqZf7ss1bfN6PzS9WxMgnKobshwBS6zH3ZqA6Ze7drnJwXLumAAxCPASBAzDAE/lCGXarVaA14UKvuIpRDn37zWB8XIHLJvOonKXuApo3nAKX8qgFPx2eeeYvDLh8OIz9dIlpmZFh49pmVC71wBc/rINM2dWncyL861La5gf6ppwHfD8urrcdYh8OabtyZTqs92hyge16bdhc6g8zE+/vUYdkMAGbfRb53svWS+p8vYiA2brpgNDBWOj3drUOWCKjj4TAlQVDToCuO/cW/6e8RtvfvoJ8BInnc4uFipXBHageqj2IncVVvfergrwlXODrb8N9c7hGKsk1F+FzWphkrBTb1951PqIUki3XgPH0wejzmFWnluYIKD/9PUJM63d7EpYbRWXSkAZS/b7DpwfZ6si9Hu1AjjAhlUSFiq04ezb972OqAi3WndV0NyAfpyw/r98cZpn6/GP31jBdsxHQURd6pDoYlbIhFUtOYon0hUsFid0/tOTb/MrmUtnHwAutR3t6tT5ygAAAABJRU5ErkJggg==" sizes="32x32">
        <link rel="apple-touch-icon" sizes="57x57" href="data:image/png;base64,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">
        <link rel="apple-touch-icon" sizes="114x114" href="data:image/png;base64,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">
        <link rel="apple-touch-icon" sizes="72x72" href="data:image/png;base64,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">
        <link rel="apple-touch-icon" sizes="144x144" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAYAAADnRuK4AAAAAXNSR0IArs4c6QAAEytJREFUeAHtXVuMHMd1rap+zHvnscvlw2TACAwkGVYsmI+VoMgy9GEkH1KojwQ2YPjDhkz/yKCNyAgEw9kAgmDEgiNIgGFq6T8FFuwPG+FPoA8hhi0YFh/eKIAlAYpfpCSSIrm7nJmdmX5V7h16yemZ6ememe7pqp6un+ln9a1bZ27duvfWLULSknIg5UDKgZQDKQek5AAVmWrOOf3ET/5RU8pZjemKRhWqMaKppu0otmYwzWQM6XeYDe3IhNKUXCZnEtIKpa5RlTBH5Xi/nVU5axhc1R3HMHJOgVoWpx3LYWXL0JvWucOnLEpp99lR9cV1L3YAHfzp8YMd07iHcHIvMOFu4NR+SvhezskeQuluwrkyS+YoqkJqe5YJU2JnTbfZQIUNB1c4oZcBRx9Swi451HkXyHvbsbV31h/8wR9myZ/+b82cS/t//Pghm1uPEcIfBrA8BMBZ7icq7nM9myHV5RoBAMdNSoDv06tA5Ruc8V8oKjlz4fAP3wvwUmiPzIRDd/34H8pt0vyK4/AvAOV/HRr1EVaUXyiQUrUc4ReiqRqGu7cIJa8oCnv5/JGXt6L5yp1aIwXQvp/9/QHeNk9ySp6Eoah057NyHJWXqiRbyMlB7CCVdcLImk4zL5w99v2Lg7fDuRIJgLrA6ZjPccI/B0OUGg6ps68F/s2kumeRaLo++4+H9EVKqAUS6VWYhTwTBZBCBdAqX2WnfvLmUzB7ehaAUwyJB7FWA0MBqe0DpfrWhC9WWqb7OG3AH+Jbx1c+9tIqXXWmq+vO26EBqLJ69H5Ho2v6UuGIupAFBfTOR2Q/0rI6KNWLoFPL3yhowjn4Nzy5fmxtPYx+CYUjxW8ffgr0nO+BntMdrihMhfVajmjVHKHwD05CyRXzZGGxkoSmwH+bWpTRb/xmZe2laRs0FYBWV1fZ8/zMv8OQ9bWhhDBKtEqO6NU8YZmZmnOGkjPtxRIAKA9ASkyh9MUnVvZ/fZohbWIA7f7uZwuN+rUfATPBpuNf1GKGaIt5ohbkVUixldU9S0TPyN0Gd2/RM7vzlc+/9snnm+7rwc4mAlAXPI3rr8OQdSzYZ+48xbIa0QFI2gK4HiTUKRgq1Xt3EUWRX6Lu9AoMaW8u5yuPTgKisRUUHLa6kmcC8CDBTtsk7fe3SOO9a8S41iTcDm1CsMOPSH8doHfroxuEO8K6p8ZuP5hbjl3Z3vwRzqLHfXnsv9G5R+ovwEe+OO6HBp6HDrCbBjE2WoSbDuhIqjQKN4LItm2SzUtrZBzoDrhw9zvv16tXTl/4r2E3va6NNYR1Z1uEv+hV2VTXgRK1mCX6Up4oOW2qqmb1cqm6QPILiTB33WYZ2Lu+Ns7sLDCA0M5jcufszlT99hcjOFDyoCctFQBQ4YRoREDi7SorYB/K5MSn8zbBPgddy7VCjwa1EwUa81DvMbm9NgvwYPvsbZO0/rRJtv/vOjG3OuC492l1jLe3rm0Q28SIi2QU0IdU4jhrQfWhQDrQ2U/X0c7zpVmzCBVsq94mdr1DqMq6etKsafD9HgQuGe0OyYHTNQmW6j+3d9+77zc2Lp++8Gu/9vsOYbVnjx4wTPu3wKfYB3sFFG19uUjUknhDRiaXJRWMIUpMoQ1d0T/u54D1HcJM035OBPBgv9gdi7QubpLWH2HYgGORSqcFEU+bdZFImpIWXjQd4zm/SkZKIJQ+HdP53ax0Hz9iXfeBcnSTZJZLMP0f2QzXa1GflEEKZUEaJaGgQq0p+l2jpNBICWSazkkhwYO9A4q1CTakJijaqCeJUm6CUm0ZEJefgIIKtcE7J0c1xfOvW/3O4bK5TS5CJVJEEmoQQpLZB9JIgLgdRVUhMH+XMIH5owAQ4F5d1ZQDXuGxnhLIatMTsoAHmWDebJPt3210XSUBmBLpI7Zlka3rN0BKCmx/CM6BEljdT3g97gkg8PVgALxUxTEs0vz9xi3bUcyUG60OqW/ejJmKcD7PHeqJhaEAWlh98BBIn/vC+fyMa4F/ffv9TWLcmCg6IVRit282Sau5HWqd8VTG7/vU+S8fGvbtoQCyHTNQjM+wCkW51rncIMb1+Duvfn2LmB35lWrbGh73NRRAsDL0YVGAMA0dnSt1Yt6IF0QQrUk2r90A74BcYSv9fKcOHYqJoQAilD/UX4Gs520Akd0wYiXfsWyyeRViiCRWqmE6MBQTAwCqrD5wENq5HCvHw/w4tLx1aYuggh1nMTsGqd+QWanmy/f/6qsH+3k4ACAIlbqn/yHZzzkMH61L8Xdeq9Ek2414h9Rp+pIp5gA2BgBkO/zeaT4i6rsYSoshtHGX+nWYIYL3XsZi38qg4iJ9AECUOXe7nkjQSeejphBO2K2PwOAJepFshXE2gI0BAEFOpwOyNSwwvWgj+iDyhBW+5OCMbBN8ZrIp1Zw4+/sbNwAgeGBP/0NJOndaFliq43e+olLduBE/mMfpWxAue/ufHwQQJwMP9b8k+7kpgC6EPESFutWIPp1eWP0F9sEB4eICEIhU9M4nZwrvwTkMRrMaYiiy9Y1NmcI/dv8ZI7c56wLQrn/7GwhbnW1OwtuUzPjAAIVahIILFLv6kAQLFcGkphw5f8KV78kFIEhOKkXsTxgdb7dMIUI/sC22aZH6hhz6kG4UvAHUIWbsgfNhgCNoHWY9XhdHL50t0IfazfiV+16ahh0zZ8sbQIxZcyOBkDkihcIiPfUNsA/BkmmRC+WwNKanuIYwmyhzJYGcttVdl9/Dj1gPHTD13hTcX9YsQLxuT3EBCDTsJCW+6Wmm96HVEGvY6Gy3YCgTd2qvGy0XZlwnCpk/ANkghUQrdTAwiho/ZBnuVQsuAEE6fZd4Eo2xUdDjCLZAEduI4BF1kaJT1F0reVwAAueM62YUHSZanY4hZqTgNoR+WDC9F61k25YLIy4Accj/KhrBUdPDwSsuZLYxsNo1NuKPYfLjvxswdP4kEDKIC5qeBdfbm4KtcnXYCAnkh7ak3hc5T+O24Akb3BIoqQiRuF1tkEK2wMFnKYAAXKBuCF3QzSFqSQGEPSM4glIAifr3kYQu9I+JmjImlUAAIhm2csIZmYglBRD0Cu4FLXoxIIZaxCI+56LmGuzXgRlgRS9mOwWQkH3EsoEyHcdOOy4BEtG1If5fL+KuU2D3IFmKiPagFEBZeQIQRIxWTAEk0QZ4GHwvWplrADFNIUyXSQKJF3oy1wBSinJF8DqOeAH3cw0grSRbRnlXLJcQo9ncAgi3R1AK8szAumiBXbBFK3MLoO6OP5Jt+ssEpHduAaSVZRu+UPakEkgICYyuC6Ug3p5jfsxh6RDmx6LZ3MdtomQsqi7erHEuhzB5ASSezWruAKSC5ZnpcjhQe6UkheFL1VIA9fIklmO1KunwJSB4sAPnSgJRcF1oAm7YG+SfpGfEVPrnCkA6Sh8BbSlBAJSFbcVFLPMDIACOJvHwpepiWs3nBkBoOKSKnM0VVfqgRJSToxPIcr2Wn+AtMV7J5MUcvpA7cwGg7tRdosjDXthmchkhp+87NM4FgPRFeaVPfkHstJWJBxBGHCpFMafAO/9ir189qxM9KzbtiQeQzNKnVCl7YUuY64kGEM66tIqMYRuEZAt5ombEnLr3ojfRAOrafSQ0HDIAfqm20NtPwh4nF0AQeyXr1L28WJEi4QOiOrEA0so5Kda894uWQrlE9Jw8w25yASSh4RBnXMWKXNuVJBJAaDhUJDMcoq+rslzrF0jCnycSQPpiQXjG9xKoqAqpAniojAp/b0OScMwyChgOxYsd9uIt64JniTBFvihJbJN4MZJenA54Xa/JI30UAE119xJBCSRrSRSAcLmOLIZDBbbdqu5elBo8CPpEAUirgtNUAj0Cg+MrCB5Jh61eaekGEKeCZ0zuJb3vWJKIQw0cpJVdNWkMhX1cJsxRXRhxAYjCTlWuu/1vC3yOEYdM8GSZmXyWlJeqUs62vLreBSBoGeBHTghpgsf85EsF8G+J7133AsrO9XZ2lATixNx5UKZfjPdR3JsJi0M++OQWqhWSK8kb1NbLTNYwXBLGJYFsKieAMoK6LRjkIKos1YgmeFBYL0D8jlUd9uPsKS4AgSXUDa+eB0U9ZCB5RDQcdmdau2CmBYsZk1QMI+cNIIXYDfHygI5mv4gRhxgIXwbJg+vZk1YK1HJBxCWBHEetE+K6L3T7uxGHC2KFPhQgCL5YlSMYbJLO5dS9zbULQBmiNVoSAUhD3UeQfzk6QjEQLCPoEuRJwDLsHYeVXRLGBSCSI3XSHPaagNcEMhyiW6Kyq0pEXX4cZu8ZetMFIFc4x0ff/GUDfAHiJSMewgH0eYlgONQyOqntXZoL8IBGZ587fMobQCCGOaH8ypD+Eu5Sd/iKmaocGAdr4E2XYcO6kFh1pYuRnspcEujWdXq5576Qh5ggM07DIfprF0DfWUDLcvImWp59DtJlABtuHQhf5eRDzxoEuZFZjC/ZAC65qYB9R5NgzVbY3QUD1AA2BgBEGb/EXaaisMmYrj6UPHEtVdYgS2pluSpt9OB0nEdhyy711zEAIO6wdwkRF0FxOU1xpSgOWzh8zWtxqAPYcJcBACmMvm0Lih+cdc08wzwApgSGwXxJ7CwZ7m6N5gxce2/31zwAIMjh/o5NxJzJz3qpMs6uymDfET1DRn+nRnXu2No7/XUPFcjFf/nUFdjjdbn/4VjPweJc/KulmaWp6zpDl+WPWQ6vz+jV/3nw9O7++oZM4+ERTt/ofzDu81nmOMSUcrW9u6QPeA+zz0DSDMXEUADBfP8XYX48jLpmlSgBHaHolkDfVlrucIAzPhQTQwGkMO3MnVfjP8J4H4z7ibIgYHBpMXrT0zLIAUUlQzExFEA3V3/1HvDzrcFq4rkS9VJlFZyhOGRlJMqKMcuegD/XWxcO//C9Yd8cCiB8kFL2H8NemPU1NBxisoSoCgZ/IXhE3MgkqjaPXS8lr3i94wkgNctPUUIhwCzeEqXhEIerCsy0khg5GGKv1RWFvexVnyeANv75/BYMY2teL87ienepcgRbU6K+g/adJEcOhtY/jKydP/Lylld9ngDCFzSNvQBjmSv+w6uiKK53dR/o7DALBn/V9iyRrMDZ38Ns7zR1wQhk6TTzwqg6RgLoxrfOXmSEvzqqgqjuUbACh705yjwFf4XSL5S8evbY9y+OqmskgPBFTVOeASEAkYqzLVoNchyGGO88h8FfU3YYbWhMf8avEt9FS63XP7ipPbJvGyr6W7/KQrsPiM3tL4cCINR30ItehOSV8xT8NW1fwCz8mxdWTr3mV4+vBMIKnmaPvQTMP+dXWVj3dZQ+ISRKwKxfmIMnV0zGsuKw+OtXD/znzh1f+dhLfs/h/cAaamX16P0md84SzqM1CcOwVTgEccZTAgizvFcxjUoCcvAE6ciwnkHFmSj06PqxtfUgdfoOYTuVtP/7g8uZR/Ztwvnf7VyL4leDFHXawnQbjOSKuW7Y6RwFu4fWFcCzk+sra/8ZtMLAAMIKjZ9/+GbmM/swF+1K0A+M8xwqzbkDU+g+IE9xi4AibFICYjgt43KA0hfXHzj9r+O8FkgH6q3wn+hjX4fzoY613ucmOUa7z6TbUqK0qYJVOY0cnITz+A4988TKfuzbscpE/9Pd3/1sodG4/jroQ8fG+tqIh3FL7uKhRXTCjXhq+C2072AIRqrvDOeP31XQe95czlcefe2Tz4+9LnlsCYTEXHn6tWaxuPgoHIYmiTLLEEYxAXjyMMPCmVYKHj+YeN2nZyYFD9Y4EYDwRQTR0+zx42BneRHPpylKXhs7WL7rz4J8g6XuSonxpdY09CbmXei7Jx7Yf3wSybPDg1A4X/z24ac4Jd+baIqP0/a7QILowfV5nKJXADzo10rL+BzAqTpMWL7xm5W1QLaeUV8IBUD4gVt2InsNVrYeGfXB/ns4dOlLwbPL4ya0uMwmLZNxAI2EsJj/yaB2Hr+vTDyE9Ve8uXp2/Wn6OEzv6UkgMpDvDIeuoODpetEhkUEKnn7OBz2nDXBPnDy+cmAlLPDgl0OTQL3NqD179IBp2s85hH7Oa1hDS3P+LyGYS/PHMAZ+4UZsYTpXe+lN8nHXsgxedXSM+nnWJ+FDJADaIeQWkJyTsMbsSU74nZ3UQETl/qLiG6qqw/S8WC3PZSKDHR5O8VuHKdIaxvNEAZwduiIF0M5Hqt85XLba9AR3+BcASPfl9pWJOmI3ZRyucOe+bMLTxe3wJ9xf+r+QIOMV2Ifj1KhIwrC+ORMA9RK76/RnDqml/GOwevFhyFj9ECjdt1fAYkrcwkIp9Z73Msz3mF6FTnwD123h0huv1RO+1Uz4wMwB1E/nwZ8eP0h07Z5cIXtvNqvfDYsaD8CQtwdGub2gPy0DyILP7/srT8A5dJANBtarwJMPgSeXQae5iFkyMNEBrlVff/AHf4izmbEDaFTjOef0yPkTqm4UVOZsqZRn1GZBhfMWs1TGHKbTbNvqtsFht35H1SfSvZ1db3DvCeYYXLUcx9BzTqFpWZhKF7OhYkJLzEkIRlPX9gIitSOlJeVAyoGUAykHUg5IyoH/B3GsxoCcKO7uAAAAAElFTkSuQmCC">
        <link rel="apple-touch-icon" sizes="60x60" href="data:image/png;base64,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">
        <link rel="apple-touch-icon" sizes="120x120" href="data:image/png;base64,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">
        <link rel="apple-touch-icon" sizes="76x76" href="data:image/png;base64,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">
        <link rel="apple-touch-icon" sizes="152x152" href="data:image/png;base64,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">
    
            
        <style>
            /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
            :root {
  --black: #1b1c26;
  --blue: #0054d7;
  --gray: #e6e6e6;
  --light-brown: #faac52;
  --light-blue: #c5e8fa;
  --orange: #facb5c;
  --yellow: #fade3e;
  --skin: #faf0b9;
  --swamp: #9f8d29;
  --green: #028930;
  --sim-green: #008730;
  --mint: #a7f5ce;
  --feedback--bg: #ffffed;
  --feedback--btn: #ffbb44;
  --violet: #850289;
}

.clearfix:after {
  content: '';
  display: table;
  clear: both;
}

a::selection,
h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection,
input::selection,
label::selection,
li::selection,
p::selection,
span::selection,
strong::selection,
div::selection {
  background-color: var(--light-blue);
}

/* html {
  scroll-behavior: smooth;
} */

#addendum a:nth-child(3) {
  color: inherit;
  cursor: default;
  text-decoration: none;
}

body,
a,
input,
button {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

body {
  max-width: 1280px; /* 1160px */
  display: flex;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 22px;
  letter-spacing: -0.3px;
  color: var(--black);
}

body.-blue .tool__asset {
  background-color: var(--light-blue);
}

body.-blue .banner--yellow a:hover,
body.-blue article h3 a {
  color: var(--blue);
}

body.-blue .tag {
  background-color: var(--light-blue);
  color: var(--blue);
}

/* green theme */
body.-green .btn-contribute,
body.-green .nav .active,
body.-green .nav .active:hover,
body.-green .nav .active:focus {
  color: #ffffff;
  background-color: var(--green);
}

body.-green .btn-contribute,
body.-green .banner-top {
  background-color: var(--green);
}

body.-green .header-top__nav-item.-active {
  border-top-color: var(--green);
}

body.-green .tool__asset {
  background-color: var(--green);
}

body.-green .banner--yellow a:hover,
body.-green article h3 a {
  color: var(--green);
}

body.-green .btn-contribute,
body.-green .nav .active,
body.-green .nav .active:hover,
body.-green .nav .active:focus {
  color: #ffffff;
  background-color: var(--green);
}

body.-green .btn-contribute,
body.-green .banner-top {
  background-color: var(--green);
}

body.-green .header-top__nav-item.-active {
  border-top-color: var(--green);
}

body.-green .tag {
  background-color: var(--mint);
  color: var(--green);
}

/* violet theme */
body.-violet .btn-contribute,
body.-violet .nav .active,
body.-violet .nav .active:hover,
body.-violet .nav .active:focus {
  color: #ffffff;
  background-color: var(--violet);
}

body.-violet .btn-contribute,
body.-violet .banner-top {
  background-color: var(--violet);
}

body.-violet .header-top__nav-item.-active {
  border-top-color: var(--violet);
}

body.-violet .tool__asset {
  background-color: var(--violet);
}

body.-violet .banner--yellow a:hover,
body.-violet article h3 a {
  color: var(--violet);
}

body.-violet .btn-contribute,
body.-violet .nav .active,
body.-violet .nav .active:hover,
body.-violet .nav .active:focus {
  color: #ffffff;
  background-color: var(--violet);
}

body.-violet .btn-contribute,
body.-violet .banner-top {
  background-color: var(--violet);
}

body.-violet .header-top__nav-item.-active {
  border-top-color: var(--violet);
}

body.-violet .tag {
  background-color: var(--violet);
  color: #fff;
}

body > ul li > a {
  letter-spacing: -0.025625rem;
}

body > .nav {
  margin-top: 6.75rem;
}

body > main {
  margin-top: 7rem;
  margin-bottom: 50vh;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:visited {
  color: var(--blue);
}

h1 {
  font-size: 1.75rem;
  letter-spacing: -0.043125rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.5rem;
  letter-spacing: -0.033125rem;
}

button {
  letter-spacing: -0.01875rem;
}

main {
  padding-left: 4.375rem;
}

article > header {
  margin-bottom: 2rem;
}

.hidden-in-page,
.-hidden {
  display: none !important;
}

.nav {
  width: 280px;
  flex-shrink: 0;
}

.nav ul {
  position: fixed;
  width: 260px;
  height: 80vh;
  padding-left: 0;
  margin: 0;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nav ul::-webkit-scrollbar {
  width: 6px;
}

.nav ul::-webkit-scrollbar-track {
  background-color: #ededed;
}

.nav ul::-webkit-scrollbar-thumb {
  background-color: rgb(204, 204, 204);
}

.nav ul::-webkit-scrollbar-thumb:hover {
  background: rgb(196, 196, 196);
}

.nav ul::-webkit-scrollbar-track,
.nav ul::-webkit-scrollbar-thumb {
  border-radius: 4px;
}

.nav li {
  height: 44px;
  margin-right: 1.375rem;
  border-radius: 6px;
  list-style: none;
}

.nav li:last-child {
  padding-bottom: 0px;
}

.nav li a {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  line-height: normal;
  color: inherit;
}

.nav li > a {
  width: 100%;
  display: block;
  height: 100%;
  padding: 0.75rem 1.125rem;
  letter-spacing: -0.02125rem;
  border-radius: 6px;
}

.nav .active,
.nav .active:hover,
.nav .active:focus {
  color: #ffffff;
  background-color: var(--blue);
}

.nav li:hover,
.nav li:focus {
  background-color: var(--gray);
}

.nav li a:hover {
  text-decoration: none;
}

.nav h2 {
  display: none;
}

.banner {
  padding: 0.875rem 1rem;
  margin-top: 2.625rem;
  margin-bottom: 3.75rem;
  font-size: 1rem;
  line-height: 26px;
  letter-spacing: -0.3px;
  border-radius: 8px;
  background-color: var(--skin);
  color: var(--swamp);
  cursor: default;
}

.banner--yellow {
  background-color: var(--skin);
  color: var(--swamp);
}

.banner--flex {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.banner--dark {
  background-color: rgba(0, 84, 215, 0.8);
  color: #ffffff;
}

.banner--dark a:hover {
  color: #ffffff !important;
}

.banner-contribute > p:first-child {
  margin-right: 1rem;
}

@media (max-width: 584px) {
  .banner-contribute > p:first-child {
    margin-bottom: 1rem;
  }

  .banner-contribute .btn-contribute {
    text-align: center;
  }
}

.banner--yellow a {
  color: inherit;
  text-decoration: underline;
}

.banner--yellow a:hover {
  color: var(--blue);
}

.promo-banner {
  box-sizing: border-box;
  display: flex;
  background-color: #ffffed;
}

.promo-banner:hover {
  text-decoration: none;
}

.promo-banner h3 {
  font-size: 1.375rem;
}

.promo-banner--flawless-feedback {
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  padding: 2.375rem 1rem;
  margin-top: 3.75rem;
  margin-bottom: 3.75rem;
  background-color: var(--feedback--bg);
  color: var(--black);
  border-radius: 8px;
}

.promo-banner--flawless-feedback:visited {
  color: inherit;
}

.promo-banner--flawless-feedback h3 {
  color: inherit;
}

.promo-banner--flawless-feedback__button {
  padding: 0.5625rem 1rem;
  font-size: 1rem;
  font-weight: bold;
  background-color: var(--feedback--btn);
  color: #fff;
  border-radius: 18.5px;
}

.promo-banner--flawless-feedback p {
  font-size: 1.125rem;
  line-height: 1.44;
}

.promo-banner--flawless-feedback__logo {
  width: 85px;
  height: 85px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='85' height='85' viewBox='0 0 85 85'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23FB4' d='M0 42.5C0 65.972 19.028 85 42.5 85S85 65.972 85 42.5 65.972 0 42.5 0 0 19.028 0 42.5'/%3E%3Cpath fill='%23FEFEFE' d='M25.815 68.835V34.787c0-6.694 5.356-12.12 11.963-12.12h23.926c0 6.694-5.356 12.12-11.963 12.12H39.188c-.78 0-1.41.64-1.41 1.429v9.263a1.42 1.42 0 0 0 1.41 1.429H49.74c0 6.693-5.355 12.12-11.962 12.12v9.807c0 1.277-1.023 2.313-2.284 2.313h-7.396c-1.261 0-2.283-1.036-2.283-2.313'/%3E%3Cg fill='%23FEFEFE' opacity='.5'%3E%3Cpath d='M37.454 45.742c0 .789.642 1.428 1.433 1.428h5.623c1.253-2.495 1.994-5.234 1.994-7.872l-9.05 3.646v2.798zM38.083 22.93h14.794c2.925-3.337 4.863-7.872 4.863-12.147l-21.213 8.549c-4.329 1.744-8.049 6.207-9.698 11.118a12.166 12.166 0 0 1 11.254-7.52'/%3E%3C/g%3E%3Cg fill='%23FEFEFE' opacity='.5'%3E%3Cpath d='M38.086 23.103h20.327c.865-1.872 1.357-3.922 1.357-6.003l-22.451 4.249c-4.477.847-8.34 4.39-10.142 8.8 1.892-4.157 6.063-7.046 10.91-7.046M37.457 45.163v.615c0 .784.632 1.42 1.413 1.42h8.48a13.94 13.94 0 0 0 .565-3.879l-9.903 1.874a1.14 1.14 0 0 1-.555-.03'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
}

article > header {
  margin-bottom: 2rem;
}

article header > p {
  line-height: 1.5rem; /* 22px */
}

article h3 {
  margin-top: 0;
  margin-bottom: 1rem; /* 0.5rem */
}

article h3 a {
  color: var(--blue);
  font-weight: 700;
  line-height: 1.625rem;
}

article p {
  margin: 0;
}

article li {
  margin-bottom: 2rem;
  list-style: none;
}

article li:first-child {
  margin-top: 0;
}

article li:last-child {
  margin-bottom: 4.625rem;
}

.tool__description__header a {
  font-size: 1.375rem;
  font-weight: 700;
  color: inherit;
  line-height: 24px;
}

article ul {
  margin: 0;
  padding-left: 0;
}

.tool {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

.tool.-hidden {
  display: none;
  opacity: 0;
}

.tool__asset {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  margin-right: 2rem;
  border-radius: 10px;
  background-color: var(--light-blue);
  font-family: 'Pacifico', 'Lucida Grande', 'Lato', 'Lucida Sans Unicode',
    cursive;
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
  cursor: pointer;
}

.tool__asset:hover {
  text-decoration: none;
}

.tool__asset:visited {
  color: #ffffff;
}

.tool__asset::selection {
  background-color: transparent;
}

.tool__description p {
  margin-top: 0.375rem;
  line-height: 1.625rem;
}

.tool__description__header {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.tag-wrapper {
  margin-top: 0.75rem;
}

.tag {
  display: inline-block;
  margin-right: 0.5rem;
}

.tag:last-child {
  margin-right: 0;
}

.tag {
  padding: 0.25rem 0.5rem;
  font-family: 'Lucida Grande', 'Lato', 'Lucida Sans Unicode', Geneva, Verdana,
    sans-serif;
  font-size: 0.625rem;
  font-weight: bold;
  letter-spacing: -0.0125rem;
  text-transform: uppercase;
  border-radius: 0.688rem;
  line-height: 1;
  cursor: pointer;
}
/* 
.tag--free {
	background-color: var(--orange);
	color: rgb(153, 107, 0);
}

.tag--open-source {
	background-color: var(--yellow);
	color: rgb(153, 130, 0);
}

.tag--mac {
	background-color: var(--light-brown);
	color: rgb(153, 107, 0);
} */

.welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 5rem;
  padding-bottom: 8.5rem;
}

.-logo-adt {
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='196px' height='196px' viewBox='0 0 196 196' version='1.1' xmlns='http://www.w3.org/2000 … [Строка слишком длинная. Вы можете скачать файл]
}

.-logo-adp {
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='60px' height='60px' viewBox='0 0 60 60' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3E059F6B97-0B3D-42CF-96AF-2426D55D5E0B%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3' transform='translate(-880.000000, -144.000000)' fill-rule='nonzero'%3E%3Cg id='header-title' transform='translate(705.000000, 144.000000)'%3E%3Cg id='adp-logo' transform='translate(175.000000, 0.000000)'%3E%3Cpath d='M20.3602648,2.73013461e-15 L39.6397352,4.37529275e-15 C46.7194428,3.07477155e-15 49.2867159,0.737144559 51.8749512,2.12134794 C54.4631865,3.50555132 56.4944487,5.53681353 57.8786521,8.12504882 C59.2628554,10.7132841 60,13.2805572 60,20.3602648 L60,39.6397352 C60,46.7194428 59.2628554,49.2867159 57.8786521,51.8749512 C56.4944487,54.4631865 54.4631865,56.4944487 51.8749512,57.8786521 C49.2867159,59.2628554 46.7194428,60 39.6397352,60 L20.3602648,60 C13.2805572,60 10.7132841,59.2628554 8.12504882,57.8786521 C5.53681353,56.4944487 3.50555132,54.4631865 2.12134794,51.8749512 C0.737144559,49.2867159 3.87134176e-15,46.7194428 3.00432763e-15,39.6397352 L4.10109972e-15,20.3602648 C3.23408559e-15,13.2805572 0.737144559,10.7132841 2.12134794,8.12504882 C3.50555132,5.53681353 5.53681353,3.50555132 8.12504882,2.12134794 C10.7132841,0.737144559 13.2805572,4.03065581e-15 20.3602648,2.73013461e-15 Z' id='Rectangle-Copy' fill='%232FC763'%3E%3C/path%3E%3Cpath d='M28.3581861,1.59872116e-14 L39.3808608,13.6118695 C43.8362651,19.1138357 44.8790335,21.5728817 45.4321347,24.4554257 C45.9852359,27.3379698 45.6849634,30.1948717 44.5446342,32.899429 C43.404305,35.6039863 41.8730592,37.7924926 36.371093,42.2478969 L21.3881305,54.3808608 C17.7229859,57.3488363 15.408162,58.8024267 13.41895,59.6056916 C11.0895749,59.2545816 9.61076545,58.673222 8.12504882,57.8786521 C5.53681353,56.4944487 3.50555132,54.4631865 2.12134794,51.8749512 C0.737144559,49.2867159 -1.5244806e-13,46.7194428 -1.53315074e-13,39.6397352 L-1.52218302e-13,20.3602648 C-1.53085316e-13,13.2805572 0.737144559,10.7132841 2.12134794,8.12504882 C3.50555132,5.53681353 5.53681353,3.50555132 8.12504882,2.12134794 C10.7132841,0.737144559 13.2805572,1.82415105e-14 20.3602648,1.69409893e-14 L28.3581861,1.76234689e-14 Z' id='Combined-Shape' fill='%2318A849'%3E%3C/path%3E%3Cpath d='M10.9991492,59.0814879 C9.91760468,58.7608583 9.02258714,58.3586608 8.12504882,57.8786521 C5.53681353,56.4944487 3.50555132,54.4631865 2.12134794,51.8749512 C0.737144559,49.2867159 4.65039059e-14,46.7194428 4.56368918e-14,39.6397352 L4.67336639e-14,20.3602648 C4.58666497e-14,13.2805572 0.737144559,10.7132841 2.12134794,8.12504882 C3.28179714,5.95519748 4.89702096,4.17680548 6.91393893,2.84295328 L13.6713561,5.85154926 C20.1389909,8.73112577 22.1844878,10.4487449 23.9859522,12.7660077 C25.7874165,15.0832706 26.8168781,17.7651097 27.0286807,20.6925865 C27.2404833,23.6200634 26.8696943,26.2652077 23.9901178,32.7328425 L16.1484507,50.345515 C14.0394137,55.0824898 12.5536827,57.4473075 10.9991492,59.0814879 Z' id='Combined-Shape' fill='%230B7E32'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.-logo-adk {
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='29px' height='29px' viewBox='0 0 29 29' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 61.1 (101010) - https://sketch.com --%3E%3Ctitle%3E9659587E-EF92-4A00-A660-D91F849A257C%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-uikits-v1' transform='translate(-80.000000, -28.000000)' fill-rule='nonzero'%3E%3Cg id='Group-3' transform='translate(80.000000, 28.000000)'%3E%3Cg id='adp-logo'%3E%3Cpath d='M9.84079466,-3.97579883e-16 L19.1592053,3.97579883e-16 C22.581064,-2.31005361e-16 23.8219127,0.356286537 25.0728931,1.02531817 C26.3238735,1.69434981 27.3056502,2.67612654 27.9746818,3.92710693 C28.6437135,5.17808732 29,6.41893597 29,9.84079466 L29,19.1592053 C29,22.581064 28.6437135,23.8219127 27.9746818,25.0728931 C27.3056502,26.3238735 26.3238735,27.3056502 25.0728931,27.9746818 C23.8219127,28.6437135 22.581064,29 19.1592053,29 L9.84079466,29 C6.41893597,29 5.17808732,28.6437135 3.92710693,27.9746818 C2.67612654,27.3056502 1.69434981,26.3238735 1.02531817,25.0728931 C0.356286537,23.8219127 1.54003574e-16,22.581064 -2.65053255e-16,19.1592053 L2.65053255e-16,9.84079466 C-1.54003574e-16,6.41893597 0.356286537,5.17808732 1.02531817,3.92710693 C1.69434981,2.67612654 2.67612654,1.69434981 3.92710693,1.02531817 C5.17808732,0.356286537 6.41893597,2.31005361e-16 9.84079466,-3.97579883e-16 Z' id='Rectangle-Copy' fill='%23C22FC7'%3E%3C/path%3E%3Cpath d='M13.705,-9.9475983e-14 L19.0340827,6.57907027 C21.1875281,9.23835394 21.6915329,10.4268928 21.9588651,11.8201224 C22.2261973,13.2133521 22.0810656,14.594188 21.5299065,15.9013907 C20.9787474,17.2085934 20.2386453,18.2663714 17.5793616,20.4198169 L10.3375964,26.2840827 C8.56515091,27.7193808 7.44606724,28.4219333 6.48426465,28.8100478 C5.35883486,28.6392716 4.64463751,28.3584214 3.92710693,27.9746818 C2.67612654,27.3056502 1.69434981,26.3238735 1.02531817,25.0728931 C0.356286537,23.8219127 -1.56430452e-13,22.581064 -1.56849508e-13,19.1592053 L-1.56319402e-13,9.84079466 C-1.56738459e-13,6.41893597 0.356286537,5.17808732 1.02531817,3.92710693 C1.69434981,2.67612654 2.67612654,1.69434981 3.92710693,1.02531817 C5.17808732,0.356286537 6.41893597,1.44418601e-14 9.84079466,1.38132748e-14 L13.705,-9.9475983e-14 Z' id='Combined-Shape' fill='%23A318A8'%3E%3C/path%3E%3Cpath d='M3.34262682,1.37350581 L6.60782212,2.82824881 C9.73384559,4.22004412 10.7225024,5.05022669 11.5932102,6.17023706 C12.463918,7.29024744 12.9614911,8.58646969 13.0638623,10.0014168 C13.1662336,11.416364 12.9870189,12.6948504 11.5952236,15.8208739 L7.80508453,24.3336656 C6.78588896,26.6228163 6.06785615,27.7658121 5.31663652,28.5556519 C4.79354791,28.401099 4.36093667,28.2066965 3.92710693,27.9746818 C2.67612654,27.3056502 1.69434981,26.3238735 1.02531817,25.0728931 C0.356286537,23.8219127 4.27865677e-14,22.581064 4.23675109e-14,19.1592053 L4.28976174e-14,9.84079466 C4.24785606e-14,6.41893597 0.356286537,5.17808732 1.02531817,3.92710693 C1.58637257,2.87802642 2.36736844,2.01826639 3.34262682,1.37350581 Z' id='Combined-Shape' fill='%23850289'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.welcome__asset {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background-size: cover;
  font-size: 0;
}

.welcome__title {
  margin-top: 0.8125rem;
  margin-bottom: 1rem;
  line-height: normal;
}

.welcome__description {
  max-width: 390px;
  padding-bottom: 2rem;
  line-height: 1.45;
  text-align: center;
}

.btn {
  z-index: 1;
}

.btn:hover {
  text-decoration: none;
}

.btn-contribute {
  position: relative;
  padding: 0.75rem 1.375rem;
  padding-left: calc(25px + 1.375rem);
  border-radius: 24px;
  font-size: 1rem;
  font-weight: bold;
  background-color: var(--blue);
  color: #ffffff;
}

.btn-contribute:visited {
  color: #ffffff;
}

.image-gh:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 1.375rem;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath fill='%23FFF' fill-rule='evenodd' d='M8.5 0C3.804 0 0 3.862 0 8.63 0 12.685 2.741 16.05 6.439 17a1.181 1.181 0 0 1-.064-.41v-1.467H5.313c-.574 0-1.106-.259-1.34-.734-.276-.518-.318-1.316-1.02-1.813-.212-.172-.042-.345.192-.323.446.129.807.431 1.147.884.34.453.489.561 1.126.561.298 0 .765-.021 1.19-.087.234-.604.638-1.143 1.127-1.402-2.848-.345-4.208-1.769-4.208-3.71 0-.843.361-1.64.957-2.331-.191-.67-.447-2.05.085-2.59 1.275 0 2.04.843 2.231 1.058a6.455 6.455 0 0 1 2.061-.345c.744 0 1.424.129 2.061.345.19-.216.956-1.057 2.23-1.057.51.518.277 1.92.065 2.589.595.669.935 1.488.935 2.33 0 1.942-1.34 3.366-4.165 3.668.787.41 1.34 1.575 1.34 2.438v1.965c0 .065-.022.13-.022.194C14.62 15.598 17 12.405 17 8.63 17 3.862 13.196 0 8.5 0z'/%3E%3C/svg%3E");
}

.banner-top-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 1;
  z-index: 100;
  animation: start 0.5s ease-in-out;
}

@keyframes start {
  from {
    top: -3rem;
    opacity: 0;
  }

  to {
    top: 0rem;
    opacity: 1;
  }
}

.header-top,
.banner-top {
  transition: all 0.3s ease-in-out;
}

.header-top--hide-banner .banner-top {
  display: none;
  opacity: 0;
}

.banner-top {
  position: relative;
  top: 0;
  width: 100%;
  padding: 1rem 0;
  text-align: center;
  background-color: #3d7dd0;
  color: #ffffff;
  opacity: 1;
}

.banner-abstract {
  background-color: #272b2d !important;
}

.banner__text {
  color: #ffffff;
  font-size: 18px;
  font-weight: 500;
  line-height: 2;
}
.banner__text:hover {
  text-decoration: underline;
}

.banner__text a,
.banner__text span {
  font-weight: 700;
  color: #ffffff;
}
.banner__text a:hover,
.banner__text span:hover {
  text-decoration: underline;
}

.banner__close-wrapper {
  position: absolute;
  top: 50%;
  right: 10%;
  transform: translateY(calc(-50% - 3px));
}

.banner__close {
  position: relative;
  width: 14px;
  height: 14px;
  font-size: 0;
  border: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='15px' height='15px' viewBox='0 0 15 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 61.1 (101010) - https://sketch.com --%3E%3Ctitle%3E0ADCEEA4-60C5-4927-95C3-E45AC67857A5%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round'%3E%3Cg id='Desktop---Announcemenet---Banner' transform='translate(-1525.000000, -27.000000)' stroke='%23FFFFFF' stroke-width='3'%3E%3Cg id='Close' transform='translate(1527.000000, 29.000000)'%3E%3Cline x1='0' y1='0' x2='11' y2='11' id='Line-3'%3E%3C/line%3E%3Cline x1='0' y1='0' x2='11' y2='11' id='Line-3' transform='translate(5.500000, 5.500000) scale(-1, 1) translate(-5.500000, -5.500000) '%3E%3C/line%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
}

.banner-abstract {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.banner-abstract header {
  display: flex;
}
.banner-abstract .banner__text {
  padding-left: 1rem;
}
.banner-abstract .banner__text:visited {
  color: #fff;
}
.banner-abstract .abstract-logo {
  position: relative;
  width: 35px;
  height: 35px;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='35px' height='35px' viewBox='0 0 35 35' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 61.1 (101010) - https://sketch.com --%3E%3Ctitle%3E13E4A54D-B3FE-4828-953B-D56603BF6AC8%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Desktop---Announcemenet---Banner' transform='translate(-576.000000, -16.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Group' transform='translate(576.000000, 16.000000)'%3E%3Cpath d='M17.21901,0 C3.44244671,0 0,3.44244671 0,17.21901 C0,30.9955733 3.44244671,34.43802 17.21901,34.43802 C30.9955733,34.43802 34.43802,30.9955733 34.43802,17.21901 C34.43802,3.44244671 30.9955733,0 17.21901,0 Z M14.3932221,26.6383067 C10.7543972,26.6270837 7.81258629,23.6701213 7.82004595,20.0312868 C7.82753404,16.3924523 10.7814668,13.4475992 14.420307,13.451324 C18.0591473,13.4550558 21.0070567,16.4059557 21.0070567,20.0447979 C20.9995789,23.6911284 18.0395583,26.6420506 14.3932221,26.6383067 L14.3932221,26.6383067 Z M26.3672444,26.3672444 L23.1348682,26.3672444 L23.1348682,11.2963753 L8.07077564,11.2963753 L8.07077564,8.07077564 L26.3672444,8.07077564 L26.3672444,26.3672444 Z' id='Shape'%3E%3C/path%3E%3Ccircle id='Oval' cx='14.3932221' cy='20.0447979' r='3.36112907'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .banner-top .banner__text {
    padding-left: 0;
    padding: 0 6.875%;
  }
  .banner-abstract header {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .banner__close-wrapper {
    position: relative;
    top: initial;
    right: initial;
    transform: none;
  }
}

/* @media (max-width: 1024px) {
  .banner-top {
    top: 64px;
  }
} */

.header.-blue {
  background-color: #f2f5fa;
}

.header.-mint {
  background-color: #f2faf5;
}

.header.-violet {
  background-color: #f2f5fa;
}

.header-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.header-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin-bottom: 1.625rem;
  border-bottom: solid 1px #dbdbdb;
  z-index: 9;
}

.header-top .logo {
  display: flex;
  align-items: center;
  margin-top: 1.75rem;
  margin-bottom: 1.688rem;
}

.header-inner {
  display: flex;
  align-items: center;
}

.logo__asset {
  width: 29px;
  height: 29px;
  background-size: cover;
}

.logo__title {
  margin-left: 0.75rem;
  font-size: 20px;
  font-weight: 700;
  color: var(--black);
  letter-spacing: -0.43px;
}
/* nav was here */

.header-top__nav-item:visited {
  color: #8490a3;
}

.header-top__nav-item:nth-child(1) {
  border-left: 1px solid #dbdbdb;
}

.header-top__nav-item:nth-child(1).-active {
  border-left: 1px solid #dbdbdb;
}

.header-top__nav-item:nth-child(2) {
  border-left: 1px solid #dbdbdb;
}

.header-top__nav-item.-active + .header-top__nav-item {
  border-left: none;
  border-right: 1px solid #dbdbdb;
}

.header-top__nav-item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 30px;
  width: 39px;
  height: 39px;
  transform: translateY(-50%);
  border-radius: 50%;
  background-size: cover;
}

.header-top__nav-item.-tool::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='39px' height='39px' viewBox='0 0 39 39' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3E5271BAD8-CA6B-43F2-BEF2-48D9CBFFFF49%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3' transform='translate(-550.000000, -23.000000)' fill-rule='nonzero'%3E%3Cg id='tab-description' transform='translate(550.000000, 23.000000)'%3E%3Cg id='tools-icon-unselected'%3E%3Ccircle id='Oval' fill='%23DFE6F2' cx='19.5' cy='19.5' r='19.5'%3E%3C/circle%3E%3Cg id='pn-tool-icon-selected' transform='translate(20.000000, 18.500000) rotate(-315.000000) translate(-20.000000, -18.500000) translate(13.000000, 7.000000)'%3E%3Cpath d='M6.54347826,10.511544 C5.58624895,10.722836 4.86956522,11.5847555 4.86956522,12.615912 C4.86956522,13.8054982 5.82339336,14.7698482 7,14.7698482 C8.17660664,14.7698482 9.13043478,13.8054982 9.13043478,12.615912 C9.13043478,11.5847555 8.41375105,10.722836 7.45652174,10.511544 L7.45652174,0.0473742635 C7.49189492,0.0876465635 7.52213461,0.132673324 7.54626515,0.181466785 L13.7492354,12.7242607 C13.9084456,13.0461936 13.9212137,13.4223771 13.7842069,13.7546149 L11.7458758,18.6975139 C11.6509205,18.927778 11.4285933,19.0777206 11.1821249,19.0777206 L3.07506599,19.0777206 C2.83741516,19.0777206 2.62133189,18.9381909 2.521123,18.7200274 L0.24870057,13.7727652 C0.0915749076,13.430689 0.09722908,13.0347191 0.264056261,12.6973841 L6.45373485,0.181466785 C6.47832875,0.131736394 6.50864793,0.0868254917 6.54347826,0.0471430732 L6.54347826,10.511544 Z' id='Path' fill='%23A4AEBD'%3E%3C/path%3E%3Cpath d='M2.45268542,18.4623103 L11.8516624,18.4623103 L12.5813987,21.3273817 C12.667768,21.666483 12.4628884,22.0113951 12.1237871,22.0977645 C12.0726776,22.1107821 12.0201427,22.1173673 11.9674015,22.1173673 L2.33694632,22.1173673 C1.9870187,22.1173673 1.70334632,21.833695 1.70334632,21.4837673 C1.70334632,21.4310261 1.70993154,21.3784912 1.72294917,21.3273817 L2.45268542,18.4623103 Z' id='Rectangle' fill='%23BCC6D6'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.header-top__nav-item.-active.-tool::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='39px' height='39px' viewBox='0 0 39 39' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3E36955B56-68D6-4AEB-95EC-319326AFB705%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-tools-v3' transform='translate(-550.000000, -23.000000)' fill-rule='nonzero'%3E%3Cg id='tab-description' transform='translate(550.000000, 23.000000)'%3E%3Cg id='tools-icon-selected'%3E%3Ccircle id='Oval' fill='%23D2E2FA' cx='19.5' cy='19.5' r='19.5'%3E%3C/circle%3E%3Cg id='pn-tool-icon-selected' transform='translate(20.000000, 18.500000) rotate(-315.000000) translate(-20.000000, -18.500000) translate(13.000000, 7.000000)'%3E%3Cpath d='M6.54347826,10.511544 C5.58624895,10.722836 4.86956522,11.5847555 4.86956522,12.615912 C4.86956522,13.8054982 5.82339336,14.7698482 7,14.7698482 C8.17660664,14.7698482 9.13043478,13.8054982 9.13043478,12.615912 C9.13043478,11.5847555 8.41375105,10.722836 7.45652174,10.511544 L7.45652174,0.0473742635 C7.49189492,0.0876465635 7.52213461,0.132673324 7.54626515,0.181466785 L13.7492354,12.7242607 C13.9084456,13.0461936 13.9212137,13.4223771 13.7842069,13.7546149 L11.7458758,18.6975139 C11.6509205,18.927778 11.4285933,19.0777206 11.1821249,19.0777206 L3.07506599,19.0777206 C2.83741516,19.0777206 2.62133189,18.9381909 2.521123,18.7200274 L0.24870057,13.7727652 C0.0915749076,13.430689 0.09722908,13.0347191 0.264056261,12.6973841 L6.45373485,0.181466785 C6.47832875,0.131736394 6.50864793,0.0868254917 6.54347826,0.0471430732 L6.54347826,10.511544 Z' id='Path' fill='%230054D7'%3E%3C/path%3E%3Cpath d='M2.45268542,18.4623103 L11.8516624,18.4623103 L12.5813987,21.3273817 C12.667768,21.666483 12.4628884,22.0113951 12.1237871,22.0977645 C12.0726776,22.1107821 12.0201427,22.1173673 11.9674015,22.1173673 L2.33694632,22.1173673 C1.9870187,22.1173673 1.70334632,21.833695 1.70334632,21.4837673 C1.70334632,21.4310261 1.70993154,21.3784912 1.72294917,21.3273817 L2.45268542,18.4623103 Z' id='Rectangle' fill='%2373A9FF'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.header-top__nav-item.-plugin::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='39px' height='39px' viewBox='0 0 39 39' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3EF6CB63FC-58C8-4012-BD1C-A034BC93E98D%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-tools-v3' transform='translate(-710.000000, -23.000000)' fill-rule='nonzero'%3E%3Cg id='tab-description' transform='translate(710.000000, 23.000000)'%3E%3Cg id='plugins-icon-unselected'%3E%3Ccircle id='Oval' fill='%23DFE6F2' cx='19.5' cy='19.5' r='19.5'%3E%3C/circle%3E%3Cg id='plugin-icon-copy' transform='translate(19.474874, 20.767767) rotate(-315.000000) translate(-19.474874, -20.767767) translate(10.474874, 8.267767)'%3E%3Cpath d='M6.24,15.2075472 L6.24,21.8876732 C6.24,23.3778 7.44798643,24.5857864 8.93811321,24.5857864 L8.93811321,24.5857864 C10.42824,24.5857864 11.6362264,23.3778 11.6362264,21.8876732 L11.6362264,20.1967929 C11.6362264,18.5538672 12.9680808,17.2220129 14.6110064,17.2220129 L14.6110064,17.2220129 C16.2539321,17.2220129 17.5857864,18.5538672 17.5857864,20.1967929 L17.5857864,23.249882' id='Path-8' stroke='%23BCC6D6' stroke-width='1.91999977' stroke-linecap='round'%3E%3C/path%3E%3Cpath d='M10.08,5.88679245 L11.5200001,5.88679245 C11.7850967,5.88679245 12,6.10169575 12,6.3667924 L12,10.7924528 C12,13.5017742 9.80366104,15.6981132 7.09433962,15.6981132 L4.90566038,15.6981132 C2.19633896,15.6981132 3.3179618e-16,13.5017742 0,10.7924528 L0,6.3667924 C-3.24649762e-17,6.10169575 0.214903294,5.88679245 0.479999943,5.88679245 L1.92,5.88679245 L1.92,1.2 C1.92,0.5372583 2.4572583,1.21743675e-16 3.12,0 C3.7827417,-1.21743675e-16 4.32,0.5372583 4.32,1.2 L4.32,5.88679245 L7.68,5.88679245 L7.68,1.2 C7.68,0.5372583 8.2172583,1.21743675e-16 8.88,0 C9.5427417,-1.21743675e-16 10.08,0.5372583 10.08,1.2 L10.08,5.88679245 Z' id='Combined-Shape' fill='%23A4AEBD'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.header-top__nav-item.-active.-plugin::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='39px' height='39px' viewBox='0 0 39 39' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3E40705D8A-BCC7-48F7-814E-FDB8063DBB9F%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3' transform='translate(-710.000000, -23.000000)' fill-rule='nonzero'%3E%3Cg id='tab-description' transform='translate(710.000000, 23.000000)'%3E%3Cg id='plugin-icon-selected'%3E%3Ccircle id='Oval' fill='%23D2FAD7' cx='19.5' cy='19.5' r='19.5'%3E%3C/circle%3E%3Cg id='plugin-icon' transform='translate(19.474874, 20.767767) rotate(-315.000000) translate(-19.474874, -20.767767) translate(10.474874, 8.267767)'%3E%3Cpath d='M6.24,15.2075472 L6.24,21.8876732 C6.24,23.3778 7.44798643,24.5857864 8.93811321,24.5857864 L8.93811321,24.5857864 C10.42824,24.5857864 11.6362264,23.3778 11.6362264,21.8876732 L11.6362264,20.1967929 C11.6362264,18.5538672 12.9680808,17.2220129 14.6110064,17.2220129 L14.6110064,17.2220129 C16.2539321,17.2220129 17.5857864,18.5538672 17.5857864,20.1967929 L17.5857864,23.249882' id='Path-8' stroke='%2352B372' stroke-width='1.91999977' stroke-linecap='round'%3E%3C/path%3E%3Cpath d='M10.08,5.88679245 L11.5200001,5.88679245 C11.7850967,5.88679245 12,6.10169575 12,6.3667924 L12,10.7924528 C12,13.5017742 9.80366104,15.6981132 7.09433962,15.6981132 L4.90566038,15.6981132 C2.19633896,15.6981132 3.3179618e-16,13.5017742 0,10.7924528 L0,6.3667924 C-3.24649762e-17,6.10169575 0.214903294,5.88679245 0.479999943,5.88679245 L1.92,5.88679245 L1.92,1.2 C1.92,0.5372583 2.4572583,1.21743675e-16 3.12,0 C3.7827417,-1.21743675e-16 4.32,0.5372583 4.32,1.2 L4.32,5.88679245 L7.68,5.88679245 L7.68,1.2 C7.68,0.5372583 8.2172583,1.21743675e-16 8.88,0 C9.5427417,-1.21743675e-16 10.08,0.5372583 10.08,1.2 L10.08,5.88679245 Z' id='Combined-Shape' fill='%23028930'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.header-top__nav-item.-kit::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='39px' height='39px' viewBox='0 0 39 39' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 61.1 (101010) - https://sketch.com --%3E%3Ctitle%3E9CBD9806-432E-4049-A8DE-4898D83FBA66%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-uikits-v1' transform='translate(-684.000000, -83.000000)'%3E%3Cg id='plugin-icon-selected' transform='translate(684.000000, 83.000000)'%3E%3Ccircle id='Oval' fill='%23DFE6F2' fill-rule='nonzero' cx='19.5' cy='19.5' r='19.5'%3E%3C/circle%3E%3Cg id='Group-7' transform='translate(9.000000, 9.000000)'%3E%3Cpath d='M7.6916556,-3.10752092e-16 L13.3083444,3.10752092e-16 C15.9829006,-1.80555915e-16 16.9527593,0.278476833 17.9305371,0.801398111 C18.9083149,1.32431939 19.6756806,2.09168511 20.1986019,3.06946289 C20.7215232,4.04724067 21,5.01709938 21,7.6916556 L21,13.3083444 C21,15.9829006 20.7215232,16.9527593 20.1986019,17.9305371 C19.6756806,18.9083149 18.9083149,19.6756806 17.9305371,20.1986019 C16.9527593,20.7215232 15.9829006,21 13.3083444,21 L7.6916556,21 C5.01709938,21 4.04724067,20.7215232 3.06946289,20.1986019 C2.09168511,19.6756806 1.32431939,18.9083149 0.801398111,17.9305371 C0.278476833,16.9527593 1.2037061e-16,15.9829006 -2.07168062e-16,13.3083444 L2.07168062e-16,7.6916556 C-1.2037061e-16,5.01709938 0.278476833,4.04724067 0.801398111,3.06946289 C1.32431939,2.09168511 2.09168511,1.32431939 3.06946289,0.801398111 C4.04724067,0.278476833 5.01709938,1.80555915e-16 7.6916556,-3.10752092e-16 Z' id='Rectangle' stroke='%23BCC6D6' stroke-width='2'%3E%3C/path%3E%3Cpath d='M4.15374839,13 L16.8462516,13 C17.2474351,13 17.3929139,13.0417715 17.5395805,13.1202097 C17.6862472,13.1986479 17.8013521,13.3137528 17.8797903,13.4604195 C17.9582285,13.6070861 18,13.7525649 18,14.1537484 L18,15.6840486 C18,16.2780468 17.9071744,16.6509198 17.7328673,16.9768457 C17.5585602,17.3027716 17.3027716,17.5585602 16.9768457,17.7328673 C16.6509198,17.9071744 16.2780468,18 15.6840486,18 L5.31595144,18 C4.72195321,18 4.34908022,17.9071744 4.0231543,17.7328673 C3.69722837,17.5585602 3.4414398,17.3027716 3.2671327,16.9768457 C3.09282561,16.6509198 3,16.2780468 3,15.6840486 L3,14.1537484 C3,13.7525649 3.04177153,13.6070861 3.12020972,13.4604195 C3.19864792,13.3137528 3.31375278,13.1986479 3.46041945,13.1202097 C3.60708612,13.0417715 3.75256494,13 4.15374839,13 Z' id='Rectangle' fill='%23A4AEBD'%3E%3C/path%3E%3Cpath d='M12.1537484,3 L15.4361148,3 C16.3276335,3 16.6509198,3.09282561 16.9768457,3.2671327 C17.3027716,3.4414398 17.5585602,3.69722837 17.7328673,4.0231543 C17.9071744,4.34908022 18,4.67236646 18,5.5638852 L18,9.84625166 C18,10.2474351 17.9582285,10.3929139 17.8797903,10.5395806 C17.8013521,10.6862472 17.6862472,10.8013521 17.5395806,10.8797903 C17.3929139,10.9582285 17.2474351,11 16.8462517,11 L12.1537483,11 C11.7525649,11 11.6070861,10.9582285 11.4604194,10.8797903 C11.3137528,10.8013521 11.1986479,10.6862472 11.1202097,10.5395806 C11.0417715,10.3929139 11,10.2474351 11,9.84625166 L11,4.15374839 C11,3.75256494 11.0417715,3.60708612 11.1202097,3.46041945 C11.1986479,3.31375278 11.3137528,3.19864792 11.4604195,3.12020972 C11.6070861,3.04177153 11.7525649,3 12.1537484,3 Z' id='Rectangle' fill='%23A4AEBD'%3E%3C/path%3E%3Cpath d='M4.15374839,3 L7.4361148,3 C8.32763354,3 8.65091978,3.09282561 8.9768457,3.2671327 C9.30277163,3.4414398 9.5585602,3.69722837 9.7328673,4.0231543 C9.90717439,4.34908022 10,4.67236646 10,5.5638852 L10,9.84625166 C10,10.2474351 9.95822847,10.3929139 9.87979028,10.5395806 C9.80135209,10.6862472 9.68624723,10.8013521 9.53958057,10.8797903 C9.3929139,10.9582285 9.24743509,11 8.84625166,11 L4.15374834,11 C3.75256491,11 3.6070861,10.9582285 3.46041943,10.8797903 C3.31375277,10.8013521 3.19864791,10.6862472 3.12020972,10.5395806 C3.04177153,10.3929139 3,10.2474351 3,9.84625166 L3,4.15374839 C3,3.75256494 3.04177153,3.60708612 3.12020972,3.46041945 C3.19864792,3.31375278 3.31375278,3.19864792 3.46041945,3.12020972 C3.60708612,3.04177153 3.75256494,3 4.15374839,3 Z' id='Rectangle' fill='%23BCC6D6' transform='translate(6.500000, 7.000000) scale(-1, 1) translate(-6.500000, -7.000000) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.header-top__nav-item.-active.-kit::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='39px' height='39px' viewBox='0 0 39 39' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 61.1 (101010) - https://sketch.com --%3E%3Ctitle%3E809279DA-3C01-4619-8588-0B6FBFD3EF13%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-uikits-v1' transform='translate(-684.000000, -23.000000)'%3E%3Cg id='Group-6' transform='translate(655.000000, 0.000000)'%3E%3Cg id='Group-4'%3E%3Cg id='tab-description' transform='translate(29.000000, 23.000000)'%3E%3Cg id='plugin-icon-selected'%3E%3Ccircle id='Oval' fill='%23F2A7F5' fill-rule='nonzero' cx='19.5' cy='19.5' r='19.5'%3E%3C/circle%3E%3Cg id='Group-7' transform='translate(9.000000, 9.000000)'%3E%3Cpath d='M7.6916556,-3.10752092e-16 L13.3083444,3.10752092e-16 C15.9829006,-1.80555915e-16 16.9527593,0.278476833 17.9305371,0.801398111 C18.9083149,1.32431939 19.6756806,2.09168511 20.1986019,3.06946289 C20.7215232,4.04724067 21,5.01709938 21,7.6916556 L21,13.3083444 C21,15.9829006 20.7215232,16.9527593 20.1986019,17.9305371 C19.6756806,18.9083149 18.9083149,19.6756806 17.9305371,20.1986019 C16.9527593,20.7215232 15.9829006,21 13.3083444,21 L7.6916556,21 C5.01709938,21 4.04724067,20.7215232 3.06946289,20.1986019 C2.09168511,19.6756806 1.32431939,18.9083149 0.801398111,17.9305371 C0.278476833,16.9527593 1.2037061e-16,15.9829006 -2.07168062e-16,13.3083444 L2.07168062e-16,7.6916556 C-1.2037061e-16,5.01709938 0.278476833,4.04724067 0.801398111,3.06946289 C1.32431939,2.09168511 2.09168511,1.32431939 3.06946289,0.801398111 C4.04724067,0.278476833 5.01709938,1.80555915e-16 7.6916556,-3.10752092e-16 Z' id='Rectangle' stroke='%23BE5DC2' stroke-width='2'%3E%3C/path%3E%3Cpath d='M4.15374839,13 L16.8462516,13 C17.2474351,13 17.3929139,13.0417715 17.5395805,13.1202097 C17.6862472,13.1986479 17.8013521,13.3137528 17.8797903,13.4604195 C17.9582285,13.6070861 18,13.7525649 18,14.1537484 L18,15.6840486 C18,16.2780468 17.9071744,16.6509198 17.7328673,16.9768457 C17.5585602,17.3027716 17.3027716,17.5585602 16.9768457,17.7328673 C16.6509198,17.9071744 16.2780468,18 15.6840486,18 L5.31595144,18 C4.72195321,18 4.34908022,17.9071744 4.0231543,17.7328673 C3.69722837,17.5585602 3.4414398,17.3027716 3.2671327,16.9768457 C3.09282561,16.6509198 3,16.2780468 3,15.6840486 L3,14.1537484 C3,13.7525649 3.04177153,13.6070861 3.12020972,13.4604195 C3.19864792,13.3137528 3.31375278,13.1986479 3.46041945,13.1202097 C3.60708612,13.0417715 3.75256494,13 4.15374839,13 Z' id='Rectangle' fill='%23850289'%3E%3C/path%3E%3Cpath d='M12.1537484,3 L15.4361148,3 C16.3276335,3 16.6509198,3.09282561 16.9768457,3.2671327 C17.3027716,3.4414398 17.5585602,3.69722837 17.7328673,4.0231543 C17.9071744,4.34908022 18,4.67236646 18,5.5638852 L18,9.84625166 C18,10.2474351 17.9582285,10.3929139 17.8797903,10.5395806 C17.8013521,10.6862472 17.6862472,10.8013521 17.5395806,10.8797903 C17.3929139,10.9582285 17.2474351,11 16.8462517,11 L12.1537483,11 C11.7525649,11 11.6070861,10.9582285 11.4604194,10.8797903 C11.3137528,10.8013521 11.1986479,10.6862472 11.1202097,10.5395806 C11.0417715,10.3929139 11,10.2474351 11,9.84625166 L11,4.15374839 C11,3.75256494 11.0417715,3.60708612 11.1202097,3.46041945 C11.1986479,3.31375278 11.3137528,3.19864792 11.4604195,3.12020972 C11.6070861,3.04177153 11.7525649,3 12.1537484,3 Z' id='Rectangle' fill='%23850289'%3E%3C/path%3E%3Cpath d='M4.15374839,3 L7.4361148,3 C8.32763354,3 8.65091978,3.09282561 8.9768457,3.2671327 C9.30277163,3.4414398 9.5585602,3.69722837 9.7328673,4.0231543 C9.90717439,4.34908022 10,4.67236646 10,5.5638852 L10,9.84625166 C10,10.2474351 9.95822847,10.3929139 9.87979028,10.5395806 C9.80135209,10.6862472 9.68624723,10.8013521 9.53958057,10.8797903 C9.3929139,10.9582285 9.24743509,11 8.84625166,11 L4.15374834,11 C3.75256491,11 3.6070861,10.9582285 3.46041943,10.8797903 C3.31375277,10.8013521 3.19864791,10.6862472 3.12020972,10.5395806 C3.04177153,10.3929139 3,10.2474351 3,9.84625166 L3,4.15374839 C3,3.75256494 3.04177153,3.60708612 3.12020972,3.46041945 C3.19864792,3.31375278 3.31375278,3.19864792 3.46041945,3.12020972 C3.60708612,3.04177153 3.75256494,3 4.15374839,3 Z' id='Rectangle' fill='%23BE5DC2' transform='translate(6.500000, 7.000000) scale(-1, 1) translate(-6.500000, -7.000000) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.header-top__nav-item.-active {
  background-color: #ffffff;
  padding-top: 1.7rem;
  border-top: 0.313rem solid var(--blue);
  border-left: 1px solid #dbdbdb;
  border-right: 1px solid #dbdbdb;
  border-bottom: 1px solid #fff;
  color: var(--black);
}

.header-top__input-search {
  position: relative;
  width: 28.611111111%;
  max-width: 412px;
  margin-left: 1.875rem;
  padding-top: 0.625rem;
  padding-left: 3rem;
  padding-bottom: 0.625rem;
  border: 1px solid #dadfe8;
  border-radius: 0.313rem;
  font-size: 14px;
}

.header-top__input-search {
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3EEC8AD269-FBF7-400F-A976-B09CC0221EE5%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3' transform='translate(-903.000000, -34.000000)' fill-rule='nonzero' stroke='%23A2A9B0' stroke-width='2'%3E%3Cg id='Group-5' transform='translate(888.000000, 24.000000)'%3E%3Cg id='search-icon' transform='translate(16.000000, 11.000000)'%3E%3Ccircle id='Oval' cx='7' cy='7' r='7'%3E%3C/circle%3E%3Cpath d='M12,12 L16,16' id='Path-7' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 16px 16px;
  background-position: 16px;
  background-repeat: no-repeat;
}

.header-top__input-search:focus {
  outline: none;
}

.header-top__input-search::placeholder {
  color: #a2a9b0;
}

.-flex-visible {
  display: flex;
}

.promotion-banner-wrapper {
  margin-bottom: 4.625rem;
}

.promotion-banner {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 780px;
  padding: 2.25rem 2rem 2.25rem 1.5rem;
  font-size: 1rem;
  border-radius: 8px;
  color: #1b1c26;
}

.promotion-banner:hover {
  text-decoration: none;
}

.promotion-banner:visited {
  color: #1b1c26;
}

.promotion-banner.-supernova {
  background-color: #e4ecf5;
}

.promotion-banner.-protopie {
  background-color: #fae6e6;
}

.promotion-banner.-abstract {
  background-color: #e6e6e6;
}

.promotion-banner.-xd {
  background-color: #f5d3eb;
}

.promotion-banner.-maze {
  background-color: #d7e0f7;
}

.promotion-banner.-porkbun {
  background-color: #fae1e1;
}

.promotion-banner__link {
  flex: 0 0 auto;
  border-radius: 18.5px;
  border: none;
  font-weight: 700;
  padding: 0.5625rem 0.75rem;
  color: #fff;
  cursor: pointer;
}

.promotion-banner__link.-supernova {
  background-color: #028ceb;
}

.promotion-banner__link.-protopie {
  background-color: #fc4d4c;
}

.promotion-banner__link.-abstract {
  background-color: #000;
}

.promotion-banner__link.-xd {
  background-color: #2e001f;
}

.promotion-banner__link.-maze {
  background-color: #225cff;
}

.promotion-banner__link.-porkbun {
  background-color: #ef7675;
}

.promotion-banner__main {
  flex-grow: 1;
  margin-left: 1.875rem;
}

.promotion-banner__title {
  font-size: 1.375rem;
  margin-bottom: 0;
  line-height: 1.25;
}

.promotion-banner__logo {
  flex: 0 0 auto;
  background-size: cover;
}

.promotion-banner__logo.-supernova {
  width: 4.5rem;
  height: 4.5rem;
  background-size: cover;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='72px' height='72px' viewBox='0 0 72 72' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3EF58739A5-EC35-4CAF-9A96-8A3813904B8E%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3-banners' transform='translate(-544.000000, -151.000000)' fill='%23171B1F' fill-rule='nonzero'%3E%3Cg id='Group-2-Copy' transform='translate(520.000000, 112.000000)'%3E%3Cg id='supernova-logo' transform='translate(24.000000, 39.000000)'%3E%3Cpath d='M35.292,0 L38.412,0 C47.928,1.512 52.812,11.34 54.192,19.98 C62.112,21.636 70.8,26.496 72,35.292 L72,38.412 C70.488,47.964 60.648,52.788 52.02,54.216 C50.388,62.148 45.468,70.8 36.684,72 L33.588,72 C24.048,70.488 19.2,60.648 17.808,52.02 C9.876,50.364 1.2,45.504 1.77635684e-15,36.708 L1.77635684e-15,33.588 C1.512,24.06 11.34,19.2 19.968,17.808 C21.612,9.864 26.52,1.212 35.292,2.13162821e-15 Z M30.384,10.08 C26.016,15.588 25.548,23.124 26.82,29.796 C31.74,23.652 39.264,20.004 47.076,19.5 C46.164,14.712 44.208,9.348 39.48,7.152 C36.216,5.58 32.424,7.392 30.384,10.08 Z M7.128,32.568 C5.592,35.832 7.416,39.6 10.104,41.64 C15.624,45.984 23.148,46.44 29.82,45.192 C23.628,40.296 20.004,32.736 19.488,24.912 C14.7,25.836 9.312,27.804 7.128,32.568 Z M42.144,26.808 C48.348,31.704 51.948,39.264 52.452,47.088 C57.24,46.188 62.616,44.244 64.836,39.516 C66.576,35.928 64.272,31.86 61.224,29.856 C55.728,25.932 48.576,25.668 42.144,26.808 Z M33.876,31.464 C30.576,32.88 30.024,37.872 33,39.912 C36,42.552 41.112,39.888 40.968,36 C41.076,32.52 36.972,29.88 33.876,31.464 Z M24.924,52.5 C25.836,57.312 27.816,62.7 32.592,64.884 C35.832,66.396 39.552,64.608 41.58,61.956 C45.984,56.424 46.452,48.852 45.168,42.144 C40.296,48.372 32.748,51.96 24.924,52.5 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.promotion-banner__logo.-protopie {
  width: 4.625rem;
  height: 4.625rem;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='74px' height='74px' viewBox='0 0 74 74' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3EC0B40BF6-1174-4137-A74B-5FF9967FF87F%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cdefs%3E%3Cpath d='M3.33975904,0.100170732 C2.58529282,0.0971784518 1.86489322,0.413623895 1.35722892,0.97102439 C0.905552613,1.44579402 0.645796646,2.0707119 0.628012048,2.72536585 L0.628012048,2.90765854 C0.637048193,3.22712195 0.700301205,3.52853659 0.814156627,3.8064878 C0.818674699,3.82904878 0.828614458,3.8525122 0.836746988,3.87507317 C0.956017639,4.16114496 1.12589729,4.4234281 1.33825301,4.64936585 C1.34728916,4.66380488 1.36174699,4.67643902 1.37439759,4.69087805 L10.0210843,14.9552195 L13.1430723,18.6606341 L22.4864458,29.7507073 L25.6039157,33.4507073 L33.9731928,43.3838537 L37.0906627,47.0838537 L37.0906627,73.0289756 C38.9268072,73.0289756 40.5957831,72.298 41.821988,71.1185122 C41.826506,71.1185122 41.826506,71.1185122 41.826506,71.114 L42.7463855,70.0202439 L65.186747,43.3838537 L72.8710843,34.2629024 C72.9072289,34.2213902 72.9433735,34.1816829 72.9759036,34.1356585 C73.1394578,33.9299024 73.2722892,33.7024878 73.3680723,33.4516098 C73.4909639,33.1447805 73.5551205,32.8171951 73.5551205,32.4670488 L73.5551205,2.81741463 C73.5551205,2.10178049 73.2768072,1.44480488 72.8204819,0.967414634 C72.3103413,0.414016927 71.5911377,0.0997337575 70.8379518,0.101073171 L3.33975904,0.101073171 L3.33975904,0.100170732 Z' id='path-1'%3E%3C/path%3E%3C/defs%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3-banners' transform='translate(-543.000000, -322.000000)'%3E%3Cg id='Group-2-Copy-2' transform='translate(520.000000, 281.000000)'%3E%3Cg id='protopie-logo' transform='translate(23.000000, 41.000000)'%3E%3Cg id='Group' transform='translate(0.028916, 0.374512)'%3E%3Cg id='Clipped'%3E%3Cmask id='mask-2' fill='white'%3E%3Cuse xlink:href='%23path-1'%3E%3C/use%3E%3C/mask%3E%3Cg id='a'%3E%3C/g%3E%3Cpath d='M3.33975904,0.100170732 C2.58529282,0.0971784518 1.86489322,0.413623895 1.35722892,0.97102439 C0.905552613,1.44579402 0.645796646,2.0707119 0.628012048,2.72536585 L0.628012048,2.90765854 C0.637048193,3.22712195 0.700301205,3.52853659 0.814156627,3.8064878 C0.818674699,3.82904878 0.828614458,3.8525122 0.836746988,3.87507317 C0.956017639,4.16114496 1.12589729,4.4234281 1.33825301,4.64936585 C1.34728916,4.66380488 1.36174699,4.67643902 1.37439759,4.69087805 L10.0210843,14.9552195 L13.1430723,18.6606341 L22.4864458,29.7507073 L25.6039157,33.4507073 L33.9731928,43.3838537 L37.0906627,47.0838537 L37.0906627,73.0289756 C38.9268072,73.0289756 40.5957831,72.298 41.821988,71.1185122 C41.826506,71.1185122 41.826506,71.1185122 41.826506,71.114 L42.7463855,70.0202439 L65.186747,43.3838537 L72.8710843,34.2629024 C72.9072289,34.2213902 72.9433735,34.1816829 72.9759036,34.1356585 C73.1394578,33.9299024 73.2722892,33.7024878 73.3680723,33.4516098 C73.4909639,33.1447805 73.5551205,32.8171951 73.5551205,32.4670488 L73.5551205,2.81741463 C73.5551205,2.10178049 73.2768072,1.44480488 72.8204819,0.967414634 C72.3103413,0.414016927 71.5911377,0.0997337575 70.8379518,0.101073171 L3.33975904,0.101073171 L3.33975904,0.100170732 Z' id='Path' mask='url(%23mask-2)'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3Cpath d='M3.3686747,0.475585366 C2.61420848,0.472593086 1.89380888,0.789038529 1.38614458,1.34643902 C0.93413832,1.82107178 0.674053952,2.44600534 0.656024096,3.10078049 L0.656024096,3.28307317 C0.665060241,3.60253659 0.729216867,3.90395122 0.843072289,4.181 C0.846686747,4.20356098 0.85753012,4.22702439 0.865662651,4.24958537 C0.984837869,4.53597715 1.15472206,4.79857298 1.36716867,5.02478049 C1.37620482,5.03831707 1.38975904,5.05185366 1.40331325,5.06539024 L10.05,15.3297317 L13.171988,19.0360488 L22.5153614,30.1252195 L25.6328313,33.826122 L34.0012048,43.7583659 L37.1186747,47.4592683 L37.1186747,73.4043902 C38.9557229,73.4043902 40.6246988,72.6734146 41.85,71.4930244 C41.8545181,71.4930244 41.8545181,71.4930244 41.8545181,71.4894146 L42.7762048,70.3947561 L65.2138554,43.7592683 L72.8981928,34.6383171 C72.9343373,34.5977073 72.9713855,34.5570976 73.003012,34.5119756 C73.1674699,34.3062195 73.2993976,34.0788049 73.3951807,33.8270244 C73.5180723,33.5210976 73.5822289,33.1935122 73.5822289,32.8433659 L73.5822289,3.19102439 C73.5822289,2.47629268 73.3048193,1.81931707 72.848494,1.34102439 C72.3383533,0.787626683 71.6191498,0.473343514 70.8659639,0.474682927 L3.3686747,0.474682927 L3.3686747,0.475585366 Z' id='Path' fill='%23FE5E5A'%3E%3C/path%3E%3Cpath d='M37.1195783,62.3089024 L37.1195783,73.4043914 C35.3538837,73.4053977 33.6570745,72.7202425 32.388253,71.4939268 C32.3837349,71.4939268 32.3837349,71.4939268 32.3837349,71.4894146 L31.4629518,70.3956585 L9.02439759,43.7592683 L1.38524096,34.6924634 C1.36808292,34.677952 1.35289444,34.6612664 1.34006024,34.6428293 L1.22168675,34.5011463 C1.21156801,34.491595 1.202482,34.4810085 1.19457831,34.469561 C1.04581141,34.2731186 0.925924275,34.0564477 0.838554217,33.826122 C0.726278421,33.5411463 0.664513733,33.238832 0.656024096,32.9327073 L0.656024096,32.7504146 C0.674096386,32.0672683 0.947891566,31.4563171 1.38524096,30.991561 C1.89546202,30.4377463 2.61512811,30.1234042 3.3686747,30.1252195 L9.99487952,30.1252195 L13.1123494,33.826122 L21.4807229,43.7583659 L35.2003012,60.0392683 L37.1150602,62.3134146 L37.1195783,62.3089024 Z' id='Path' fill='%23FCD1CA'%3E%3C/path%3E%3Cpath d='M37.1195783,47.4592683 L37.1195783,62.3089024 L37.1150602,62.3134146 L35.2003012,60.0392683 L21.4807229,43.7592683 L13.113253,33.8270244 L9.99578313,30.126122 L1.33463855,19.8527561 C1.12116308,19.6125711 0.952806453,19.3359083 0.837650602,19.0360488 C0.725706278,18.7497909 0.664551099,18.4462451 0.656927711,18.1390244 L0.656927711,17.9567317 C0.675,17.2771951 0.947891566,16.6662439 1.38524096,16.2014878 C1.89348124,15.64447 2.61410464,15.3283983 3.3686747,15.3315366 L10.05,15.3315366 L13.171988,19.0360488 L22.5153614,30.126122 L25.6328313,33.8270244 L34.0012048,43.7592683 L37.1186747,47.4592683 L37.1195783,47.4592683 Z' id='Path' fill='%23FF9D8D'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.promotion-banner__logo.-abstract {
  width: 3.9375rem;
  height: 3.9375rem;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='63px' height='63px' viewBox='0 0 63 63' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3EB557AFDE-085A-4616-9012-1A58006D71DF%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3-banners' transform='translate(-549.000000, -493.000000)' fill='%23000000'%3E%3Cg id='Group-2-Copy-2' transform='translate(520.000000, 450.000000)'%3E%3Cg id='abstract-logo' transform='translate(29.000000, 43.000000)'%3E%3Cg id='Group'%3E%3Cpath d='M31.3888235,0 C6.27529412,0 0,6.27529412 0,31.3888235 C0,56.5023529 6.27529412,62.7776471 31.3888235,62.7776471 C56.5023529,62.7776471 62.7776471,56.5023529 62.7776471,31.3888235 C62.7776471,6.27529412 56.5023529,0 31.3888235,0 Z M26.2376471,48.5594118 C19.6043718,48.5389596 14.2416952,43.148663 14.2553195,36.5153703 C14.2689437,29.8820775 19.6537175,24.5138553 26.2870208,24.5206517 C32.920324,24.527448 38.2940861,29.9066932 38.2941176,36.54 C38.2804863,43.1869573 32.8846148,48.5662431 26.2376471,48.5594118 Z M48.0652941,48.0652941 L42.1729412,48.0652941 L42.1729412,20.5923529 L14.7123529,20.5923529 L14.7123529,14.7123529 L48.0652941,14.7123529 L48.0652941,48.0652941 Z' id='Shape' fill-rule='nonzero'%3E%3C/path%3E%3Ccircle id='Oval' cx='26.2376471' cy='36.54' r='6.12705882'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.promotion-banner__logo.-xd {
  width: 3.875rem;
  height: 3.75rem;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='62px' height='60px' viewBox='0 0 62 60' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3E56FF3D09-AF5C-48EA-BA2B-0B04FB273D48%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3-banners' transform='translate(-549.000000, -663.000000)'%3E%3Cg id='Group-2-Copy-2' transform='translate(520.000000, 619.000000)'%3E%3Cg id='xd-logo' transform='translate(29.000000, 44.000000)'%3E%3Cpath d='M51.0208333,60 L10.9791667,60 C4.90833333,60 0,55.1282051 0,49.1025641 L0,10.8974359 C0,4.87179487 4.90833333,0 10.9791667,0 L51.0208333,0 C57.0916667,0 62,4.87179487 62,10.8974359 L62,49.1025641 C62,55.1282051 57.0916667,60 51.0208333,60 Z' id='Path' fill='%23FF26BE'%3E%3C/path%3E%3Cpath d='M49.6165448,58 L11.4092574,58 C6.22509353,58 2,53.8107477 2,48.6705607 L2,12.3294393 C2,7.18925234 6.22509353,3 11.4092574,3 L49.590624,3 C54.8007087,3 59,7.18925234 59,12.3294393 L59,48.6448598 C59.0258022,53.8107477 54.8007087,58 49.6165448,58 Z' id='Path' fill='%232E001F'%3E%3C/path%3E%3Cg id='Group' transform='translate(11.000000, 15.000000)' fill='%23FFD9F2'%3E%3Cpath d='M13.0689189,13.4954955 L20.2581081,27.0666667 C20.3864865,27.2684685 20.3094595,27.4702703 20.1040541,27.4702703 L15.6364865,27.4702703 C15.3540541,27.4702703 15.2256757,27.3945946 15.0972973,27.1423423 C13.4540541,23.8126126 11.7851351,20.4828829 10.0648649,16.9009009 L10.0135135,16.9009009 C8.47297297,20.2810811 6.77837838,23.8378378 5.13513514,27.1675676 C5.00675676,27.3693694 4.87837838,27.445045 4.67297297,27.445045 L0.436486486,27.445045 C0.17972973,27.445045 0.154054054,27.2432432 0.282432432,27.0918919 L7.31756757,13.9243243 L0.513513514,0.605405405 C0.359459459,0.403603604 0.513513514,0.252252252 0.667567568,0.252252252 L5.08378378,0.252252252 C5.34054054,0.252252252 5.44324324,0.302702703 5.54594595,0.52972973 C7.16351351,3.85945946 8.80675676,7.29009009 10.3472973,10.645045 L10.3986486,10.645045 C11.8878378,7.31531532 13.5310811,3.85945946 15.122973,0.554954955 C15.2513514,0.353153153 15.3283784,0.227027027 15.5851351,0.227027027 L19.7189189,0.227027027 C19.9243243,0.227027027 20.0013514,0.378378378 19.872973,0.58018018 L13.0689189,13.4954955 Z' id='Path'%3E%3C/path%3E%3Cpath d='M21.5162162,17.6072072 C21.5162162,11.7297297 25.4959459,7.13873874 31.8121622,7.13873874 C32.3513514,7.13873874 32.6337838,7.13873874 33.1472973,7.18918919 L33.1472973,0.504504505 C33.1472973,0.353153153 33.2756757,0.252252252 33.4040541,0.252252252 L37.4608108,0.252252252 C37.6662162,0.252252252 37.7175676,0.327927928 37.7175676,0.454054054 L37.7175676,23.6108108 C37.7175676,24.2918919 37.7175676,25.1495495 37.8459459,26.0828829 C37.8459459,26.2342342 37.7945946,26.2846847 37.6405405,26.3603604 C35.4837838,27.3693694 33.2243243,27.8235636 31.0675676,27.8235636 C25.4959459,27.8486486 21.5162162,24.4684685 21.5162162,17.6072072 Z M33.1472973,11.1495495 C32.7878378,10.9981982 32.2743243,10.8972973 31.6581081,10.8972973 C28.422973,10.8972973 26.1635135,13.3441441 26.1635135,17.4054054 C26.1635135,22.0468468 28.4743243,23.9135135 31.3756757,23.9135135 C31.9918919,23.9135135 32.6594595,23.8378378 33.1472973,23.636036 L33.1472973,11.1495495 Z' id='Shape' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.promotion-banner__logo.-maze {
  width: 4.625rem;
  height: 2.25rem;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='74px' height='36px' viewBox='0 0 74 36' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3ECA695A20-18CC-4C8A-B323-A76BE1719A4C%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3-banners' transform='translate(-544.000000, -845.000000)' fill='%23225CFF'%3E%3Cg id='Group-2-Copy-2' transform='translate(520.000000, 788.000000)'%3E%3Cg id='maze-logo' transform='translate(24.000000, 57.000000)'%3E%3Cpath d='M49.3229892,1.636 L48.9092258,1.2008 L25.3573333,25.0488 L35.5653548,35.752 L49.3229892,21.8208 L63.0814194,35.752 L73.2894409,25.048 L49.7383441,1.2016 L49.3229892,1.636 Z M0.296795699,23.0504 L9.8396129,33.056 L31.9711828,10.6456 L22.4283656,0.64 L0.296795699,23.0504 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.promotion-banner__logo.-porkbun {
  width: 5.8125rem;
  height: 1.625rem;
}

.label-wrapper {
  display: flex;
  margin-left: 16px;
}

.label {
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  border: solid 1px #dbdbdb;
  background-image: linear-gradient(to bottom, #f5f5f5, #ededed);
  padding-top: 7px;
  padding-right: 7px;
  padding-bottom: 7px;
  margin-right: 8px;
  line-height: 1;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  white-space: nowrap;
}

.label:last-child {
  margin-right: 0;
}

.label:before {
  content: '';
  position: absolute;
  top: 4px;
  left: 7px;
  height: 15px;
  background-size: cover;
  background-repeat: no-repeat;
}

.label--figma {
  padding-left: 23px;
}

.label--figma:before {
  width: 10px;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='10px' height='15px' viewBox='0 0 10 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3EE4D6A3B6-10C8-463E-8A77-596D7A5CC2CE%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3' transform='translate(-792.000000, -611.000000)'%3E%3Cg id='content' transform='translate(520.000000, 469.000000)'%3E%3Cg id='design-tool-item' transform='translate(0.000000, 135.000000)'%3E%3Cg id='figma-support-tag' transform='translate(265.000000, 1.000000)'%3E%3Cg id='figma-1' transform='translate(7.000000, 6.000000)'%3E%3Cpath d='M2.5,15 C3.88,15 5,13.88 5,12.5 L5,10 L2.5,10 C1.12,10 0,11.12 0,12.5 C0,13.88 1.12,15 2.5,15 Z' id='path0_fill' fill='%230ACF83'%3E%3C/path%3E%3Cpath d='M0,7.5 C0,6.12 1.12,5 2.5,5 L5,5 L5,10 L2.5,10 C1.12,10 0,8.88 0,7.5 Z' id='path1_fill' fill='%23A259FF'%3E%3C/path%3E%3Cpath d='M0,2.5 C0,1.12 1.12,0 2.5,0 L5,0 L5,5 L2.5,5 C1.12,5 0,3.88 0,2.5 Z' id='path1_fill_1_' fill='%23F24E1E'%3E%3C/path%3E%3Cpath d='M5,0 L7.5,0 C8.88,0 10,1.12 10,2.5 C10,3.88 8.88,5 7.5,5 L5,5 L5,0 Z' id='path2_fill' fill='%23FF7262'%3E%3C/path%3E%3Cpath d='M10,7.5 C10,8.88 8.88,10 7.5,10 C6.12,10 5,8.88 5,7.5 C5,6.12 6.12,5 7.5,5 C8.88,5 10,6.12 10,7.5 Z' id='path3_fill' fill='%231ABCFE'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.label--sketch {
  padding-left: 30px;
}

.label--sketch:before {
  width: 17px;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='17px' height='15px' viewBox='0 0 17 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3E5B108AAF-111D-43D8-B969-BD9A55E68A64%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3' transform='translate(-863.000000, -611.000000)'%3E%3Cg id='content' transform='translate(520.000000, 469.000000)'%3E%3Cg id='design-tool-item' transform='translate(0.000000, 135.000000)'%3E%3Cg id='sketch-support-tag' transform='translate(336.000000, 1.000000)'%3E%3Cg id='sketch-2' transform='translate(7.000000, 6.000000)'%3E%3Cg id='a-link' transform='translate(0.030421, 5.389709)' fill='%23EA6C00'%3E%3Cpolygon id='a' points='3.42344211 0 8.45186316 9.59302326 0 0'%3E%3C/polygon%3E%3C/g%3E%3Cg id='b-link' transform='translate(12.640842, 10.186221) scale(-1, 1) translate(-12.640842, -10.186221) translate(8.346105, 5.389709)' fill='%23EA6C00'%3E%3Cpolygon id='b' points='3.42344211 0 8.45186316 9.59302326 0 0'%3E%3C/polygon%3E%3C/g%3E%3Cg id='c-link' transform='translate(3.453684, 5.389709)' fill='%23FDAD00'%3E%3Cpolygon id='c' points='0 0 10.0568421 0 5.02842105 9.59302326'%3E%3C/polygon%3E%3C/g%3E%3Cg id='d-link' transform='translate(3.453684, 0.073256)' fill='%23FDD231'%3E%3Cpolygon id='d' points='5.02842105 0 0.264663158 0.490813953 0 5.31645349'%3E%3C/polygon%3E%3C/g%3E%3Cg id='e-link' transform='translate(10.915789, 2.776744) scale(-1, 1) translate(-10.915789, -2.776744) translate(8.321053, 0.073256)' fill='%23FDD231'%3E%3Cpolygon id='e' points='5.02842105 0 0.264663158 0.490813953 0 5.31645349'%3E%3C/polygon%3E%3C/g%3E%3Cg id='f-link' transform='translate(15.056632, 3.005930) scale(-1, 1) translate(-15.056632, -3.005930) translate(13.177684, 0.564070)' fill='%23FDAD00'%3E%3Cpolygon id='f' points='0 4.82563953 3.68810526 0 3.42344211 4.82563953'%3E%3C/polygon%3E%3C/g%3E%3Cg id='g-link' transform='translate(0.030421, 0.564070)' fill='%23FDAD00'%3E%3Cpolygon id='g' points='0 4.82563953 3.68810526 0 3.42344211 4.82563953'%3E%3C/polygon%3E%3C/g%3E%3Cg id='h-link' transform='translate(3.453684, 0.073256)' fill='%23FEEEB7'%3E%3Cpolygon id='h' points='5.02842105 0 0 5.31645349 10.0568421 5.31645349'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.label--xd {
  padding-left: 28px;
}

.label--xd:before {
  width: 15px;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='15px' height='15px' viewBox='0 0 15 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3E67C5A0D6-5EC7-4EB6-B0AA-3D22564ACFA1%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='awesome-design-plugins-v3' transform='translate(-948.000000, -611.000000)'%3E%3Cg id='content' transform='translate(520.000000, 469.000000)'%3E%3Cg id='design-tool-item' transform='translate(0.000000, 135.000000)'%3E%3Cg id='sketch-support-tag' transform='translate(421.000000, 1.000000)'%3E%3Cg id='adobe-xd-1' transform='translate(7.000000, 6.000000)'%3E%3Cpath d='M12.3438,14.9969237 L2.6562,14.9969237 C1.1874,14.9969237 0,13.7793273 0,12.2731747 L0,2.72374897 C0,1.21759639 1.1874,0 2.6562,0 L12.3438,0 C13.8126,0 15,1.21759639 15,2.72374897 L15,12.2731747 C15,13.7793273 13.8126,14.9969237 12.3438,14.9969237 Z' id='Path' fill='%23FF26BE'%3E%3C/path%3E%3Cpath d='M12.1062,14.3558244 L2.8938,14.3558244 C1.644,14.3558244 0.6252,13.3111157 0.6252,12.0295324 L0.6252,2.9673913 C0.6252,1.68580804 1.644,0.641099262 2.8938,0.641099262 L12.1002,0.641099262 C13.3566,0.641099262 14.3688,1.68580804 14.3688,2.9673913 L14.3688,12.0233798 C14.3748,13.3111157 13.356,14.3558244 12.1062,14.3558244 Z' id='Path' fill='%232E001F'%3E%3C/path%3E%3Cpath d='M5.931,7.01763741 L7.6812,10.4655455 C7.7124,10.516612 7.6938,10.5682937 7.6434,10.5682937 L6.5556,10.5682937 C6.4866,10.5682937 6.4554,10.5492207 6.4242,10.4852338 C6.024,9.63925349 5.6178,8.79327317 5.199,7.88330599 L5.1864,7.88330599 C4.8114,8.74220673 4.3986,9.64602133 3.999,10.4920016 C3.9678,10.5430681 3.9366,10.5627564 3.8862,10.5627564 L2.856,10.5627564 C2.7936,10.5627564 2.787,10.5116899 2.8188,10.4729286 L4.5312,7.1271534 L2.8752,3.74323216 C2.8374,3.69216571 2.8752,3.65340443 2.9124,3.65340443 L3.9876,3.65340443 C4.05,3.65340443 4.0752,3.66632486 4.0998,3.72415915 C4.4934,4.57013946 4.8936,5.44196062 5.2686,6.29409352 L5.2812,6.29409352 C5.6436,5.44811321 6.0438,4.57013946 6.4314,3.73031173 C6.4626,3.67924528 6.4812,3.64725185 6.5442,3.64725185 L7.5504,3.64725185 C7.6002,3.64725185 7.6194,3.68601313 7.5882,3.73707957 L5.931,7.01763741 Z M7.9878,8.06234619 C7.9878,6.56911403 8.9568,5.40258409 10.494,5.40258409 C10.6254,5.40258409 10.6938,5.40258409 10.8192,5.41550451 L10.8192,3.7173913 C10.8192,3.67863002 10.8504,3.65340443 10.8816,3.65340443 L11.8692,3.65340443 C11.919,3.65340443 11.9316,3.67247744 11.9316,3.70447088 L11.9316,9.58818704 C11.9316,9.76107465 11.9316,9.97887613 11.9628,10.2163659 C11.9628,10.2551272 11.9502,10.2674323 11.913,10.2871206 C11.388,10.5436833 10.8378,10.6587367 10.3128,10.6587367 C8.9562,10.664274 7.9872,9.80598852 7.9878,8.06234619 Z M10.8186,6.42206727 C10.731,6.38330599 10.6062,6.35808039 10.4562,6.35808039 C9.6684,6.35808039 9.1188,6.97949139 9.1188,8.011895 C9.1188,9.19134537 9.6816,9.6657096 10.3878,9.6657096 C10.5378,9.6657096 10.7004,9.64663659 10.8192,9.59495488 L10.8192,6.42206727 L10.8186,6.42206727 Z' id='Shape' fill='%23FFD9F2' fill-rule='nonzero'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.sort-tool-modal__btn-choose.label--web {
  padding-left: 26px;
}

.label--web:before {
  width: 15px;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='iso-8859-1'?%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg width='15' height='15' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 201.526 201.526' style='enable-background:new 0 0 201.526 201.526;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath d='M191.125,11.403H10.4C4.666,11.403,0,16.068,0,21.805v59.108c0,5.738,4.666,10.404,10.4,10.404h180.726 c5.734,0,10.4-4.666,10.4-10.403V21.805C201.525,16.068,196.86,11.403,191.125,11.403z M194.577,80.914h-0.001 c0,1.903-1.547,3.454-3.451,3.454H10.4c-1.904,0-3.451-1.551-3.451-3.454V21.805c0-1.903,1.547-3.454,3.451-3.454h180.726 c1.903,0,3.451,1.551,3.451,3.454V80.914z'/%3E%3Cpath d='M63.924,35.968c-1.751-0.801-3.807-0.027-4.605,1.714L48.821,60.606l-3.19-6.696l6.109-13.338 c0.797-1.744,0.034-3.807-1.714-4.605c-1.751-0.801-3.811-0.027-4.605,1.714l-3.687,8.051l-3.859-8.099 c-0.825-1.734-2.888-2.477-4.628-1.642c-1.734,0.825-2.47,2.898-1.642,4.628l6.358,13.347l-3.04,6.638l-10.947-22.97 c-0.821-1.734-2.888-2.477-4.628-1.642c-1.734,0.825-2.47,2.898-1.642,4.628l14.143,29.686c0.573,1.211,1.795,1.982,3.135,1.982 c0.01,0,0.017,0,0.027,0c1.347-0.01,2.569-0.801,3.132-2.029l3.716-8.113l3.888,8.161c0.573,1.211,1.795,1.982,3.135,1.982 c0.01,0,0.017,0,0.027,0c1.347-0.01,2.569-0.801,3.132-2.029l13.596-29.686C66.434,38.83,65.671,36.766,63.924,35.968z'/%3E%3Cpath d='M122.991,35.968c-1.754-0.801-3.807-0.027-4.605,1.714l-10.498,22.924l-3.19-6.696l6.109-13.338 c0.797-1.744,0.034-3.807-1.714-4.605c-1.751-0.801-3.807-0.027-4.604,1.714l-3.687,8.051l-3.859-8.099 c-0.821-1.734-2.891-2.477-4.628-1.642c-1.734,0.825-2.47,2.898-1.642,4.628l6.358,13.347l-3.04,6.638l-10.947-22.97 c-0.821-1.734-2.891-2.477-4.628-1.642c-1.734,0.825-2.47,2.898-1.642,4.628l14.143,29.686c0.573,1.211,1.795,1.982,3.135,1.982 c0.01,0,0.017,0,0.027,0c1.347-0.01,2.569-0.801,3.132-2.029l3.716-8.113l3.888,8.161c0.573,1.211,1.795,1.982,3.135,1.982 c0.01,0,0.017,0,0.027,0c1.347-0.01,2.569-0.801,3.132-2.029l13.596-29.686C125.502,38.83,124.739,36.766,122.991,35.968z'/%3E%3Cpath d='M182.059,35.968c-1.751-0.801-3.807-0.027-4.605,1.714l-10.498,22.924l-3.19-6.696l6.109-13.338 c0.797-1.744,0.034-3.807-1.714-4.605c-1.751-0.801-3.807-0.027-4.605,1.714l-3.687,8.051l-3.859-8.099 c-0.821-1.734-2.888-2.477-4.628-1.642c-1.734,0.825-2.47,2.898-1.642,4.628l6.358,13.347l-3.04,6.638l-10.946-22.971 c-0.821-1.734-2.888-2.477-4.628-1.642c-1.734,0.825-2.47,2.898-1.642,4.628l14.143,29.686c0.573,1.211,1.795,1.982,3.135,1.982 c0.01,0,0.017,0,0.027,0c1.347-0.01,2.569-0.801,3.132-2.029l3.716-8.113l3.888,8.161c0.573,1.211,1.795,1.982,3.135,1.982 c0.01,0,0.017,0,0.027,0c1.347-0.01,2.569-0.801,3.132-2.029l13.596-29.686C184.57,38.83,183.806,36.766,182.059,35.968z'/%3E%3Cpath d='M183.461,140.316L130.3,97.208c-1.065-0.865-2.545-1.018-3.766-0.397c-1.222,0.621-1.965,1.907-1.893,3.278l3.627,68.345 c0.078,1.455,1.055,2.708,2.45,3.139c1.384,0.421,2.904-0.061,3.787-1.222c0.065-0.081,5.398-7.075,11.231-12.901l15.68,30.776 c0.417,0.821,1.143,1.442,2.022,1.727c0.35,0.112,0.713,0.17,1.072,0.17c0.543,0,1.086-0.129,1.578-0.38l12.385-6.311 c0.821-0.417,1.442-1.143,1.727-2.022c0.285-0.876,0.21-1.829-0.21-2.65l-15.68-30.772c8.14-1.293,16.932-1.5,17.037-1.5 c1.455-0.034,2.742-0.97,3.213-2.348C185.031,142.759,184.594,141.232,183.461,140.316z M158.337,142.055 c-1.045,0.238-1.92,0.943-2.375,1.914c-0.451,0.97-0.434,2.097,0.054,3.05l16.206,31.8l-6.192,3.156l-16.206-31.804 c-0.485-0.953-1.384-1.632-2.436-1.832c-0.217-0.044-0.438-0.065-0.658-0.065c-0.831,0-1.646,0.298-2.283,0.859 c-3.444,3.003-6.926,6.756-9.715,9.972l-2.734-51.576l40.117,32.53C167.876,140.426,162.793,141.037,158.337,142.055z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
}

.sort-tool-modal__btn-choose.label--mobile {
  padding-left: 24px;
}

.label.label--web {
  padding-left: 26px;
}

.label--mobile:before {
  width: 15px;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='iso-8859-1'?%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg width='15px' height='15px' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 508 508' style='enable-background:new 0 0 508 508;' xml:space='preserve'%3E%3Cpath style='fill:%23F4EFEF;' d='M166,506h172.4c26,0,47.2-24,47.2-50.4v-400c0-26.4-21.2-46-47.6-46H166c-26,0-47.6,17.2-47.6,43.6 v401.2C118.4,480.8,140,506,166,506z'/%3E%3Cpath style='fill:%23CDEEF9;' d='M366.4,78H140.8l-2.4-1.2V434h228V78z'/%3E%3Cpath d='M167.2,508c-29.6,0-54.8-24.4-54.8-53.2V53.6c0-28.8,25.2-53.2,54.8-53.6l175.2,0.4c29.6,0,52.8,23.6,52.8,53.2l0.4,401.2 l0,0c0,29.6-24,53.2-53.2,53.2H167.2z M167.2,8c-25.2,0-46.8,20.8-46.8,45.6v401.2c0,24.4,21.6,45.2,46.8,45.2h174.4 c24.8,0,45.2-20.4,45.2-45.2l-0.4-401.2c0-25.2-19.6-45.2-44.8-45.2L167.2,8z'/%3E%3Cpath d='M368.4,440h-232c-2.4,0-4-1.6-4-4V76c0-2.4,1.6-4,4-4h182c2.4,0,4,1.6,4,4s-1.6,4-4,4h-178v352h224V80h-10c-2.4,0-4-1.6-4-4 s1.6-4,4-4h14c2.4,0,4,1.6,4,4v360C372.4,438.4,370.8,440,368.4,440z'/%3E%3Cpath d='M282.4,48h-56c-2.4,0-4-1.6-4-4s1.6-4,4-4h56c2.4,0,4,1.6,4,4S284.8,48,282.4,48z'/%3E%3Cpath d='M207.6,44.4c-1.2,0-2-0.4-2.8-1.2c-0.8-0.8-1.2-2-1.2-2.8c0-1.2,0.4-2,1.2-2.8c1.6-1.6,4-1.6,5.6,0c0.8,0.8,1.2,2,1.2,2.8 s-0.4,2-1.2,2.8C209.6,44,208.4,44.4,207.6,44.4z'/%3E%3Cpath d='M235.6,172c-1.2,0-2-0.4-2.8-1.2l-92-92c-1.6-1.6-1.6-4,0-5.6s4-1.6,5.6,0l92,92c1.6,1.6,1.6,4,0,5.6 C237.6,171.6,236.4,172,235.6,172z'/%3E%3Cpath d='M295.6,232c-1.2,0-2-0.4-2.8-1.2l-40-40c-1.6-1.6-1.6-4,0-5.6s4-1.6,5.6,0l40,40c1.6,1.6,1.6,4,0,5.6 C297.6,231.6,296.4,232,295.6,232z'/%3E%3Cpath d='M331.6,312c-1.2,0-2-0.4-2.8-1.2L212.4,194.4c-1.6-1.6-1.6-4,0-5.6s4-1.6,5.6,0l116.4,116.4c1.6,1.6,1.6,4,0,5.6 C334,311.6,332.8,312,331.6,312z'/%3E%3Cpath d='M367.6,348c-1.2,0-2-0.4-2.8-1.2l-19.2-19.2c-1.6-1.6-1.6-4,0-5.6s4-1.6,5.6,0l19.2,19.2c1.6,1.6,1.6,4,0,5.6 C369.6,347.6,368.4,348,367.6,348z'/%3E%3Cpath d='M254,492.4c-4.4,0-8.8-1.2-12.4-3.6c-5.6-3.2-9.2-8.8-10.8-14.8c-1.6-6.4-0.4-12.8,2.8-18c3.2-5.6,8.8-9.2,14.8-10.8 c3.6-0.8,7.2-0.8,10.4,0c2,0.4,3.6,2.4,3.2,4.8c-0.4,2-2.4,3.6-4.8,3.2c-2.4-0.4-4.8-0.4-7.2,0c-4,0.8-7.6,3.6-10,7.2s-2.8,8-2,12 s3.6,7.6,7.2,10c3.6,2.4,8,2.8,12,2s7.6-3.6,10-7.2s2.8-8,2-12c-0.4-2,0.8-4.4,2.8-4.8s4.4,0.8,4.8,2.8c1.6,6.4,0.4,12.8-2.8,18 c-3.2,5.6-8.8,9.2-14.8,10.8C257.6,492,255.6,492.4,254,492.4z'/%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
}

.sort-tool-modal__btn-choose.label--desktop {
  padding-left: 26px;
}

.label.label--desktop {
  padding-left: 26px;
}

.label--desktop:before {
  width: 15px;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='iso-8859-1'?%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg width='15' height='15' version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 490 490' style='enable-background:new 0 0 490 490;' xml:space='preserve'%3E%3Cg%3E%3Crect x='155.039' y='97.251' width='122.5' height='30.625'/%3E%3Crect x='197.148' y='142.232' width='122.5' height='30.625'/%3E%3Crect x='155.039' y='187.212' width='122.5' height='30.625'/%3E%3Crect x='197.148' y='232.193' width='122.5' height='30.632'/%3E%3Crect x='155.039' y='277.166' width='122.5' height='30.625'/%3E%3Cpath d='M22.969,362.717h183.75v52.951h-69.863v30.625h216.289v-30.625h-69.863v-52.951h183.75 c12.633,0,22.969-10.336,22.969-22.969V66.676c0-12.633-10.336-22.969-22.969-22.969H22.969C10.336,43.707,0,54.043,0,66.676 v273.073C0,352.381,10.336,362.717,22.969,362.717z M30.625,74.332h428.75v257.76H30.625V74.332z'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
}

.label.label--mobile,
.sort-tool-modal__btn-choose.label--photoshop,
.label.label--photoshop {
  padding-left: 26px;
}

.label--photoshop:before {
  width: 15px;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='iso-8859-1'?%3E%3C!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 52 52' style='enable-background:new 0 0 52 52;' xml:space='preserve'%3E%3Cg%3E%3Cpath style='fill:%23393687;' d='M40.824,52H11.176C5.003,52,0,46.997,0,40.824V11.176C0,5.003,5.003,0,11.176,0h29.649 C46.997,0,52,5.003,52,11.176v29.649C52,46.997,46.997,52,40.824,52z'/%3E%3Cg%3E%3Cpath style='fill:%2389D3FF;' d='M12.16,39H9.28V11h9.64c2.613,0,4.553,0.813,5.82,2.44c1.266,1.626,1.9,3.76,1.9,6.399 c0,0.934-0.027,1.74-0.08,2.42c-0.054,0.681-0.22,1.534-0.5,2.561c-0.28,1.026-0.66,1.866-1.14,2.52 c-0.48,0.654-1.213,1.227-2.2,1.72c-0.987,0.494-2.16,0.74-3.52,0.74h-7.04V39z M12.16,27h6.68c0.96,0,1.773-0.187,2.44-0.56 c0.666-0.374,1.153-0.773,1.46-1.2c0.306-0.427,0.546-1.04,0.72-1.84c0.173-0.801,0.267-1.4,0.28-1.801 c0.013-0.399,0.02-0.973,0.02-1.72c0-4.053-1.694-6.08-5.08-6.08h-6.52V27z'/%3E%3Cpath style='fill:%2389D3FF;' d='M29.48,33.92l2.8-0.12c0.106,0.987,0.6,1.754,1.48,2.3c0.88,0.547,1.893,0.82,3.04,0.82 s2.14-0.26,2.98-0.78c0.84-0.52,1.26-1.266,1.26-2.239s-0.36-1.747-1.08-2.32c-0.72-0.573-1.6-1.026-2.64-1.36 c-1.04-0.333-2.086-0.686-3.14-1.06c-1.054-0.373-1.98-0.96-2.78-1.76c-0.987-0.934-1.48-2.073-1.48-3.42s0.54-2.601,1.62-3.761 s2.833-1.739,5.26-1.739c0.854,0,1.653,0.1,2.4,0.3c0.746,0.2,1.28,0.394,1.6,0.58l0.48,0.279l-0.92,2.521 c-0.854-0.666-1.974-1-3.36-1c-1.387,0-2.42,0.26-3.1,0.78c-0.68,0.52-1.02,1.18-1.02,1.979c0,0.88,0.426,1.574,1.28,2.08 c0.853,0.507,1.813,0.934,2.88,1.28c1.066,0.347,2.126,0.733,3.18,1.16c1.053,0.427,1.946,1.094,2.68,2s1.1,2.106,1.1,3.6 c0,1.494-0.6,2.794-1.8,3.9C41,39.046,39.246,39.6,36.94,39.6c-2.307,0-4.114-0.547-5.42-1.64 C30.213,36.867,29.533,35.52,29.48,33.92z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
}

.header-top__view-setup {
  position: relative;
  flex-grow: 1;
  display: flex;
  max-width: 415px;
}

.header-top__view-setup .header-top__input-search {
  flex-grow: 1;
  max-width: 325px;
  min-width: 260px;
}

.header-top__sort-tool-btn {
  position: relative;
  padding: 10px 6px 11px 30px;
  font-size: 14px;
  line-height: 1;
  margin-left: 15px;
  border-radius: 5px;
  border-style: solid;
  border-color: transparent;
  border-width: 1px;
  outline: none;
  cursor: pointer;
}

.header-top__sort-tool-btn::before {
  content: '';
  position: absolute;
  top: 30%;
  left: 9px;
  width: 15px;
  height: 12px;
  background-size: cover;
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='16px' height='13px' viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 59.1 (86144) - https://sketch.com --%3E%3Ctitle%3Esearch-icon%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg id='awesome-design-plugins-v3-tools-filter-v3' transform='translate(-1236.000000, -36.000000)' fill-rule='nonzero' stroke='%2352B372' stroke-width='2'%3E%3Cg id='Group-5' transform='translate(1228.000000, 24.000000)'%3E%3Cg id='search-icon' transform='translate(9.000000, 13.000000)'%3E%3Cg id='Group-2'%3E%3Cline x1='0' y1='0.744318182' x2='14' y2='0.744318182' id='Path-2'%3E%3C/line%3E%3Cline x1='2' y1='5.74431818' x2='12' y2='5.74431818' id='Path-2'%3E%3C/line%3E%3Cline x1='5' y1='10.7443182' x2='9' y2='10.7443182' id='Path-2'%3E%3C/line%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.header-top__sort-tool-btn.-violet::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='16px' height='13px' viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3Efilter-icon%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cg id='UI' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg id='awesome-design-plugins-v3-tools-filter-v3-copy' transform='translate(-1233.000000, -36.000000)' fill-rule='nonzero' stroke='%23BE5DC2' stroke-width='2'%3E%3Cg id='Group-5' transform='translate(1225.000000, 24.000000)'%3E%3Cg id='filter-icon' transform='translate(9.000000, 13.000000)'%3E%3Cg id='Group-2'%3E%3Cpath d='M0,0.744318182 L14,0.744318182' id='Path-2'%3E%3C/path%3E%3Cpath d='M2,5.74431818 L12,5.74431818' id='Path-2'%3E%3C/path%3E%3Cpath d='M5,10.7443182 L9,10.7443182' id='Path-2'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.header-top__sort-tool-btn.-mint {
  background-color: #d2fad7;
  color: #028930;
}

.header-top__sort-tool-btn.-mint.-active {
  border-color: #52b372;
}

.header-top__sort-tool-btn.-violet {
  background-color: #f4d3f5;
  color: var(--violet);
}

.header-top__sort-tool-btn.-violet.-active {
  border-color: var(--violet);
}

.header-top__sort-tool-modal {
  position: absolute;
  top: 50px;
  right: -18px;
  display: block;
  width: 75%; /* 69.879518072%; */
  max-width: 290px;
  padding: 17px 19px;
  background-color: #ffffff;
  border-radius: 4px;
  opacity: 1;
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.15s ease-in-out;
}

.header-top__sort-tool-modal.-hidden {
  display: none;
  opacity: 0;
}

.sort-tool-modal__title {
  margin: 0;
  font-size: 12px;
  line-height: 26px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.sort-tool-modal__nav {
  display: flex;
  flex-wrap: wrap;
}

.sort-tool-modal__btn-choose {
  position: relative;
  padding-top: 7px;
  padding-right: 7px;
  padding-bottom: 8px;
  padding-left: 7px;
  margin-right: 6px;
  margin-bottom: 8px;
  border-radius: 4px;
  border: 1px solid #dbdbdb;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 500;
  background-image: linear-gradient(180deg, #f5f5f5 0%, #ededed 100%);
  cursor: pointer;
  outline: none;
}

.sort-tool-modal__btn-choose:before {
  content: '';
  position: absolute;
  top: 5px;
  left: 7px;
  height: 15px;
  background-size: cover;
  background-repeat: no-repeat;
}

.sort-tool-modal__btn-choose:last-child {
  margin-right: 0;
}

.sort-tool-modal__btn-choose.-sketch {
  padding-left: 30px;
}

.sort-tool-modal__btn-choose.-figma {
  padding-left: 23px;
}

.sort-tool-modal__btn-choose.-xd {
  padding-left: 28px;
}

.header.-mint .sort-tool-modal__btn-choose.-active {
  background-image: none;
  background-color: #d2fad7;
  border-color: #52b372;
  color: #028930;
}

.header.-violet .sort-tool-modal__btn-choose.-active {
  background-image: none;
  background-color: #f4d3f5;
  border-color: var(--violet);
  color: var(--violet);
}

@media (max-width: 767px) {
  .promotion-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .promotion-banner__main {
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: 0;
  }

  .header-top__sort-tool-btn {
    position: absolute;
    right: 16px;
    bottom: -60px;
  }

  .header-top__sort-tool-modal {
    top: 124px;
    right: 16px;
  }

  .header-top__view-setup .header-top__input-search {
    flex-grow: 1;
    min-width: 200px;
  }
}

@media (max-width: 960px) {
  main > article {
    margin-bottom: 3rem;
  }

  body > .nav {
    display: none;
    margin-top: 0;
  }

  body > .nav--visible {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 2;
  }

  .nav ul {
    left: 50%;
    top: 57%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 768px;
    min-width: 320px;
  }

  .nav li > a {
    font-size: 0.875rem;
    padding: 0.5rem 0.875rem;
  }

  .header-top__nav-item {
    position: relative;
  }

  .header-top__nav-item::before {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .hamburger-menu {
    display: inline-block;
    width: 22px;
    height: auto;
    padding: 1rem;
    z-index: 10;
  }

  .bar1,
  .bar2,
  .bar3 {
    width: 22px;
    height: 3px;
    background-color: var(--black);
    margin: 6px 0;
    transition: 0.4s;
  }

  .hamburger-menu--change .bar1 {
    width: 18px;
    transform: rotate(-45deg) translate(-5px, 6px);
  }

  .hamburger-menu--change .bar2 {
    opacity: 0;
  }

  .hamburger-menu--change .bar3 {
    width: 18px;
    transform: rotate(45deg) translate(-6px, -8px);
  }

  main {
    max-width: 556px;
    padding-left: 2.1875rem;
    padding-right: 2.1875rem;
  }

  .tool {
    flex-direction: column;
    margin-bottom: 3rem;
  }

  .tool__asset {
    margin-bottom: 1rem;
  }

  .welcome {
    align-items: flex-start;
  }

  .welcome__title {
    max-width: 400px;
    font-size: 3rem;
  }

  .welcome__description {
    max-width: 340px;
    text-align: left;
  }

  .promo-banner--flawless-feedback {
    flex-direction: column;
    align-items: flex-start;
  }

  .promo-banner--flawless-feedback__description {
    margin: 3rem 0;
  }

  .tags {
    margin-top: 0.5rem;
  }

  .tag {
    margin-bottom: 0.5rem;
  }

  .header-top .logo {
    display: none;
  }

  .header-top.-flex-visible {
    position: fixed;
    display: flex;
    width: 100%;
    height: auto;
    background-color: #ffffff;
    z-index: 3;
  }

  .header-top__nav {
    display: flex;
    margin-left: 0;
  }

  .header-top__nav-item {
    display: block;
    width: 48px;
    height: 48px;
    padding: 1.625rem 0 0 0;
    font-size: 0;
    border: 0.313rem solid transparent;
  }

  .header-top__nav-item:visited {
    color: #8490a3;
  }

  .header-top__nav-item.-tool::before,
  .header-top__nav-item.-plugin::before {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .header-top__nav-item.-active {
    border-left: none;
  }

  .header-top__input-search {
    width: 50%;
  }
}

/* responsiveness edits */

@media (min-width: 960px) and (max-width: 1439px) {
  .header-inner {
    padding: 0 9.722222222%;
  }

  .nav {
    padding-left: 9.722222222%;
  }

  body > main {
    padding-right: 9.722222222%;
  }

  body > .nav {
    margin-top: 110px !important;
  }
}

@media (min-width: 960px) {
  .promo-banner--flawless-feedback__description {
    flex-basis: 60%;
    padding-left: 1rem;
  }

  .header-inner {
    justify-content: space-between;
    box-sizing: border-box;
    height: 84px;
  }

  .header-top__nav {
    height: calc(100% + 2px);
  }

  .header-top__nav {
    display: flex;
    margin-left: 7rem;
  }

  .header-top__nav-item {
    box-sizing: border-box;
    position: relative;
    height: 100%;
    font-size: 1.125rem;
    padding-top: 2rem;
    padding-left: 69px; /* 5.250rem; */
    padding-bottom: 1.875rem;
    padding-right: 28px; /* 1.875rem; */
    color: #8490a3;
    line-height: 1.25;
    transition: all 0.15s ease-in-out;
  }

  .header-top__nav-item span {
    position: absolute;
    padding-left: 28px;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    z-index: -1;
  }

  .header-top__nav-item.-open.-tool,
  .header-top__nav-item.-tool:hover {
    padding-right: 100px;
  }

  .header-top__nav-item.-open.-plugin,
  .header-top__nav-item.-plugin:hover {
    padding-right: 122px;
  }

  .header-top__nav-item.-open.-kit,
  .header-top__nav-item.-kit:hover {
    padding-right: 112px;
  }

  .header-top__nav-item.-open span,
  .header-top__nav-item:hover span {
    z-index: 10;
    transition: all 0.2s ease-in-out;
    visibility: visible;
    opacity: 1;
  }

  .logo__title {
    font-size: 100% !important;
  }

  .header-top__nav {
    margin-left: 0 !important;
  }

  .header-top__view-setup {
    max-width: 352px;
  }
}

        </style>
    
            
        <link href="https://fonts.googleapis.com/css?family=Lato:700|Montserrat:400,600i,700|Pacifico&amp;display=swap" rel="stylesheet">
    
            
        <!-- Google Analytics -->
        <script>
            window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
            ga('create', 'UA-63048232-1', 'auto');
            ga('send', 'pageview');
        </script>
        <script async="" src="https://www.google-analytics.com/analytics.js"></script>

        <!-- Facebook Pixel Code -->
        <script>
            !function(f,b,e,v,n,t,s)
            {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
            n.callMethod.apply(n,arguments):n.queue.push(arguments)};
            if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
            n.queue=[];t=b.createElement(e);t.async=!0;
            t.src=v;s=b.getElementsByTagName(e)[0];
            s.parentNode.insertBefore(t,s)}(window, document,'script',
            'https://connect.facebook.net/en_US/fbevents.js');
            fbq('init', '1844132335637828');
            fbq('track', 'PageView');
        </script>
    
        </head><body class="-green"><div class="hidden-in-page">
<h1>Awesome Design Plugins</h1>
<ul>
<li><a href="https://github.com/LisaDziuba/Awesome-Design-Tools">Awesome Design Tools</a></li>
<li><a href="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Awesome-Design-UI-Kits.md">Awesome Design UI Kits</a></li>
<li><a href="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Awesome-Design-Conferences.md">Awesome Design Conferences</a></li>
</ul>
<div class="hidden-in-page">
    <p align="center">
    &nbsp;&nbsp;<a href="https://flawlessapp.io/designplugins">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;</a>
    
    
    </p>
</div>
<h2>How to Use and Contribute</h2>
<ul>
<li>Now you are in <strong>Awesome Design Plugins</strong> section, if you need tools — go to <a href="https://github.com/LisaDziuba/Awesome-Design-Tools">Awesome Design Tools</a>.</li>
<li>To find the tool, go through the Table of Contents or search for a keyword (for example, "animation", "prototyping").</li>
<li>Ask <a href="https://twitter.com/LisaDziuba">Lisa</a> on Twitter.</li>
</ul>
<p>If you found some great design tool or plugin, just send a Pull Request concerning our <a href="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Contribution_Guidelines.md">Contribution Guidelines</a> (they're very simple, please take a look). Design tools should be submitted <a href="https://github.com/LisaDziuba/Awesome-Design-Tools">here</a> 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!</p>
</div>
<header class="header header-top -mint header-top--hide-banner">
        <div class="banner-top banner-abstract">
            <header>
                <div class="abstract-logo"></div>
                <a href="http://flawlessapp.io/designtools/joinsabstract" class="banner__text">
                    Awesome Design Plugins as a part of Flawless App family joins Abstract!
                </a>
            </header>
            <footer class="banner__close-wrapper">
                <button class="banner__close">Close Banner</button>
            </footer>
        </div>
        <div class="header-inner">
            <div class="logo">
                <div class="logo__asset -logo-adp"></div>
                <div class="logo__title">Awesome Design Plugins</div>
            </div>
            <nav class="header-top__nav">
                    <a href="/designtools" class="header-top__nav-item -tool ">
                        <span>Tools</span>
                    </a>
                 
                    <a href="/designplugins" class="header-top__nav-item -plugin -open -active">
                        <span>Plugins</span>
                    </a>
                 
                    <a href="/designkits" class="header-top__nav-item -kit ">
                        <span>UI Kits</span>
                    </a>
                
            </nav>
            
            
                    <div class="header-top__view-setup">
                        <input type="text" placeholder="Search for plugin…" class="header-top__input-search js-search-input">
                        <button type="button" class="header-top__sort-tool-btn js-open-modal-filter -mint">Filter</button>
                        <div class="header-top__sort-tool-modal sort-tool-modal -hidden">
                            <h5 class="sort-tool-modal__title">Show plugins for:</h5>
                            <form class="sort-tool-modal__nav">
                                <button type="button" class="sort-tool-modal__btn-choose -sketch label--sketch -active" app="sketch">Sketch</button>
                                <button type="button" class="sort-tool-modal__btn-choose -figma label--figma -active" app="figma">Figma</button>
                                <button type="button" class="sort-tool-modal__btn-choose -xd label--xd -active" app="xd">Adobe XD</button>
                            </form>
                        </div>
                    </div>  
                
            
        <div class="hamburger-menu">
		<div class="bar1"></div>
		<div class="bar2"></div>
		<div class="bar3"></div>
	</div></div>
	</header>
<div class="nav">
<h2>Table of Content</h2>
<ul>
<li><a href="#accessibility">Accessibility</a></li>
<li><a href="#align--arrange">Align &amp; Arrange Plugins</a></li>
<li><a href="#analytics">Analytics</a></li>
<li><a href="#charts">Charts</a></li>
<li><a href="#code-export">Code Export</a></li>
<li><a href="#code-highlight">Code Highlight</a></li>
<li><a href="#collaboration">Collaboration</a></li>
<li><a href="#color-management">Color Management</a></li>
<li><a href="#copy--paste">Copy &amp; Paste</a></li>
<li><a href="#data-generation">Data Generation</a></li>
<li><a href="#developers-handoff">Developers Handoff</a></li>
<li><a href="#document-optimisation">Document Optimisation</a></li>
<li><a href="#document-organisation">Document Organisation</a></li>
<li><a href="#layout--padding">Layout &amp; Padding</a></li>
<li><a href="#export">Export</a></li>
<li><a href="#generate-ui-element">Generate UI</a></li>
<li><a href="#guides--grids">Guides &amp; Grids</a></li>
<li><a href="#images-management">Images Management</a></li>
<li><a href="#import">Import</a></li>
<li><a href="#map-generation">Map Generation</a></li>
<li><a href="#mockup-plugins">Mockup Plugins</a></li>
<li><a href="#other">Other</a></li>
<li><a href="#pdf-export-plugins">PDF Export</a></li>
<li><a href="#plugin-development">Plugin Development</a></li>
<li><a href="#plugin-managers">Plugin Managers</a></li>
<li><a href="#plugins-collection">Plugins Collection</a></li>
<li><a href="#presentation--preview">Presentation &amp; Preview</a></li>
<li><a href="#prototyping">Prototyping</a></li>
<li><a href="#three-d-perspective">3D Perspective</a></li>
<li><a href="#rename-helper">Rename Helper</a></li>
<li><a href="#resize">Resize</a></li>
<li><a href="#selection-enhancement">Selection Enhancement</a></li>
<li><a href="#shortcut--keyboard">Shortcut &amp; Keyboard</a></li>
<li><a href="#state-management">State Management</a></li>
<li><a href="#style-management">Style Management</a></li>
<li><a href="#symbols--components-management">Symbols &amp; Components</a></li>
<li><a href="#text-management">Text Management</a></li>
<li><a href="#translation--localization">Translation &amp; Localization</a></li>
<li><a href="#typeface">Typeface</a></li>
<li><a href="#ui-kits">UI Kits</a></li>
<li><a href="#user-flows">User Flows</a></li>
<li><a href="#version-control">Version Control</a></li>
<li><a href="#website--html-export">Website &amp; HTML Export</a></li>
<li><a href="#workflow-improvements">Workflow Improvements</a></li>
<li><a href="#zoom-enhancement">Zoom Enhancement</a></li>
</ul>
</div>
<main><article class="welcome">
		<div class="welcome__asset -logo-adp"></div>
		<h1 class="welcome__title">Awesome Design Plugins</h1>
		<p class="welcome__description">
			All the best design plugins for Sketch, Adobe XD, and Figma, gathered in one place.
		</p>
		<a href="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Awesome-Design-Plugins.md" class="btn btn-contribute image-gh">Contribute on GitHub</a>
	</article>
<article id="accessibility">
			<header>
				<h3><a href="#accessibility">Accessibility</a></h3>
				
<div class="hidden-in-page">
    <p align="center">
        <a href="http://bit.ly/33Q3AC0">
            
        </a>
    </p>
</div>

			</header>
			<ul>
				
<li class="tool">
			<a href="http://www.getstark.co" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://www.getstark.co" target="_blank">Stark</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	
 
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Ensure your design is accessible and high contrast for every type of color blindness.  </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/getflourish/Sketch-Color-Contrast-Analyser" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">CC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/getflourish/Sketch-Color-Contrast-Analyser" target="_blank">Color Contrast Analyser</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that calculates the color contrast of two selected layers and evaluates it against the WCAG2.0. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/lifeofmle/check-contrast" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">CC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/lifeofmle/check-contrast" target="_blank">Check Contrast</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Allows you to select layers in Sketch and get realtime feedback about the contrast ratio. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/romannurik/Sketch-Contrast#readme" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/romannurik/Sketch-Contrast#readme" target="_blank">Contrast</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin to show a pass/fail type contrast report. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/eaugustine/Sketch-Color-Contrast-Analyzer" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">SC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/eaugustine/Sketch-Color-Contrast-Analyzer" target="_blank">Sketch Color Contrast Analyzer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that calculates the color contrast of two layers and evaluates them against MCOE's guidelines. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/733159460536249875" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">A-</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/733159460536249875" target="_blank">A11y - Color Contrast Checker</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Ensure your text is readable for users by adhering to WCAG (Web Content Accessibility Guidelines) standards. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/733343906244951586" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">CB</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/733343906244951586" target="_blank">Color Blind</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>It allows you to view your designs in the 8 different types of color vision deficiencies. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/734693888346260052" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">A–</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/734693888346260052" target="_blank">Able – Friction free accessibility</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Able makes accessibility easy while looking and feeling like Figma! </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/748533339900865323" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/748533339900865323" target="_blank">Contrast</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Contrast makes it easy to check the contrast ratios of colors as you work. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/731310036968334777" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">A-</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/731310036968334777" target="_blank">A11y - Focus Orderer</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/732290356467065314" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">A&amp;</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/732290356467065314" target="_blank">Arabic &amp; RTL Support</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Write Arabic and RTL text in Figma with ease. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/740542057689267294" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">V</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/740542057689267294" target="_blank">VisualEyes</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Measure the attention of your design inside Figma. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/739739050044773150" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">Rs</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/739739050044773150" target="_blank">RTL support</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Flip RTL languages like Hebrew and Arabic. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/742121299910255177" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">R-</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/742121299910255177" target="_blank">RTLPLZ - RTL Support</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Write RTL text in Figma with fewer tears. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/746367992714028465" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">EB</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/746367992714028465" target="_blank">Epilepsy Blocker</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>With this plugin you can make your designs accessible and safe for people with photosensitive epilepsy and also stay ADA Compliant. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="alon.gruss+xdplug@gmail.com" class="tool__asset" target="_blank" style="background-color: hsl(270, 78%, 87%); color: rgb(176, 137, 214);">Lt</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="alon.gruss+xdplug@gmail.com" target="_blank">LTR to RTL by Alon Gruss</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Use Ctrl+h or Cmd+h to flip from LTR text to RTL. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		<div class="promotion-banner-wrapper">
    <a class="promotion-banner -abstract" href="https://www.abstract.com/campaigns/collaboration/?&amp;utm_medium=Partner-Advertising&amp;utm_source=PA-Native-Digital&amp;utm_campaign=CY19-PA-FlawlessApp-1018-Sept12&amp;utm_term=designplugins&amp;utm_content=Sponsored">
        <div class="promotion-banner__logo -abstract">
            
        </div>
        <div class="promotion-banner__main">
            <h3 class="promotion-banner__title">Abstract</h3>
            <p class="promotion-banner__description">
                We centralize design decisions, feedback, Sketch files, and specs for your team.
            </p>
        </div>
        <button class="promotion-banner__link -abstract">
            Get a free, 14-day trial
        </button>
    </a>
</div></article>
<article id="align--arrange">
			<header>
				<h3><a href="#align-&amp;-arrange">Align &amp; Arrange</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/srbsingh3/autoarrange" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">AA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/srbsingh3/autoarrange" target="_blank">Auto Arrange Artboards</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Automatically arrange the order of your artboards in the layer list according to their position on the canvas. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/stefan0uh/sketch-aligny" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/stefan0uh/sketch-aligny" target="_blank">Aligny</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>An alignment enhance plugin for Sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/tbrasington/Sequence-Sketch-Artboards" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">SA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/tbrasington/Sequence-Sketch-Artboards" target="_blank">Sequence Artboard Names</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Simple sequencing of all artboards within a Sketch Document. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/pravdomil/sketch-align-to-grid" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">SA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/pravdomil/sketch-align-to-grid" target="_blank">Sketch Align To Grid</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Let's align selection to grid. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/aparajita/sketch-groupie" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">SG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/aparajita/sketch-groupie" target="_blank">Sketch Groupie</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin providing commands to align layers with their parent group. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://guides.pratikshah.website/" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">SG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://guides.pratikshah.website/" target="_blank">Sketch Guides</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Allows you to quickly generate guides for a selected element and helps you achieve web development's famous grid (column) behavior in Sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://medium.com/sketch-app-sources/sketch-app-plugin-iconflower-8fc84eef53d6" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">I</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://medium.com/sketch-app-sources/sketch-app-plugin-iconflower-8fc84eef53d6" target="_blank">IconFlower</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Arrange icons, images, and shapes in Phyllotaxis ( leaf arrangement) patterns. Leaf arrangement pattern in a sunflower, for example. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/marianomike/sketch-organizesymbols" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">OS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/marianomike/sketch-organizesymbols" target="_blank">Organize Symbols</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that arranges symbol artboards. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/abynim/BaseAlign" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/abynim/BaseAlign" target="_blank">BaseAlign</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch Plugin to align Text Layers by their baselines. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/frankko/Artboard-Tools" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">AT</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/frankko/Artboard-Tools" target="_blank">Artboard Tools</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugins for arranging artboards and navigating between artboards. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/LucienLee/AlignTo" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">AT</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/LucienLee/AlignTo" target="_blank">Align To</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch 3 plugin that aligns layers relative to more options. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/richardgazdik/sketch-align" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">Aa</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/richardgazdik/sketch-align" target="_blank">Align artboards and symbols</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Group and align your Sketch symbols and artboards by name. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/konki-vienna/sketch-bootstrap-helpers" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">BH</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/konki-vienna/sketch-bootstrap-helpers" target="_blank">Bootstrap Helpers</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/franklymrshankly/Symbol-Override-Padding" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">SO</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/franklymrshankly/Symbol-Override-Padding" target="_blank">Symbol Override Padding</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Add bottom padding to a symbol override. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/sonburn/symbol-organizer" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">SO</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/sonburn/symbol-organizer" target="_blank">Symbol Organizer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Organize your symbols page and layer list, based on the symbol names. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Myrronth/symbol-and-artboard-organizer" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">Sa</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Myrronth/symbol-and-artboard-organizer" target="_blank">Symbol and Artboard Organizer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Organize your symbols and artboards. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/doubco/sketchplugin-align-artboards" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">SA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/doubco/sketchplugin-align-artboards" target="_blank">Sketchplugin Align Artboards</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Easily aligns all artboards vertical or horizontal by name. Uses the same convention as the Sketch export folder structure 'parent/child'. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Falkeyn/Modulizer" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Falkeyn/Modulizer" target="_blank">Modulizer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/delighted/sketch-pull-to-center" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">Pt</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/delighted/sketch-pull-to-center" target="_blank">Pull to Center</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Pull to center: Move selected shapes or layers toward the center of the artboard. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/PEZ/SketchDistributor" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/PEZ/SketchDistributor" target="_blank">SketchDistributor</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Distribute selection objects vertically or horizontally with a given spacing between them. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/romashamin/sort-me-sketch" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">SM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/romashamin/sort-me-sketch" target="_blank">Sort Me</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sort artboards and layers by name. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/dawidw/move-it" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">MI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/dawidw/move-it" target="_blank">Move It</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that lets you move selected layers vertically and horizontally. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/wonderbit/sketch-distribute-layers" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">DL</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/wonderbit/sketch-distribute-layers" target="_blank">Distribute Layers</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plug-in to distribute layers evenly. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://designplugins.com/optically" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">Of</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://designplugins.com/optically" target="_blank">Optically for Sketch</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Automated and mathematically precise optical adjustments in Sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/BrendanMiller/SizeArtboard" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/BrendanMiller/SizeArtboard" target="_blank">SizeArtboard</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch Plugin for wrapping a new artboard around what you've selected. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/pberrecloth/butter-sketch-plugin" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/pberrecloth/butter-sketch-plugin" target="_blank">Butter</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>This plugin will butt your layers together. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ScottSavarie/stacker" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ScottSavarie/stacker" target="_blank">Stacker</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin to stack a selection horizontally or vertically. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/kenmoore/sketch-arrange-artboards" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">SA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/kenmoore/sketch-arrange-artboards" target="_blank">Sketch Arrange Artboards</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Layout all artboards in a grid with a user-specified number of rows. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/wescraig/SnipSnap" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/wescraig/SnipSnap" target="_blank">SnipSnap</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Remove extra padding on multiple layers or artboards with ease. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/mheesakkers/sketch-plugin-skew" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">SP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/mheesakkers/sketch-plugin-skew" target="_blank">Sketch Plugin Skew</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin for skewing (or shearing) shapes horizontally or vertically. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/franklymrshankly/Align-to-padding" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">AT</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/franklymrshankly/Align-to-padding" target="_blank">Align To Padding</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Align layers in a group with padding applied. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/franklymrshankly/Paddit" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/franklymrshankly/Paddit" target="_blank">Paddit</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that adjusts a group's background to the content with padding. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/jawayang/Sketch-Divider" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">D</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/jawayang/Sketch-Divider" target="_blank">Divider</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A plugin for Sketch to equal division layers by a container. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/731260060173130163" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">ST</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/731260060173130163" target="_blank">Super Tidy</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>A Figma plugin to easily align, rename and reorder your frames based in their canvas position. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/731324768889901500" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">SI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/731324768889901500" target="_blank">Sort It</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Sort selected Frames or Layers by names. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/739493471028643540" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/739493471028643540" target="_blank">Swap</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Easily swap two selected objects. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/742038190980789811" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/742038190980789811" target="_blank">Sorter</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>A small utility plugin to help you sort/re-order layers in Figma. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/742450159822269057" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">AT</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/742450159822269057" target="_blank">Align To</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Align layers to a specific layer, and have that layer stay fixed while the other layers move. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/738853407874474111" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">RL</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/738853407874474111" target="_blank">Reverse Layer Order</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>This plugin will reverse the order of the selected layers. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/747059755185517110" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">GR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/747059755185517110" target="_blank">Golden Ratio Align &amp; Resize</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>With this plugin, it's easy to use the Golden Ratio just everywhere you need it. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/761098431161143653" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">DB</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/761098431161143653" target="_blank">Distribute By</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>A lightweight plugin that spaces elements evenly by the pixel. Distribute items vertically or horizontally from the edges or the centers. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://constanting.com/#contact" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://constanting.com/#contact" target="_blank">Swapper</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>A plugin that allows swapping position of two selected elements. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="alexdobras@gmail.com" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">AB</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="alexdobras@gmail.com" target="_blank">Apply Bounds</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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.  </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="info@paolobiagini.com" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">MF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="info@paolobiagini.com" target="_blank">Mask Fit</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>A command-like plugin that allows fitting images to their mask. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/rodi01/Artboard-Plus-XD/blob/master/README.md" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">AP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/rodi01/Artboard-Plus-XD/blob/master/README.md" target="_blank">Artboard Plus</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://twitter.com/kenji_clown5" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">IS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://twitter.com/kenji_clown5" target="_blank">Invisible Space</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://sttk3.com/" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://sttk3.com/" target="_blank">Singari</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Align/distribute to the key object. This plugin treats the last selected one as a key object. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.eslamnasser.com/" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">RD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.eslamnasser.com/" target="_blank">Remove Decimal Numbers</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Get that pixel-perfect design by removing the decimal numbers from element's width, height, rotation, x and y values. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/peterflynn/xd-trimit" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/peterflynn/xd-trimit" target="_blank">TrimIt</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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! </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://onthehead.com" class="tool__asset" target="_blank" style="background-color: hsl(340.5, 76%, 89%); color: rgb(217, 150, 171);">MI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://onthehead.com" target="_blank">Move Items to Adjacent Place</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Move/duplicate items to adjacent places (left, top, right, bottom). </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</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">
			<header>
				<h3><a href="#analytics">Analytics</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/loceye/sketch-visualeyes" class="tool__asset" target="_blank" style="background-color: hsl(0, 78%, 87%); color: rgb(214, 137, 137);">V</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/loceye/sketch-visualeyes" target="_blank">Visualeyes</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Generate attention heatmaps in seconds. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.useberry.com/integrations/adobe-xd/" class="tool__asset" target="_blank" style="background-color: hsl(0, 78%, 87%); color: rgb(214, 137, 137);">U</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.useberry.com/integrations/adobe-xd/" target="_blank">Useberry</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>User testing feedback and users’ behavior insights with heatmaps, video recordings, user flows, time bars and follow-up questions.  </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.userlytics.com/faq" class="tool__asset" target="_blank" style="background-color: hsl(0, 78%, 87%); color: rgb(214, 137, 137);">U</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.userlytics.com/faq" target="_blank">Userlytics</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="support@usertesting.com" class="tool__asset" target="_blank" style="background-color: hsl(0, 78%, 87%); color: rgb(214, 137, 137);">U</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="support@usertesting.com" target="_blank">UserTesting</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>The UserTesting plugin enables you to seamlessly transition from designing a digital experience to soliciting immediate customer validation. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/mcoulthurst/xd-user-journey/blob/master/README.md" class="tool__asset" target="_blank" style="background-color: hsl(0, 78%, 87%); color: rgb(214, 137, 137);">Uj</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/mcoulthurst/xd-user-journey/blob/master/README.md" target="_blank">User journey</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>This plugin renders a user journey map from external CSV text data. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://mupixa.com" class="tool__asset" target="_blank" style="background-color: hsl(0, 78%, 87%); color: rgb(214, 137, 137);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://mupixa.com" target="_blank">Mupixa</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	
 
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Allows you to leverage the full potential of your prototypes by conducting usability research fast and effortlessly.  </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://vempathy.tech/plugins/adobe-xd/" class="tool__asset" target="_blank" style="background-color: hsl(0, 78%, 87%); color: rgb(214, 137, 137);">V</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://vempathy.tech/plugins/adobe-xd/" target="_blank">Vempathy</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="charts">
			<header>
				<h3><a href="#charts">Charts</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/abynim/sketchy-pies" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">SP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/abynim/sketchy-pies" target="_blank">Sketchy Pies</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin to magically convert regular circle layers into pie charts! </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/tadija/AEFlowchart" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/tadija/AEFlowchart" target="_blank">AEFlowchart</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Flowchart diagram plugin for Bohemian Coding Sketch app. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/wodory/flowmate" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/wodory/flowmate" target="_blank">Flowmate</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin to draw flowchart and diagram. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/design4use/gb-sketch-segmentcircle" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">SC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/design4use/gb-sketch-segmentcircle" target="_blank">Segmented Circle</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Create precise segmented circular graphics for diagrams, instrumentation, and analytics. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Volorf/Sparkliner" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Volorf/Sparkliner" target="_blank">Sparkliner</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Easy way to make sparkline graph. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/freeman990/Freeman-FinChart-SketchPlugin" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">FF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/freeman990/Freeman-FinChart-SketchPlugin" target="_blank">Freeman Finchart Sketchplugin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Draw a financial charts like candle-stick or line charts like a boss. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/731451122947612104" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/731451122947612104" target="_blank">Charts</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Charts allows you to generate charts that can be added and edited within your Figma document. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/734590934750866002" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/734590934750866002" target="_blank">Chart</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Chart is a plugin for Figma that uses real or random data to create the most popular charts. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/751821593330638172" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">s</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/751821593330638172" target="_blank">simpleflow</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/736737028247625415" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">D</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/736737028247625415" target="_blank">Datavizer</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Create a bar chart, scatter plot, or line chart easily with your data. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://app.odinchart.com/faq" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">OC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://app.odinchart.com/faq" target="_blank">Odin Chart</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</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">
			<header>
				<h3><a href="#code-export">Code Export</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/Charimon/iosViews" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">i</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Charimon/iosViews" target="_blank">iosViews</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin to generate iOS view code. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ngs/sketchplugin-swift-color" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">CS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ngs/sketchplugin-swift-color" target="_blank">Copy Swift Code</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin for generating UIColor and NSColor initializer Swift code from fill color of selected layers. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/jaimeeee/sketchplugin-objc-color" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">CO</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/jaimeeee/sketchplugin-objc-color" target="_blank">Copy Objective-C Code</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin for generating UIColor and NSColor initializer Objective-C code from fill color of selected layers. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/littlebusters/Sketch-CSS-Sprite-Mixin" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">CS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/littlebusters/Sketch-CSS-Sprite-Mixin" target="_blank">CSS Sprite Mixin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Copy mixin code for SCSS, Less and Stylus to the clipboard in Sketch 3. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/marisaroque/sketch-markup-listify" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">SM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/marisaroque/sketch-markup-listify" target="_blank">Sketch Markup Listify</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin for convert and copy text layers into HTML lists. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/perrysmotors/copy-framer-code" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">CF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/perrysmotors/copy-framer-code" target="_blank">Copy Framer Code</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that copies any selected layer to the clipboard as code that can be pasted straight into a Framer prototype. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Cracker9/cracker9-sketch-plugin" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">CS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Cracker9/cracker9-sketch-plugin" target="_blank">Cracker9 Sketch Plugin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Cracker9 code-snippet sketch plugin. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/kiranpuppala/sketch-to-view" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">ST</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/kiranpuppala/sketch-to-view" target="_blank">Sketch To View</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Generate android views from sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/m-yoshiro/DesignToken2Code" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">D</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/m-yoshiro/DesignToken2Code" target="_blank">DesignToken2Code</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Convert design tokens to SCSS variables as code. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/philsinatra/Sketch-Color-Vars" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">SC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/philsinatra/Sketch-Color-Vars" target="_blank">Sketch Color Vars</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that will export the fill color of selected layers to SCSS, LESS and CSS files. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/reinvanoyen/typex" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">t</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/reinvanoyen/typex" target="_blank">typex</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Highly configurable text styles to the web (CSS, sass, HTML, JSON, ...) export plugin </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/reeli/sketch-svg-to-react-component" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">St</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/reeli/sketch-svg-to-react-component" target="_blank">SVG to React Component</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.paintcodeapp.com/sketch" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">PC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.paintcodeapp.com/sketch" target="_blank">PaintCode Code Generator</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Convert your Sketch drawings into Swift or Objective-C. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/jasondonnette/sketch-copy-as-react-component" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">Ca</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/jasondonnette/sketch-copy-as-react-component" target="_blank">Copy as React Component (JSX)</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Generate React components from Sketch with a keyboard shortcut. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/devmynd/scssketch" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">s</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/devmynd/scssketch" target="_blank">scssketch</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Custom tools for living the ultimate the TAND&amp;M; life. Built with love and care by Sarah Aslanifar, Drew Vosburg, and Max Oppenheimer. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/taobaofed/imgcook" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">i</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/taobaofed/imgcook" target="_blank">imgcook</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A cook who can transform the design to code. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/iarthstar/presto-dom-code" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/iarthstar/presto-dom-code" target="_blank">Presto-Dom-Gen</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Generates Presto Dom Code from Sketch Layers. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/wangjunwangjunwang/sketch2pixi-plugin" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">b</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/wangjunwangjunwang/sketch2pixi-plugin" target="_blank">bztone-plugin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Convert Sketch layers to JSON. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/littlebusters/Sketch-Exchanger" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">SE</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/littlebusters/Sketch-Exchanger" target="_blank">Sketch Exchanger</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Convert from Sketch to JSON w/assets and JSON w/assets to Sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/JohnCoates/CSSketch" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/JohnCoates/CSSketch" target="_blank">CSSketch</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>CSS Stylesheet integration to improve your workflow, with Less support. Attach once, updates your design automatically on stylesheet changes. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/liawesomesaucer/StyleClip" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/liawesomesaucer/StyleClip" target="_blank">StyleClip</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that copies an element's styles directly to your Mac clipboard. Supports CSS &amp; SCSS. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/futantan/sketch-style-to-react-native" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/futantan/sketch-style-to-react-native" target="_blank">Sketch Style To React Native</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that copies an element's styles in React Native way directly to your Mac clipboard. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/742750636238601912" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/742750636238601912" target="_blank">CSSGen</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Generate CSS Preprocessors SASS/LESS from your local Figma styles. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/741549820671978943" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">I</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/741549820671978943" target="_blank">Icon2Code</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>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.). </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/peterflynn/xd-copy-css-code" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">CC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/peterflynn/xd-copy-css-code" target="_blank">Copy CSS to Clipboard</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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! </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="workdrive0306@gmail.com" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">cs</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="workdrive0306@gmail.com" target="_blank">convert scss variables</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Xd plugin for frontend engineer, Xd object to scss color and font size and font family variables. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://exportkit.com/help" class="tool__asset" target="_blank" style="background-color: hsl(150, 79%, 80%); color: rgb(112, 212, 162);">LS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://exportkit.com/help" target="_blank">Lightning Storm</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Create web, mobile and desktop apps instantly. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</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">
			<header>
				<h3><a href="#code-highlight">Code Highlight</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://danielguillan.github.io/sketch-syntax-highlighter/" class="tool__asset" target="_blank" style="background-color: hsl(176.3, 38%, 74%); color: rgb(112, 181, 176);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://danielguillan.github.io/sketch-syntax-highlighter/" target="_blank">Sketch Syntax Highlighter</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Automatically highlight the syntax of any code snippet, right within Sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/somebee/sketch-codelight" class="tool__asset" target="_blank" style="background-color: hsl(176.3, 38%, 74%); color: rgb(112, 181, 176);">SC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/somebee/sketch-codelight" target="_blank">Sketch Codelight</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Highlight code inside Text layers in Sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</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">
			<header>
				<h3><a href="#collaboration">Collaboration</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/DWilliames/Google-sheets-content-sync-sketch-plugin" class="tool__asset" target="_blank" style="background-color: hsl(253.3, 94%, 92%); color: rgb(171, 158, 222);">GS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/DWilliames/Google-sheets-content-sync-sketch-plugin" target="_blank">Google Sheets Content Sync</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Edit and collaborate on your content in Google Sheets, then sync in back to your sketch files. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/nolastan/sync.sketchplugin" class="tool__asset" target="_blank" style="background-color: hsl(253.3, 94%, 92%); color: rgb(171, 158, 222);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/nolastan/sync.sketchplugin" target="_blank">Sync</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Use Google Sheets to sync typography across your team. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.yuque.com/dapollo/group/welcome" class="tool__asset" target="_blank" style="background-color: hsl(253.3, 94%, 92%); color: rgb(171, 158, 222);">D</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.yuque.com/dapollo/group/welcome" target="_blank">Dapollo</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Design and Development Platform(一站式设计开发工作台) </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/goodpatch/Prott-Sketch-Plugin" class="tool__asset" target="_blank" style="background-color: hsl(253.3, 94%, 92%); color: rgb(171, 158, 222);">PS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/goodpatch/Prott-Sketch-Plugin" target="_blank">Prott Sketch Plugin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sync Sketch artboards to Prott like a boss. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://plotapp.co" class="tool__asset" target="_blank" style="background-color: hsl(253.3, 94%, 92%); color: rgb(171, 158, 222);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://plotapp.co" target="_blank">Plot</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Collaborate with your design team in a new way </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Frontify/sketch" class="tool__asset" target="_blank" style="background-color: hsl(253.3, 94%, 92%); color: rgb(171, 158, 222);">FP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Frontify/sketch" target="_blank">Frontify Plugin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Connecting your brand and design worlds </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://sensive.co" class="tool__asset" target="_blank" style="background-color: hsl(253.3, 94%, 92%); color: rgb(171, 158, 222);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://sensive.co" target="_blank">Sketch Sync</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Create a collaboration hub for your Sketch files. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/LukeFinch/Quopi" class="tool__asset" target="_blank" style="background-color: hsl(253.3, 94%, 92%); color: rgb(171, 158, 222);">Q</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/LukeFinch/Quopi" target="_blank">Quopi</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Fetches copy from the comments on your Abstract branch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://kopie.io" class="tool__asset" target="_blank" style="background-color: hsl(253.3, 94%, 92%); color: rgb(171, 158, 222);">K</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://kopie.io" target="_blank">Kopie</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>The copy-editing tool for web and product design </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/742073255743594050" class="tool__asset" target="_blank" style="background-color: hsl(253.3, 94%, 92%); color: rgb(171, 158, 222);">FC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/742073255743594050" target="_blank">Figma Chat</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>This plugin helps you to interact inside your files with other peoples. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/742769304454952644" class="tool__asset" target="_blank" style="background-color: hsl(253.3, 94%, 92%); color: rgb(171, 158, 222);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/742769304454952644" target="_blank">Status</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="support@goproof.net" class="tool__asset" target="_blank" style="background-color: hsl(253.3, 94%, 92%); color: rgb(171, 158, 222);">G</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="support@goproof.net" target="_blank">GoProof</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="hello@goslope.com" class="tool__asset" target="_blank" style="background-color: hsl(253.3, 94%, 92%); color: rgb(171, 158, 222);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="hello@goslope.com" target="_blank">Slope</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="support@bluescape.com" class="tool__asset" target="_blank" style="background-color: hsl(253.3, 94%, 92%); color: rgb(171, 158, 222);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="support@bluescape.com" target="_blank">Bluescape</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://mixed.io" class="tool__asset" target="_blank" style="background-color: hsl(253.3, 94%, 92%); color: rgb(171, 158, 222);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://mixed.io" target="_blank">Mixed</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Share on Mixed – communicate with voice, collaborate in real-time. Annotate, feedback &amp; sketch together with simple visual tools. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="color-management">
			<header>
				<h3><a href="#color-management">Color Management</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/johnmcclumpha/sketch-retain-text-color" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">s</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/johnmcclumpha/sketch-retain-text-color" target="_blank">sketch-retain-text-color</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Retain the original color of text layers when applying a Text Style. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/anavarromartin/sketch-color-locator" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">c</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/anavarromartin/sketch-color-locator" target="_blank">color-locator</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Find all instances of a HEX color. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/johnmcclumpha/sketch-add-colors-to-palette" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">a</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/johnmcclumpha/sketch-add-colors-to-palette" target="_blank">add-colors-to-palette</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Quickly and easily add colors from the fills of selected layers in a Sketch file to the document palette. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/akiersky/color-swatcher" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">c</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/akiersky/color-swatcher" target="_blank">color-swatcher</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin to analyze document colors and show the WCAG color contrast value. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/jorgemartins/add-selected-colors" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">a</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/jorgemartins/add-selected-colors" target="_blank">add-selected-colors</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Add selected colors to document palette, sketch plugin. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Ashung/import-colors-sketch" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">i</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Ashung/import-colors-sketch" target="_blank">import-colors</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Import colors from swatches file to Sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://colorspark.app/sketch" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">Cf</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://colorspark.app/sketch" target="_blank">ColorSpark for Sketch</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A simple tool to help designers discover unique colors and gradients directly in Sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/KevinGutowski/keyColor" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">k</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/KevinGutowski/keyColor" target="_blank">keyColor</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin to apply colors via the keyboard. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/larsenwork/sketch-easing-gradient" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">s</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/larsenwork/sketch-easing-gradient" target="_blank">sketch-easing-gradients</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Supercharge your gradients in Sketch with no-linear color mix and custom color spaces </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/thechinesekid/bonsai-plugin" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">BS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/thechinesekid/bonsai-plugin" target="_blank">Bonsai Standards</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Update all the colors in an artboard to the latest Bonsai colors. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/abnamrocoesd/Chromata" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/abnamrocoesd/Chromata" target="_blank">Chromata</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Find rogue colors </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/AMoreaux/Sketch-Icons" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">SI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/AMoreaux/Sketch-Icons" target="_blank">Sketch Icons</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Import your icons, apply a color mask and create a dynamic icons library. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/bryanberger/sketch-wcag" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">SW</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/bryanberger/sketch-wcag" target="_blank">Sketch WCAG</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that lets you contrast test your entire color palette against the WCAG guidelines all at once. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/awkward/sketch-palette-generator" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">SP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/awkward/sketch-palette-generator" target="_blank">Sketch Palette Generator</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Output a JSON color palette to Sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Carlosarturo28/Appalette" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Carlosarturo28/Appalette" target="_blank">Appalette</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that lets you find the color palette of (almost) any App. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/poyi/CopyColor" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/poyi/CopyColor" target="_blank">CopyColor</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A plugin that provides a shortcut to copy layer fill color, border color, or text color to your clipboard for Sketch 4. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/colesperks/QuickColor" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">Q</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/colesperks/QuickColor" target="_blank">QuickColor</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that lets you quickly apply colors from the color palette to selected elements. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/joclin/arrowfy" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">a</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/joclin/arrowfy" target="_blank">arrowfy</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p> add a simple arrowhead to end of selected paths. Matches color and weight. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://opencolor.tools/" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">OC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://opencolor.tools/" target="_blank">Open Color Plugin for Sketch</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin to support the open color file format </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/LaloMrtnz/Prism" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/LaloMrtnz/Prism" target="_blank">Prism</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Creates a beautiful artboard color palette with all your 'Document Colors' and their respective color label in a variety of formats. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/peterwooley/copy-color-as-hsla" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">CC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/peterwooley/copy-color-as-hsla" target="_blank">Copy Color as HSLA</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A plugin to copy the fill, border, or text color of the selected layer to the clipboard as HSLA. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/AntonioJMartinez/sketch-ImageAverageColor" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">SI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/AntonioJMartinez/sketch-ImageAverageColor" target="_blank">Sketch Image Average Color</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A plugin to save and use the average color of an image. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/peterwooley/colorpeek-sketch-plugin" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/peterwooley/colorpeek-sketch-plugin" target="_blank">Colorpeek</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Gathers the colors used in your selected layers and shows them in Colorpeek. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/heysketch/sketch-color-picker-plus" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">CP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/heysketch/sketch-color-picker-plus" target="_blank">Color Picker Plus</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Set borders color using standard Sketch color picker </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/arshad/Sketch-Sass-Colors" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">SC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/arshad/Sketch-Sass-Colors" target="_blank">Sass Colors</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Displays colors as preconfigure Sass variables for Sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/andrewfiorillo/sketch-palettes" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">SP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/andrewfiorillo/sketch-palettes" target="_blank">Sketch Palettes</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that lets you save and load colors in the color picker </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/t32k/material-design-color-palette" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">MD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/t32k/material-design-color-palette" target="_blank">Material Design Color Palette</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch app plugin for displaying Google material design color palette. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/graphical-iain/Copy-SCSS-Colors" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">CS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/graphical-iain/Copy-SCSS-Colors" target="_blank">Copy SCSS Colors</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch.app Plugin to copy colors to clipboard as SCSS variable definitions. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/mfouquet/Color-Copier" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">CC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/mfouquet/Color-Copier" target="_blank">Color Copier</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin to quickly copy color RGB/HEX values. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/getflourish/Sketch-Style-Inventory" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">SI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/getflourish/Sketch-Style-Inventory" target="_blank">Style Inventory</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Generate a visual style sheet with all colors and text styles that you are using in Sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/nathco/Swap-Fill-Border" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">SF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/nathco/Swap-Fill-Border" target="_blank">Swap Fill &amp; Border</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch.app plugin for swapping fill and border colors. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/einancunlu/Sketch-iOS-Bar-Color-Calculator" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">Si</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/einancunlu/Sketch-iOS-Bar-Color-Calculator" target="_blank">Sketch iOS Bar Color Calculator</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/petterheterjag/chromatic-sketch" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">CS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/petterheterjag/chromatic-sketch" target="_blank">Chromatic Sketch</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Create good-looking and perceptually uniform gradients and color scales. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/sureskumar/palette-stripes" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">PS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/sureskumar/palette-stripes" target="_blank">Palette Stripes</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Generate palette stripes in sketch from shape fills. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://alembicforsketch.com" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://alembicforsketch.com" target="_blank">Alembic</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin to extract a color palette from any layer that contains bitmap data. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://lalomts.github.io/Chain/" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://lalomts.github.io/Chain/" target="_blank">Chain</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Dynamic color relations in Sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/lewishowles/sketch-replace-colour" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">RC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/lewishowles/sketch-replace-colour" target="_blank">Replace Colour</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Replace all fill or text colours matching the selected layer </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/mheesakkers/sketch-plugin-convert-to-grayscale" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">CT</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/mheesakkers/sketch-plugin-convert-to-grayscale" target="_blank">Convert To Grayscale</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A simple Sketch plugin to convert selected shapes to grayscale colors </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Ashung/HSL_Color_Picker" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">HC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Ashung/HSL_Color_Picker" target="_blank">HSL Color Picker</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>HSL Color Picker for Sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/avadhbsd/RandomColors" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">R</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/avadhbsd/RandomColors" target="_blank">Randomcolors</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch App Plugin For Applying Random Colors To A Selection Of Objects. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/nerd0geek1/SketchColorPalette" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">SC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/nerd0geek1/SketchColorPalette" target="_blank">Sketch Color Palette</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch Plugin to generate .clr(Color Palette) file from selected layers. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Ashung/Sketch_Swatches" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Ashung/Sketch_Swatches" target="_blank">Sketch Swatches</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A swatches plugin for Sketch, include Material Design, Open Color, RAL, TOYO, Pantone and more. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/andex/ColorBrightness" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/andex/ColorBrightness" target="_blank">ColorBrightness</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Color Brightness sketch plugin </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/themainingredient/colormate" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/themainingredient/colormate" target="_blank">Colormate</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/iarthstar/Image2Palette" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">i</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/iarthstar/Image2Palette" target="_blank">img-pal-gen</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Generates Color Palette from Image Layer </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/bunnieabc/Blender" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/bunnieabc/Blender" target="_blank">Blender</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A sketch plugin to create awesome gradient layers </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/andex/ggradient" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">G</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/andex/ggradient" target="_blank">GGradient</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Simple way to create perfect gradient </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/webkul/coolhue" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/webkul/coolhue" target="_blank">CoolHue</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Coolest handpicked Gradient Palette for super amazing stuff </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/742549221432366731" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/742549221432366731" target="_blank">Palette</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Palette helps you create the perfect color palette through machine learning from Colormind. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/731841207668879837" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">IP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/731841207668879837" target="_blank">Image Palette</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Extracts a color palette of 5 different colors from the selected images. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/744909029427810418" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">u</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/744909029427810418" target="_blank">uiGradients</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Adds gradients to groups, text and frames in a single click. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/740832935938649295" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">CP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/740832935938649295" target="_blank">Color Palettes</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Find the best color palette from the huge list of best color palettes. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/735658738614175372" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">Cf</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/735658738614175372" target="_blank">Color filters...</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>A simple plugin that allows you to quick convert all the colors in you selected layers or frames. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/744725347356614754" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">DC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/744725347356614754" target="_blank">Dominant Color Toolkit</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Generate a palette from an image to magically populate your designs. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/740232388085828578" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">BC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/740232388085828578" target="_blank">Brands Colors</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Find the best color from the world's best brands and cool apps. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/739237058450529919" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/739237058450529919" target="_blank">Chroma</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Create bulk color styles from the selection. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/739800909357948721" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">G</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/739800909357948721" target="_blank">GradientiMe</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Simply generates a rectangle layer with the gradient selected. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/739475857305927370" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">CD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/739475857305927370" target="_blank">Color Designer</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>The plugin generates shades, tints, and color harmonies based on select layers or local styles. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/738840049488759901" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">IC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/738840049488759901" target="_blank">Invert Color</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Invert backgrounds, fills, strokes &amp; effects colors. Apply change to multiple selected shapes, texts, frames etc. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/754415266574382747" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">CC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/754415266574382747" target="_blank">Color Compass</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>This plugin was designed to make choosing colors a more accurate and efficient affair by generating interactive swatches using a single base color. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/755559299451656995" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">CC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/755559299451656995" target="_blank">Color Combinator</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>A Figma plugin for exploring different combinations of colors among elements. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/759433498184507623" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">CF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/759433498184507623" target="_blank">Chromatic Figma</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Lets you use other color spaces than RGB, such as Lab and Lch, to create good-looking and perceptually uniform gradients and color scales. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/741291546405622147" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/741291546405622147" target="_blank">Compliments</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Use this simple plugin to find complementary, split complementary, triad, tetrad, monochromatic, and analogous colors to a selected layer's fill. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/744287694483504163" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">Pt</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/744287694483504163" target="_blank">Photo to Palette</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Generates colour palette from selected images. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/739558587628004077" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">N</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/739558587628004077" target="_blank">Navigator</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>An easy way to find and apply color styles from your current document. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/744987207861965946" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">SP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/744987207861965946" target="_blank">Shadow Picker</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Quickly apply various shadows to layers with just 2 clicks. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://abdnahid.com" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">IC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://abdnahid.com" target="_blank">Instant Color</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Generate 470+ colors of Ant Design, Tailwind and Flutter in your artboard. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="alon.gruss+xdplug@gmail.com" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">RC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="alon.gruss+xdplug@gmail.com" target="_blank">Random Colors by Alon Gruss</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Randomly generated color objects! </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://t.me/savedata_space" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">mp</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://t.me/savedata_space" target="_blank">material palette</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>On-screen material palette </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/lukecjohnson/ColorSpark-for-XD" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/lukecjohnson/ColorSpark-for-XD" target="_blank">ColorSpark</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/masa-sumimoto/adobe-xd-color-scale" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">CS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/masa-sumimoto/adobe-xd-color-scale" target="_blank">Color Scale</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/mcoulthurst/xd-gds-palette/blob/master/README.md" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">Gp</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/mcoulthurst/xd-gds-palette/blob/master/README.md" target="_blank">GDS palette</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Import color palette used in the GOV.UK Design System. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="workdrive0306@gmail.com" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">cc</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="workdrive0306@gmail.com" target="_blank">create color palette</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>XD plugin for frontend engineer, Xd object to color palettes. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="mightyskeet@gmail.com" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">CG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="mightyskeet@gmail.com" target="_blank">Complex Gradients</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Several useful tools for gradient fills. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/peterflynn/xd-color-blender" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">CB</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/peterflynn/xd-color-blender" target="_blank">Color Blender</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Fill colors across a set of selected objects. Can also auto-create the intermediate objects by cloning if you only have two objects selected. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/aancuta/XD-chromaticPlugin" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">CG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/aancuta/XD-chromaticPlugin" target="_blank">Chromatic Gradients</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>This XD plugin lets you create an approximation of a gradient in other color spaces, like LAB. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://qooqee.com/crhelp" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">CR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://qooqee.com/crhelp" target="_blank">Color Ranger</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>ColorRanger gives you the power to adjust brightness, saturation, hue and color depth in one click. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="can@canpoyrazoglu.com" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="can@canpoyrazoglu.com" target="_blank">Select Same Color</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>When an item is selected, allows quick selection of items with the same fill, border, or shadow. Supports both solid colors and linear gradients. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="n.bhargavvenky@gmail.com" class="tool__asset" target="_blank" style="background-color: hsl(15.7, 86%, 85%); color: rgb(217, 152, 128);">MC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="n.bhargavvenky@gmail.com" target="_blank">Material Color Pallets</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>This Plugin Provides Material Color Pallets to Use in your Project. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="copy--paste">
			<header>
				<h3><a href="#copy-&amp;-paste">Copy &amp; Paste</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/wuwa/sketch-copy-to-all" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">Ct</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/wuwa/sketch-copy-to-all" target="_blank">Copy to All</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch - copy to all artboards plugin </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/delighted/sketch-duplicate-to-new-artboard" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">Dt</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/delighted/sketch-duplicate-to-new-artboard" target="_blank">Duplicate to New Artboard</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin to duplicate the current selection(s) to new artboard(s). </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/turbobabr/Duplicator" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">D</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/turbobabr/Duplicator" target="_blank">Duplicator</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch 3 plugin that takes the currently selected layers and copies them one or multiple times in a specified direction. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/keremciu/sketch-repeat" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">SR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/keremciu/sketch-repeat" target="_blank">Sketch Repeat</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>This plugin helps you easily duplicate your objects to all Artboards. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/FrancisVega/sketch-copy-paste-layout-settings" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">SC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/FrancisVega/sketch-copy-paste-layout-settings" target="_blank">Sketch Copy Paste Layout Settings</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Copy layout settings from one artboard and paste into multiples artboards. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/midiway/Clipboard2TilledFill" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">Ct</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/midiway/Clipboard2TilledFill" target="_blank">Clipboard to Tilled Fill</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Allows you to copy an image file from Finder (PNG, JPG) and set it as a tilled fill of selected shape(s). </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/yudiz-solutions/paste-direct" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">PD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/yudiz-solutions/paste-direct" target="_blank">Paste Direct</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Design like a guitarist! </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/AleLudovici/sketch-proportional-replicator" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">PR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/AleLudovici/sketch-proportional-replicator" target="_blank">Proportional Replicator</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>This plugin for Sketch takes the selected layer and create new rectangles with sizes proportional to it. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/kenmoore/Sketch-Better-Paste" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">BP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/kenmoore/Sketch-Better-Paste" target="_blank">Better Paste</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Paste like it was meant to be--into the artboard you're viewing. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/736564662640346811" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">CC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/736564662640346811" target="_blank">Component Cloner</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/735442706723922553" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/735442706723922553" target="_blank">Blend</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Blend plugin allows you to copy any object along the path. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/740097744539225981" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">Pt</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/740097744539225981" target="_blank">Paste to Fill</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Copy an image and paste it as fill on your selected layers. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/741413612560725424" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">Pt</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/741413612560725424" target="_blank">Paste to Mask</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Use your selected layers as Mask for the image in your clipboard. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/751760002167220558" class="tool__asset" target="_blank" style="background-color: hsl(198.8, 88%, 89%); color: rgb(145, 196, 219);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/751760002167220558" target="_blank">Multiply</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Quickly multiply a layer in rows, columns or both (grid) </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		<div class="promotion-banner-wrapper">
    <a class="promotion-banner -abstract" href="https://www.abstract.com/campaigns/collaboration/?&amp;utm_medium=Partner-Advertising&amp;utm_source=PA-Native-Digital&amp;utm_campaign=CY19-PA-FlawlessApp-1018-Sept12&amp;utm_term=designplugins&amp;utm_content=Sponsored">
        <div class="promotion-banner__logo -abstract">
            
        </div>
        <div class="promotion-banner__main">
            <h3 class="promotion-banner__title">Abstract</h3>
            <p class="promotion-banner__description">
                We centralize design decisions, feedback, Sketch files, and specs for your team.
            </p>
        </div>
        <button class="promotion-banner__link -abstract">
            Get a free, 14-day trial
        </button>
    </a>
</div></article>
<article id="data-generation">
			<header>
				<h3><a href="#data-generation">Data Generation</a></h3>
				
<div class="hidden-in-page">
    <p align="center">
        <a href="http://bit.ly/33Q3AC0">
            
        </a>
    </p>
</div>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/iconscout/icondrop" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">I</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/iconscout/icondrop" target="_blank">Iconscout</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	
 
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	
 
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Get access to 2 million+ icons, illustration, and stock images right into your design app.   </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Craigtut/liveplanet-sketch-datasupplier" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">l</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Craigtut/liveplanet-sketch-datasupplier" target="_blank">liveplanet-sketch-datasupplier</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Supply's real data from Live Planet's api to sketch for testing designs </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/vinceangeloni/jerryipsum" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">j</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/vinceangeloni/jerryipsum" target="_blank">jerryipsum</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Seinfeld data plugin for Sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ozgurgunes/Sketch-Turkish-Data" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">TD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ozgurgunes/Sketch-Turkish-Data" target="_blank">Turkish Data</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Turkish data supplier plugin. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://sketchairtabledataplugin.com/" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://sketchairtabledataplugin.com/" target="_blank">Airtabledata</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Use your Airtable data in your Sketch symbols </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/jdwolk/sketch-csv-mailmerge" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">CM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/jdwolk/sketch-csv-mailmerge" target="_blank">CSV Mail Merge</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A lightweight Sketch plugin for importing data from .csv files using "{}" text sections. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ahadik/chemofill" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">c</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ahadik/chemofill" target="_blank">chemofill</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Chemical Structure data supplier plugin. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/VKCOM/vkdata-sketchplugin" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">V</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/VKCOM/vkdata-sketchplugin" target="_blank">VK-Data</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A plugin for using data from your account at vk.com </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/hiradarshadi/PersianSupplier" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/hiradarshadi/PersianSupplier" target="_blank">PersianSupplier</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch Plugin for supplying dynamic Persian data. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/paintedbicycle/sketch-data-faker" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">SD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/paintedbicycle/sketch-data-faker" target="_blank">Sketch Data Faker</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch data plugin providing data for you mockups from Faker.js </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Ashung/Sketch-Stuffing" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">s</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Ashung/Sketch-Stuffing" target="_blank">stuffing</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A DataSupplier plugin which supplies Chinese data. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/smallmultiples/sketch-chippencharts" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">Cc</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/smallmultiples/sketch-chippencharts" target="_blank">Chippen charts</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/pavelkuligin/chart" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">c</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/pavelkuligin/chart" target="_blank">chart</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Create the most popular types of charts by real or random data </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/maximedegreve/TinyFaces-Sketch-Plugin" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/maximedegreve/TinyFaces-Sketch-Plugin" target="_blank">TinyFaces</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Fill the content with random avatars &amp; data </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/exevil/Sketch-Export-Text" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">SE</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/exevil/Sketch-Export-Text" target="_blank">Sketch Export Text</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>It helps you to save all text data on the current page in customizable format and filter the excess. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/levinmejia/sketch-shopify-data-populator" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/levinmejia/sketch-shopify-data-populator" target="_blank">Sketch Shopify Data Populator</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch App plugin to populate your designs with meaningful ecommerce data. Goodbye Lorem Ipsum. Hello JSON. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/kvendrik/sketch-json-parser" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">SJ</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/kvendrik/sketch-json-parser" target="_blank">Sketch JSON Parser</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Replaces layer values in groups with JSON data </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/preciousforever/sketch-data-populator" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">SD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/preciousforever/sketch-data-populator" target="_blank">Sketch Data Populator</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch App plugin to populate your documents with meaningful data. Goodbye Lorem Ipsum. Hello JSON. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/kumo/sketch-mail-merge" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">MM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/kumo/sketch-mail-merge" target="_blank">Mail Merge</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that allows you to duplicate a layer/artboard and replace the text with CSV data. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/timuric/Content-generator-sketch-plugin" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">CG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/timuric/Content-generator-sketch-plugin" target="_blank">Content Generator</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch app plugin for generating dummy data such as avatars, names, photos, geo data etc. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://thetylerwolf.github.io/sketch-data-studio" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">SD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://thetylerwolf.github.io/sketch-data-studio" target="_blank">Sketch Data Studio</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin to generate charts and data for data tables. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/3raxton/foreignipsum" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">FI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/3raxton/foreignipsum" target="_blank">Foreign Ipsum</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Generate text for your mockups in multiple languages. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/fliptopbox/random-ipsom" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">RI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/fliptopbox/random-ipsom" target="_blank">Random Ipsom</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/JJYing/fake-chinese-name-for-sketch" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">FC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/JJYing/fake-chinese-name-for-sketch" target="_blank">Fake Chinese Name for Sketch</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Generate Chinese names for text layers. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/freeauto/sketch-lorem-ipsum-2017" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">SL</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/freeauto/sketch-lorem-ipsum-2017" target="_blank">Sketch Lorem Ipsum 2017</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin to generate "lorem ipsum" text. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Rezaaa/english-and-persian-lorem-ipsum" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">Ea</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Rezaaa/english-and-persian-lorem-ipsum" target="_blank">English and Persian Lorem Ipsum</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch extension to generate English and Persian lorem ipsum text. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/zcallan/sketch-bacon-ipsum" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">BI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/zcallan/sketch-bacon-ipsum" target="_blank">Bacon Ipsum</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A simple &amp; easy Bacon Ipsum text generator for Sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/kd-co/charapara-sketch-extension" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">c</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/kd-co/charapara-sketch-extension" target="_blank">charapara</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Charapara, an initiative by Kerala Designers Collaborative (KDCo), is a dummy text generator for Malayalam </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/jonathasbsouza/brdata" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/jonathasbsouza/brdata" target="_blank">BRData</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Gerador de dados contextualizados com a realidade brasileira. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/BohemianCoding/sketch-ipsum" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">SI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/BohemianCoding/sketch-ipsum" target="_blank">Sketch Ipsum</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A DataSupplier plugin that fills your text layers with random Lorem Ipsum </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/perrysmotors/sketch-unsplasher" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">U</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/perrysmotors/sketch-unsplasher" target="_blank">Unsplasher</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Fills shapes or symbols with images from Unsplash </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/jacopocolo/p5-sketchplugin" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">PS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/jacopocolo/p5-sketchplugin" target="_blank">P5 Sketchplugin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A plugin for using p5.js code inside Sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/konki-vienna/jane_doe" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">JD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/konki-vienna/jane_doe" target="_blank">Jane Doe</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>This Sketch Data plugin adds localized profile names (powered by uinames.com) to your design. - Get diversity into your content. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.shutterstock.com/explore/shutterstock-sketch-plugin" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.shutterstock.com/explore/shutterstock-sketch-plugin" target="_blank">Shutterstock</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Access Shutterstock's stunning images without leaving your workspace. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Ashung/design-systems" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">DS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Ashung/design-systems" target="_blank">Design Systems</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>It helps you find out popular design systems and download the official Sketch UI kit. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/tylergaw/day-player" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">DP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/tylergaw/day-player" target="_blank">Day Player</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A collection of Sketch Plugins for creating placeholder images. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/littlebusters/JSON-to-Layers" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">Jt</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/littlebusters/JSON-to-Layers" target="_blank">JSON to Layers</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Convert to Layers on Sketch from JSON (with Fireworks PNG structure). </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/mmth/sketch-artwork-fetcher" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">AF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/mmth/sketch-artwork-fetcher" target="_blank">Artwork Fetcher</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/soulchild/sketch-logo-fetcher" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">LF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/soulchild/sketch-logo-fetcher" target="_blank">Logo Fetcher</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Place logos from either the Logos API (SVG format) or Clearbit API (PNG format) </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/fhuel/Unsplash-It-Sketch" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">UI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/fhuel/Unsplash-It-Sketch" target="_blank">Unsplash It</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A plugin to quickly include great-looking image from Unsplash.com in your Sketch projects.  </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/bshorta/date-generator-sketch" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">DG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/bshorta/date-generator-sketch" target="_blank">Date Generator</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A random date generator plugin for Sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/sagishrieber/sketch-any-icon-fetcher" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">SI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/sagishrieber/sketch-any-icon-fetcher" target="_blank">Sketch Icon Fetcher</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>This plugin will let you insert any website's favicon, or iOS/Android app's icon into your design </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/contentsync/SketchContentSync" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/contentsync/SketchContentSync" target="_blank">SketchContentSync</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sync sketch files with google docs. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/reneepadgham/diverseui-sketch-plugin" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">DU</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/reneepadgham/diverseui-sketch-plugin" target="_blank">Diverse UI Sketch Plugin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>The official Sketch plugin for Diverse UI. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Iconscout/logodrop" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">L</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Iconscout/logodrop" target="_blank">Logodrop</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch Plugin to get brand logos right into Sketch App. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/okcoker/Drake-Sketch-Plugin" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">D</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/okcoker/Drake-Sketch-Plugin" target="_blank">Drake</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin for generating dummy Drake content such as photos and lyrics. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/pravdomil/Sketch-cats" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">SC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/pravdomil/Sketch-cats" target="_blank">Sketch Cats</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Render layers in Sketch as various images of cats </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/designforhuman/event-badges-by-david" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">EB</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/designforhuman/event-badges-by-david" target="_blank">Event Badges By David</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin to make a large number of name tags for any kind of events </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/markaleksanderh/100-shapesum" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">1S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/markaleksanderh/100-shapesum" target="_blank">100 Shapesum</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Lorem Ipsum Sketch plugin based on 100 Shapes tone of voice. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/realvjy/uiLogos-sketch-plugin" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">u</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/realvjy/uiLogos-sketch-plugin" target="_blank">uiLogos</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Insert professionally designed dummy logos of companies. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/sunkibaek/Seoul" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/sunkibaek/Seoul" target="_blank">Seoul</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A sketch data supplier plugin for random Korean names. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/idriesalbender/iban-sketch-plugin" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">IG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/idriesalbender/iban-sketch-plugin" target="_blank">IBAN Generator</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Generate random International Bank Account Numbers (IBAN) </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/YannickWidmer/sketch_strings_puller" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">SV</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/YannickWidmer/sketch_strings_puller" target="_blank">String Value Puller</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A plugin to handle pull string values from github repositories. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/maxdavid/sketch-foodreau" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">f</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/maxdavid/sketch-foodreau" target="_blank">foodreau</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A data supplier plugin for populating designs with real food recipes. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/brandfolder/sketch-plugin-brandfolder" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/brandfolder/sketch-plugin-brandfolder" target="_blank">Brandfolder</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Easily use your digital assets from Brandfolder right within your favorite platform for digital design! </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/wousser/SketchExcelContentSync" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">EC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/wousser/SketchExcelContentSync" target="_blank">Excel Content Sync</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Decouple and Sync multi-language content between Excel and Sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/738454987945972471" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">U</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/738454987945972471" target="_blank">Unsplash</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Insert beautiful images from Unsplash straight into your designs. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/731627216655469013" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">CR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/731627216655469013" target="_blank">Content Reel</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Need content for your layouts? Content Reel helps you easily pull text strings, avatars and icons into your designs. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/736000994034548392" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">Li</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/736000994034548392" target="_blank">Lorem ipsum</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Generate ‘Lorem ipsum’ to fill your text layers with dummy text. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/735770583268406934" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">GS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/735770583268406934" target="_blank">Google Sheets Sync</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Sync content from Google Sheets directly into your Figma file. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/739659977030056719" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/739659977030056719" target="_blank">Avatars</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Add random user avatars to your designs with one click. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/733590967040604714" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/733590967040604714" target="_blank">Brandfetch</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Tired of looking for a company's logo? Check this plugin.</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/735922920471082658" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">TG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/735922920471082658" target="_blank">Table Generator</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Table Generator plugin automates the addition of tabular data. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/739503328703046360" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">Hf</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/739503328703046360" target="_blank">Humaaans for Figma</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>This plugin brings the amazing illustrations library called Humaaans by Pablo Stanley to Figma. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/740286071386014712" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">DL</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/740286071386014712" target="_blank">Data Lab</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Paste random or real data into text layers and components easily. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/735650288109030027" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">QC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/735650288109030027" target="_blank">QR Code Generator</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>‘QR Code Generator’ helps you to quickly create a Vector QR code. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/745428728979155171" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/745428728979155171" target="_blank">Photos</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Search and insert photos from Flickr into your Figma files. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/742770131320902341" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">RN</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/742770131320902341" target="_blank">Random Name Generator</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/742039398983091764" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">LI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/742039398983091764" target="_blank">Lorem Ipsum Generator</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Lorem Ipsum Generator, with two clicks generates random text in Figma. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://janisrozenfelds.com/user-profile-plugin" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">UP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://janisrozenfelds.com/user-profile-plugin" target="_blank">User Profile</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	
 
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Enables designers to display beautiful generated avatars in your design prototype.  </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/746656816456492537" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">Ag</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/746656816456492537" target="_blank">Avatars generator</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Avatars Generator creates unique, AI-generated photos of a fictional persons. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/751874861800404329" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">SD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/751874861800404329" target="_blank">Smart Data</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Smart Data inserts random data according to the text layer name. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/741940457537193498" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">At</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/741940457537193498" target="_blank">Airtable to Figma</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>This plugin allows you to effortlessly pull text and images from an Airtable database and inject them straight into your Figma components. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/754386961063964303" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">ST</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/754386961063964303" target="_blank">Simple Table Generator</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>This plugin generate tables with information from Excel/Google Sheet. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/759249283654441170" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">DF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/759249283654441170" target="_blank">Data From Local</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Insert data from local TXT files or images. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/761525248810814854" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">RK</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/761525248810814854" target="_blank">Random Key Generator</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Quickly generate a random data string with alphabets, numerals, and symbols depending on your needs for use as IDs and secrets in your mocks. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/749888869584535589" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/749888869584535589" target="_blank">Flags</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Add country flags to your Figma designs. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/749195619095691211" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">JP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/749195619095691211" target="_blank">JSON Populate</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Use your own real JSON data to populate your text layers. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/755929849994721127" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">s</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/755929849994721127" target="_blank">sigils</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Sigils is an avatar generated for Urbit IDs. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/736612173445813953" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/736612173445813953" target="_blank">Figmoji</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Add emojis seamlessly onto your designs. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/758316324890482782" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">TM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/758316324890482782" target="_blank">Table Master 3000</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Easily switch between column work and row work. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://twitter.com/ispykenny" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">PI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://twitter.com/ispykenny" target="_blank">Placeholder Image</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Placeholder Image for your designs and wireframes. All images are provided by https://placeholder.com/ </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="amirzenoozi72@gmail.com" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">UR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="amirzenoozi72@gmail.com" target="_blank">Unsplash Random Image</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>This plugin just generate a random image for your design </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://uifaces.co/tpdne-plugin" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">TP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://uifaces.co/tpdne-plugin" target="_blank">This Person Does Not Exist</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://xdplugins.pabloklaschka.de/support#Lorem" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">LI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://xdplugins.pabloklaschka.de/support#Lorem" target="_blank">Lorem Ipsum</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>A small plugin to insert placeholder text that fits your needs. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://nurecas.com/wikify-a-plugin-for-adobe-xd" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">W</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://nurecas.com/wikify-a-plugin-for-adobe-xd" target="_blank">Wikify</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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.) </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="jakovcevski@gmail.com" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">MP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="jakovcevski@gmail.com" target="_blank">Movie Posters</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Import movie posters in your designs with a click. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/realvjy/uilogos-XD" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">u</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/realvjy/uilogos-XD" target="_blank">uilogos</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>UiLogos allow you to Insert professionally designed dummy logos of company and 190+ Country flags directly into mockup. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="mail@dpandey.com.np" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">UI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="mail@dpandey.com.np" target="_blank">User Images</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>This plugin fills selected shapes with random user photos using randouser.me's API. Plugin needs internet connection on your machine to work. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://support.airtable.com/hc/en-us/articles/360009887334" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://support.airtable.com/hc/en-us/articles/360009887334" target="_blank">Airtable</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://googlesheetsforadobexd.impekable.com" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">GS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://googlesheetsforadobexd.impekable.com" target="_blank">Google Sheets</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>A plugin that enables designers within XD to enrich their designs with real content and data from Google Sheets. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="andreea.marica11@yahoo.com" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="andreea.marica11@yahoo.com" target="_blank">ContentGenerator</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>A content Generator plugin helps you generate randomised content for your design. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="feedback@datapopulator.com" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">DP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="feedback@datapopulator.com" target="_blank">Data Populator</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>A plugin to populate your design mockups with meaningful data. Goodbye Lorem Ipsum. Hello JSON. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="agata@chuwa-print.co.jp" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">QC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="agata@chuwa-print.co.jp" target="_blank">QR Code Maker for XD</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Create QR Code in the current document. This plugin will work 8 bit binary mode with UTF-8. The error level will set low. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://uifaces.co" class="tool__asset" target="_blank" style="background-color: hsl(71.7, 97%, 83%); color: rgb(201, 222, 118);">UF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://uifaces.co" target="_blank">UI Faces</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	
 
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Avatars for design mockups.  </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</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">
			<header>
				<h3><a href="#developers-handoff">Developers Handoff</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/utom/sketch-measure" class="tool__asset" target="_blank" style="background-color: hsl(271, 93%, 93%); color: rgb(193, 162, 222);">SM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/utom/sketch-measure" target="_blank">Sketch Measure</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://tudou527.github.io/marketch/" class="tool__asset" target="_blank" style="background-color: hsl(271, 93%, 93%); color: rgb(193, 162, 222);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://tudou527.github.io/marketch/" target="_blank">Marketch</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch 3 plug-in for automatically generating html page that can measure and get CSS styles on it. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://sympli.io" class="tool__asset" target="_blank" style="background-color: hsl(271, 93%, 93%); color: rgb(193, 162, 222);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://sympli.io" target="_blank">Sympli</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	
 
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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.  </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://avocode.com/download?origin=sketch" class="tool__asset" target="_blank" style="background-color: hsl(271, 93%, 93%); color: rgb(193, 162, 222);">AS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://avocode.com/download?origin=sketch" target="_blank">Avocode Sketch Plugin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sync Sketch designs to Avocode. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/inker8/sketch-plugin" class="tool__asset" target="_blank" style="background-color: hsl(271, 93%, 93%); color: rgb(193, 162, 222);">I</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/inker8/sketch-plugin" target="_blank">Inker8</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A spec exporter for Sketch which can copy text/css/svg icons with only one click. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/BriteSnow/sketch-storyboard" class="tool__asset" target="_blank" style="background-color: hsl(271, 93%, 93%); color: rgb(193, 162, 222);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/BriteSnow/sketch-storyboard" target="_blank">Sketch Storyboard</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Export a full story flow and dev spec in one shortcut. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/nahitheper/SwiftColorPalette" class="tool__asset" target="_blank" style="background-color: hsl(271, 93%, 93%); color: rgb(193, 162, 222);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/nahitheper/SwiftColorPalette" target="_blank">SwiftColorPalette</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that generates Swift Color Theme with enums </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://idoc.mockplus.com/download/sketch" class="tool__asset" target="_blank" style="background-color: hsl(271, 93%, 93%); color: rgb(193, 162, 222);">Mi</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://idoc.mockplus.com/download/sketch" target="_blank">Mockplus iDoc</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	
 
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Generating Assets and Specs Automatically, Make Design Collaboration Easier  </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://lanhuapp.com/mac" class="tool__asset" target="_blank" style="background-color: hsl(271, 93%, 93%); color: rgb(193, 162, 222);">LA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://lanhuapp.com/mac" target="_blank">Lanhu App</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Automatic generate specs for developers and share assets </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/tadija/AEIconizer" class="tool__asset" target="_blank" style="background-color: hsl(271, 93%, 93%); color: rgb(193, 162, 222);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/tadija/AEIconizer" target="_blank">AEIconizer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>IOS icon generator plugin for Bohemian Coding Sketch app. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://zeplin.io" class="tool__asset" target="_blank" style="background-color: hsl(271, 93%, 93%); color: rgb(193, 162, 222);">Z</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://zeplin.io" target="_blank">Zeplin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Zeplin Sketch Plugin. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://modao.cc/sketch" class="tool__asset" target="_blank" style="background-color: hsl(271, 93%, 93%); color: rgb(193, 162, 222);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://modao.cc/sketch" target="_blank">MockingBot</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>MockingBot Sketch Plugin, Your sweet Sketch companion making your handoff process more efficient than ever </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/739918456607459153" class="tool__asset" target="_blank" style="background-color: hsl(271, 93%, 93%); color: rgb(193, 162, 222);">FM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/739918456607459153" target="_blank">Figma Measure</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>A plugin for easy measurement of sizes. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/inker8/xd-plugin" class="tool__asset" target="_blank" style="background-color: hsl(271, 93%, 93%); color: rgb(193, 162, 222);">i</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/inker8/xd-plugin" target="_blank">inker8</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Export design spec to measure positions, copy CSS and export icons. Make writing CSS and UI fun. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="document-optimisation">
			<header>
				<h3><a href="#document-optimisation">Document Optimisation</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/monzo/file-cleaner" class="tool__asset" target="_blank" style="background-color: hsl(4.4, 36%, 85%); color: rgb(199, 149, 145);">FC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/monzo/file-cleaner" target="_blank">File Cleaner</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Keep your Sketch files immaculately clean and in order. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://www.sketchcleaner.com/" class="tool__asset" target="_blank" style="background-color: hsl(4.4, 36%, 85%); color: rgb(199, 149, 145);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://www.sketchcleaner.com/" target="_blank">SketchCleaner</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that helps you get your design files as clean as a whistle. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/swiadek/pixel-perfecter-sketch-plugin" class="tool__asset" target="_blank" style="background-color: hsl(4.4, 36%, 85%); color: rgb(199, 149, 145);">PP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/swiadek/pixel-perfecter-sketch-plugin" target="_blank">Pixel Perfecter</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Pixel-perfecter helps you find pixel imperfect layers in your documents. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/stackdevelopment/sketch-pixel-cleanup" class="tool__asset" target="_blank" style="background-color: hsl(4.4, 36%, 85%); color: rgb(199, 149, 145);">SP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/stackdevelopment/sketch-pixel-cleanup" target="_blank">Sketch Pixel Cleanup</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A plugin for Sketch to fix all of those partial pixels </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/bomberstudios/Cleanup-Useless-Groups" class="tool__asset" target="_blank" style="background-color: hsl(4.4, 36%, 85%); color: rgb(199, 149, 145);">CU</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/bomberstudios/Cleanup-Useless-Groups" target="_blank">Cleanup Useless Groups</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that cleans up your layer list by removing empty groups and flattening deeply nested groups. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/madwaro/MiseEnPlace" class="tool__asset" target="_blank" style="background-color: hsl(4.4, 36%, 85%); color: rgb(199, 149, 145);">ME</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/madwaro/MiseEnPlace" target="_blank">Mise En Place</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plug-in that helps you prep before you start cooking your designs. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/sonburn/unused-style-remover" class="tool__asset" target="_blank" style="background-color: hsl(4.4, 36%, 85%); color: rgb(199, 149, 145);">US</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/sonburn/unused-style-remover" target="_blank">Unused Style Remover</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Remove the unused layer and text styles. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ErikFontanel/sketch-remove-all-disabled-styles" class="tool__asset" target="_blank" style="background-color: hsl(4.4, 36%, 85%); color: rgb(199, 149, 145);">Ra</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ErikFontanel/sketch-remove-all-disabled-styles" target="_blank">Remove all Disabled Styles</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A simple plugin that removes all disabled styles from all layers in the current selection. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/750292779381900360" class="tool__asset" target="_blank" style="background-color: hsl(4.4, 36%, 85%); color: rgb(199, 149, 145);">DH</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/750292779381900360" target="_blank">Delete Hidden Layers</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Delete all hidden layers (also locked) at the current page except layers in components. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="document-organisation">
			<header>
				<h3><a href="#document-organisation">Document Organisation</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/BaguetteEngineering/annotations-sketch-plugin" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/BaguetteEngineering/annotations-sketch-plugin" target="_blank">Annotations</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Hide/show layer groups named 'Annotations'. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://getcontext.app" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">Cf</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://getcontext.app" target="_blank">Context for Sketch</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Add to your document pins linking to prototypes, inspirations, examples or anything else on the web. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://marcosvid.al/sketch-notebook" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">SN</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://marcosvid.al/sketch-notebook" target="_blank">Sketch Notebook</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch Plugin to make documenting design easier. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/andrewdbass/Todo-Sketch-Plugin" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">TS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/andrewdbass/Todo-Sketch-Plugin" target="_blank">Todo Sketch Plugin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Simple tool to create todo notes for your sketch file </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://reinvently.com/moodboard-builder-sketch-plugin/" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">MB</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://reinvently.com/moodboard-builder-sketch-plugin/" target="_blank">Moodboard Builder </a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>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! 💡 </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/cshdllr/Notes" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">N</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/cshdllr/Notes" target="_blank">Notes</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A sketch plugin for taking notes </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://sketchfocus.com" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">SF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://sketchfocus.com" target="_blank">Sketch Focus</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A new plugin for Sketch that boosts your productivity by keeping you on-task. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/jacopocolo/changelog.sketchplugin" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/jacopocolo/changelog.sketchplugin" target="_blank">Changelog</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A simple Sketch plugin to generate artboard-based changelogs </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/zhongerxin/PinLog" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/zhongerxin/PinLog" target="_blank">PinLog</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A plugin that would help you note your changeLog and can help other people to find the change in sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/747822968977461925" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/747822968977461925" target="_blank">Todo</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Simple todo list plugin to check off your tasks inside Figma! </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/739527655081183968" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">N</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/739527655081183968" target="_blank">Notepad</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Use Notepad to add a place for notes to your Figma documents. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/732774680197470712" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">FF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/732774680197470712" target="_blank">Figma Format</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Lets you format your canvas by grouping them by the  names. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/732617369306910191" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">L</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/732617369306910191" target="_blank">LayerMaid</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>LayerMaid will go through the entire layer panel and organize it; top to bottom, left to right. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/747372158567878238" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">PS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/747372158567878238" target="_blank">Project Scaffold</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>This plugin Generates a Scaffold for your Product design project in just 1 click. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/748783469068559194" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">Lt</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/748783469068559194" target="_blank">Link to Documentation</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Open documentation pages from your components. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/761641569499378065" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">wi</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/761641569499378065" target="_blank">work in progress</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>The plugin quickly marks layouts that are in work or don’t approve finally. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/739089407370404321" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">V</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/739089407370404321" target="_blank">Visibility</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Changes the visibility of objects with a name that includes "~visibility" </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="contact@starlit-studio.com" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">PN</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="contact@starlit-studio.com" target="_blank">Page No</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Automatically insert page numbers into your artboards based on their arrangement. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://tourdexd.com/plugin/notes-and-annotations/" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">Na</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://tourdexd.com/plugin/notes-and-annotations/" target="_blank">Notes and Annotations</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.derekknox.com/articles/bookmarks-adobe-xd-plugin" class="tool__asset" target="_blank" style="background-color: hsl(14.6, 95%, 83%); color: rgb(219, 142, 116);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.derekknox.com/articles/bookmarks-adobe-xd-plugin" target="_blank">Bookmarks</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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 </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="layout--padding">
			<header>
				<h3><a href="#layout-&amp;-padding">Layout &amp; Padding</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/fuggfuggfugg/sketch-dynamic-button-3.5" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">Db</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/fuggfuggfugg/sketch-dynamic-button-3.5" target="_blank">Dynamic button plugin for Sketch.app 3.5</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Dynamic button plug-in for Sketch.app 3.5 allows you to create buttons with fixed paddings no matter what text you add. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/herrkris/sketch-dynamic-symbol-button" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">DS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/herrkris/sketch-dynamic-symbol-button" target="_blank">Dynamic Symbol Button</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Adds the ability to have dynamic symbol buttons that resizes when the text changes. ![sketch.svg](https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Media/sketch.svg</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/DWilliames/paddy-sketch-plugin" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/DWilliames/paddy-sketch-plugin" target="_blank">Paddy</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Automated padding, spacing, and alignment for your Sketch layers </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/novemberfiveco/symbol-spacer-sketch-plugin" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/novemberfiveco/symbol-spacer-sketch-plugin" target="_blank">Symbol Spacer Sketch Plugin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Automatically resize spacing symbols to correct size when changing to a different one </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/kenmoore/Sketch-Relabel-Button" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">RB</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/kenmoore/Sketch-Relabel-Button" target="_blank">Relabel Button</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Update a button's label and it gets resized automatically, preserving existing padding. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://animaapp.github.io/Auto-Layout/" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">AL</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://animaapp.github.io/Auto-Layout/" target="_blank">Auto Layout</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Responsive design inside Sketch. Design for all screen sizes on one artboard. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/bouchenoiremarc/Sketch-Constraints" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">SC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/bouchenoiremarc/Sketch-Constraints" target="_blank">Sketch Constraints</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A plugin that integrates constraints in Sketch to layout layers. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/materik/sketchplugin-pixelperfect" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">PP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/materik/sketchplugin-pixelperfect" target="_blank">Pixel Perfect</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Plugin for Sketch for handling layout and sizing of layers automatically based on their names. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/romashamin/compo-sketch" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/romashamin/compo-sketch" target="_blank">Compo</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Makes it easier to work with interface components in Sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ErikFontanel/sketch-toggle-constrain-proportions" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">TC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ErikFontanel/sketch-toggle-constrain-proportions" target="_blank">Toggle Constrain Proportions</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Toggles the constrain proportions setting with keyboard shortcut ⌘ + P. Sketch v39+ compatible. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/KikeSz/Method-Sketch-Plugin" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/KikeSz/Method-Sketch-Plugin" target="_blank">Method</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Tool to apply your methodology systems </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/hrescak/Sketch-Flex-Layout" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">SF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/hrescak/Sketch-Flex-Layout" target="_blank">Sketch Flex Layout</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Plugin for Sketch allowing for CSS Flexbox layouts using stylesheets and prototypes. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/732240841094697441" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">V</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/732240841094697441" target="_blank">Viewports</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/734548932196004433" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/734548932196004433" target="_blank">Paddet</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Paddet is a small tool that will help you automatically apply padding to frames. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/743654854885744527" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">R</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/743654854885744527" target="_blank">Responsify</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>A Figma plugin to quickly test your designs across multiple device sizes. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/734140091470043718" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">DC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/734140091470043718" target="_blank">Dynamic Component Resizer</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/746314565953874339" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/746314565953874339" target="_blank">Paddi</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Paddi helps you to set paddings for a Group, a Frame, or a Component. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/755300155155835622" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/755300155155835622" target="_blank">AutoLayout</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>AutoLayout dynamically lays out layers in frames and updates the layout when the dimensions of child layers change. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/745754288876102954" class="tool__asset" target="_blank" style="background-color: hsl(35.3, 95%, 81%); color: rgb(219, 173, 107);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/745754288876102954" target="_blank">Stacks</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Stacks provide extensive, semi-automated control over the spacing, direction, and alignment of layers. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="export">
			<header>
				<h3><a href="#export">Export</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/d4rekanguok/sketch-slicer" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/d4rekanguok/sketch-slicer" target="_blank">Sketch Slicer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Create slice layers from selected layers, with padding or set a fixed size. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ozzik/slicer" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">s</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ozzik/slicer" target="_blank">slicer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Your friendly Sketch slicing helper </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/here-erhe/Design-Token-Exporter" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">DT</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/here-erhe/Design-Token-Exporter" target="_blank">Design Token Exporter</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Simple Design Token Exporter </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/mascardoso/sketch-export" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">s</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/mascardoso/sketch-export" target="_blank">sketch-export-to</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Export an artboard layer to json or markdown </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/deepakshrma/sketch-slice-it" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">s</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/deepakshrma/sketch-slice-it" target="_blank">slice-it</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Slice-it tool, Export the slices from the local sketch file in png, jpeg, svg </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/fragmentlv/drafta" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">D</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/fragmentlv/drafta" target="_blank">Drafta</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Export designs directly to Drafta </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/CaravelDesign/caravel.sketchplugin" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/CaravelDesign/caravel.sketchplugin" target="_blank">Caravel</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Export your artboards directly to Caravel projects. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/mcansh/squash-sketchplugin" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/mcansh/squash-sketchplugin" target="_blank">Squash</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Export and optimize images with Realmac Squash </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ImageOptim/sketch-plugin" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">IS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ImageOptim/sketch-plugin" target="_blank">ImageOptim Sketch Plugin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Plugin for Sketch that compresses exported images using ImageOptim. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/marianomike/sketch-exportsymbols" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">ES</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/marianomike/sketch-exportsymbols" target="_blank">Export Symbols</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch Plugin that exports all symbols as pngs to a specified folder </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Ashung/Android_Res_Export" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">AR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Ashung/Android_Res_Export" target="_blank">Android Res Export</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Export Android resources in Sketch, include PNG assets, app icon, nine-patch image and vector drawable. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://atomic.io/sketch" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">AS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://atomic.io/sketch" target="_blank">Atomic Sketch Plugin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Exports Sketch Files to Atomic </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/jawayang/Sketch-Base64-PNG-Export" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">BP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/jawayang/Sketch-Base64-PNG-Export" target="_blank">Base64 PNG Export</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin for Export Data URI </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/kodlian/IconSlate-sketchplugin" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">I</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/kodlian/IconSlate-sketchplugin" target="_blank">IconSlate</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Export icons (icns,ico,...) from Sketch using Icon Slate. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://indigo.infragistics.com/sketch-home" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">Et</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://indigo.infragistics.com/sketch-home" target="_blank">Export to Indigo</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Generate Indigo Studio projects from your artboards to create interactive, animated prototypes. Get real user feedback through included usability studies with video replays. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/udi-gindi/sendTo" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">s</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/udi-gindi/sendTo" target="_blank">sendTo</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Export layer as an email attachment </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/charliecm/sketch-page-export" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">PE</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/charliecm/sketch-page-export" target="_blank">Page Export</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A simple Sketch plugin for exporting page(s). </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/StyleShare/Gretel" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">G</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/StyleShare/Gretel" target="_blank">Gretel</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that flattens files after exporting. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/funfungo/ImageCodeExporter" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">I</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/funfungo/ImageCodeExporter" target="_blank">ImageCodeExporter</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A plugin that exports your sketch layer for code usage </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/mLihs/svg-bem" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/mLihs/svg-bem" target="_blank">SVG-BEM</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>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 </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/TheSonOfThomp/Batch-Export-Rename" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">r</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/TheSonOfThomp/Batch-Export-Rename" target="_blank">rename-export</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Use this plugin to batch export layers with consistent filenames </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/melsomino/sketch-somino" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/melsomino/sketch-somino" target="_blank">Somino</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Attachable styles, Advanced clipboard, Silent export </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/buba447/Lottie-Sketch-Export" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">LS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/buba447/Lottie-Sketch-Export" target="_blank">Lottie Sketch Export</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Native Sketch plugin for exporting Artboards and Symbols into Lottie JSON </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/naoyawatanabe/awesome-image-compressor" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">AI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/naoyawatanabe/awesome-image-compressor" target="_blank">Awesome Image Compressor</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Compress exported image assets </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/BohemianCoding/sketch-image-compressor" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">SI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/BohemianCoding/sketch-image-compressor" target="_blank">Sketch Image Compressor</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Plugin that compresses bitmap assets, right when you export them. This Plugin <em>requires</em> Sketch 3.8. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/levtolstoi/Nucleus" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">N</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/levtolstoi/Nucleus" target="_blank">Nucleus</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Plugin for creating Atomic Design concept in Sketch and export scss-map for front-end </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/alexjlockwood/sketch2vd" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">s</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/alexjlockwood/sketch2vd" target="_blank">sketch2vd</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that exports selected layers to VectorDrawable for Android. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/josephmcasey/sketch-plugin-svgo-unique-id" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">SE</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/josephmcasey/sketch-plugin-svgo-unique-id" target="_blank">SVGO Export</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Uses SVGO to compress exported SVG assets </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/oodesign/icon-tools" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">IT</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/oodesign/icon-tools" target="_blank">Icon Tools</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch.app plugin to clean icons and to prepare them for a clean export without tints and masks. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/MattCowBoy/giancartboard" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">g</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/MattCowBoy/giancartboard" target="_blank">giancartboard</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin to export artboards in folders automatically numbered </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://websiddu.github.io/sync-to-slides/" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">ST</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://websiddu.github.io/sync-to-slides/" target="_blank">Sync To Slides</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sync to Slides is a Sketch plugin that will help you upload your artboards to Google Slides directly without an export step </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/vconesa/justinmind-sketch" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">JS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/vconesa/justinmind-sketch" target="_blank">Justinmind Sketch</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>You can export artboards, layers, and pages you’ve made in Sketch to Justinmind and turn them into interactive shareable prototypes. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/bigxixi/Sketch2AE" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/bigxixi/Sketch2AE" target="_blank">Sketch2AE</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin to export sketch file to Adobe After Effect </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/work4blue/sketch-app-asset-export" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">AA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/work4blue/sketch-app-asset-export" target="_blank">App Asset Export</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch3 plugin, One key export Android/iOS App icons. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/nathco/Export-More" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">EM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/nathco/Export-More" target="_blank">Export More</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch.app plugin for exporting ICNS and GIFs </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/nilshoenson/shared-text-styles" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">ST</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/nilshoenson/shared-text-styles" target="_blank">Shared Text Styles</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Easily import and export your Text Styles in Sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/JoeManto/Sheetie" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/JoeManto/Sheetie" target="_blank">Sheetie</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch 3 Plugin that makes a SpriteSheets to export or use </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/screenfork/ScreenFork" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/screenfork/ScreenFork" target="_blank">ScreenFork</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>ScreenFork is the Sketchapp plugin that export screens and their variants based on Layer prefix </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://sketchapp.com/extensions/plugins/svgo-compressor/" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">SC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://sketchapp.com/extensions/plugins/svgo-compressor/" target="_blank">SVGO Compressor</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Plugin that compresses SVG assets using SVGO, right when you export them. This Plugin requires Sketch 3.8. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/kang-chen/sketch-export-generator" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">SE</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/kang-chen/sketch-export-generator" target="_blank">Sketch Export Generator</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin to export assets at different scale sizes </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://proto.io" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">Et</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://proto.io" target="_blank">Export to Proto.io</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/devxoul/sketch-export-sizes-generator" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">SE</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/devxoul/sketch-export-sizes-generator" target="_blank">Sketch Export Sizes Generator</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A simple plugin for Sketch that generates export sizes of layers. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/jonmmay/sketch-scrollmotion" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/jonmmay/sketch-scrollmotion" target="_blank">ScrollMotion</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin to export ScrollMotion </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/bunguu/SketchExportForRepliaPlugin" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">Ef</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/bunguu/SketchExportForRepliaPlugin" target="_blank">Export for Replia</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch Plugins to export selected artboard or layers for Replia. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/abynim/Xport" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">X</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/abynim/Xport" target="_blank">Xport</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch Plugin to export image assets directly to Xcode </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/nickstamas/Sketch-Better-Android-Export" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">BA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/nickstamas/Sketch-Better-Android-Export" target="_blank">Better Android Export</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A plugin for exporting layers for Android. Supports transparency and 1x and 2x base sizes. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/elihorne/smartboards" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">s</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/elihorne/smartboards" target="_blank">smartboards</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Smartboards aims to make managing and exporting artboards easier in Sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/GeertWille/sketch-export-assets" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">EA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/GeertWille/sketch-export-assets" target="_blank">Export Assets</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that allows you to quickly export assets for Android, iOS, Windows Phone, and the Web. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/emrerussia/sketch-clear-export-options" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">CE</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/emrerussia/sketch-clear-export-options" target="_blank">Clear Export Options</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Clear export options for all elements on all pages in a Sketch file. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://timeline.animaapp.com" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://timeline.animaapp.com" target="_blank">Timeline</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Create beautiful timeline animations and export GIF or MP4 </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/richardgazdik/sketch-quickexport" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">QE</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/richardgazdik/sketch-quickexport" target="_blank">Quick Export as PNG</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Quick Export layers/artboards/symbols as PNG Plugin for Sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/iGenius-Srl/Seca" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/iGenius-Srl/Seca" target="_blank">Seca</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Your friendly Sketch slicing helper for symbols </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/naughtandcross/sketch-library-audit" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">l</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/naughtandcross/sketch-library-audit" target="_blank">library-audit</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Export Symbol and Shared Style data from any Sketch Library to CSV. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/RealtimeBoard/sketch_plugin" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">Mp</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/RealtimeBoard/sketch_plugin" target="_blank">Miro plugin for Sketch</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>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 </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.workingon.co" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.workingon.co" target="_blank">SketchingOn</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Quickly select and share work in progress with your team via WorkingOn. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://zeroheight.com" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">z</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://zeroheight.com" target="_blank">zeroheight</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Document your design system using beautifully simple style guides synced with Sketch and code </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://droplr.com/integrations/sketch/" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">D</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://droplr.com/integrations/sketch/" target="_blank">Droplr</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Droplr for Sketch lets designers quickly and easily share their Artboards </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://phraseapp.com/sketch" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">PS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://phraseapp.com/sketch" target="_blank">PhraseApp Sketch Plugin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sync your design content from Sketch with PhraseApp </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ZhichengChen/snatch" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ZhichengChen/snatch" target="_blank">Snatch</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin which uploads layer to CDN directly. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/cranksoftwaredev/SketchPlugins" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">SE</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/cranksoftwaredev/SketchPlugins" target="_blank">Storyboard Export</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Export Sketch based designs to be used within Crank Software's Storyboard Suite </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/jclappiway/sketch-to-trello" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">St</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/jclappiway/sketch-to-trello" target="_blank">Sketch to Trello</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Export Sketch Artboard to Trello </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/delighted/sketch-upload-to-cloudapp" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">Ut</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/delighted/sketch-upload-to-cloudapp" target="_blank">Upload to CloudApp</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Upload to CloudApp: Upload the current artboard or page to CloudApp. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://timurnurutdinov.github.io/framerinventory/" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">FI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://timurnurutdinov.github.io/framerinventory/" target="_blank">Framer Inventory 2.0 for Sketch</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin to generate FramerJS prototypes. Just have your motion done. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/WeTransfer/Sketch-Plugin" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">W</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/WeTransfer/Sketch-Plugin" target="_blank">WeTransfer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Share artboards and pages via WeTransfer </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/inthepocket/hubble-sketch-plugin" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">HS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/inthepocket/hubble-sketch-plugin" target="_blank">Hubble Sketch Plugin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin to extract assets and primitives and send them to Hubble.app </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/dribbble/dribbble-sketch" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">D</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/dribbble/dribbble-sketch" target="_blank">Dribbble</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Share your creative process directly to the Dribbble community from within Sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/google/sketch2ae" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/google/sketch2ae" target="_blank">AEUX</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Transfer layer to After Effects </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ajgagnon/projecthuddle-sketch-sync" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">p</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ajgagnon/projecthuddle-sketch-sync" target="_blank">projecthuddle</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Syncs sketch files with ProjectHuddle mockup projects. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/alxrm/sketch-tinypng-compressor" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">ST</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/alxrm/sketch-tinypng-compressor" target="_blank">Sketch TinyPng compressor</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Plugin that compresses bitmap assets using TinyPNG API. This Plugin <em>requires</em> Sketch 3.8. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/KivyGogh/coffee-slice" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">CS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/KivyGogh/coffee-slice" target="_blank">Coffee Slice</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://specifyapp.com" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">S(</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://specifyapp.com" target="_blank">Specify (Alpha)</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Export styles and assets to your Specify Libraries. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/782713260363070260" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">AS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/782713260363070260" target="_blank">Advanced SVG Export</a>
					<div class="label-wrapper">
						
					</div>
				</header>
				<p>Optimize SVG before exporting without leaving Figma. Uses SVGO under the hood. ![figma.svg]</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/735452896889481850" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">AR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/735452896889481850" target="_blank">Android Resources Export</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Export multiple sizes PNG from a selected slice or exportable layer, with a fixed folder structure (drawable-xhdpi, etc..) and valid name. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/747172434405306948" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">iE</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/747172434405306948" target="_blank">iOS Export Settings</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>This plugin automatically applies the correct export settings for every required iOS App Icon size and density. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/745898698224781628" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">i</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/745898698224781628" target="_blank">iOSPNGExporter</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>This plugin helps you to create the most common used export settings for iOS PNG icons, including a @2x size and a @3x size. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/742318143106037364" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">iG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/742318143106037364" target="_blank">icns/ico Generator</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>A Figma plugin to export Frame nodes to .ico (Windows) and/or .icns (Mac) files. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/747228167548695118" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">E.</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/747228167548695118" target="_blank">Export .zip</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Easily export assets from Figma directly into a .zip file. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/738907708841687244" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/738907708841687244" target="_blank">Archiver</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/755582372562882351" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/755582372562882351" target="_blank">Slicer</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>A Figma plugin to make easier to slice multiple objects. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.justinmind.com/community/" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">Jf</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.justinmind.com/community/" target="_blank">Justinmind for XD</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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 </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/stursby/xd-copy-svg-code-plugin/issues" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">CS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/stursby/xd-copy-svg-code-plugin/issues" target="_blank">Copy SVG Code</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Plugin to generate SVG code from the selection. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://t.me/savedata_space" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">AE</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://t.me/savedata_space" target="_blank">Advanced Export</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>This plugin provide code from xd for developers  - Colors For Android,CSS,LESS,SCSS  - Artboard mockup for Xaml  - Name of Artboards </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://misjavansitteren.nl/" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">Ui</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://misjavansitteren.nl/" target="_blank">UWP icons export</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Create assets / icons for UWP in the formats 100, 125, 150, 200, and 400. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://bitbucket.org/joeherold/export-react/issues" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">Ea</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://bitbucket.org/joeherold/export-react/issues" target="_blank">Export as React Component</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Select elements and or groups in your artboard, and export them as react functional components. Name of Group / Element ist the Component Name. (AppIcon =&gt; AppIconComponent.js) </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/nikoladev/xd-export/" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">Eo</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/nikoladev/xd-export/" target="_blank">Export only one size</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/teach310/Xd2uGUI" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">XE</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/teach310/Xd2uGUI" target="_blank">XDA Exporter</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Export Artboard Info as xda.You can use xda file to any other soft to generate screen. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://dribbble.com/contact" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">D</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://dribbble.com/contact" target="_blank">Dribbble</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="support@getcloudapp.com" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="support@getcloudapp.com" target="_blank">CloudApp</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="hi@chrometaphore.com" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">CE</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="hi@chrometaphore.com" target="_blank">Custom Export</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Export selected Layers and Artboards to any custom scale. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://docs.google.com/forms/d/e/1FAIpQLSeRCfX71_Fg6RVvS-x9IFXFkDnmHgqBwbBYH9wbP-uOqDKp2g/viewform" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://docs.google.com/forms/d/e/1FAIpQLSeRCfX71_Fg6RVvS-x9IFXFkDnmHgqBwbBYH9wbP-uOqDKp2g/viewform" target="_blank">Trello</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://support.sisense.com" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">SB</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://support.sisense.com" target="_blank">Sisense Blox Template</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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!. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="alexdobras@gmail.com" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">AD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="alexdobras@gmail.com" target="_blank">Artboard Deep Link</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="shingo2000@gmail.com" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">Af</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="shingo2000@gmail.com" target="_blank">Artboard for PDF</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Create artboards for exporting as PDF files. You Can Select Size (A3 - B5) and Orientation (Landscape or Portrait). </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://xd2sketch.com" class="tool__asset" target="_blank" style="background-color: hsl(140.4, 36%, 72%); color: rgb(109, 179, 132);">X</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://xd2sketch.com" target="_blank">XD2Sketch</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Export XD files directly to Sketch using our converter. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</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">
			<header>
				<h3><a href="#generate-ui-element">Generate UI Element</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/herrhelms/radial-lines-sketch" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">RL</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/herrhelms/radial-lines-sketch" target="_blank">Radial Lines</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Generate lines originating from a certain coordinate of an artboard. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/sureskumar/super-shapes" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/sureskumar/super-shapes" target="_blank">Super Shapes</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Generate complex organic super-shapes using super formula. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/matej-marjanovic/6Spiral-Sketch-Plugin" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">6</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/matej-marjanovic/6Spiral-Sketch-Plugin" target="_blank">6Spiral</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/kumo/sketch-tiles" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">ST</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/kumo/sketch-tiles" target="_blank">Sketch Tiles</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin for playing with seamless tiles. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/tomorrowkey/sketch3-mosaic-plugin" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/tomorrowkey/sketch3-mosaic-plugin" target="_blank">Mosaic</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A plugin for Sketch3 to apply mosaic easily. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/interfacemarket/Egmont-plugin" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">EP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/interfacemarket/Egmont-plugin" target="_blank">Egmont Plugin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin for creating squircle shapes. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/joshdjuric/Skatter" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/joshdjuric/Skatter" target="_blank">Skatter</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p> A plugin with tools (currently very basic tools) to assist with creating patterns out of shapes.  </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/0la0/triangle-fields" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">t</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/0la0/triangle-fields" target="_blank">triangle-field</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Generate Delaunay triangle tessellation inside a shape. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/lerte/sketch-qr-code" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">SQ</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/lerte/sketch-qr-code" target="_blank">Sketch QR Code</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Plugin for generating SVG QR Code in the Sketch app. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/739208439270091369" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/739208439270091369" target="_blank">Blobs</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Create organic blob shapes with the click of a button. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/741184519069077841" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">I</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/741184519069077841" target="_blank">Isometric</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Isometric allows you to create isometric layers without manually having to set them up. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/740556241021336678" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">PH</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/740556241021336678" target="_blank">Pattern Hero</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Pattern Hero enables you to place selected elements or frames in a grid to create patterns. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/745619465174154496" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">GW</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/745619465174154496" target="_blank">Get Waves</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Get Waves is a free SVG wave generator to make unique SVG waves for your next design. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/740172168964577201" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">Mb</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/740172168964577201" target="_blank">Make blob</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Make blob and add it on your page. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/734501601239074381" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/734501601239074381" target="_blank">Sprinkle</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Make it rain with confetti. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://www.sketchconfetti.com" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://www.sketchconfetti.com" target="_blank">Confetti</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	
 
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	
 
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Confetti for Figma lets anyone create gorgeous confetti patterns.   </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/743754408199479204" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/743754408199479204" target="_blank">Metaball</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Metaball plugin generates 2D-Metaball shapes from circle objects. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/745971189153303901" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">W&amp;</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/745971189153303901" target="_blank">Wave &amp; Сurve</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>With "Wave &amp; Surve" you can easily create a variety of waves and interesting patterns. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/755525134262262553" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">Rl</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/755525134262262553" target="_blank">Random layout generator</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>An inadequate tool for randomly generating endless layouts. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/753395020416512502" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/753395020416512502" target="_blank">Squiggly</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>A plugin for generating squiggles. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/750298912003944521" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">BG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/750298912003944521" target="_blank">Button Generator</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Button Generator does what it says on the box, it generates button components with no fuss. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://medium.com/@tamjeed" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">FI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://medium.com/@tamjeed" target="_blank">Flutter Icon Generator</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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 </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="kenny.krosky@gmail.com" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">t</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="kenny.krosky@gmail.com" target="_blank">triangle</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Quickly add triangle elements to your design that you can customize the stroke - stroke width - stroke color - fill color. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="yuji.arai@romantist.jp" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">rp</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="yuji.arai@romantist.jp" target="_blank">regular polygon</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>It is a plugin that draws a regular polygon </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://romantist.jp/blog/star-shape" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">ss</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://romantist.jp/blog/star-shape" target="_blank">star shape plugin</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>It is a plug-in that draws star-shaped figures. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="n.bhargavvenky@gmail.com" class="tool__asset" target="_blank" style="background-color: hsl(193.8, 38%, 75%); color: rgb(116, 168, 184);">Wf</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="n.bhargavvenky@gmail.com" target="_blank">Widgets for XD</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Widgets for XD is a great plugin that creates commonly seen plugins in smartphones with a single click or a shortcut </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="guides--grids">
			<header>
				<h3><a href="#guides-&amp;-grids">Guides &amp; Grids</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/herrhelms/even-guides-sketch" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">ED</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/herrhelms/even-guides-sketch" target="_blank">Evenly Distributed Guides</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Add evenly distributed guides to artboards. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Volorf/Gridy" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">G</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Volorf/Gridy" target="_blank">Gridy</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>An easy way of creating guidelines </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ichik/removeallguides" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">RA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ichik/removeallguides" target="_blank">Remove All Guides</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Removes all the guides from selected artboards. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/pixelpillow/copy-paste-guides" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">C&amp;</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/pixelpillow/copy-paste-guides" target="_blank">Copy &amp; Paste Guides</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Easily copy, paste or remove guides from/to your artboard(s). </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/tomoyukikashiro/Sketch-bootstrap-guides" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">BG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/tomoyukikashiro/Sketch-bootstrap-guides" target="_blank">Bootstrap Guides</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Generate guides along with twitter bootstrap grid system. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/luvmex/Sketch-Guides" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">SG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/luvmex/Sketch-Guides" target="_blank">Sketch Guides</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Add Guides to edges and midpoints at once. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/pratikjshah/PS-Guides" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">PG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/pratikjshah/PS-Guides" target="_blank">Ps Guides</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Quickly generate Guides for a selected element in Sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/De-La-Vega/BootstrapGrid" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">BG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/De-La-Vega/BootstrapGrid" target="_blank">Bootstrap Grid</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin inserts the correct bootstrap grid in nested blocks. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://guides.pratikshah.website/" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">SG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://guides.pratikshah.website/" target="_blank">Sketch Guides</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Quickly generate Guides for a selected element in Sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://guideguide.me" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">G</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://guideguide.me" target="_blank">GuideGuide</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Quickly and easily create grids and manipulate guides with a consistent UI in Photoshop, Illustrator, and Sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/GCampi/gutter-cutter" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">GC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/GCampi/gutter-cutter" target="_blank">Gutter Cutter</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin to create custom grids with guides </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/franklymrshankly/Grid-Layer" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">GL</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/franklymrshankly/Grid-Layer" target="_blank">Grid Layer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Create columns or gutters as layers. Useful if you need a grid on a component level. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/exevil/sketch-grid-master" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">SG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/exevil/sketch-grid-master" target="_blank">Sketch Grid Master</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Grid Master is a Sketch plugin that fixes long-standing bugs and adds new functionality related to work with Grid and Layout. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/739342962452731553" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">GM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/739342962452731553" target="_blank">Guide Mate</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Guide Mate is a Figma plugin that helps you add complex guides to your design with ease. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/753903260307779121" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">CG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/753903260307779121" target="_blank">Clear Guides</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://sugarsweetapps.com/contact/?utm_source=Plugin&amp;utm_medium=Direct&amp;utm_campaign=Contact%20Page%20Before%20Installation" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">GP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://sugarsweetapps.com/contact/?utm_source=Plugin&amp;utm_medium=Direct&amp;utm_campaign=Contact%20Page%20Before%20Installation" target="_blank">Grids Plus</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://paper.dropbox.com/doc/Repeat-Grid-Fitter-Support--APqpBnFaWjjO6cjwiwV0SpPXAQ-bG0aYLxvVgVpth0tJjkhC" class="tool__asset" target="_blank" style="background-color: hsl(251, 71%, 83%); color: rgb(141, 125, 209);">RF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://paper.dropbox.com/doc/Repeat-Grid-Fitter-Support--APqpBnFaWjjO6cjwiwV0SpPXAQ-bG0aYLxvVgVpth0tJjkhC" target="_blank">RepeatGrid Fitter</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="images-management">
			<header>
				<h3><a href="#images-management">Images Management</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/frankko/Place-Linked-Bitmap" class="tool__asset" target="_blank" style="background-color: hsl(30.3, 79%, 70%); color: rgb(207, 139, 72);">PL</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/frankko/Place-Linked-Bitmap" target="_blank">Place Linked Bitmap</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A plugin to place external bitmap files into Sketch and update Sketch layers after external bitmaps are updated </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/shakemno/sketch-replace-images" class="tool__asset" target="_blank" style="background-color: hsl(30.3, 79%, 70%); color: rgb(207, 139, 72);">RI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/shakemno/sketch-replace-images" target="_blank">Replace Images</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch 3 plugin to replace (as in update) existing images by name in a sketch document. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ribot/sketch-user-flow-docs" class="tool__asset" target="_blank" style="background-color: hsl(30.3, 79%, 70%); color: rgb(207, 139, 72);">SU</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ribot/sketch-user-flow-docs" target="_blank">Sketch User Flows</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>This plugin lets you link images in a document with an external image file and update them all at once. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ScottSavarie/Clipboard-Fill" class="tool__asset" target="_blank" style="background-color: hsl(30.3, 79%, 70%); color: rgb(207, 139, 72);">CF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ScottSavarie/Clipboard-Fill" target="_blank">Clipboard Fill</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin to paste an image from your clipboard as the fill for any shape </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/mendyismyname/ImageExtractorSketch" class="tool__asset" target="_blank" style="background-color: hsl(30.3, 79%, 70%); color: rgb(207, 139, 72);">I</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/mendyismyname/ImageExtractorSketch" target="_blank">ImageExtractorSketch</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Extract background fill image in Sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/mheesakkers/sketch-image-replaste" class="tool__asset" target="_blank" style="background-color: hsl(30.3, 79%, 70%); color: rgb(207, 139, 72);">SI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/mheesakkers/sketch-image-replaste" target="_blank">Sketch Image Replaste</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A simple Sketch plugin for replacing images with the copied image of your clipboard. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/roydigerhund/Images-Reinvented" class="tool__asset" target="_blank" style="background-color: hsl(30.3, 79%, 70%); color: rgb(207, 139, 72);">IR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/roydigerhund/Images-Reinvented" target="_blank">Images Reinvented</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A better way to use images in Sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/perrysmotors/reset-image-aspect-ratio" class="tool__asset" target="_blank" style="background-color: hsl(30.3, 79%, 70%); color: rgb(207, 139, 72);">RI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/perrysmotors/reset-image-aspect-ratio" target="_blank">Reset Image Aspect Ratio</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that resets the aspect ratio of selected images. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Nkzq/advanced-responsive-images-default" class="tool__asset" target="_blank" style="background-color: hsl(30.3, 79%, 70%); color: rgb(207, 139, 72);">AR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Nkzq/advanced-responsive-images-default" target="_blank">Advanced Responsive Images Default</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Generate default images according to the sizes given. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/eliasjulian/spooky-sketch" class="tool__asset" target="_blank" style="background-color: hsl(30.3, 79%, 70%); color: rgb(207, 139, 72);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/eliasjulian/spooky-sketch" target="_blank">Spooky</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Is this image spooky enough? You'll never have to ask yourself that question again. Happy Halloween! </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/735707089415755407" class="tool__asset" target="_blank" style="background-color: hsl(30.3, 79%, 70%); color: rgb(207, 139, 72);">It</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/735707089415755407" target="_blank">Image tracer</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Traces black &amp; white bitmap images, and turns them into a vector layer. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/752462766270432644" class="tool__asset" target="_blank" style="background-color: hsl(30.3, 79%, 70%); color: rgb(207, 139, 72);">D</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/752462766270432644" target="_blank">Dither</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Add dithering effects to your images right there in Figma. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/740702788263758004" class="tool__asset" target="_blank" style="background-color: hsl(30.3, 79%, 70%); color: rgb(207, 139, 72);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/740702788263758004" target="_blank">Autocrop</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Automatically crop the extra space surrounding an image. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/irajashekarb/Image-Optimizer" class="tool__asset" target="_blank" style="background-color: hsl(30.3, 79%, 70%); color: rgb(207, 139, 72);">IO</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/irajashekarb/Image-Optimizer" target="_blank">Image Optimizer</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Image Optimizer is a compression tool that lets designers compress the images within Adobe XD. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="satriamaxt@gmail.com" class="tool__asset" target="_blank" style="background-color: hsl(30.3, 79%, 70%); color: rgb(207, 139, 72);">TI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="satriamaxt@gmail.com" target="_blank">Tunda Image</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/jonenzl/xd-masked-image-shadows/issues" class="tool__asset" target="_blank" style="background-color: hsl(30.3, 79%, 70%); color: rgb(207, 139, 72);">MI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/jonenzl/xd-masked-image-shadows/issues" target="_blank">Masked Image Shadows</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Quickly and easily add drop shadows to masked images. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/shingo2000/xd-plugin-image-minify" class="tool__asset" target="_blank" style="background-color: hsl(30.3, 79%, 70%); color: rgb(207, 139, 72);">Im</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/shingo2000/xd-plugin-image-minify" target="_blank">Image minify</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="jeanpr117@gmail.com" class="tool__asset" target="_blank" style="background-color: hsl(30.3, 79%, 70%); color: rgb(207, 139, 72);">Pi</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="jeanpr117@gmail.com" target="_blank">Pixabay image finder</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Give me words and I'll give you pixabay images. Simple! Shortcut: Ctrl+Shift+I </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="import">
			<header>
				<h3><a href="#import">Import</a></h3>
				
<div class="hidden-in-page">
    <p align="center">
        <a href="http://bit.ly/33Q3AC0">
            
        </a>
    </p>
</div>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://www.stash.diamonds" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.stash.diamonds" target="_blank">Stash</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Import artboards from Stash to Sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://boltplugin.com/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://boltplugin.com/" target="_blank">Bolt</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Import screenshots faster </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/mathieudutour/import-svg-as-artboard" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">IS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/mathieudutour/import-svg-as-artboard" target="_blank">Import SVG as Artboards</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Import SVG files as Artboards. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/envato/extensions-sketch-plugin" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">EE</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/envato/extensions-sketch-plugin" target="_blank">Envato Elements</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Envato Elements Sketch plugin makes it easy to import a select range of Web and Mobile UI Kits from Envato Elements! </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/tankxu/SVG-Insert" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">SI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/tankxu/SVG-Insert" target="_blank">SVG Insert</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Insert SVG code as a Layer. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/sylvainleris/fr.y3s.sketch.screenshot" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">AS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/sylvainleris/fr.y3s.sketch.screenshot" target="_blank">Android Screenshot</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin to take screenshots of Android device connected over USB. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/740559260731517035" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/740559260731517035" target="_blank">PasteSVG</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>This plugin allows you to convert svg code into icon and put it inside the figma. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/738806869514947558" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">TC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/738806869514947558" target="_blank">Tailwind CSS</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/747985167520967365" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">HT</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/747985167520967365" target="_blank">HTML To Figma</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Easily convert any webpage to Figma layers by URL. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/749818562498396194" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">St</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/749818562498396194" target="_blank">SVG to JSX</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>This plugin allows you to copy SVG code as a react component so that you don't have to transform it. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://twitter.com/dvrvrm" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">Pf</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://twitter.com/dvrvrm" target="_blank">PPT for XD</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Converts XD files to PPT file with images. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.unykvis.com/en/contactos" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">I</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.unykvis.com/en/contactos" target="_blank">Inspect</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://tourdexd.com/plugin/mimic/" class="tool__asset" target="_blank" style="background-color: hsl(30, 79%, 80%); color: rgb(212, 162, 112);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://tourdexd.com/plugin/mimic/" target="_blank">Mimic</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Extract colors, font names and images from the web. Useful plugin to kickstart designs based off of something out in the wild. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="map-generation">
			<header>
				<h3><a href="#map-generation">Map Generation</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/terence55/sketch-map-creator" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">MC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/terence55/sketch-map-creator" target="_blank">Map Creator for Sketch</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Plugin to visually create a static map(BaiduMap, MapBox, GoogleMap) with custom options, and location search is available now </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/bouchenoiremarc/Sketch-Maps" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">SM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/bouchenoiremarc/Sketch-Maps" target="_blank">Sketch Maps</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that uses the Mapbox API to fill layers with specific and custom maps. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/eddiesigner/sketch-map-generator" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">SM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/eddiesigner/sketch-map-generator" target="_blank">Sketch Map Generator</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Plugin to fill a layer with a map generated from a location (Powered by Google Maps) </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/736458162635847353" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/736458162635847353" target="_blank">Mapsicle</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>With Mapsicle, you can quickly and seamlessly place maps in your mockups. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/731312569747199418" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">MM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/731312569747199418" target="_blank">Map Maker</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Map Maker allows you to make a customized map blazing fast. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/boopeshmahendran/AdobeXD-maps/blob/master/README.md" class="tool__asset" target="_blank" style="background-color: hsl(60, 79%, 80%); color: rgb(212, 212, 112);">Mg</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/boopeshmahendran/AdobeXD-maps/blob/master/README.md" target="_blank">Maps generator</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		<div class="promotion-banner-wrapper">
    <a class="promotion-banner -abstract" href="https://www.abstract.com/campaigns/collaboration/?&amp;utm_medium=Partner-Advertising&amp;utm_source=PA-Native-Digital&amp;utm_campaign=CY19-PA-FlawlessApp-1018-Sept12&amp;utm_term=designplugins&amp;utm_content=Sponsored">
        <div class="promotion-banner__logo -abstract">
            
        </div>
        <div class="promotion-banner__main">
            <h3 class="promotion-banner__title">Abstract</h3>
            <p class="promotion-banner__description">
                We centralize design decisions, feedback, Sketch files, and specs for your team.
            </p>
        </div>
        <button class="promotion-banner__link -abstract">
            Get a free, 14-day trial
        </button>
    </a>
</div></article>
<article id="mockup-plugins">
			<header>
				<h3><a href="#mockup-plugins">Mockup Plugins</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://www.figma.com/c/plugin/750673765607708804/Artboard-Studio-Mockups" class="tool__asset" target="_blank" style="background-color: hsl(180, 79%, 80%); color: rgb(112, 212, 212);">AS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/750673765607708804/Artboard-Studio-Mockups" target="_blank">Artboard Studio Mockups</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="other">
			<header>
				<h3><a href="#other">Other</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/avk/sketch-tabula-rasa" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">TR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/avk/sketch-tabula-rasa" target="_blank">Tabula Rasa</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Add blank backgrounds to transparent artboards </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/mathieudutour/sketch-remove-bg" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">R</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/mathieudutour/sketch-remove-bg" target="_blank">Remove.bg</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Remove image background in a single click </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/franklymrshankly/Label_Layers" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">LL</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/franklymrshankly/Label_Layers" target="_blank">Label Layers</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that labels selected layers </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/jayhxmo/sketch-camera-hotkeys" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">s</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/jayhxmo/sketch-camera-hotkeys" target="_blank">sketch-camera-hotkeys</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Navigate around and present more efficiently </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/mathieudutour/sketch-a-sketch" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">Sa</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/mathieudutour/sketch-a-sketch" target="_blank">Sketch a Sketch</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Bringing the iconic knobs from the famous toy to Sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/KevinvBre/Sketch-Line2Rect" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">SL</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/KevinvBre/Sketch-Line2Rect" target="_blank">Sketch Line2rect</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Replace Lines by Rectangles in Sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/alanfraneo/svg-composite" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">CS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/alanfraneo/svg-composite" target="_blank">Composite SVG</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin to create a composite SVG file from sketch artboards </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/KevinGutowski/toggleLayers" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">t</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/KevinGutowski/toggleLayers" target="_blank">toggleLayers</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>One action to toggle layers on / off so that you can more easily remap this to a custom keyboard shortcut. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/lazybearcreations/sketch-lazyboards" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">l</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/lazybearcreations/sketch-lazyboards" target="_blank">lazyboards</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Artboard tools to help you with tedious batch tasks. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/daneden/sketch-replace-layer" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">SR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/daneden/sketch-replace-layer" target="_blank">Sketch Replace Layer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Replace selected layer(s) with copied content/layer(s) </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ingrammicro/puzzle-tokens" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">PT</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ingrammicro/puzzle-tokens" target="_blank">Puzzle Tokens</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch.app plugin to apply design tokens to Sketch layers </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ziven27/Sketch-IconScope" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">SI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ziven27/Sketch-IconScope" target="_blank">Sketch Iconscope</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Wrap the Icon with a square(4n) scope. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/toyboxsystems/roller" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">R</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/toyboxsystems/roller" target="_blank">Roller</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Roller is the first Linter for Designers. It works just like spell-check but within your Sketch files. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/jordansinger/Assistant" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/jordansinger/Assistant" target="_blank">Assistant</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Talk to Sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/yued-fe/y-tools" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">YT</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/yued-fe/y-tools" target="_blank">Y Tools</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin tools yued-fe.TM </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/alex-matt/sketch-lightwire-plugin" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">L</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/alex-matt/sketch-lightwire-plugin" target="_blank">Lightwire</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/pranusarna94/Perfecto-" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/pranusarna94/Perfecto-" target="_blank">Perfecto-</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A sketch plugin to round off all sub-pixel layers at once </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/nichenqin/draw-and-render-sketch-plugin" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">d</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/nichenqin/draw-and-render-sketch-plugin" target="_blank">draw-and-render</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A plugin to render canvas to sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/kupe517/sketch-split-shape" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/kupe517/sketch-split-shape" target="_blank">Sketch Split Shape</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin to split up a rectangle evenly by a user-generated value </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/PEZ/SketchSeparateShapes" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/PEZ/SketchSeparateShapes" target="_blank">Separate Shapes</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch-app plugin that does a ”boolean” separate operation on two selected shapes. Like divide in Pathfinder in Adobe Illustrator. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ziven27/Sketch-topographic" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">ST</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ziven27/Sketch-topographic" target="_blank">Sketch Topographic</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Display Topographic Information </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/dploeger/sketch-plugin-units" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">U</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/dploeger/sketch-plugin-units" target="_blank">Units</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin for working with print units (inch, cm, mm) in Sketch's pixel world. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/pranusarna94/z-rating" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">ZR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/pranusarna94/z-rating" target="_blank">Z Rating</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin for designers @zomato to quickly change and maintain restaurant ratings </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://smartling.github.io/smartling-sketch-plugin/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://smartling.github.io/smartling-sketch-plugin/" target="_blank">Smartling</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Plugin for Sketch that allows you to translate and pseudo-localize designs using the Smartling platform. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/stevenfabre/Gifmock-for-Sketch" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">GF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/stevenfabre/Gifmock-for-Sketch" target="_blank">Gifmock For Sketch</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Easily create GIFs from your mocks </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/MrPeak/sketch-show-layer-info" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/MrPeak/sketch-show-layer-info" target="_blank">Sketch Show Layer Info</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Show selected layer's ObjectID, Class and ID. It is of great use for plugin development or file parsing. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/youwenliang/Table-of-Contents" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">To</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/youwenliang/Table-of-Contents" target="_blank">Table of Contents</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin for generating a table of contents for documentations </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/FrancisVega/sketch-marginbox" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">SM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/FrancisVega/sketch-marginbox" target="_blank">Sketch Marginbox</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Simple script to create layers as margins </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/DWilliames/nudge-corner-radius-sketch-plugin" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">NC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/DWilliames/nudge-corner-radius-sketch-plugin" target="_blank">Nudge Corner Radius</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Increase/decrease the corner radius of a rectangle, or path nodes</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/mmilano/sketch-rotate-artboards" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">RA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/mmilano/sketch-rotate-artboards" target="_blank">Rotate Artboard Orientation</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Rotate the orientation of an artboard - from portrait to landscape, and vice versa. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/devinmancuso/sketch-rtl" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">SR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/devinmancuso/sketch-rtl" target="_blank">Sketch RTL</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Automatically create RTL layouts of your designs with this plugin for Bohemian Coding's Sketch 3 </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/pberrecloth/rotator-sketch-plugin" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">R</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/pberrecloth/rotator-sketch-plugin" target="_blank">Rotator</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Rotate objects at preset amounts </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/rjungemann/SketchTape.sketchplugin" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/rjungemann/SketchTape.sketchplugin" target="_blank">SketchTape</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Connect two shapes in the Sketch app. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Vesely/webalize" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">w</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Vesely/webalize" target="_blank">webalize</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin to webalize layers name. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/auxdesigner/Sketch-to-VR" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">St</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/auxdesigner/Sketch-to-VR" target="_blank">Sketch to VR</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Personal fun project - turn your mocks into VR </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ElliotEKJ/specify" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ElliotEKJ/specify" target="_blank">Specify</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Quickly generate a rectangle or oval with specific dimensions and positioning. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/wakatime/sketch-wakatime" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">SW</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/wakatime/sketch-wakatime" target="_blank">Sketch Wakatime</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Plugin to update your WakaTime stats automatically from Sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/lessthanzero/Formr" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/lessthanzero/Formr" target="_blank">Formr</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Helps to maintain simple proportions of layers and artboards </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/sudilkovsky/Toggle-NoPrint-Visibility-Sketch-Plugin" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">TN</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/sudilkovsky/Toggle-NoPrint-Visibility-Sketch-Plugin" target="_blank">Toggle NoPrint</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Toggle Visibility of 'NoPrint' layers in Sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/truthlabs/sketch-unlock-all-layers" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">UA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/truthlabs/sketch-unlock-all-layers" target="_blank">Unlock All Layers &amp; Unlock Hover</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Unlock all layers on the current artboard using ⌘⌥L </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/acollurafici/Sketch-Nearest-8" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">SN</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/acollurafici/Sketch-Nearest-8" target="_blank">Sketch Nearest 8</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch Plugin to round shape size to the nearest multiple of 8 </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/KrevedAccky/SketchSplitDivide" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">S&amp;</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/KrevedAccky/SketchSplitDivide" target="_blank">Split &amp; Divide</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Split and Divide plugins for the Sketch3 app. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ediathome/WordCloud" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">W</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ediathome/WordCloud" target="_blank">WordCloud</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Create basic word clouds and tag clouds. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/sureskumar/single-border" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">SB</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/sureskumar/single-border" target="_blank">Single Border</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Add single borders with advanced controls. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://sureskumar.com/sketchplay/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">SP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://sureskumar.com/sketchplay/" target="_blank">Sketch Play</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Create game plays directly from the Sketch app. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/teeerevor/loose-sketch-plugin" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">L</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/teeerevor/loose-sketch-plugin" target="_blank">Loose!</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Turn your lines into arrows </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/dex1t/QRCode-for-Sketch-Local-Sharing" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">Qf</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/dex1t/QRCode-for-Sketch-Local-Sharing" target="_blank">QRCode for Sketch Local Sharing</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>This plugin show QR Code for Local Sharing URL (Sketch 3.4 Feature). Read this QR code when checking your design on a smartphone. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/BohemianCoding/library-replacer-sketchplugin" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">LR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/BohemianCoding/library-replacer-sketchplugin" target="_blank">Library Replacer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Quickly replace instances of shared Symbols and Styles. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/bomberstudios/install-library-bundle" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">IL</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/bomberstudios/install-library-bundle" target="_blank">Install Library Bundle</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Installs a bunch of shared Sketch Libraries at once, because life is too short for clicking links. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/738992712906748191" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">RB</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/738992712906748191" target="_blank">Remove BG</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Remove the background of images automatically with just a single click - using the remove.bg API. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/740014625507871586" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/740014625507871586" target="_blank">Border</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Quickly add single borders in Frame. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/748092648919348948" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">G</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/748092648919348948" target="_blank">Gifs</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Your perfect design needs the perfect gif. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/749261072790710247" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">MP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/749261072790710247" target="_blank">Multiplayer Pong</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>The first video game implemented as a Figma plugin is also the first video game ever: Pong. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/736084415195819692" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/736084415195819692" target="_blank">Tumble</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Tumble makes shapes fall down. Put your shapes in a frame, select them and run Tumble. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/751125845433636076" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">TU</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/751125845433636076" target="_blank">Thanos UI</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Thanos UI removes random half of the selected elements. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="support@siliconpublishing.com" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">SC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="support@siliconpublishing.com" target="_blank">Silicon Connector</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/lelayf/AdobeXD-animated-digital-clock-timer" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">AD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/lelayf/AdobeXD-animated-digital-clock-timer" target="_blank">Animated Digital Clock Timer</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://guide-ignite.inmotionnow.com/help" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">ii</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://guide-ignite.inmotionnow.com/help" target="_blank">inMotion ignite</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Create inMotion ignite proofs from your artboards directly in Adobe XD! </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://onthehead.com" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">MI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://onthehead.com" target="_blank">Move Items Dialog</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Move items Like Illustrator Dialog. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="pdf-export-plugins">
			<header>
				<h3><a href="#pdf-export-plugins">PDF Export Plugins</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/DWilliames/PDF-export-sketch-plugin" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">PE</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/DWilliames/PDF-export-sketch-plugin" target="_blank">PDF Export</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Export all pages, current page or selected artboards into a PDF</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Atim33/autopdfexporter-sketch-plugin/" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">AP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Atim33/autopdfexporter-sketch-plugin/" target="_blank">Auto PDF Exporter nSlicer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch Plugin to auto-export all '[S]' Prefix artboards to a single pdf. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/andrewfiorillo/sketch-artboards-to-pdf" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">At</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/andrewfiorillo/sketch-artboards-to-pdf" target="_blank">Artboards to PDF</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin to export artboards to PDF slideshow, from either the current page or from all pages </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/akolpakov/sketch-numbering-machine" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">NM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/akolpakov/sketch-numbering-machine" target="_blank">Numbering Machine</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/BohemianCoding/print-export-sketchplugin" class="tool__asset" target="_blank" style="background-color: hsl(210, 79%, 80%); color: rgb(112, 162, 212);">PE</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/BohemianCoding/print-export-sketchplugin" target="_blank">Print Export</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Export artboards or pages to a PDF for printing </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="plugin-development">
			<header>
				<h3><a href="#plugin-development">Plugin Development</a></h3>
				
<div class="hidden-in-page">
    <p align="center">
        <a href="http://bit.ly/33Q3AC0">
            
        </a>
    </p>
</div>

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/skpm/sketch-dev-tools" class="tool__asset" target="_blank" style="background-color: hsl(0, 79%, 80%); color: rgb(212, 112, 112);">SD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/skpm/sketch-dev-tools" target="_blank">Sketch DevTools</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>See your plugin logs, inspect the state of Sketch documents, explore actions, and more </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/739958206151827292" class="tool__asset" target="_blank" style="background-color: hsl(0, 79%, 80%); color: rgb(212, 112, 112);">GI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/739958206151827292" target="_blank">Get It</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/760351147138040099" class="tool__asset" target="_blank" style="background-color: hsl(0, 79%, 80%); color: rgb(212, 112, 112);">I</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/760351147138040099" target="_blank">Inspector</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Speed up plugin development with an easy way to view and explore node properties. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/758276196886757462" class="tool__asset" target="_blank" style="background-color: hsl(0, 79%, 80%); color: rgb(212, 112, 112);">NI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/758276196886757462" target="_blank">Node Inspector</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>View and copy node properties for plugin development. This plugin is only useful for plugin developers. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		<div class="promotion-banner-wrapper">
    <a class="promotion-banner -abstract" href="https://www.abstract.com/campaigns/collaboration/?&amp;utm_medium=Partner-Advertising&amp;utm_source=PA-Native-Digital&amp;utm_campaign=CY19-PA-FlawlessApp-1018-Sept12&amp;utm_term=designplugins&amp;utm_content=Sponsored">
        <div class="promotion-banner__logo -abstract">
            
        </div>
        <div class="promotion-banner__main">
            <h3 class="promotion-banner__title">Abstract</h3>
            <p class="promotion-banner__description">
                We centralize design decisions, feedback, Sketch files, and specs for your team.
            </p>
        </div>
        <button class="promotion-banner__link -abstract">
            Get a free, 14-day trial
        </button>
    </a>
</div></article>
<article id="plugin-managers">
			<header>
				<h3><a href="#plugin-managers">Plugin Managers</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/liangjingyang/SketchReloadPlugins" class="tool__asset" target="_blank" style="background-color: hsl(0, 78%, 90%); color: rgb(217, 152, 152);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/liangjingyang/SketchReloadPlugins" target="_blank">SketchReloadPlugins</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Reload Plugins. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/TheNounProject/SketchPluginReloader" class="tool__asset" target="_blank" style="background-color: hsl(0, 78%, 90%); color: rgb(217, 152, 152);">PR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/TheNounProject/SketchPluginReloader" target="_blank">Plugin Reloader</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A simple plugin to reload other plugins </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/PeachScript/sketch-plugin-monster" class="tool__asset" target="_blank" style="background-color: hsl(0, 78%, 90%); color: rgb(217, 152, 152);">SP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/PeachScript/sketch-plugin-monster" target="_blank">Sketch Plugin Monster</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin for managing all plugin shortcuts. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</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">
			<header>
				<h3><a href="#plugins-collection">Plugins Collection</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/frankko/UtilityBelt" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">UB</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/frankko/UtilityBelt" target="_blank">Utility Belt</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>An always-expanding collection of simple, focused plugins for Sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/getflourish/Sketch-Mate" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">SM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/getflourish/Sketch-Mate" target="_blank">Sketch Mate</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>These plugins will make you best friends with Sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/hrescak/Sketch-Layer-Tools" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">SL</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/hrescak/Sketch-Layer-Tools" target="_blank">Sketch Layer Tools</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/bomberstudios/sketch-commands" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">SC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/bomberstudios/sketch-commands" target="_blank">Sketch Commands</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A collection of script commands for Bohemian Coding's Sketch.app </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/FrancisVega/ZEN-Sketch" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">ZS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/FrancisVega/ZEN-Sketch" target="_blank">ZEN Sketch</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A collection of Sketch plugins </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/webpatch/Handy-Tools" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">HT</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/webpatch/Handy-Tools" target="_blank">Handy Tools</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Some handy tools for Sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/romannurik/Sketch-ArtboardTricks" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">AT</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/romannurik/Sketch-ArtboardTricks" target="_blank">Artboard Tricks</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Artboard Tricks plugin for Sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Ashung/Automate-Sketch" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">AS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Ashung/Automate-Sketch" target="_blank">Automate Sketch</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Make Sketch more efficient. A lot of useful plugins in one. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ant-design/kitchen" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">K</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ant-design/kitchen" target="_blank">Kitchen</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Make your design work delicious 🍽 </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/eachandother/SketchPlugins" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/eachandother/SketchPlugins" target="_blank">SketchPlugins</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/740040684939274087" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">PT</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/740040684939274087" target="_blank">Powerful Tools</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.resco.net/contact-support/" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">Rf</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.resco.net/contact-support/" target="_blank">Resco for XD</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</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">
			<header>
				<h3><a href="#presentation-&amp;-preview">Presentation &amp; Preview</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://timelapsesketch.com" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://timelapsesketch.com" target="_blank">Timelapse</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Create beautiful high-speed videos of your work in Sketch and show off your progress. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/fnky/sketch-dockpreview" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">D</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/fnky/sketch-dockpreview" target="_blank">Dockpreview</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that lets you preview your current artboard in the Dock. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/matt-curtis/Sketch-Server" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/matt-curtis/Sketch-Server" target="_blank">Sketch Server</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch Plugin that creates a local web server for your Sketch Documents. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/MagicSketch/MagicPresenter" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/MagicSketch/MagicPresenter" target="_blank">MagicPresenter</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch Plugin to Present Slides or Deck directly in Sketch 3 </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/lukasoppermann/browser-preview" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">BP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/lukasoppermann/browser-preview" target="_blank">Browser Preview</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Quickly preview an artboard in your browser. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://getrepresent.com" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">r</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://getrepresent.com" target="_blank">represent.</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Present your UX/UI Designs lightning fast on the client's devices without leaving Sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/marcisme/sketch-preview" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">SP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/marcisme/sketch-preview" target="_blank">Sketch Preview</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/timothywhalin/Sketch-Quick-Presentation" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">QP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/timothywhalin/Sketch-Quick-Presentation" target="_blank">Quick Presentation</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin to quickly share multiple artboards with an optional title. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/743170618365358883" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/743170618365358883" target="_blank">Masker</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Masker allows you to easily overlay devices on selected layers in your project. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/742583620684903056" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/742583620684903056" target="_blank">Autocover</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Figma currently creates a screenshot from the first page of your design document. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/743199058431264556" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">FT</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/743199058431264556" target="_blank">File Thumbnails</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Create beautiful thumbnails for your projects to make your Figma file grid more convenient, fast and easier on the eyes. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/745146759001708690" class="tool__asset" target="_blank" style="background-color: hsl(271.6, 77%, 81%); color: rgb(167, 116, 212);">CG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/745146759001708690" target="_blank">Cover Generator</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>A very simple plugin that takes a name, description, and status as input and generates a cover Image for your Figma file. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</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">
			<header>
				<h3><a href="#prototyping">Prototyping</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/FreakLand/sketch-browser-preview" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">SB</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/FreakLand/sketch-browser-preview" target="_blank">Sketch Browser Preview</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Generates a preview (⌘ + ⇧ + .) of your current artboard and shows in your web browser. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Creatide/AnimateMate" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Creatide/AnimateMate" target="_blank">AnimateMate</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Create your animations directly in Sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/mathieudutour/prototypes-invision-sketch" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">PI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/mathieudutour/prototypes-invision-sketch" target="_blank">Prototypes Invision ↔︎ Sketch</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Translate your prototyping links back and forth between Sketch and Invision </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/733702238760085035" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">MP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/733702238760085035" target="_blank">Marvel Prototyping</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>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. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/733025261168520714" class="tool__asset" target="_blank" style="background-color: hsl(61.6, 77%, 81%); color: rgb(208, 212, 116);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/733025261168520714" target="_blank">Figmotion</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Figmotion is an animation tool built right in Figma. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="three-d-perspective">
			<header>
				<h3><a href="#three-d-perspective">Three D Perspective</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/sureskumar/sketch-isometric" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/sureskumar/sketch-isometric" target="_blank">Sketch Isometric</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Generate Isometric views from Artboards and Rectangles. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://designcode.io/angle" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://designcode.io/angle" target="_blank">Angle</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	
 
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Apply perspective transforms on-screen mockups. Auto-detect screens by resolution and works on shapes and symbols.  </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://magicmirror.design" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">MM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://magicmirror.design" target="_blank">Magic Mirror</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Perspective Transformation for Sketch Artboards </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/733184376355671573" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">R</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/733184376355671573" target="_blank">Roto</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Roto extrudes and rotates shapes in 3D. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/741472919529947576" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/741472919529947576" target="_blank">SkewDat</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Live skew any shape and fine-tune with simple non-destructive controls. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/750743440401413268" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">E</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/750743440401413268" target="_blank">Easometric</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>With Easometric it is really easy to create isometric layers &amp; groups. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://rotato.xyz/help" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">R</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://rotato.xyz/help" target="_blank">Rotato</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Get your designs on the screens of photorealistic 3D iPhones and other devices. MacOS app on rotato.xyz. Not available for Windows yet. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="rename-helper">
			<header>
				<h3><a href="#rename-helper">Rename Helper</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/miguelangelnarvaezgo/symbol-master-renamer" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">SM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/miguelangelnarvaezgo/symbol-master-renamer" target="_blank">Symbol Master Renamer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Simple plugin to rename and organizing the master symbols with '/'. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/2o3t/2o3t-Sketch-Tools" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">2T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/2o3t/2o3t-Sketch-Tools" target="_blank">2O3T Tools</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Easy Tools, batch rename layers and artboards, etc. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ScottSavarie/Enumerator" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">E</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ScottSavarie/Enumerator" target="_blank">Enumerator</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin to rename and number your artboards or layers based on their x,y position </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/exevil/sketch-rename-instances" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">RI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/exevil/sketch-rename-instances" target="_blank">Rename Instances</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Tiny single-command Sketch plugin that renames every symbol instance with its master's name. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://renameit.design" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">RI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://renameit.design" target="_blank">Rename It</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	
 
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	
 
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Keep your Sketch files organized, batch rename layers and artboards.   </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/LeonardPauli/LayerRenamer" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">LR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/LeonardPauli/LayerRenamer" target="_blank">Layer Renamer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Find or rename multiple layers at once using RegEx and flags in Sketch (v.45 tested) </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/webkul/renamer" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">R</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/webkul/renamer" target="_blank">Renamer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Select multiple layers/groups/artboards and rename all of them on the go. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/tbrasington/rename-layers-based-on-textstyle" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">RL</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/tbrasington/rename-layers-based-on-textstyle" target="_blank">Rename Layers Based On Textstyle</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Renames text layers in the current page based on their text style name </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/perrysmotors/symbol-namer" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">SN</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/perrysmotors/symbol-namer" target="_blank">Symbol Namer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Rename symbol instances to their override text values </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/sonburn/symbol-instance-renamer" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">SI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/sonburn/symbol-instance-renamer" target="_blank">Symbol Instance Renamer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Rename all symbol instances to the name of their master. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/littlebusters/Regexp-Rename" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">RR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/littlebusters/Regexp-Rename" target="_blank">Regexp Rename</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	
 
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>You can change the layer name by Regexp in Sketch 3.  </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/canisminor1990/sketch-name-organizer" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">SN</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/canisminor1990/sketch-name-organizer" target="_blank">Sketch Name Organizer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Rename artboards based on their x and y position; Rename layers based on their Style and Symbol. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/KevinvBre/Sketch-Rename-Artboards" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">SR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/KevinvBre/Sketch-Rename-Artboards" target="_blank">Sketch Rename Artboards</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Rename Artboards based on their X and Y locations in Sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/mmasonlee/sketch-number-artboards" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">SN</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/mmasonlee/sketch-number-artboards" target="_blank">Sketch Number Artboards</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin to number artboards in order </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/gotomedia/Sketch-PageNumbers" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">PN</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/gotomedia/Sketch-PageNumbers" target="_blank">Page Numbers</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin for adding page numbers to artboards. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/radermacher/sketch-number-artboards-by-position" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">SN</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/radermacher/sketch-number-artboards-by-position" target="_blank">Sketch Number Artboards</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin to number artboards in order of position. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/jorgemartins/sketch-paginate" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">SP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/jorgemartins/sketch-paginate" target="_blank">Sketch Paginate</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Add page numbers to artboards. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/732772204922128885" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">E</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/732772204922128885" target="_blank">Enumerator</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Rename and number your frames based on their x,y position </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/734746297902924375" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">LN</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/734746297902924375" target="_blank">Layer Names Transfom</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>This plugin will help you to quickly transform the names of your layers. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/739106292828562948" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">n</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/739106292828562948" target="_blank">namespaces</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Plugin for automating formatting of page names, frames, components, layers, etc. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/746805909751572002" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">SC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/746805909751572002" target="_blank">Smart Cloner</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Make multiple renamed copies of components, frames or other layers in seconds. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="resize">
			<header>
				<h3><a href="#resize">Resize</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/ozzik/push-and-shove" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">Pa</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ozzik/push-and-shove" target="_blank">Push and Shove</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin for resizing, aligning and generally manipulating layers wickedly </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/dannymcclain/swap-width-height" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">s</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/dannymcclain/swap-width-height" target="_blank">swap-width-height</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Swap a layer's width and height. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/franklymrshankly/Set-Min-Max" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">SM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/franklymrshankly/Set-Min-Max" target="_blank">Set Min Max</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>This plugin will resize a layer by height or width to a base max or min value </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/KevinvBre/Align-and-resize-to-layout" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">Aa</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/KevinvBre/Align-and-resize-to-layout" target="_blank">Align and Resize To Layout</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Align and resize layers to your layout in Sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/perrysmotors/photo-grid" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">PG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/perrysmotors/photo-grid" target="_blank">Photo Grid</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that can size layers to common photo dimensions and scale them to fit in a row. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/KevinGutowski/NudgeRTL" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">n</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/KevinGutowski/NudgeRTL" target="_blank">nudgefromrtl</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Quickly resize a layer horizontally from right to left with keyboard shortcuts </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/samlfsun/SketchSize" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/samlfsun/SketchSize" target="_blank">Sketchsize</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that lets you resize your design by simple shortcuts. Helps you output splash screen and screenshot for app store&amp;google; play </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/pberrecloth/fitter-sketch-plugin" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">FS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/pberrecloth/fitter-sketch-plugin" target="_blank">Fitter Sketch Plugin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Fit layer to artboard width, height or both </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ANGIstudio/Sketch-Keyboard-Resize" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">KR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ANGIstudio/Sketch-Keyboard-Resize" target="_blank">Keyboard Resize</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that lets you resize objects from all sides with keyboard shortcuts. As a bonus, you can specify the resize amount. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ANGIstudio/Sketch-Copy-Paste-Position-Size" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">CP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ANGIstudio/Sketch-Copy-Paste-Position-Size" target="_blank">Copy Paste Position &amp; Size</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that lets you easily copy &amp; paste width, height, x &amp; y values from and to objects </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ANGIstudio/Sketch-Resize-Commands" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">RC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ANGIstudio/Sketch-Resize-Commands" target="_blank">Resize Commands</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that lets you resize and reposition objects by using simple arithmetic commands, like <code>b+20,lr+20</code>. Multiple objects are supported. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/MaxChen/Watch-Icon" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">WI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/MaxChen/Watch-Icon" target="_blank">Watch Icon</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Plugin for Bohemian Coding Sketch app that automatically resizes artwork for the Apple Watch icon. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/zhifengkoh/resize_artboard" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">RA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/zhifengkoh/resize_artboard" target="_blank">Resize Artboard</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch Plugin for resizing artboards to fit their content. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/longzheng/sketch-randomSize" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">RS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/longzheng/sketch-randomSize" target="_blank">Random Sizing</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin to randomly resize selected elements. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/lucaorio/sketch-resize" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">SR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/lucaorio/sketch-resize" target="_blank">Sketch Resize</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Resize (not scale) multiple layers at once via shortcut. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/preciousforever/sketch-aspect-ratio" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">SA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/preciousforever/sketch-aspect-ratio" target="_blank">Sketch Aspect Ratio</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A simple plugin to apply preset or custom aspect ratios to a selected layer. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/keiwes/Sketch-Mobile-Sizes" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">MS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/keiwes/Sketch-Mobile-Sizes" target="_blank">Mobile Sizes</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Change a rectangle, artboard, or any other object to be the size of a mobile phone. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/delighted/sketch-scale-all-in-place" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">SA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/delighted/sketch-scale-all-in-place" target="_blank">Scale All in Place</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Scale all in place: Resize all selected shapes or layers, in place, from the center. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/DWilliames/nudge-resize-sketch-plugin" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">NR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/DWilliames/nudge-resize-sketch-plugin" target="_blank">Nudge Resize</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Resize a layer horizontally and vertically from the centre with easy keyboard shortcuts </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/apertureless/sketch-flip-size" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/apertureless/sketch-flip-size" target="_blank">FlipSize</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Flip the size of any artboard or shape </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/dannymcclain/fit-to-parent" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">f</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/dannymcclain/fit-to-parent" target="_blank">fit-to-parent</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin that lets you fit a layer to its parent's width, height, or both. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/acollurafici/PinIt" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/acollurafici/PinIt" target="_blank">PinIt</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A collection of Resizing Shortcuts. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/740127005583346577" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">BR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/740127005583346577" target="_blank">Button Resizer</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Resize your button to fit its label width. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/739117729229117975" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">IR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/739117729229117975" target="_blank">Icon Resizer</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Resize icons into a standard size and bounding box on your design. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/739222456238688882" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/739222456238688882" target="_blank">Aspects</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>AboutAspects is a little plugin that helps resize selected elements to fit a certain aspect ratio. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/740887843052935394" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">AR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/740887843052935394" target="_blank">Anchor Resizer</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Resize the selected layer from any corner or direction. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/742639765059742358" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/742639765059742358" target="_blank">Margins</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Resize and position elements using Top, Bottom, Left and Right. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/740806995589371083" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/740806995589371083" target="_blank">MultipleResizing</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>You can resize multiple objects at once. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/753968999663099454" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">Rt</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/753968999663099454" target="_blank">Resize to Frame</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Select items to resize them to their parent's size (Horizontally, Vertically or Both). </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/756895186298946525" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">PS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/756895186298946525" target="_blank">Proportional Scale</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Easily resize your shapes with all other attributes resizing proportionally. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/748762621505012566" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">RS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/748762621505012566" target="_blank">Reset Size</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Plugin for quick access to the resetting size of the instances. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/valentindb/fit-to-artboard/blob/master/README.md" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">Ft</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/valentindb/fit-to-artboard/blob/master/README.md" target="_blank">Fit to Artboard</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Resize shapes to fit the artboard in no time, using 2 simple custom keyboard shortcuts </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://bitbucket.org/adiladdiya/print-artboard" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">PA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://bitbucket.org/adiladdiya/print-artboard" target="_blank">Print Artboard</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Create or resize artboard using common or documents sizes (A3, A4, A5, legal, letter, custom ...), unite (mm, in...) and resolution you need. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/craigmdennis/adobe-xd-nudge-and-resize/" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">Na</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/craigmdennis/adobe-xd-nudge-and-resize/" target="_blank">Nudge and Resize</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Add menu items for nudging and resizing objects (8px by default) so they can be controlled by keyboard shortcuts. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/littlebusters/Resize-Artboard-to-Fit-Contents" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">RA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/littlebusters/Resize-Artboard-to-Fit-Contents" target="_blank">Resize Artboard to Fit Content</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Resize the artboard to fit the boundary of Contents in the artboard. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/littlebusters/Adjust-size-by-shortcut-for-AdobeXD" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">AS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/littlebusters/Adjust-size-by-shortcut-for-AdobeXD" target="_blank">Adjust Size by Shortcut</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Adjustment size of objects by Keyboard Shortcut. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/craigmdennis/adobe-xd-fit-to-parent" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">Ft</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/craigmdennis/adobe-xd-fit-to-parent" target="_blank">Fit to Parent</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Resize objects to match the size of their parent Group or Artboard. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="akira.maru@gmail.com" class="tool__asset" target="_blank" style="background-color: hsl(181.6, 77%, 81%); color: rgb(116, 208, 212);">AS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="akira.maru@gmail.com" target="_blank">Artboard Size Expander</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Artboard Size Expander allow you to change еру artboard size by 10px or 100px unit. You prefer to set a keyboard shortcut with another utility application. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="selection-enhancement">
			<header>
				<h3><a href="#selection-enhancement">Selection Enhancement</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/wonderbit/sketch-select-similar-layers" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/wonderbit/sketch-select-similar-layers" target="_blank">Select Similar Layers</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A plugin that selects layers with similar attributes to those of the layer currently selected. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/keremciu/sketch-select-invisible-layers" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">SI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/keremciu/sketch-select-invisible-layers" target="_blank">Select Invisible Layers</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Select invisible layers on the current page </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/chibatching/select_all_slices" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">SA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/chibatching/select_all_slices" target="_blank">Select All Slices</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch app plugin to select all slices in the current page. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/mattmcmanus/select-group-layers-sketch-plugin" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">SG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/mattmcmanus/select-group-layers-sketch-plugin" target="_blank">Select Group Layers</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Select all child layers of a group with a key command. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/nefaurk/select-parent-artboards" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">SP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/nefaurk/select-parent-artboards" target="_blank">Select Parent Artboards</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that selects the parent artboards of the current selection </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/jshuaf/select-children" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">SC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/jshuaf/select-children" target="_blank">Select Child Layers</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A sketch plugin to select all the child layers of a group. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/canisminor1990/sketch-select" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/canisminor1990/sketch-select" target="_blank">Sketch Select</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Make it much more convenient to select layers with similar attributes. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/FrancisVega/sketch-query-selection" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">SQ</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/FrancisVega/sketch-query-selection" target="_blank">Sketch Query Selection</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Filter selection layers by type </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/kenmoore/sketch-artboard" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">SA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/kenmoore/sketch-artboard" target="_blank">Sketch Artboard</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Next Artboard / Previous Artboard </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/fhuel/DeepSelect" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">D</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/fhuel/DeepSelect" target="_blank">DeepSelect</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A quick and easy way to select layers inside a group, filtering by layer type </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/norman-woz/areanow" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">a</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/norman-woz/areanow" target="_blank">areanow</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Get the total area of selected rectangle layers. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/derekatkinson/sketch-unlock-all-selected-layers#readme" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">SU</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/derekatkinson/sketch-unlock-all-selected-layers#readme" target="_blank">Sketch Unlock All Selected Layers</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Unlock all selected layers using ⌘⌥L </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/wescraig/Transpose" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/wescraig/Transpose" target="_blank">Transpose</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Transpose your selection and set pixel margins between elements. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/jan-patrick/sketch_artboard-history" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">AH</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/jan-patrick/sketch_artboard-history" target="_blank">Artboard History</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin to switch faster between your latest artboards. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/lucaorio/sketch-reverse" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">SR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/lucaorio/sketch-reverse" target="_blank">Sketch Reverse</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Reverse the position or depth of selected elements. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/735733267883397781" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/735733267883397781" target="_blank">Similayer</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>This plugin takes Figma’s in-built ‘Select all with...’ command to the next level. Select similar layers; based on a whole range of properties. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/739978920241977182" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">F&amp;</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/739978920241977182" target="_blank">Find &amp; Focus</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>A simple plugin to search for layers in your document. The plugin will select the layers containing your text and zoom to fit them. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/739031302880873832" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">SI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/739031302880873832" target="_blank">Select Inverse for Real</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Inverts your selection within the context of the parent group/frame. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/750783568176946334" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/750783568176946334" target="_blank">Super Select</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Select All Siblings and Invert Siblings support multiple layer selections. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/742536097587262088" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">SP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/742536097587262088" target="_blank">Select Parent</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Select Parent, lets you quickly select the parent object of whatever you have selected. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/748537235829892910" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">RN</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/748537235829892910" target="_blank">Replace Nodes</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Replace Nodes plugin replaces selected nodes with the copied node. Basically, this plugin does paste over selection while removing the original selection. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/740593880490123393" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">St</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/740593880490123393" target="_blank">Send to Top</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Take any selection and send it to the top of the layer stack. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://sttk3.com/contact" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://sttk3.com/contact" target="_blank">SelectMenu</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Select Same: Selecting and executing one item will select items with the same name, class, component instance, position, etc. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="info@paolobiagini.com" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="info@paolobiagini.com" target="_blank">Selection</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Selection is a command-like plugin for selecting objects with the same properties. It supports local selections inside single Artboards, Repeat Grids and groups, as well as global selections across multiple Artboards. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/iamsolarplexus/adobexd-goToNextArtboard" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">Gt</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/iamsolarplexus/adobexd-goToNextArtboard" target="_blank">Go to Next Artboard</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>This plugin allows easy keyboard navigation from currently selected* artboard to the previous (Ctrl+Alt+Z) or next (Ctrl+Alt+C) artboard. Each movement finishes by zooming the artboard to fit. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="andreea.marica11@yahoo.com" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="andreea.marica11@yahoo.com" target="_blank">SelectionToArtboard</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>The plugin creates a custom-sized Artboard, starting from the user selection. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="alexdobras@gmail.com" class="tool__asset" target="_blank" style="background-color: hsl(241.6, 77%, 81%); color: rgb(120, 116, 212);">FA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="alexdobras@gmail.com" target="_blank">Find Artboard from Link</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Paste the link from your browser to quickly find an artboard in your document. It can be a web link to a prototype or a spec document. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="shortcut--keyboard">
			<header>
				<h3><a href="#shortcut-&amp;-keyboard">Shortcut &amp; Keyboard</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://keygaroo.ixco.io/" class="tool__asset" target="_blank" style="background-color: hsl(0, 0%, 78%); color: rgb(166, 141, 141);">K</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://keygaroo.ixco.io/" target="_blank">Keygaroo</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Keygaroo helps you learn keyboard shortcuts for the actions you use the most. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/vincenzopetito/Shapr" class="tool__asset" target="_blank" style="background-color: hsl(0, 0%, 78%); color: rgb(166, 141, 141);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/vincenzopetito/Shapr" target="_blank">Shapr</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin to create an element with the keyboards! </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="state-management">
			<header>
				<h3><a href="#state-management">State Management</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/ozgurgunes/Sketch-Layer-Comps" class="tool__asset" target="_blank" style="background-color: hsl(0, 41%, 78%); color: rgb(189, 121, 121);">SL</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ozgurgunes/Sketch-Layer-Comps" target="_blank">Sketch Layer Comps</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A plugin that saves and applies layer states to create different compositions of the current page. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/romashamin/statemachine-sketch" class="tool__asset" target="_blank" style="background-color: hsl(0, 41%, 78%); color: rgb(189, 121, 121);">SM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/romashamin/statemachine-sketch" target="_blank">State Machine</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>State Machine is a Sketch plugin. Installing it will allow you to use ⌃⌘S to switch an active tab on a tab bar you’re designing, an active navigation section in a menu, or a page number in a pagination control. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/einancunlu/Sketch-State-Switch-Master" class="tool__asset" target="_blank" style="background-color: hsl(0, 41%, 78%); color: rgb(189, 121, 121);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/einancunlu/Sketch-State-Switch-Master" target="_blank">Sketch State Switch Master</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Define different states and switch between them like a boss. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/einancunlu/Checkpoints-Plugin-for-Sketch" class="tool__asset" target="_blank" style="background-color: hsl(0, 41%, 78%); color: rgb(189, 121, 121);">CP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/einancunlu/Checkpoints-Plugin-for-Sketch" target="_blank">Checkpoints Plugin for Sketch</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Save important stages of your artboards in the blink of an eye, and then, move fast and break things. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/edenvidal/States" class="tool__asset" target="_blank" style="background-color: hsl(0, 41%, 78%); color: rgb(189, 121, 121);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/edenvidal/States" target="_blank">States</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Create different artboard states and switch between them easily </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="style-management">
			<header>
				<h3><a href="#style-management">Style Management</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://material.io/tools/theme-editor" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">MP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://material.io/tools/theme-editor" target="_blank">Material Plugin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Create, customize, and share your own Material theme. Includes Material Theme Editor, plus upload and sync to Gallery. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/alibaba-fusion/cool" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/alibaba-fusion/cool" target="_blank">FusionCool</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Plugin to using resources of Fusion Design. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/aparajita/sketch-style-master" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/aparajita/sketch-style-master" target="_blank">Sketch Style Master</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin for renaming shared styles </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/sonburn/shared-style-finder" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/sonburn/shared-style-finder" target="_blank">Shared Style Finder</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Find instances of a shared layer or text style. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/lazybearcreations/sketch-lazy-styles-generator#readme" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">l</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/lazybearcreations/sketch-lazy-styles-generator#readme" target="_blank">lazy-styles-generator</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Generate shared layer and text styles using the name of the selected layer as the name of the generated style. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/mathieudutour/sketch-styles-hierarchy" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/mathieudutour/sketch-styles-hierarchy" target="_blank">Shared Styles Hierarchy</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Organize your shared styles using the layers list, create a hierarchy where children inherit properties from their parent. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/einancunlu/Flatten-Plugin-for-Sketch" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">FP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/einancunlu/Flatten-Plugin-for-Sketch" target="_blank">Flatten Plugin for Sketch</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Flatten single or multiple layers instantly, create shared artboard styles, keep them all updated like a boss and boost your Sketch document performance. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/weixin/Miaow" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/weixin/Miaow" target="_blank">Miaow</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A set of plugins for Sketch include drawing links &amp; marks, UI Kit &amp; Color sync, font &amp; text replacing. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/sebj/Remove-Fills-and-Borders" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">RF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/sebj/Remove-Fills-and-Borders" target="_blank">Remove Fills and Borders</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Remove a layer's fills and borders in Sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/lucaorio/sketch-styles-generator" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/lucaorio/sketch-styles-generator" target="_blank">Sketch Styles Generator</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Generate hundreds of Sketch Shared Styles in a matter of seconds. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://blur.duanjun.net" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">BA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://blur.duanjun.net" target="_blank">Blur Artboard</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Add blur effect to artboards for testing visual hierarchy easily in your design process. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/mjkaufer/smudge" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/mjkaufer/smudge" target="_blank">Smudge</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Emulate blend functionality from Adobe Illustrator </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/YitingLiu/Elevation-Shadows" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">ES</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/YitingLiu/Elevation-Shadows" target="_blank">Elevation Shadows</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch Plugin to apply consistent Elevation Shadows </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/oodesign/sketch-styler" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/oodesign/sketch-styler" target="_blank">Sketch Styler</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin that assigns styles automatically to all of your unstyled layers. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/iarthstar/copy-paste-shadows" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">c</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/iarthstar/copy-paste-shadows" target="_blank">copy-paste-shadows</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Plugin to copy-paste shadows across layers </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/jan-dh/sketch-tailwind" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">s</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/jan-dh/sketch-tailwind" target="_blank">sketch-tailwind</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Export your design to a theme-file you can use in your Tailwind CSS config. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/tbrasington/text-to-styles" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">Tt</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/tbrasington/text-to-styles" target="_blank">Text to Styles</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Generates Sketch type styles programmatically from Artboards </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/mathieudutour/rough-sketch" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">R</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/mathieudutour/rough-sketch" target="_blank">Rough</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Transform your shapes in a sketchy, scribbly, hand-drawn-like, style. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/FrancisVega/Sketch-Smart-Style-Switcher" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/FrancisVega/Sketch-Smart-Style-Switcher" target="_blank">Sketch Smart Style Switcher</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Switch to an existing test style if attributes match. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/FrancisVega/Sketch-Copy-Layers-Styles" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/FrancisVega/Sketch-Copy-Layers-Styles" target="_blank">Sketch Copy Layers Styles</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin to copy Layers and Text styles </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/pranusarna94/Swappr" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/pranusarna94/Swappr" target="_blank">Swappr</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Swap layer positions and styles </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/dinozavrix/sketch_fix_styles" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">FS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/dinozavrix/sketch_fix_styles" target="_blank">Fix Styles</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Remove duplicate styles in Sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ryanmclaughlin/styledrop" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">s</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ryanmclaughlin/styledrop" target="_blank">styledrop</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A plugin for Sketch allows you to easily copy styles from one layer to another. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ryanjohnson-me/Sketch-Copy-Paste-Shadows" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">C&amp;</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ryanjohnson-me/Sketch-Copy-Paste-Shadows" target="_blank">Copy &amp; Paste Shadows</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Copy &amp; paste only shadow styles from layers without other styles getting in the way. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/JayHoltslander/Sketch-Make-Long-Shadow" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/JayHoltslander/Sketch-Make-Long-Shadow" target="_blank">Sketch Make Long Shadow</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A plugin for Sketch to create long shadows from a shape. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/sebcglbailey/sketch-system-styles" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">s</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/sebcglbailey/sketch-system-styles" target="_blank">system-styles</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Generate all the text styles you'll need, including alignment and colour. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ozzik/swap-styles" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ozzik/swap-styles" target="_blank">Swap Styles</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin for swapping styles between two layers. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/731176732337510831" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/731176732337510831" target="_blank">Themer</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Themer allows you to easily swap between published styles from your libraries. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/736060893363678891" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">K</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/736060893363678891" target="_blank">Kaleidocode</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Convert VS Code themes to Figma color libraries, create new themes via JSON, and swap themes automatically. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/747227147599827533" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">UK</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/747227147599827533" target="_blank">UI Kit</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>This plugin makes a preview for the fonts and colors used on the layouts or from your styles. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/752558325552095625" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">N</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/752558325552095625" target="_blank">Noise</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Make some noise in Figma! Noise is a handy tool when you need to add a hint of realism to your work. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="info@paolobiagini.com" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">CS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="info@paolobiagini.com" target="_blank">Convert Shape</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Convert Shape is a command-like plugin that easily converts a shape into another, keeping the original appearance. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://useratio.com/stylemate/" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://useratio.com/stylemate/" target="_blank">Style Mate</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Apply consistent styles and design tokens as fast as you can type. Change color, typography, dimensions and more with precision through a single interface. Create design tokens and share them with other designers and developers. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="naru.kubota@gmail.com" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="naru.kubota@gmail.com" target="_blank">Swap Fill and Border</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Swap Fill and Border is a plugin that allows you to switch fill and border colors in a moment. You can save your time and let you focus on the UI that really matters </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="mr.flashi@gmail.com" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">Rp</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="mr.flashi@gmail.com" target="_blank">Reorient path</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Reset the path rotation without affecting the shape. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/masa-sumimoto/adobe-xd-reverse-button-fill" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">RB</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/masa-sumimoto/adobe-xd-reverse-button-fill" target="_blank">Reverse Button Fill</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>A plugin that reverse fills a text and a rectangle ( or an ellipse ). This plugin is intended to be used for button-like elements. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/boopeshmahendran/AdobeXD-Swap-Positions" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/boopeshmahendran/AdobeXD-Swap-Positions" target="_blank">Swap Position</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Swap the position of two selected nodes </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.toolabs.com/xdplugin" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">TD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.toolabs.com/xdplugin" target="_blank">Toolabs DSM</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>A stateful design system manager which lets you link design tokens to design elements in your Adobe XD documents and make them themeable by defining system state variations, with no need to copy and paste your artboards. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="symbols--components-management">
			<header>
				<h3><a href="#symbols-&amp;-components-management">Symbols &amp; Components Management</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="http://symbol-browser.pratikshah.website/" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SB</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://symbol-browser.pratikshah.website/" target="_blank">Symbol Browser</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A new way to browse your symbols. Make the most of your Design System by bringing symbols and UI Sticker sheets together. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/lifeofmle/symbol-insert" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">s</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/lifeofmle/symbol-insert" target="_blank">symbol-insert</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Simple plugin to insert Sketch symbols </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/franklymrshankly/Symbol-Merger" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/franklymrshankly/Symbol-Merger" target="_blank">Symbol-Merger</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that merges duplicate symbols </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/njcrowther/Disconnector" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">D</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/njcrowther/Disconnector" target="_blank">Disconnector</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Quickly disconnect all symbols from a selection </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/danielthall/restore-overrides" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">r</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/danielthall/restore-overrides" target="_blank">restore-overrides</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A small plugin to store and restore override values before and after library updates </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ozgurgunes/Sketch-Symbol-States" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ozgurgunes/Sketch-Symbol-States" target="_blank">Symbol States</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that saves overrides of a symbol instance as states to be applicable on another instance of that symbol later. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ozgurgunes/Sketch-Overrides-Manager" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">OM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ozgurgunes/Sketch-Overrides-Manager" target="_blank">Overrides Manager</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that makes managing overrides easier. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Pausansol/Escriba" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">E</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Pausansol/Escriba" target="_blank">Escriba</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin to copy-paste symbol overrides </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/perrysmotors/format-symbol-names" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">FS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/perrysmotors/format-symbol-names" target="_blank">Format Symbol Names</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin to nicely format the names of all artboards or symbol masters on the current page </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/perrysmotors/sketch-library-unlinker" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SL</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/perrysmotors/sketch-library-unlinker" target="_blank">Sketch Library Unlinker</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Unlink symbols linked to a specific library, or unlink symbols that have been deleted in their libraries. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/yusukesaitoh/sketch-select-same-symbols" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/yusukesaitoh/sketch-select-same-symbols" target="_blank">Select Same Symbols</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Select the same symbols as the currently selected symbol. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ahmedmigo/Move-to-library-sketchplugin" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">MT</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ahmedmigo/Move-to-library-sketchplugin" target="_blank">Move To Library Sketchplugin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p> You can now move symbol from your project to any library and re-attach all the symbol instances to this library. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/sonburn/symbol-swapper" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/sonburn/symbol-swapper" target="_blank">Symbol Swapper</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Swap the selected symbols and/or symbol instances to a master of the same name in a library. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/sonburn/symbol-instance-locator" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/sonburn/symbol-instance-locator" target="_blank">Symbol Instance Locator</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Locate all instances of a selected symbol or instance. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/sonburn/symbol-instance-sheet" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/sonburn/symbol-instance-sheet" target="_blank">Symbol Instance Sheet</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Generate a sheet of symbol instances from your current document or a library. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/zeroheight/library-symbol-replacer" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">LS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/zeroheight/library-symbol-replacer" target="_blank">Library Symbol Replacer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin to replace symbols in existing documents with library symbols </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/sketch-symbol-importer/sketch-symbol-importer" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/sketch-symbol-importer/sketch-symbol-importer" target="_blank">Sketch Symbol Importer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Import symbols from on Sketch file into another. Maintains overrides and updates existing symbols in place. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/mcansh/sketch-find-all-instances-of-symbol" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/mcansh/sketch-find-all-instances-of-symbol" target="_blank">Sketch Find All Instances of Symbol</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Find all instances of a symbol in Sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/oodesign/merge-duplicate-symbols" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">MD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/oodesign/merge-duplicate-symbols" target="_blank">Merge Duplicate Symbols</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch.app plugin to merge symbols with the same name. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/d4rekanguok/instance-locator" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">IL</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/d4rekanguok/instance-locator" target="_blank">Instance Locator</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Locate instances of a selected symbol and navigate to them, anywhere in the doc. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/pberrecloth/prefixation-sketch-plugin" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">PS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/pberrecloth/prefixation-sketch-plugin" target="_blank">Prefixation Sketch Plugin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Manage the prefixes of your layers, artboards or symbols </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/nmwoods1/Sketch---Find-all-instances-of-symbol" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">FA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/nmwoods1/Sketch---Find-all-instances-of-symbol" target="_blank">Find All Instances of Symbol</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that lets you find all of the instances of a symbol across multiple pages/artboards </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/marianomike/sketch-duplicatesymbol" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/marianomike/sketch-duplicatesymbol" target="_blank">Sketch Duplicatesymbol</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin that creates a new symbol out of a selected symbol </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Elethom/Sketch-PathPrefixRemover" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">PP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Elethom/Sketch-PathPrefixRemover" target="_blank">Path Prefix Remover</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Remove path prefix for symbol instances. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/websiddu/sketch-symbol-me" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/websiddu/sketch-symbol-me" target="_blank">Symbol Me</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Convert all your similar layers to symbols with a single click. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/kmerc/sketch-import-symbols" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">IS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/kmerc/sketch-import-symbols" target="_blank">Import Symbols</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Easily import symbols from another Sketch file </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/demersdesigns/sketch-batch-create-symbols" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">BC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/demersdesigns/sketch-batch-create-symbols" target="_blank">Batch Create Symbols</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A plugin for Sketch to convert selected layers to individual symbols. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/eivindbohler/Sketch-Unlinker" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SU</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/eivindbohler/Sketch-Unlinker" target="_blank">Sketch Unlinker</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin that lets you unlink selected layers and groups from either shared symbols, styles or text styles, en masse. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/einancunlu/Disconnect-for-Sketch" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">Df</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/einancunlu/Disconnect-for-Sketch" target="_blank">Disconnect for Sketch</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Disconnect/unlink selection from symbols and shared styles. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/griffin-stewie/SymbolNameSync" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/griffin-stewie/SymbolNameSync" target="_blank">SymbolNameSync</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>This plugin gives you syncing names between Symbol masters and its instances. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/amimagid/sketch-symbol-legend" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/amimagid/sketch-symbol-legend" target="_blank">Sketch Symbol Legend</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>This plugin provides indexing of Symbols in your artboard with a detailed legend. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/uxcourt/overlaytoggler" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">s</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/uxcourt/overlaytoggler" target="_blank">symbol-overlay-toggle</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plug-in to seek specific style names in library-sourced symbols and toggle the styles. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/741895659787979282" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">IF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/741895659787979282" target="_blank">Instance Finder</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Find all Instances of a Component used in your file. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/741935812012883481" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">L</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/741935812012883481" target="_blank">Locator</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Locator helps you find all instances of a component and enables you to jump to each instance. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/749583881837062159" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">CP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/749583881837062159" target="_blank">Component Page</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>This plugin enables you to create a component (like you would in Sketch) where the master moves to a dedicated page leaving an instance in place. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/741415678427267506" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">RI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/741415678427267506" target="_blank">Reattach Instance</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Relink a frame to a component by searching for similar instances. (... </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/748545064462894895" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">CR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/748545064462894895" target="_blank">Component Replacer</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>A simple plugin that helps you to replace any selection with components or instances. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/746849770992339499" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/746849770992339499" target="_blank">Safely Delete Components</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>When you delete a component, it can be still used in your mockups. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/749061307736645564" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">St</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/749061307736645564" target="_blank">Send to Components Page</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>If you prefer to keep your components on a separate page and are tired of carrying them manually, this plugin is for you. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/754404293457940119" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">CM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/754404293457940119" target="_blank">Component Master Manager</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Component Master Manager is a simple plugin to collect, sort and group master components from selected pages to one page for organise your design system. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/754240053660034676" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">CC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/754240053660034676" target="_blank">Create Component Inside</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Create components anywhere you want! You can use this plugin instead of the standard Create Component command. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://nurecas.com/replacer-a-plugin-for-adobe-xd" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">R</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://nurecas.com/replacer-a-plugin-for-adobe-xd" target="_blank">Replacer</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Did you create multiple copies of an object without making them a symbol? And now, do you want to change it all, but have to go one by one? Fret no more, replacer will help replace individual vector objects and texts with one click. First, select the object to be replaced and then select the object it has to be replaced with. Then run the plugin and all instances of the first object will be replaced by the second. Enjoy! </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="text-management">
			<header>
				<h3><a href="#text-management">Text Management</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/KevinGutowski/Truncat" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/KevinGutowski/Truncat" target="_blank">Truncat</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin to truncate text. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/explorador/sketch-copy-text-only" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/explorador/sketch-copy-text-only" target="_blank">Sketch Copy Text Only</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin to copy only the text from selected artboard(s) or layer(s) </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/afnizarnur/context" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/afnizarnur/context" target="_blank">Context</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Count character, words, and paragraphs from a text layer easily inside Sketch! </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/franklymrshankly/Create-New-Styles" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">CN</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/franklymrshankly/Create-New-Styles" target="_blank">Create New Styles</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin to create multiple layer styles or text styles </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/dbilyk/QuickTextOverride" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">Q</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/dbilyk/QuickTextOverride" target="_blank">QuickTextOverride</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Use a key command to target the first text override of a symbol. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/kbirgoren/sketch-json-translator" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">TF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/kbirgoren/sketch-json-translator" target="_blank">Translate From JSON</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin lets you use variables for texts in your designs. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/chriswetterman/sketch-find-and-replace-text" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">Fa</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/chriswetterman/sketch-find-and-replace-text" target="_blank">Find and Replace Text</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Find and replace text throughout your Sketch document </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ozgurgunes/Sketch-Case-Converter" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">CC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ozgurgunes/Sketch-Case-Converter" target="_blank">Case Converter</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Convert text layers, symbols or all instances of a symbol. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ysjn/bold-it" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">BI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ysjn/bold-it" target="_blank">Bold It</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Bold-it is a super simple plugin that bolds a user-specified keyword in selected text layers. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/tgfjt/sketch-add-trailing-space#readme" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">a</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/tgfjt/sketch-add-trailing-space#readme" target="_blank">add-trailing-space</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Add trailing space into selected text layers </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/andyault/sketch-adjusttofit" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">a</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/andyault/sketch-adjusttofit" target="_blank">adjustToFit</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A quick Sketch plugin to resize text layers, groups, and artboards to fit their content. Also, supports nested resizing. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/zeplin/emoji-autocomplete-sketch-plugin" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">EA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/zeplin/emoji-autocomplete-sketch-plugin" target="_blank">Emoji Autocomplete Sketch Plugin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>While editing Sketch text layers, type “:” followed by the first few letters to auto-complete emojis. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/golmakov/sketch-hyphenator" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SH</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/golmakov/sketch-hyphenator" target="_blank">Sketch Hyphenator</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin that hyphenates text </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/juliussohn/sketch-textbox-fit-content" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">Tf</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/juliussohn/sketch-textbox-fit-content" target="_blank">Textbox fit Content</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>This plugin sets the height of a selected text layer or all text layers in a selected group to its content's height. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/jbentzen/sketch-fast-text-transfer" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">FT</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/jbentzen/sketch-fast-text-transfer" target="_blank">Fast Text Transfer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Lightning-fast copying, pasting and swapping text. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/sigtm/sketch-style-libraries" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/sigtm/sketch-style-libraries" target="_blank">Sketch Style Libraries</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sync layer &amp; text styles from any Sketch Library </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/usagimaru/Sketch-AppleSystemFont-Plugin" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">IW</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/usagimaru/Sketch-AppleSystemFont-Plugin" target="_blank">I Want Apple System Font</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin for applying Apple system font to text layers. (For Japanese designers.) </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/eddiesigner/sketch-translate-me" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/eddiesigner/sketch-translate-me" target="_blank">Translate.me</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Translations. Simplified. Translate your Sketch text layers, artboards, and pages in over 100 languages with Translate.me plugin. Powered by Google. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/symdesign/sketch-auto-translate" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/symdesign/sketch-auto-translate" target="_blank">Sketch Auto Translate</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Plugin to translate Sketch files into via Google Translate. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Hemmingsson/Sketch-Title-Case" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">ST</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Hemmingsson/Sketch-Title-Case" target="_blank">Sketch Title Case</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch Plugin to make text Title Case </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/mamuso/sketch-truncate-textlines" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">TT</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/mamuso/sketch-truncate-textlines" target="_blank">Truncate Text Lines</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Truncate the number of lines of a textbox, adding an ellipsis if needed. It works using words or characters. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/kylehickinson/Sketch-SF-UI-Font-Fixer" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/kylehickinson/Sketch-SF-UI-Font-Fixer" target="_blank">Sketch SF UI Font Fixer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that adjusts the character spacing on text layers using iOS 9's SF UI Text/Display fonts to what it would be when used in an iOS app. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/psilfver/sketch-adjust-button-shape" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">AB</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/psilfver/sketch-adjust-button-shape" target="_blank">Adjust Button Shape</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that adjusts a shape layer according to the attributes of a text layer </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/arieare/Sketch-Pseudol10n" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/arieare/Sketch-Pseudol10n" target="_blank">Pseudol10n</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin to pseudolocalize text layers </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/automat/sketch-text-tools" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">ST</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/automat/sketch-text-tools" target="_blank">Sketch Text Tools</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch App Typography Plugin for working with font metrics, aligning text-layers and building typographic systems. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Creatide/Sketch_Update-Text-Layer-Name" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">UT</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Creatide/Sketch_Update-Text-Layer-Name" target="_blank">Update Text Layer Name</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin to update Text layer names from their own text values. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/jessebilsten/Sketch-TitleCase" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/jessebilsten/Sketch-TitleCase" target="_blank">TitleCase</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that changes your text to TitleCase </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/schwa23/cleanupsfui" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">CU</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/schwa23/cleanupsfui" target="_blank">Clean Up SF UI Type</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch Plugin to clean up SF UI fonts character spacing &amp; normalize text &amp; display variants. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/thierryc/Sketch-Find-And-Replace" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">FA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/thierryc/Sketch-Find-And-Replace" target="_blank">Find And Replace</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch 3 plugin to do a simple find and replace on text within layers </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/andrewfiorillo/sketch-character-count" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">CC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/andrewfiorillo/sketch-character-count" target="_blank">Character Count</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin to count the number of characters in a text layer </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/hamidp/sketchtextsourcer" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/hamidp/sketchtextsourcer" target="_blank">SketchTextSourcer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin for easily populating a bunch of text layers from a source. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/soutaro/Align-text-baseline-sketch-plugin" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">AT</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/soutaro/Align-text-baseline-sketch-plugin" target="_blank">Align Text Baseline</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Align text layer vertically based on its baseline and cap-height. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/x-raizor/Efficiency" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">E</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/x-raizor/Efficiency" target="_blank">Efficiency</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Set of plugins for efficient work: change text linespacing and leading via keyboard, random sizing and random positioning of selected items, keep only text layers in selection. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/getflourish/Sketch-Set-Line-Height-Plugin" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SL</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/getflourish/Sketch-Set-Line-Height-Plugin" target="_blank">Set Line Height</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Plugin that allows you to set the line-height of a text layer as a multiple of the font size. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/littlebusters/Switch-Text-Spacing" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">ST</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/littlebusters/Switch-Text-Spacing" target="_blank">Switch Text Spacing</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Switch text spacing with OpenType features. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/joshwayne/jw-sketch-plugins" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/joshwayne/jw-sketch-plugins" target="_blank">Sketch Plugins</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Josh Wayne's plugins for Sketch. So far, it includes two very interesting commands for working with text layers. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/margusholland/Comma" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/margusholland/Comma" target="_blank">Comma</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin for text modifications </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Elethom/Sketch-SFUI-Font-Fixer" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Elethom/Sketch-SFUI-Font-Fixer" target="_blank">San Francisco UI Font Fixer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Adjusts font, character spacing, line height for labels using San Francisco font. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/dezonik/Typograph" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/dezonik/Typograph" target="_blank">Typograph</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Typograph</p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Tallwave/sketch-spellcheck-all-layers" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Tallwave/sketch-spellcheck-all-layers" target="_blank">Spell Check Whole Page</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A basic spellchecker that checks all layers on a page in Sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/joshkissel/sketch-count-text" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/joshkissel/sketch-count-text" target="_blank">Sketch Count Text</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin to count: characters, words, whitespace, and paragraphs </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/heytitle/latex-sketch-plugin" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">LS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/heytitle/latex-sketch-plugin" target="_blank">LaTeX Sketch Plugin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>This plugin brings LaTeX functionalities to Sketch, and allows us to directly write mathematical formulas </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/fruitfrills/polyglot" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">p</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/fruitfrills/polyglot" target="_blank">polyglot</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Text translations </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/735072959812183643" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">Fa</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/735072959812183643" target="_blank">Find and Replace</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Search for texts on your page and replace them just like a text editor. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/735148445325474400" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">CT</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/735148445325474400" target="_blank">Change Text</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>With Change Text, you can bulk edit the text contents of multiple layers, groups, and frames. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/739048247603902878" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">NT</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/739048247603902878" target="_blank">Nisa Text Splitter</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Easy way to split your text/list into small text pieces. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/736439252271864504" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/736439252271864504" target="_blank">Polyglot</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Polyglot is made for designers working on global products. By bringing localization to the design phase, we hope to streamline the product development lifecycle. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/738791203005929386" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">An</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/738791203005929386" target="_blank">Add numbers to texts</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Create numbered lists easily. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/739131137116544548" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/739131137116544548" target="_blank">TextCutter</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>TextCutter takes a layer with multiple lines of text and splits it into separate text layers. Empty lines get discarded automatically. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/742152456731717201" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">WC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/742152456731717201" target="_blank">Word Count</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>A dead-simple plugin that counts the number of words and characters in any selection. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/740632514053994647" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">TC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/740632514053994647" target="_blank">Text Counts</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>A simple way to count the number of characters, spaces, and words inside a text layer. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/738916553283875028" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">Ca</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/738916553283875028" target="_blank">Copy and Paste Text</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Figma plugin to copy &amp; paste only text (without text styls) from selected layers. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/739106133703249411" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">C</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/739106133703249411" target="_blank">Counter</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Make sure copy is easy to read with this easy character counter.“The ideal width of a line of text is from 45 to 75 characters—including spaces. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/739517744595900126" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">Sf</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/739517744595900126" target="_blank">Substrate for text 2.0</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Highlight text by adding the cool substrate with this simple plugin! </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/739192358533401183" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">BT</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/739192358533401183" target="_blank">Bunch Text Changer</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Select one or several text layers, call the plugin and Paste or type a new value. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/750499296698468459" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">R</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/750499296698468459" target="_blank">Retextifier</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Change multiple texts without having to click on each of them first. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/758250492778745937" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">tt</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/758250492778745937" target="_blank">text to line</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Removes extra spaces, line breaks, and paragraphs. Formats the font and style of the layer by the first character. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/762070688792833472" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">a</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/762070688792833472" target="_blank">arc</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Curve your text upward, downward or into a circle. Adjust the slider and preview the result. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/760035865558407437" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">H</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/760035865558407437" target="_blank">Hemingway</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Make your writing bold and clear. Select any text element and run the plugin. It will analyze the text using Hemingway's rules around adverbs, passive voices, complex phrases, and hard sentences. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/754622689958838972" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">LE</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/754622689958838972" target="_blank">Latex Editor</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Simple plugin to insert math equations into documents. It uses an API to transform LaTeX text into SVG images that can be easily manipulated in Figma designs. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/759101941814288575" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">RT</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/759101941814288575" target="_blank">Reset Text Layer Name</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Ever end up wanting to reset your layer names, so the name reflects your text content? </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/750174581284816960" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SB</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/750174581284816960" target="_blank">Simple Bullets</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Simple plugin which makes it easy to add bullets in text layers. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/734628505008435795" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/734628505008435795" target="_blank">Bullets</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Add custom bullets to your layers and create reusable list styles via the power of components. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/739046186899657111" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">GL</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/739046186899657111" target="_blank">Golden Line</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Change line height based on the Golden Ratio. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/731260490045684148" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">CB</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/731260490045684148" target="_blank">Content Buddy</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>A Figma Plugin that makes replacing text content in multiple layers super easy for anyone. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/yoshikinoko/SplitText" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/yoshikinoko/SplitText" target="_blank">SplitText</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Split Text by newlines, tabs, and commas. (To split text by tabs, copy and paste text from another editor.) </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Raphael-D/xd-plugin/tree/master/clip-text" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">CT</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Raphael-D/xd-plugin/tree/master/clip-text" target="_blank">Clip Text</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Copy on clipboard plaintext of selected texts. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://omoon.org" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">TS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://omoon.org" target="_blank">Texts Selector</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>By this plugin, you can select all text elements from selected items. You can easily change the font face, size, and color of multiple text elements at once. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.coffee-break-designs.com/production/text-to-clipbord/" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">Tt</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.coffee-break-designs.com/production/text-to-clipbord/" target="_blank">Text to Clipbord</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Copy multiple texts to the clipboard. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="jakovcevski@gmail.com" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">SF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="jakovcevski@gmail.com" target="_blank">Simple Find and Replace</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>A simple case-sensitive find and replace text plugin for Adobe XD. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="info@paolobiagini.com" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">CC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="info@paolobiagini.com" target="_blank">Change Case</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Change Case is a command-like plugin for changing text capitalization. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="richard.vanderdys@gmail.com" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">PT</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="richard.vanderdys@gmail.com" target="_blank">Place Text</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Quickly create text placeholders, or customize the look you need. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/boopeshmahendran/AdobeXD-Count-Text" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">CT</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/boopeshmahendran/AdobeXD-Count-Text" target="_blank">Count Text</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Counts the number of words and characters in the selected text layer(s) </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="adarshgupta602@gmail.com" class="tool__asset" target="_blank" style="background-color: hsl(121.6, 77%, 81%); color: rgb(116, 212, 120);">c</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="adarshgupta602@gmail.com" target="_blank">changeTextCase</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>A plugin which helps you to change the case of text in snake_case, kebab-case, lowercase, and uppercase. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="translation--localization">
			<header>
				<h3><a href="#translation-&amp;-localization">Translation &amp; Localization</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/crowdin/sketch-crowdin" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">Cf</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/crowdin/sketch-crowdin" target="_blank">Crowdin for Sketch</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	
 
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Translate content on pages and artboards into multiple languages before programming starts. Quickly generate language-specific assets.  </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.qordoba.com" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">Qf</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.qordoba.com" target="_blank">Qordoba for Sketch</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Qordoba’s Sketch plugin allows designers to translate their mockups to other languages, making product internationalization easier. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/symdesign/sketch-auto-translate" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">SA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/symdesign/sketch-auto-translate" target="_blank">Sketch Auto Translate</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Automatically translate Sketch files based on your selection, the current page or the whole document via Google Translate. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/hoai265/Language-Sketch-Plugin" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">ST</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/hoai265/Language-Sketch-Plugin" target="_blank">Sketch Translation</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin for easy multi-language design </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/laresgoiti/texts_translate" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">TT</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/laresgoiti/texts_translate" target="_blank">Texts Translate</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Manage Sketch texts in multiple locales. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/eddiesigner/sketch-translate-me" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/eddiesigner/sketch-translate-me" target="_blank">Translate.me</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Translations. Simplified. Translate your Sketch text layers, artboards and pages in over 100 languages with Translate.me plugin. Powered by Google. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/733062974250826253" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/733062974250826253" target="_blank">Translate</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Translate helps you test your UI against different languages to see what may break by using the Yandex Translate API to translate your text layers into other languages. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/743218037112142643" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/743218037112142643" target="_blank">Translator</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Translator instantly translates the text in your Figma designs into other languages. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="worldr@adobe.com" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">WR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="worldr@adobe.com" target="_blank">World Ready</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>World Ready plugin can be used to 1. Check the layout of your artboards for localization readiness &amp; 2. Generate localized artboards. After launching the plugin from the Plugins menu in XD, pick a translation service, choose the “Highlight” or “Translate” mode and select the languages to test. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="hello@raiken.io" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">PL</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="hello@raiken.io" target="_blank">Pseudo Localization</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>The pseudo-localization plugin generates a pseudo-language localization based on your copy.  </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="typeface">
			<header>
				<h3><a href="#typeface">Typeface</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/enriquezgomez/datazier-lens" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">DL</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/enriquezgomez/datazier-lens" target="_blank">Datazier Lens</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Inspect and sort your local font book </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/KevinGutowski/betterTypePanel" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">b</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/KevinGutowski/betterTypePanel" target="_blank">betterTypePanel</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A sketch plugin to help manage common OpenType properties </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Saint-loup/french-typography" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">FT</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Saint-loup/french-typography" target="_blank">French Typography</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin to automatically add typographic french conventions and non-breaking spaces </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/yeun/sd-changer" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">SC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/yeun/sd-changer" target="_blank">Sd Changer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Converts Apple SD Gothic Neo font to SF Pro Display </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/youngxkk/AutoFixiOSTextLineHeight" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/youngxkk/AutoFixiOSTextLineHeight" target="_blank">AutoFixiOSTextLineHeight</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Auto Fix iOS Text Line Height, so that the font restoration degree of iOS design draft reaches 100%. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/qruzz/InterUI-Character-Spacing" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">IU</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/qruzz/InterUI-Character-Spacing" target="_blank">Inter UI Character Spacing</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Package to correct the character spacing for the InterUI font in Sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/partyka1/Fontily" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/partyka1/Fontily" target="_blank">Fontily</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p> Sketch plugin for finding &amp; replacing fonts for Sketch 3+ </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Volorf/Perfecter" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Volorf/Perfecter" target="_blank">Perfecter</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Make great typography [Sketch plugin] </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/bigxixi/Font-Packer" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">FP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/bigxixi/Font-Packer" target="_blank">Font Packer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin to collect font files you used in your sketch file. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ukn530/FontFinder" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ukn530/FontFinder" target="_blank">FontFinder</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch Plugin to find and select font items in a current page </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/keremciu/sketch-iconfont" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">UI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/keremciu/sketch-iconfont" target="_blank">Use Icon Fonts in Sketch</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Use icon fonts in sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/littlebusters/Sketch-Font-Mixer" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">FM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/littlebusters/Sketch-Font-Mixer" target="_blank">Font Mixer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Plugin can apply other fonts for each character type of Text Layer. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/alssndro/sandros-sketch-plugins" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">SP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/alssndro/sandros-sketch-plugins" target="_blank">Sketch Plugins</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A library of Sketch Plugins aimed towards working with horizontal/vertical grid layouts and typography. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/AnimaApp/FontBuddy" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">FB</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/AnimaApp/FontBuddy" target="_blank">Font Buddy</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Install missing fonts &amp; free fonts directly from Sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/lorenzwoehr/Golden-Ratio-Line-Height-Sketch-Plugin" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">GR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/lorenzwoehr/Golden-Ratio-Line-Height-Sketch-Plugin" target="_blank">Golden Ratio Line Height</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Optimize your typography based on font size, line-height and width. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/feb19/sketch-font-size-checker" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">FS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/feb19/sketch-font-size-checker" target="_blank">Font Size Checker</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Text Size Validator for iOS or Android UI Designers. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/buames/typesettings-sketch-plugin" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/buames/typesettings-sketch-plugin" target="_blank">Typesettings</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A quest for consistency </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/741231992144144738" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">FS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/741231992144144738" target="_blank">Font Scale</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Font Scale is a quick tool to generate a harmonious and consistent typography hierarchy. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/739922281164562258" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">BF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/739922281164562258" target="_blank">Better Font Picker</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Better Font Picker helps you select fonts with a preview of how it looks. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/738840446766071906" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">FR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/738840446766071906" target="_blank">Font Replacer</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Font Replacer lets you easily replace font families and font styles. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/735711462872799891" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">M</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/735711462872799891" target="_blank">MixFonts</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Helps you easily use different fonts for Latin and CJK characters in selected text layers. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/746097413727734148" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">FF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/746097413727734148" target="_blank">Font Fascia</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>List all font families and styles used in the document. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/742063658553085504" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">FS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/742063658553085504" target="_blank">Fix San Francisco</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Automatically apply the correct font-variant and tracking for selected texts using the San Francisco typeface. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/745519632050796775" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/745519632050796775" target="_blank">Typograf</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Figma plugin for making good typographic text. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/745394880974490845" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">MF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/745394880974490845" target="_blank">Missing Font Selector</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>This tiny faceless plugin will find and select for you all layers with missing fonts on the current page. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/adamcoulombe/Global-Font-Replace-for-Adobe-XD" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">GF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/adamcoulombe/Global-Font-Replace-for-Adobe-XD" target="_blank">Global Font Replace</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Useful for replacing a font across an entire document. Select an item that has the font you want to copy, then, select an item that uses the font you want to replace. Then, voilà! </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://nurecas.com/findfonts-a-plugin-for-adobe-xd" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">F</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://nurecas.com/findfonts-a-plugin-for-adobe-xd" target="_blank">FindFont</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Find all instances of a font style and replace it with another. First select a text field with the font to be replaced. Then select a text field with the font which will replace the former. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/gioalo" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">T</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/gioalo" target="_blank">Typist</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Typist is a typography tool that lets you create beautiful modular typography scales base on musical notes or any magical number (Golden Ratio). </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="n.bhargavvenky@gmail.com" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">FP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="n.bhargavvenky@gmail.com" target="_blank">Font Preview</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>This Plugin Shows Preview Of Fonts in your System </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="ui-kits">
			<header>
				<h3><a href="#ui-kits">UI Kits</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/SimonTakman/BillUI" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/SimonTakman/BillUI" target="_blank">BillUI</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Interactive artificial evolutionary tool in order to help you come up with design suggestions that are similar to your initial design. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/wantedly/sketch-wt-design" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">W</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/wantedly/sketch-wt-design" target="_blank">WtDesign</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin for Wantedly Design System </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Shopify/polaris-telescope" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">PT</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Shopify/polaris-telescope" target="_blank">Polaris Telescope</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Access Shopify Polaris from Sketch to speed up your design or development workflow </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/websiddu/sketch-material" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">SM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/websiddu/sketch-material" target="_blank">Sketch Material</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch material is a sketch plugin that will help you generate complex material components like tables, chips, forms etc…  </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/atlassian/sketch-plugin" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">AV</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/atlassian/sketch-plugin" target="_blank">Atlassian Vendor Sketch Plugin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Design your next Atlassian app with our component libraries and suite of Sketch tools </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/stuartromanek/sketch-mouse-pointers" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">SM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/stuartromanek/sketch-mouse-pointers" target="_blank">Sketch Mouse Pointers</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Add Mouse Pointers to Sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/redgell/Save-with-Frame" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">Sw</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/redgell/Save-with-Frame" target="_blank">Save with Device Frame</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch Plugin to generate pngs of artboards wrapped in a phone skin. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/herrhelms/social-artboards-sketch" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">Ap</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/herrhelms/social-artboards-sketch" target="_blank">Artboard presets for social media images</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>This is a Plugin for Sketch App that adds artboard presets for the most common image dimensions of different social media platforms. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/JJYing/Sketch-Better-Shadow" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">BS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/JJYing/Sketch-Better-Shadow" target="_blank">Better Shadow</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Quickly generate multi-layered shadow to mimic non-linear decay. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://cloud.indigo.design/resources" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">I</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://cloud.indigo.design/resources" target="_blank">Indigo.Design</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Create, edit, and apply themes to your Indigo.Design UI Kit based designs and publish them as prototypes to the Indigo.Design cloud. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/iconify/iconify-sketch" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">I</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/iconify/iconify-sketch" target="_blank">Iconify</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	
 
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Iconify integration. Import MDI, FontAwesome, Jam, EmojiOne and many other icons to Sketch document.  </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/740272380439725040" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">MD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/740272380439725040" target="_blank">Material Design Icons</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>This plugin provides you instant easy access to the entire Material Design Icons library. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/744047966581015514" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">FI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/744047966581015514" target="_blank">Feather Icons</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Quick access to Feather icons in Figma. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/744098704933821409" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">I</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/744098704933821409" target="_blank">Iconscout</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Iconscout allows you to insert millions of high-quality icons, illustrations, and stock photos right into Figma. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/739711077384375064" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">IZ</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/739711077384375064" target="_blank">Icon Zone</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Icon Zone helps create a square slice around your icons what is the perfect center of the vectors or the group you selected. At the same times, the slice will be ready to export as SVGs. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/750116735703341112" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">SM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/750116735703341112" target="_blank">Social Media Image</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Cheat sheet on Social Media image sizes. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/743134103711120154" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">HP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/743134103711120154" target="_blank">Hero Patterns for Figma</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>This plugin brings the amazing collection of patterns called Hero patterns by Steve Schoger. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/736368164448889527" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">I</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/736368164448889527" target="_blank">Interplay</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Interplay connects with your design system code repository to let you access and use your design system code components right within Figma. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://fluidtech.in/ready" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">RM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://fluidtech.in/ready" target="_blank">Ready Mobile Components for Adobe XD</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>The plugin helps you to generate the basic general purpose-components which are commonly used. You can further carve these components to your choice by just changing the styles. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="hasankaz@hotmail.com" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="hasankaz@hotmail.com" target="_blank">Bullet</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Bullets plugin as the name suggests helps you to add round, square bullets as well as an ordered list to your text layers. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://tourdexd.com/plugin/personas/" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://tourdexd.com/plugin/personas/" target="_blank">Personas</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Create beautiful and customizable personas with different layouts and image styles. Crafting personas has never been easier and more fun. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://xd.undraw.co" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">u</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://xd.undraw.co" target="_blank">unDraw</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Beautiful illustrations for your client and personal design projects, without attribution. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.udesly.com/help-center/" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">SC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.udesly.com/help-center/" target="_blank">Stipo Components Library for XD</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Stipo lets you store all components of your XD design in one library to access anytime, anywhere. You can save your components by tags, title, descriptions and make them easy to explore through the Stipo Library </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/pradeep-sanjaya/adobe-xd-plugin-c91a5b5d/issues/new" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">NI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/pradeep-sanjaya/adobe-xd-plugin-c91a5b5d/issues/new" target="_blank">NIBM Icon Hamburger</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Add hamburger icon to your artboard </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</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="user-flows">
			<header>
				<h3><a href="#user-flows">User Flows</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/romannurik/Sketch-FlowExporter" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">FE</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/romannurik/Sketch-FlowExporter" target="_blank">Flow Exporter</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that exports prototype flows built with Sketch 49+ to HTML. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/reqfire/sketch-user-flows" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">SU</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/reqfire/sketch-user-flows" target="_blank">Sketch User Flows</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch Plug-in for importing/exporting user flow and interface definitions from Reqfire. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://overflow.io" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">O</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://overflow.io" target="_blank">Overflow</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Overflow is the world’s first user flow diagramming tool tailored for designers. It empowers designers to design, present and share beautiful user flow diagrams that tell a story. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/abynim/userflows" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">UF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/abynim/userflows" target="_blank">User Flows</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Generate user walkthroughs from Artboards in Sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/awt2542/ViewController-for-Framer" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">Vf</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/awt2542/ViewController-for-Framer" target="_blank">ViewController for Framer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Multi-step user flows in Framer.js </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Primary-app/primary-sync" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">PS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Primary-app/primary-sync" target="_blank">Primary Sync</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sync your Sketch designs with Primary's user flows and design documents. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/faridsabitov/Sketch-user-flows" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">U</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/faridsabitov/Sketch-user-flows" target="_blank">Userflows</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Plugin for generating easy to use user flows in Sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/faridsabitov/Sketch-Connection-Flow-Arrows" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">CF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/faridsabitov/Sketch-Connection-Flow-Arrows" target="_blank">Connection Flow Arrows</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Plugin for generating easy to use connection flow arrows in Sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/733902567457592893" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/733902567457592893" target="_blank">Autoflow</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Autoflow makes it easy to draw flows. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/742764242781786818" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">W</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/742764242781786818" target="_blank">Wireframe</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Wireframe plugin is the best for creating beautiful user flow prototypes and basic structures in Figma so no other kits, files or skills required! </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<div class="hidden-in-page">
    <p align="center">
        <a href="http://bit.ly/33Q3AC0">
            
        </a>
    </p>
</div>
<article id="version-control">
			<header>
				<h3><a href="#version-control">Version Control</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://www.goabstract.com/" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.goabstract.com/" target="_blank">Abstract</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Abstract is a file management and version control tool for Sketch files </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/mathieudutour/git-sketch-plugin" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">GS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/mathieudutour/git-sketch-plugin" target="_blank">Git Sketch Plugin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Git client generating pretty diffs built right into Sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/YusukeKokubo/sketch-hback-plugin" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">SH</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/YusukeKokubo/sketch-hback-plugin" target="_blank">Sketch Hback Plugin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch Plugin for history back and forward. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://plantapp.io" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://plantapp.io" target="_blank">Plant</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Version control for designers </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/xuming/sketch-git-pro" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">SG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/xuming/sketch-git-pro" target="_blank">Sketch Git Pro</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Git tools for sketch. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/734492262527930956" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">TM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/734492262527930956" target="_blank">Time Machine</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Time Machine saves and organizes work that you want to look back on. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://versions.sympli.io" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">V</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://versions.sympli.io" target="_blank">Versions</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Full-featured version control tool for designers. Works with GitHub, GitLab, Bitbucket and Azure Devops </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		<div class="promotion-banner-wrapper">
    <a class="promotion-banner -abstract" href="https://www.abstract.com/campaigns/collaboration/?&amp;utm_medium=Partner-Advertising&amp;utm_source=PA-Native-Digital&amp;utm_campaign=CY19-PA-FlawlessApp-1018-Sept12&amp;utm_term=designplugins&amp;utm_content=Sponsored">
        <div class="promotion-banner__logo -abstract">
            
        </div>
        <div class="promotion-banner__main">
            <h3 class="promotion-banner__title">Abstract</h3>
            <p class="promotion-banner__description">
                We centralize design decisions, feedback, Sketch files, and specs for your team.
            </p>
        </div>
        <button class="promotion-banner__link -abstract">
            Get a free, 14-day trial
        </button>
    </a>
</div></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="website--html-export">
			<header>
				<h3><a href="#website-&amp;-html-export">Website &amp; HTML Export</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="http://www.sketch2web.skuko.com" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://www.sketch2web.skuko.com" target="_blank">Sketch2Web</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Export your project to the web in just one click. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ingrammicro/puzzle-publisher" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">PP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ingrammicro/puzzle-publisher" target="_blank">Puzzle Publisher</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Exports Sketch artboards into linked HTML files and publish it on an external site using SFTP. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/finchalyzer/slinky" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/finchalyzer/slinky" target="_blank">Slinky</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Export your Sketch designs as HTML email templates </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/mamuso/sketch-designdoc" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">SD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/mamuso/sketch-designdoc" target="_blank">Sketch Design Doc</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Exports a simple website using a bunch of conventions and a Sketch document as the structure. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Raureif/sketch-click-dummy" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">CD</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Raureif/sketch-click-dummy" target="_blank">Click Dummy</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Export simple HTML click dummies to prototype interactivity. Just draw rectangles to create links between artboards. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/robflaherty/sketch-share" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">s</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/robflaherty/sketch-share" target="_blank">sketch-share</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin that exports artboards and generates an HTML file linking to each one </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://sketch-to-web.com" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">SE</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://sketch-to-web.com" target="_blank">Sparkle Export Plugin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Turn any Sketch artboard in a real website using Sparkle Visual Website Builder </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://launchpad.animaapp.com" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">L</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://launchpad.animaapp.com" target="_blank">Launchpad</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Export your Sketch design into HTML website. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/mludowise/sketch-html-export" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">HE</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/mludowise/sketch-html-export" target="_blank">HTML Export</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Generates an HTML page of images from your artboard. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/alanfraneo/sketch-neo-preview" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">N</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/alanfraneo/sketch-neo-preview" target="_blank">NeoPreview</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A plugin to create HTML based preview and gallery straight from sketch artboards </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/markhorgan/click-thru-prototype" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">CP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/markhorgan/click-thru-prototype" target="_blank">Click-Thru Prototype</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Generates a HTML click-through prototype of your responsive website design. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/amin-nas/Sketch-to-Clickthrough-HTML" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">ST</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/amin-nas/Sketch-to-Clickthrough-HTML" target="_blank">Sketch To Clickthrough HTML</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin for creating a clickthrough HTML prototype </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/protoship/codegen-sketch-client" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">PC</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/protoship/codegen-sketch-client" target="_blank">Protoship Codegen Sketch Client</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Build complex web apps from Sketch designs by generating elegant HTML &amp; CSS that programmers can easily understand, adapt, and deploy </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/dvcdv/dvc_sketch_plugin" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">d</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/dvcdv/dvc_sketch_plugin" target="_blank">davinci_vip</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Export the metadata of the sketch file and then use it for web layout (absolute) </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/peterwooley/get-margins" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">GM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/peterwooley/get-margins" target="_blank">Get Margins</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Gets the margins between an inner and outer layer and then copies the results to the clipboard as CSS. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/753195897635985866" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">H</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/753195897635985866" target="_blank">HtmlGenerator</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>HtmlGenerator renders any selection into its HTML equivalent with its associated CSS, all indented and separated for you to copy and paste. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="workflow-improvements">
			<header>
				<h3><a href="#workflow-improvements">Workflow Improvements</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/MrPeak/sketch-search-everywhere" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/MrPeak/sketch-search-everywhere" target="_blank">Sketch Search Everywhere</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Search layer and select it, by matching textValue, name or ObjectID. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/sergeishere/HandyMenu-SketchPlugin" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">HM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/sergeishere/HandyMenu-SketchPlugin" target="_blank">Handy Menu</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Gives quick access to your plugins through the context menu </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/dbilyk/SymbolTextInspector" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">ST</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/dbilyk/SymbolTextInspector" target="_blank">Symbol Text Inspector</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Easily inspect the specifications of all text overrides in symbols, including in nested symbols. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://symbol-browser.pratikshah.website" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">SB</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://symbol-browser.pratikshah.website" target="_blank">Symbol Browser</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A new way to browse your symbols. Make the most of your Design System by bringing symbols and UI Sticker sheet together. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/griffin-stewie/SymbolNameAutocomplete" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/griffin-stewie/SymbolNameAutocomplete" target="_blank">SymbolNameAutocomplete</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>This plugin gives you autocompletion of symbol names when creating a symbol. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/ahmedmigo/overrideit-sketchplugin" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">OS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/ahmedmigo/overrideit-sketchplugin" target="_blank">Overrideit Sketchplugin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Overrideit is a sketch plugin that allows designers to search in override list and overrides dropdowns, and with many other features. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://gumroad.com/l/sketch-symbols-manager" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">SM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://gumroad.com/l/sketch-symbols-manager" target="_blank">Symbols Manager</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A fast and easy way to manage all your symbols. No more hassle with long and complex symbols name, or renaming tons of symbols because you misspelled a folder name. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Volorf/Paster" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">P</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Volorf/Paster" target="_blank">Paster</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin. Paste text data from clipboard to Sketch text layers </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/rezaaa/Laboji" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">L</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/rezaaa/Laboji" target="_blank">Laboji</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A sketch plugin for adding emoji on layer names like colorful labels or tags. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/turbobabr/sketch-ace-jump" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">AJ</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/turbobabr/sketch-ace-jump" target="_blank">Ace Jump</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Quickly focus on various inspector's fields like font size, font weight and text/fill color using shortcuts. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/yargies/sketch-select-exportables" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">SE</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/yargies/sketch-select-exportables" target="_blank">Select Exportables</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Select all exportable layers, slices, and artboards. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/nathan5x/sketch-selectplus" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">S-</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/nathan5x/sketch-selectplus" target="_blank">Sketch - SelectPlus</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Helps you select a different types of layers, specific Shapes like Rectangle, Ovals, Triangles, Lines, Arrows, Paths, etc. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/sureskumar/Looper" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">L</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/sureskumar/Looper" target="_blank">Looper</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Looper helps automate the duplication of groups and layers. One can control properties like Rotate, Scale and Opacity while duplicating. This powerful combination enables artists and designers to create interesting geometric and organic patterns. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://www.reselect.co" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">R</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://www.reselect.co" target="_blank">Reselect</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Reselect allows you to restore a previous selection or save selections for later use (even after you close the document). </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/turbobabr/sketch-wanderer" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">W</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/turbobabr/sketch-wanderer" target="_blank">Wanderer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Frictionless, Finder like navigation in layer list by using beloved arrow keys and simple shortcuts. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/onmyway133/sketch-action" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">SA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/onmyway133/sketch-action" target="_blank">Sketch Action</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Spotlight in Sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/arshad/Sketch-Navigator" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">SN</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/arshad/Sketch-Navigator" target="_blank">Sketch Navigator</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Artboard navigation (with autocomplete) for Sketch </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://sketchrunner.com" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">SR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://sketchrunner.com" target="_blank">Sketch Runner</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Speed up your Sketch workflow </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/KevinWoodhouse/Sketch-Nudged" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">N</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/KevinWoodhouse/Sketch-Nudged" target="_blank">Nudged</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin to easily edit your nudge distance settings. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="http://www.nudgepushshove.com" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">NP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="http://www.nudgepushshove.com" target="_blank">Nudge, Push, Shove.</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Change the big and small nudge settings right within Sketch. Plus, get access to an even bigger nudge setting. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://mludowise.github.io/Sketch-Plugin-Manager" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">SP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://mludowise.github.io/Sketch-Plugin-Manager" target="_blank">Sketch Plugin Manager</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Keeping your Sketch plugins up to date with the power of Git. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/canisminor1990/sketch-move-half-pixel" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">SM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/canisminor1990/sketch-move-half-pixel" target="_blank">Sketch Move Half Pixel</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Move layers the half-pixel </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/romannurik/Sketch-Stickers" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/romannurik/Sketch-Stickers" target="_blank">Stickers</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that lets you browse and quickly drag+drop stickers (specially tagged layers) in your Sketch Libraries. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/bomberstudios/artboard-manager#readme" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">AM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/bomberstudios/artboard-manager#readme" target="_blank">Artboard Manager</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Because moving artboards manually is <em>so</em> 2016. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/pavelneznanov/ds-automator-sketch-plugin" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">DA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/pavelneznanov/ds-automator-sketch-plugin" target="_blank">DS Automator Sketch Plugin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Tools for automating designer work </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/zehfernandes/sketch-pochette" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">SP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/zehfernandes/sketch-pochette" target="_blank">Sketch Pochette</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A Sketch plugin that lets you carry your the most used properties close to your mouse </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Hito01/artboards-explorer" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">AE</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Hito01/artboards-explorer" target="_blank">Artboards Explorer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Add utility functionalities to Sketch's artboards </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/uetchy/Sketch-StickyGrid" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/uetchy/Sketch-StickyGrid" target="_blank">StickyGrid</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin to make paths be snapped to the grid. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/marcelinollano/sketch-review" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">SR</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/marcelinollano/sketch-review" target="_blank">Sketch Review</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Review designs using Emoji. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/nOograss/labelizING" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">l</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/nOograss/labelizING" target="_blank">labelizING</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Extract, replace and download labels from sketch file </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://gum.co/sketch-text-styles-manager" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">TS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://gum.co/sketch-text-styles-manager" target="_blank">Text Styles Manager</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A fast and easy way to manage all your Text Styles. No more hassle with long and complex names, or renaming tons of styles because you misspelled a folder name. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://gumroad.com/l/sketch-shared-styles-manager" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">LS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://gumroad.com/l/sketch-shared-styles-manager" target="_blank">Layer Styles Manager</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A fast and easy way to manage all your layer styles. No more hassle with long and complex style names, or renaming tons of styles because you misspelled a folder name. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.sketchmanager.com" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">SM</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.sketchmanager.com" target="_blank">Sketch Manager Plugin</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>The easiest way to manager your Symbols, Text styles and Layer styles. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/preciousforever/sketch-bounding-boxer" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">SB</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/preciousforever/sketch-bounding-boxer" target="_blank">Sketch Bounding Boxer</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A simple plugin to toggle visibility of 'boundingBox' layers in a Sketch document. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/lewishowles/sketch-bound-with-box" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">Bw</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/lewishowles/sketch-bound-with-box" target="_blank">Bound with Box</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Draws a rectangle of the same size, shape, and position as the selected layer, with possible padding. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/pravdomil/Sketch-Show-Bounding-Boxes" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/pravdomil/Sketch-Show-Bounding-Boxes" target="_blank">Sketch Show Bounding Boxes</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch plugin that shows bounding boxes of all layers </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/pravdomil/FixSketchTrackpadSpeed" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">FS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/pravdomil/FixSketchTrackpadSpeed" target="_blank">Fix Sketch Trackpad Speed</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Speed up your scrolling across all artboards </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/usagimaru/SketchTurbo" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/usagimaru/SketchTurbo" target="_blank">SketchTurbo</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>A plugin for Sketch that adjusts scroll speed on a canvas. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/732773762837487095" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">FW</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/732773762837487095" target="_blank">Figma Walker</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Figma Walker is a new launcher for Figma. You can take any actions you want from a single input field. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/741300632449121669" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">PP</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/741300632449121669" target="_blank">Pixel Perfect</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Forgot to turn back on Snap to Pixel Grid? Not a problem. Select any layers you want to snap back to the pixel grid, and presto, their position and size are rounded back to nice round numbers. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/751892393146479981" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">R·</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/751892393146479981" target="_blank">Roller · Design Linter · Toybox</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Roller is the first-ever Design Linter - giving you the power to automatically find and fix style inconsistencies in your files. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/757836922707087381" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/757836922707087381" target="_blank">Scripter</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Speed up your workflow or experiment with the Figma API through scripts. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/747923738427824830" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">PJ</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/747923738427824830" target="_blank">Page Jumper</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Quicky jumps to any page in your file with this handy utility plugin. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/750049905488948276" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">DF</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/750049905488948276" target="_blank">Deep Focus</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Listen to your favorite playlist.- Preloaded with 'Deep Focus' playlist. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/738775292786594626" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">DI</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/738775292786594626" target="_blank">Design Inspo</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>The best way to quickly look for design inspiration while you work. Search with text and colour to get quick inspiration and colour palettes from across the web without ever leaving your artboard. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/743928147588245448" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">D2</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/743928147588245448" target="_blank">DPI 2 Pixels</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>DPI to Pixel is here to help you turn the best cloud-based design tool into your next print project tool. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/746565487016656360" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">SS</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/746565487016656360" target="_blank">Split Shape</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Split your shapes, text layers, groups and frames into multiple instances. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/738839069237725273" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">S</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/738839069237725273" target="_blank">Spellchecker</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>Speller helps to find and correct spelling errors in Russian, Ukrainian or English text. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.figma.com/c/plugin/754026612866636376" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">S-</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.figma.com/c/plugin/754026612866636376" target="_blank">Spelll - Spell Check for Figma</a>
					<div class="label-wrapper">
						
	<div class="label label--figma" title="this plugin is for Figma" for="figma">
		Figma
	</div>	

					</div>
				</header>
				<p>This plugin gives Figma spell-checking super powers similar to that of Google Docs. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://www.unykvis.com/en/contactos" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">EG</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://www.unykvis.com/en/contactos" target="_blank">Experience Generator</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Generate entire groups of artboards for each experience and device selected with every artboard needed for that specific experience, and defined sizes for the device resolution. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/peterflynn/xd-artboard-quicknav" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">AQ</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/peterflynn/xd-artboard-quicknav" target="_blank">Artboard Quick Navigate</a>
					<div class="label-wrapper">
						
	<div class="label label--xd" title="this plugin is for Adobe XD" for="xd">
		Adobe XD
	</div>	

					</div>
				</header>
				<p>Quickly jump view between artboards, searching by name. This plugin is open source and under 200 lines of code! </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="zoom-enhancement">
			<header>
				<h3><a href="#zoom-enhancement">Zoom Enhancement</a></h3>
				

			</header>
			<ul>
				
<li class="tool">
			<a href="https://github.com/nathco/Zoom-Alert" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">ZA</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/nathco/Zoom-Alert" target="_blank">Zoom Alert</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Sketch.app plugin for showing zoom notifications </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Arkkimaagi/Bookmark" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">B</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Arkkimaagi/Bookmark" target="_blank">Bookmark</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Bookmark your place and zoom in Sketch.app </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/Arkkimaagi/ArtboardZoom" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">A</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/Arkkimaagi/ArtboardZoom" target="_blank">Artboardzoom</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>"Zoom" to currently selected Artboard. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
<li class="tool">
			<a href="https://github.com/alexkaessner/custom-zoom-sketch" class="tool__asset" target="_blank" style="color: rgb(0, 0, 0);">CZ</a>
			<div class="tool__description">
				<header class="tool__description__header">
					<a href="https://github.com/alexkaessner/custom-zoom-sketch" target="_blank">Custom Zoom</a>
					<div class="label-wrapper">
						
	<div class="label label--sketch" title="this plugin is for Sketch" for="sketch">
		Sketch
	</div>	

					</div>
				</header>
				<p>Zoom your document to a custom zoom level. </p>
				<div class="tag-wrapper">
					
				</div>
			</div>
		</li>
</ul>

			
		</article>
<article id="addendum">
			<header>
				<h3><a href="#addendum-(reference-&amp;-inspiration)">Addendum (Reference &amp; Inspiration)</a></h3>
				
<p>Awesome Design Tools &amp; Plugins is curated by <a href="https://twitter.com/LisaDziuba">Lisa Dziuba</a> &amp; <a href="https://twitter.com/ValiaHavryliuk">Valia Havruliyk</a> 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, please <a href="https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Contribution_Guidelines.md">suggest it</a>. Thanks for making this project awesome :)</p>

			</header>
			
		<a href="https://github.com/LisaDziuba/Awesome-Design-Tools" class="btn btn-contribute image-gh">Contribute on GitHub</a></article>
</main><script>const chooseMd = document.location.href
  .split('/')
  .pop()
  .includes('plugin')
  ? 'Plugins'
  : 'Tools';

function toggleMenuChange() {
  document.querySelector('.nav').classList.toggle('nav--visible');
  document
    .querySelector('.hamburger-menu')
    .classList.toggle('hamburger-menu--change');
}

document.querySelector('.hamburger-menu').onclick = function() {
  toggleMenuChange();
};

document.querySelectorAll('.nav a').forEach(link => {
  if (window.innerWidth < 959) {
    link.onclick = function() {
      toggleMenuChange();
    };
  }
});

class Nav {
  constructor(navElements, activeClass) {
    this.navElements = document.querySelectorAll(navElements);
    this.activeClass = activeClass;
  }

  scroll() {
    const { navElements, activeClass } = this;
    navElements.forEach(navLink => {
      const sectionId = navLink.getAttribute('href');
      document.addEventListener('scroll', () => {
        const sectionDom = document.querySelector(sectionId),
          sectionRect = sectionDom.getBoundingClientRect(),
          { top, bottom, height } = sectionRect;

        if ((bottom > 96 && top + height >= 96 && top < 96) || top == 96) {
          navLink.classList.add(activeClass);
        } else {
          navLink.classList.remove(activeClass);
        }
      });
    });
  }
}

const bookmark = new Nav('.nav a', 'active');
bookmark.scroll();

const automaticScroll = () => {
  const nav = document.querySelector('.nav ul');
  document.addEventListener('scroll', () => {
    const bodyHeight = document.body.offsetHeight;
    const bodyScrollTop = document.body.scrollTop;
    const navHeight = nav.getBoundingClientRect().height;
    const quarterOfNavHeight = navHeight / 4;

    const res = (bodyScrollTop / bodyHeight) * 100;
    if (res > 20 && res < 40) {
      nav.scrollTop = quarterOfNavHeight;
    } else if (res > 40 && res < 55) {
      nav.scrollTop = navHeight * 0.8;
    } else if (res > 55 && res < 70) {
      nav.scrollTop = navHeight * 1.35;
    } else if (res > 70 && res < 85) {
      nav.scrollTop = navHeight * 1.5;
    } else if (res > 85 && res < 100) {
      nav.scrollTop = navHeight * 2;
    } else {
      nav.scrollTop = 0;
    }
  });
};
automaticScroll();

// search input
String.prototype.capitalize = function() {
  return this.charAt(0).toUpperCase() + this.slice(1);
};

document
  .querySelector('.js-search-input')
  .addEventListener('input', function(e) {
    document.removeEventListener('scroll', automaticScroll, true);
    ('use strict');

    const inputContent = e.target.value;
    const paragraphs = document.querySelectorAll('main .tool');
    const banner = document.querySelectorAll('.banner');
    const promoBanner = document.querySelectorAll('.promo-banner');
    const articleHeaders = document.querySelectorAll('main article > header');
    // const addendum = document.querySelector('#addendum');
    const welcome = document.querySelector('.welcome');
    const promotionBanner = document.querySelectorAll(
      '.promotion-banner-wrapper'
    );
    const elementsToHide = [
      ...banner,
      ...promoBanner,
      ...articleHeaders,
      welcome,
      ...promotionBanner
    ];

    if (inputContent.length > 0) {
      elementsToHide.forEach(banner => banner.classList.add('-hidden'));
    } else if (inputContent.length === 0) {
      elementsToHide.forEach(banner => banner.classList.remove('-hidden'));
    }

    function handle(text) {
      const bool =
        inputContent || inputContent.capitalize() || inputContent.toUpperCase();
      if (text.innerHTML.search(bool) >= 0) {
        text.classList.remove('-hidden');
      } else {
        text.classList.add('-hidden');
      }
    }

    paragraphs.forEach(text => handle(text));
  });

// add event for nav button when clicking on it while searching

document.querySelectorAll('.nav a').forEach(button =>
  button.addEventListener('click', e => {
    e.preventDefault();
    if (window.innerWidth)
      // make an empty input
      document.querySelector('.js-search-input').value = '';

    // scroll a bit less due to nav fixed positioning
    window.scrollTo(
      0,
      document.querySelector(e.target.getAttribute('href')).offsetTop - 90
    );
  })
);

// handle modal window for filtering by application
if (document.querySelector('.js-open-modal-filter')) {
  document
    .querySelector('.js-open-modal-filter')
    .addEventListener('click', e => {
      e.target.classList.toggle('-active');
      document.querySelector('.sort-tool-modal').classList.toggle('-hidden');
    });
}

// filter by application logic
function sortByApplication(event) {
  // toggle styles for button that was handled;
  const { target } = event;
  target.classList.toggle('-active');

  const targetAttr = target.getAttribute('app');
  const allLabels = document.querySelectorAll(`.label[for="${targetAttr}"]`);
  const buttons = [
    ...document.querySelectorAll('.sort-tool-modal__btn-choose')
  ];

  const sortedButtons = buttons.filter(button =>
    button.classList.contains('-active')
  );
  const activeApps = sortedButtons.map(button => button.getAttribute('app'));

  ga(
    'send',
    'event',
    `Awesome design ${chooseMd} - Filter (State of Platforms)`,
    'Click',
    activeApps.join('-')
  );
  ga(
    'send',
    'event',
    `Awesome design ${chooseMd} - Filter (Clicked Platform Name)`,
    'Click',
    targetAttr
  );

  allLabels.forEach(label => {
    const toolContainer =
      label.parentElement.parentElement.parentElement.parentElement;
    const list = toolContainer.parentElement;
    const sectionContainer = list.parentElement;
    const attr = label.getAttribute('for');
    if (activeApps.includes(attr)) {
      toolContainer.classList.remove('-hidden');
    } else {
      toolContainer.classList.add('-hidden');
    }

    const arr = [...list.children].filter(
      tool => !tool.classList.contains('-hidden')
    );
    if (arr.length === 0) {
      sectionContainer.classList.add('-hidden');
    } else {
      sectionContainer.classList.remove('-hidden');
    }
  });
}

document
  .querySelectorAll('.sort-tool-modal__btn-choose')
  .forEach(button => button.addEventListener('click', sortByApplication));

document.querySelectorAll('.tool').forEach(tool => {
  tool.addEventListener(
    'click',
    e => {
      e.stopPropagation();
      const target = e.currentTarget;
      const title = target.children[1].children[0].children[0].textContent;
      const categoryName = target.parentElement.parentElement.id;
      const platforms = [
        ...target.children[1].children[0].children[1].children
      ].map(a => a.getAttribute('for'));

      ga(
        'send',
        'event',
        `Awesome design ${chooseMd} - Plugin (Title)`,
        'Click',
        title
      );
      ga(
        'send',
        'event',
        `Awesome design ${chooseMd} - Plugin (CategoryName)`,
        'Click',
        categoryName
      );
      ga(
        'send',
        'event',
        `Awesome design ${chooseMd} - Plugin (Platform)`,
        'Click',
        platforms.join('-')
      );
    },
    true
  );
});

document.querySelectorAll('.nav ul li a').forEach(a => {
  a.addEventListener(
    'click',
    e => {
      const { target } = e;
      const title = target.innerText;

      ga(
        'send',
        'event',
        ` Awesome design ${chooseMd} - Category (Title)`,
        'Click',
        title
      );
    },
    true
  );
});

if (window.innerWidth >= 960) {
  const active = document.querySelector('.header-top__nav-item.-active');
  document.querySelectorAll('.header-top__nav-item').forEach(a => {
    a.onmouseover = e => {
      if (!e.target.classList.contains('-active')) {
        active.classList.remove('-open');
      } else {
        e.target.classList.add('-open');
      }
    };

    a.onmouseout = e => {
      if (!active.classList.contains('-open')) {
        active.classList.add('-open');
      }
    };
  });
}

const showBannerTop = () => {
  const sEl = el => document.querySelector(el);

  setTimeout(() => {
    sEl('.header-top').classList.remove('header-top--hide-banner');
  }, 0);
  // if (window.innerWidth < 768) {
  //   sEl('.nav-container').removeClass('nav-container--hide-banner')
  // }

  sEl('.banner__close').onclick = () => {
    sEl('.header-top').classList.add('header-top--hide-banner');
  };
};
showBannerTop();
</script></body></html>