diff --git a/.github/workflows/codetest-report.yml b/.github/workflows/codetest-report.yml new file mode 100644 index 000000000..2e9a2d2a1 --- /dev/null +++ b/.github/workflows/codetest-report.yml @@ -0,0 +1,49 @@ +name: "@codetest/report" + +on: + release: + types: [published] + pull_request: + types: [opened, synchronize, closed] + +jobs: + report: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v2 + - name: setup + run: | + yarn --frozen-lockfile + - name: build report tools + working-directory: testing/report + run: | + yarn build + - name: run report + id: report + working-directory: ci/report + run: | + npm ci + node report.js + - name: upload report to s3 + id: upload + uses: jakejarvis/s3-sync-action@master + with: + args: --acl public-read --follow-symlinks --delete + env: + AWS_S3_BUCKET: "codetest-reports" + AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID_S3_CODETEST_REPORTS }} + AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY_S3_CODETEST_REPORTS }} + AWS_REGION: "us-west-1" + SOURCE_DIR: "ci/report/.coverage" + # dest dir is commit hash + DEST_DIR: "${{ github.sha }}" + - name: comment + id: comment + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + STATUS: ${{ steps.report.outputs.STATUS }} + working-directory: ci/report + run: | + npm ci + node comment.js diff --git a/ci/report/.gitignore b/ci/report/.gitignore new file mode 100644 index 000000000..f84149b97 --- /dev/null +++ b/ci/report/.gitignore @@ -0,0 +1 @@ +.coverage* \ No newline at end of file diff --git a/ci/report/README.md b/ci/report/README.md new file mode 100644 index 000000000..ae76fcb61 --- /dev/null +++ b/ci/report/README.md @@ -0,0 +1,3 @@ +# Reports Generating + +This modules enables reports generation based on the current engine, enabling developers to visually track the engine features visually, by comparing the generated outputs, compared using vision diff. diff --git a/ci/report/comment.js b/ci/report/comment.js new file mode 100644 index 000000000..8389bb97d --- /dev/null +++ b/ci/report/comment.js @@ -0,0 +1,31 @@ +const github = require("@actions/github"); +const octokit = github.getOctokit(process.env.GITHUB_TOKEN); +const context = github.context; +const { sha } = context; + +const report_url = `https://code.grida.co/tests/reports/${sha}`; + +let message; + +if (context.payload.pull_request && context.eventName === "pull_request") { + const conclusion = process.env.STATUS || "unknown"; + + switch (conclusion) { + case "success": + message = `Report available at ${report_url} :tada:`; + break; + case "failure": + message = "Your PR failed some tests :x:"; + break; + case "skipped": + case "unknown": + break; + } + + // add a comment to the PR + octokit.rest.issues.createComment({ + ...context.repo, + issue_number: context.payload.pull_request.number, + body: message, + }); +} diff --git a/ci/report/configs/report.config.max.js b/ci/report/configs/report.config.max.js new file mode 100644 index 000000000..ca1294789 --- /dev/null +++ b/ci/report/configs/report.config.max.js @@ -0,0 +1,7 @@ +const path = require("path"); + +module.exports = { + sample: path.join(__dirname, "../samples-50.json"), + outDir: path.join(__dirname, "../.coverage"), + skipIfReportExists: false, +}; diff --git a/ci/report/configs/report.config.med.js b/ci/report/configs/report.config.med.js new file mode 100644 index 000000000..19287c3c7 --- /dev/null +++ b/ci/report/configs/report.config.med.js @@ -0,0 +1,7 @@ +const path = require("path"); + +module.exports = { + sample: path.join(__dirname, "../samples-10.json"), + outDir: path.join(__dirname, "../.coverage"), + skipIfReportExists: false, +}; diff --git a/ci/report/configs/report.config.min.js b/ci/report/configs/report.config.min.js new file mode 100644 index 000000000..2aded039e --- /dev/null +++ b/ci/report/configs/report.config.min.js @@ -0,0 +1,7 @@ +const path = require("path"); + +module.exports = { + sample: path.join(__dirname, "../samples-5.json"), + outDir: path.join(__dirname, "../.coverage"), + skipIfReportExists: false, +}; diff --git a/ci/report/package-lock.json b/ci/report/package-lock.json new file mode 100644 index 000000000..9c1a56bb1 --- /dev/null +++ b/ci/report/package-lock.json @@ -0,0 +1,355 @@ +{ + "name": "@ci/report", + "version": "0.0.0", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "name": "@ci/report", + "version": "0.0.0", + "dependencies": { + "@actions/core": "^1.10.0", + "@actions/github": "^5.1.1" + } + }, + "node_modules/@actions/core": { + "version": "1.10.0", + "license": "MIT", + "dependencies": { + "@actions/http-client": "^2.0.1", + "uuid": "^8.3.2" + } + }, + "node_modules/@actions/github": { + "version": "5.1.1", + "license": "MIT", + "dependencies": { + "@actions/http-client": "^2.0.1", + "@octokit/core": "^3.6.0", + "@octokit/plugin-paginate-rest": "^2.17.0", + "@octokit/plugin-rest-endpoint-methods": "^5.13.0" + } + }, + "node_modules/@actions/http-client": { + "version": "2.1.0", + "license": "MIT", + "dependencies": { + "tunnel": "^0.0.6" + } + }, + "node_modules/@octokit/auth-token": { + "version": "2.5.0", + "license": "MIT", + "dependencies": { + "@octokit/types": "^6.0.3" + } + }, + "node_modules/@octokit/core": { + "version": "3.6.0", + "license": "MIT", + "dependencies": { + "@octokit/auth-token": "^2.4.4", + "@octokit/graphql": "^4.5.8", + "@octokit/request": "^5.6.3", + "@octokit/request-error": "^2.0.5", + "@octokit/types": "^6.0.3", + "before-after-hook": "^2.2.0", + "universal-user-agent": "^6.0.0" + } + }, + "node_modules/@octokit/endpoint": { + "version": "6.0.12", + "license": "MIT", + "dependencies": { + "@octokit/types": "^6.0.3", + "is-plain-object": "^5.0.0", + "universal-user-agent": "^6.0.0" + } + }, + "node_modules/@octokit/graphql": { + "version": "4.8.0", + "license": "MIT", + "dependencies": { + "@octokit/request": "^5.6.0", + "@octokit/types": "^6.0.3", + "universal-user-agent": "^6.0.0" + } + }, + "node_modules/@octokit/openapi-types": { + "version": "12.11.0", + "license": "MIT" + }, + "node_modules/@octokit/plugin-paginate-rest": { + "version": "2.21.3", + "license": "MIT", + "dependencies": { + "@octokit/types": "^6.40.0" + }, + "peerDependencies": { + "@octokit/core": ">=2" + } + }, + "node_modules/@octokit/plugin-rest-endpoint-methods": { + "version": "5.16.2", + "license": "MIT", + "dependencies": { + "@octokit/types": "^6.39.0", + "deprecation": "^2.3.1" + }, + "peerDependencies": { + "@octokit/core": ">=3" + } + }, + "node_modules/@octokit/request": { + "version": "5.6.3", + "license": "MIT", + "dependencies": { + "@octokit/endpoint": "^6.0.1", + "@octokit/request-error": "^2.1.0", + "@octokit/types": "^6.16.1", + "is-plain-object": "^5.0.0", + "node-fetch": "^2.6.7", + "universal-user-agent": "^6.0.0" + } + }, + "node_modules/@octokit/request-error": { + "version": "2.1.0", + "license": "MIT", + "dependencies": { + "@octokit/types": "^6.0.3", + "deprecation": "^2.0.0", + "once": "^1.4.0" + } + }, + "node_modules/@octokit/types": { + "version": "6.41.0", + "license": "MIT", + "dependencies": { + "@octokit/openapi-types": "^12.11.0" + } + }, + "node_modules/before-after-hook": { + "version": "2.2.3", + "license": "Apache-2.0" + }, + "node_modules/deprecation": { + "version": "2.3.1", + "license": "ISC" + }, + "node_modules/is-plain-object": { + "version": "5.0.0", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/node-fetch": { + "version": "2.6.12", + "license": "MIT", + "dependencies": { + "whatwg-url": "^5.0.0" + }, + "engines": { + "node": "4.x || >=6.0.0" + }, + "peerDependencies": { + "encoding": "^0.1.0" + }, + "peerDependenciesMeta": { + "encoding": { + "optional": true + } + } + }, + "node_modules/once": { + "version": "1.4.0", + "license": "ISC", + "dependencies": { + "wrappy": "1" + } + }, + "node_modules/tr46": { + "version": "0.0.3", + "license": "MIT" + }, + "node_modules/tunnel": { + "version": "0.0.6", + "license": "MIT", + "engines": { + "node": ">=0.6.11 <=0.7.0 || >=0.7.3" + } + }, + "node_modules/universal-user-agent": { + "version": "6.0.0", + "license": "ISC" + }, + "node_modules/uuid": { + "version": "8.3.2", + "license": "MIT", + "bin": { + "uuid": "dist/bin/uuid" + } + }, + "node_modules/webidl-conversions": { + "version": "3.0.1", + "license": "BSD-2-Clause" + }, + "node_modules/whatwg-url": { + "version": "5.0.0", + "license": "MIT", + "dependencies": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + }, + "node_modules/wrappy": { + "version": "1.0.2", + "license": "ISC" + } + }, + "dependencies": { + "@actions/core": { + "version": "1.10.0", + "requires": { + "@actions/http-client": "^2.0.1", + "uuid": "^8.3.2" + } + }, + "@actions/github": { + "version": "5.1.1", + "requires": { + "@actions/http-client": "^2.0.1", + "@octokit/core": "^3.6.0", + "@octokit/plugin-paginate-rest": "^2.17.0", + "@octokit/plugin-rest-endpoint-methods": "^5.13.0" + } + }, + "@actions/http-client": { + "version": "2.1.0", + "requires": { + "tunnel": "^0.0.6" + } + }, + "@octokit/auth-token": { + "version": "2.5.0", + "requires": { + "@octokit/types": "^6.0.3" + } + }, + "@octokit/core": { + "version": "3.6.0", + "requires": { + "@octokit/auth-token": "^2.4.4", + "@octokit/graphql": "^4.5.8", + "@octokit/request": "^5.6.3", + "@octokit/request-error": "^2.0.5", + "@octokit/types": "^6.0.3", + "before-after-hook": "^2.2.0", + "universal-user-agent": "^6.0.0" + } + }, + "@octokit/endpoint": { + "version": "6.0.12", + "requires": { + "@octokit/types": "^6.0.3", + "is-plain-object": "^5.0.0", + "universal-user-agent": "^6.0.0" + } + }, + "@octokit/graphql": { + "version": "4.8.0", + "requires": { + "@octokit/request": "^5.6.0", + "@octokit/types": "^6.0.3", + "universal-user-agent": "^6.0.0" + } + }, + "@octokit/openapi-types": { + "version": "12.11.0" + }, + "@octokit/plugin-paginate-rest": { + "version": "2.21.3", + "requires": { + "@octokit/types": "^6.40.0" + } + }, + "@octokit/plugin-rest-endpoint-methods": { + "version": "5.16.2", + "requires": { + "@octokit/types": "^6.39.0", + "deprecation": "^2.3.1" + } + }, + "@octokit/request": { + "version": "5.6.3", + "requires": { + "@octokit/endpoint": "^6.0.1", + "@octokit/request-error": "^2.1.0", + "@octokit/types": "^6.16.1", + "is-plain-object": "^5.0.0", + "node-fetch": "^2.6.7", + "universal-user-agent": "^6.0.0" + } + }, + "@octokit/request-error": { + "version": "2.1.0", + "requires": { + "@octokit/types": "^6.0.3", + "deprecation": "^2.0.0", + "once": "^1.4.0" + } + }, + "@octokit/types": { + "version": "6.41.0", + "requires": { + "@octokit/openapi-types": "^12.11.0" + } + }, + "before-after-hook": { + "version": "2.2.3" + }, + "deprecation": { + "version": "2.3.1" + }, + "is-plain-object": { + "version": "5.0.0" + }, + "node-fetch": { + "version": "2.6.12", + "requires": { + "whatwg-url": "^5.0.0" + } + }, + "once": { + "version": "1.4.0", + "requires": { + "wrappy": "1" + } + }, + "tr46": { + "version": "0.0.3" + }, + "tunnel": { + "version": "0.0.6" + }, + "universal-user-agent": { + "version": "6.0.0" + }, + "uuid": { + "version": "8.3.2" + }, + "webidl-conversions": { + "version": "3.0.1" + }, + "whatwg-url": { + "version": "5.0.0", + "requires": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + }, + "wrappy": { + "version": "1.0.2" + } + } +} diff --git a/ci/report/package.json b/ci/report/package.json new file mode 100644 index 000000000..c48b878dd --- /dev/null +++ b/ci/report/package.json @@ -0,0 +1,9 @@ +{ + "name": "@ci/report", + "version": "0.0.0", + "private": true, + "dependencies": { + "@actions/core": "^1.10.0", + "@actions/github": "^5.1.1" + } +} diff --git a/ci/report/report.js b/ci/report/report.js new file mode 100644 index 000000000..a2739aef5 --- /dev/null +++ b/ci/report/report.js @@ -0,0 +1,57 @@ +const path = require("path"); +const child_process = require("child_process"); +const core = require("@actions/core"); +const github = require("@actions/github"); + +const context = github.context; + +let releaseName, releaseVersion, pullRequestNumber; + +if (context.eventName === "release") { + releaseName = context.payload.release.name; + releaseVersion = context.payload.release.tag_name; +} else if (context.eventName === "pull_request") { + pullRequestNumber = context.payload.pull_request.number; +} + +/** + * get the report mode + * max | med | min + */ +function get_report_mode() { + if (context.eventName === "release") { + return "max"; + } else if (context.eventName === "pull_request") { + if ( + context.payload.action === "opened" || + context.payload.pull_request.merged + ) { + return "med"; + } else if (context.payload.action === "synchronize") { + return "min"; + } + } +} + +const mode = get_report_mode(); + +const DIR_TESTING = path.join(__dirname, "..", "..", "testing"); +const DIR_TESTING_REPORT = path.join(DIR_TESTING, "report"); +const CONFIG_FILE = path.join(__dirname, `configs/report.config.${mode}.js`); + +// run the report ci +child_process + .spawn(`npm run report --`, ["--config", CONFIG_FILE], { + shell: true, + cwd: DIR_TESTING_REPORT, + }) + .stdout.on("data", (data) => { + console.log(`${data}`); + }) + .on("error", (err) => { + console.info(err); + process.exit(1); + }) + .on("exit", (code) => { + process.exit(code); + }); diff --git a/ci/report/samples-10.json b/ci/report/samples-10.json new file mode 100644 index 000000000..71098e8ff --- /dev/null +++ b/ci/report/samples-10.json @@ -0,0 +1,12 @@ +[ +{"id": "1035203688168086460", "name": "Material 3 Design Kit", "description": "

Introducing Material Design 3

Meet Material Design 3, Material Design’s most personal design system yet. The Material 3 Design Kit provides a comprehensive introduction to the design system, with styles and components to help you get started.


Visualize dynamic color in your UI

The Material 3 Design Kit is built to work with the Material Theme Builder Figma plugin. Select an image or color to visualize dynamic color in your UI.


Looking for icons? Try the Google Icons Library


Suggestions and/or feedback?

Email m3-design-kit-feedback@google.com

Fill out this Google feedback form

or ping us @materialdesign on Twitter.


Changelog


03.28.23 V1.8

Major updates:

⚠ New tonal surfaces and fixed accents are here!

The latest update introduces Surfaces based on tone values, these are no longer read-only overlays. Surfaces 1–5 will remain in the gm3 design kit and material theme builder for current users, but we recommend migrating to new surface tokens as soon as possible.

Fixed accents add a new set of colors that will remain consistent across light and dark themes.

⚠ We added prototyping to components!


Additional updates: 

Bugs adressed: 


02.09.23 V1.7

Components and Styles Added: 

Updates:

Bugs addressed: 


12.15.22 V1.6

Components and Styles Added: 

Updates:

Bugs addressed: 


10.18.22 V1.5

Huge update πŸŽ‰

Components and Styles Added: 

Bugs addressed: 

Updates: 


07.01.22 V1.4


05.11.22 V1.3


02.14.22 V1.2


11.10.21 V1.1


10.27.21 V1

", "version_id": "300251", "version": "15", "created_at": "2021-10-27T14:49:52.407Z", "duplicate_count": 304043, "like_count": 12274, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3248391748/c8266c68-b5d6-4fc2-9fc6-d41b3cc8af6f-cover.png", "redirect_canvas_url": "/community/file/1035203688168086460/canvas", "community_publishers": ["2555098"], "publisher": {"id": "2555098", "profile_handle": "materialdesign", "follower_count": 27922, "following_count": 0, "primary_user_id": "771462962926009319", "name": "Material Design", "img_url": "https://s3-alpha.figma.com/profile/77d92d28-8203-4dbb-9a95-9d81cacbc6ce", "badges": ["figma_partner"]}, "support_contact": "materialdesignteam@gmail.com", "creator": {"id": "771462962926009319", "handle": "Material Design", "img_url": "https://s3-alpha.figma.com/profile/77d92d28-8203-4dbb-9a95-9d81cacbc6ce"}, "tags": ["android", "google", "material", "material design", "mobile", "stickersheet", "system", "ui kit"], "badges": [], "related_content": {"content": ["1164313362327941158", "1215441112935711382", "1199784060037728858"], "types": ["by_creator"]}}, +{"id": "778763161265841481", "name": "Material 2 Design Kit", "description": "

Customize and Create

Material Design's Baseline Design Kit provides all you need to create beautiful apps, complete with components and theming guidance.


Suggestions and/or feedback? Ping us @materialdesign on Twitter.


Changelog

10.27.21


08.24.21 V1.3


07.14.21 V1.2

     Updates:


06.28.21 V1.1

     Updates:

", "version_id": "69467", "version": "8", "created_at": "2019-11-19T23:26:46.362Z", "duplicate_count": 341590, "like_count": 7721, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/1243826780/733e5f32-55ba-4d02-adf9-54d6e041dcff-cover.png", "redirect_canvas_url": "/community/file/778763161265841481/canvas", "community_publishers": ["2555098"], "publisher": {"id": "2555098", "profile_handle": "materialdesign", "follower_count": 27922, "following_count": 0, "primary_user_id": "771462962926009319", "name": "Material Design", "img_url": "https://s3-alpha.figma.com/profile/77d92d28-8203-4dbb-9a95-9d81cacbc6ce", "badges": ["figma_partner"]}, "support_contact": null, "creator": {"id": "771462962926009319", "handle": "Material Design", "img_url": "https://s3-alpha.figma.com/profile/77d92d28-8203-4dbb-9a95-9d81cacbc6ce"}, "tags": ["android", "google", "material", "mobile", "stickersheet", "system", "ui kit"], "badges": [], "related_content": {"content": ["1035203688168086460", "1164313362327941158", "1215441112935711382"], "types": ["by_creator"]}}, +{"id": "890095002328610853", "name": "SALY - 3D Illustration Pack", "description": "

Collection of high-quality 3D illustrations, hand-crafted and full of personalities. FREE to use for your exploration or personal project.


Over 30 illustrations and will keep updated in the future. Enjoy!


Work Inquiry: talk@hellozea.com


------------------------------


Changelog:


v1.7.3 (23 September 2021):



v1.6.3 (11 May 2021):



v1.5.3 (4 May 2021):



v1.4.2 (11 January 2021):



v1.3.2 (12 Dec 2020):



v1.2.1:



v1.2.0:



v1.1.0:



v1.0.0:


", "version_id": "60438", "version": "12", "created_at": "2020-09-22T04:39:45.719Z", "duplicate_count": 213111, "like_count": 7766, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/1151541105/360c7092-f558-420d-b37f-9ff98ef61d7a-cover.png", "redirect_canvas_url": "/community/file/890095002328610853/canvas", "community_publishers": ["2523672"], "publisher": {"id": "2523672", "profile_handle": "zea", "follower_count": 464, "following_count": 6, "primary_user_id": "770168073021644197", "name": "Alzea", "img_url": "https://s3-alpha.figma.com/profile/9bb40d6d-f1d7-433c-b300-d2fe1b13016e", "badges": []}, "support_contact": null, "creator": {"id": "770168073021644197", "handle": "Alzea", "img_url": "https://s3-alpha.figma.com/profile/9bb40d6d-f1d7-433c-b300-d2fe1b13016e"}, "tags": [], "badges": [], "related_content": {"content": [], "types": ["by_creator"]}}, +{"id": "1211752161700087083", "name": "iPadOS 16 UI Kit for Figma", "description": "

About ✨

I'm excited to share this year's iPadOS 16 UI Kit for Figma with the community! This file contains hundreds of components, templates, demos, and everything else needed to help you start designing for iPadOS. Each component uses the latest version of Auto Layout, supports Component Properties, variants, Light and Dark Mode, and much more.


I can't wait to see what you'll create with these components!

", "version_id": "289240", "version": "3", "created_at": "2023-02-26T19:10:28.613Z", "duplicate_count": 1009, "like_count": 256, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3160180469/45404798-1c5a-46e5-ae29-065bb0ab2b9e-cover.png", "redirect_canvas_url": "/community/file/1211752161700087083/canvas", "community_publishers": ["938"], "publisher": {"id": "938", "profile_handle": "joey", "follower_count": 12182, "following_count": 1, "primary_user_id": "623995712489101040", "name": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5", "badges": []}, "support_contact": "support@baselinedesign.io", "creator": {"id": "623995712489101040", "handle": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5"}, "tags": ["apple", "appstore", "ios", "ipados", "keyboard", "library", "lockscreen", "message", "safari", "settings"], "badges": [], "related_content": {"content": ["1121065701252736567", "834093248798603357", "984106517828363349"], "types": ["by_creator"]}}, +{"id": "1208110531299974704", "name": "coolicons PRO | 1.320+ Carefully Designed Icons | Duotone, Duocolor, Line Icons", "description": "

coolicons PRO | 1.320+ Carefully Designed Icons


Three Styles: Line, Duotone, Duocolor, organized in Variants!


coolicons PRO is a carefully designed collection of 1.320+ icons with a focus on simplicity and consistency. Perfectly suited for web, application and mobile design.


✨ 1.320+ Icons

coolicons PRO comes in three styles, Duotone, Duocolor, Line Icons, that are empowered by Figma's Variants, allowing you to swap styles effortlessly.


🌈  Full Customization with coolicons PRO

Includes all source icons with live corners, duotone and duocolor icons. Easily change stroke weight or corner radius of any icon.


❀️ Created in Figma, Made for Figma!

All icons respect Figma’s component overrides like stroke and color changes. Crafted pixel precise with a 2px stroke and neatly organized in variants.


βœ… 24Γ—24 Grid

Each icon has been carefully crafted with love and attention to detail, ensuring that every icon is visually consistent.


🌚 Choose your Side! Dark or Light?

All three icon styles are also placed separately on their own pages in dark or light themes. Bulk select the icons you want and convert them into components.


Support my work and get coolicons PRO


🌈 Visit coolicons.cool


πŸ’› Made by Kryston Schwarze

", "version_id": "283741", "version": "16", "created_at": "2023-02-16T17:59:56.268Z", "duplicate_count": 704, "like_count": 178, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3118795253/51085a27-6a7f-496b-a399-49a9406920bd-cover.png", "redirect_canvas_url": "/community/file/1208110531299974704/canvas", "community_publishers": ["684894"], "publisher": {"id": "684894", "profile_handle": "kryston", "follower_count": 356, "following_count": 35, "primary_user_id": "618721935786092171", "name": "Kryston Schwarze", "img_url": "https://s3-alpha.figma.com/profile/e657ec1e-096e-47fc-ac28-10a1b8be0b90", "badges": []}, "support_contact": "kryston.schwarze@gmail.com", "creator": {"id": "618721935786092171", "handle": "Kryston Schwarze", "img_url": "https://s3-alpha.figma.com/profile/e657ec1e-096e-47fc-ac28-10a1b8be0b90"}, "tags": ["assets", "coolicons", "dark", "duocolor", "duotone", "icon libary", "icons", "icon set", "light", "line icons", "variants"], "badges": [], "related_content": {"content": ["800815864899415771", "788675347108478517", "788671198471043636"], "types": ["by_creator"]}}, +{"id": "984106517828363349", "name": "iOS 15 UI Kit for Figma", "description": "

iOS 16 UI Kit for Figma is now available!

figma.com/@joey


About

I'm unbelievably excited to share this year's iOS 15 UI Kit on the Figma Community, where my goal was to include everything one might need to begin designing.


Months of fun, nerdy, creating went into this and every component has been recreated and refactored to now work even better with Figma's Variants and updated Auto Layout features.


If you found this file helpful, I’d love to know. Say hi over on Twitter (I’m @joeyabanks)β€”please share any bugs or mistakes you find, too! πŸ™

", "version_id": "155797", "version": "84", "created_at": "2021-06-08T14:47:57.666Z", "duplicate_count": 211264, "like_count": 7650, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/2007993206/9b5e7117-1d28-4c26-8015-8d027af2e21b-cover.png", "redirect_canvas_url": "/community/file/984106517828363349/canvas", "community_publishers": ["938"], "publisher": {"id": "938", "profile_handle": "joey", "follower_count": 12182, "following_count": 1, "primary_user_id": "623995712489101040", "name": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5", "badges": []}, "support_contact": null, "creator": {"id": "623995712489101040", "handle": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5"}, "tags": ["apple", "browser", "home screen", "ios", "ios 15", "iphone", "keyboard", "lockscreen", "safari"], "badges": [], "related_content": {"content": ["1121065701252736567", "1211752161700087083", "834093248798603357"], "types": ["by_creator"]}}, +{"id": "1217481301531252836", "name": "Abstract 8K Wallpapers", "description": "

Give life to your your presentations with these handcrafted 8K wallpapers generated from 3D. Not AI, just lots of time moving pixels until I work with my overlords. Made and curated by Meng To.


Growing Library

There are 51 high-res wallpapers in different themes. I will keep adding new wallpapers via updates. Feel free to suggest more versions of your favorite ones!


Zoom in and paste your design on top

Need a presentation for your site & socials that’s beautiful and will complement your designs? Shift+2 any wallpaper, put your UI layouts, buttons, menus, cards on top and share with the world.


Blur the heck out of them to get good colors

Blur the whole thing or just the corners like in this background by using alpha masking. Wallpapers are fun!


Or, just use them

Turn these huge wallpapers into hundreds of viable backgrounds for your phone, desktop and presentations.


Commercial License

You can use these images for your commercial projects.


Updates

", "version_id": "301599", "version": "4", "created_at": "2023-03-14T14:36:01.985Z", "duplicate_count": 878, "like_count": 124, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3259775176/cb37919c-a2fa-4a2b-b4ee-757944160441-cover.png", "redirect_canvas_url": "/community/file/1217481301531252836/canvas", "community_publishers": ["38397"], "publisher": {"id": "38397", "profile_handle": "mengto", "follower_count": 233, "following_count": 4, "primary_user_id": "363355749660579106", "name": "Meng To", "img_url": "https://s3-alpha.figma.com/profile/948ce70c-57b0-4ea0-a257-8290137ba1be", "badges": []}, "support_contact": "shadownessguy@gmail.com", "creator": {"id": "363355749660579106", "handle": "Meng To", "img_url": "https://s3-alpha.figma.com/profile/948ce70c-57b0-4ea0-a257-8290137ba1be"}, "tags": ["3d", "abstract", "background", "wallpaper"], "badges": [], "related_content": {"content": ["1217619565147809091", "1066455834796929496", "1010544184877672084"], "types": ["by_creator"]}}, +{"id": "1217053085715485107", "name": "Medica - Online Doctor Appointment & Consultation App UI Kit", "description": "

Hello GUIs,

I just released a new product.


Medica is a Premium & High Quality UI Kit with All Full Features of Online Doctor Appointment & Consultation App. Medica came with unique style and niche, you can easily edit and customize all elements with design components which can speed up design process for your projects. Everything is integrated with the design system, so you only need to change the color, logo, text, and so on in the design system, then the entire design screen will automatically change.


Medica support for iOS/Android (design system included) and 212 screens which is 100% editable & customizable. Designs are available in Figma. In addition, the design is also equipped with a version of Light & Dark Theme.


Medica is designed in a trendy and modern way, with all layers well organized. Medica is equipped with a design system with hundred of components. The Design System has been equipped with typography, iconography, color styles, components, variants, elements, buttons, input forms, alerts, avatars, checkboxes, chips, grids, toggles, and many others.


In addition, the application design in figma has been designed with fully auto layout, so it is very adaptive if you want to edit, delete, or add some parts. You can also resize the artboard, and the design will be responsive according to the size of the artboard you want. If you are not familiar with auto layout, you can turn it off by right-clicking the layer, and selecting remove auto layout.


Medica UI Kit is suitable for:


Main App Features:


What's Inside:


Product Highlights:


Note: All images/photos in the preview are included 😊

Assets: Unsplash, unDraw, Freepik


---------------------------------------------------------------------------------------------------


Get more awesome products! πŸ‘‡πŸ‘‡πŸ‘‡

MunirSr


Want to donate?

Buy Me a Coffee: πŸ‘‡

Buy Me a Coffee


---------------------------------------------------------------------------------------------------


πŸ›ˆ Additional Information

This product was created and published by MunirSr. If you see someone else selling this product on the website or elsewhere, in any way, it is illegal and violates copyright. Please report it to me. Thank you 😊


---------------------------------------------------------------------------------------------------


Make your project more awesome!

Connect with me: sobakhul.munir527@gmail.com


More you can find me at:

Linkedin | Instagram | Dribbble | Behance | Linktr.ee

", "version_id": "288789", "version": "1", "created_at": "2023-03-13T10:14:27.384Z", "duplicate_count": 1212, "like_count": 130, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3155990013/ff452531-5b76-427d-a287-d46050ba20b2-cover.png", "redirect_canvas_url": "/community/file/1217053085715485107/canvas", "community_publishers": ["2389308"], "publisher": {"id": "2389308", "profile_handle": "MunirSr", "follower_count": 3639, "following_count": 1, "primary_user_id": "763822967356589666", "name": "Sobakhul Munir Siroj", "img_url": "https://s3-alpha.figma.com/profile/be510c7a-6bfc-4ae7-8098-3887c3553599", "badges": []}, "support_contact": "sobakhul.munir527@gmail.com", "creator": {"id": "763822967356589666", "handle": "Sobakhul Munir Siroj", "img_url": "https://s3-alpha.figma.com/profile/be510c7a-6bfc-4ae7-8098-3887c3553599"}, "tags": ["clinic app", "design system", "doctor app", "doctor appointment app", "doctor consultation app", "free", "health app", "medical app", "medicine app", "mobile", "portfolio", "ui kit"], "badges": [], "related_content": {"content": ["1223314222511062706", "1218823989467855715", "1218605363755606732"], "types": ["by_creator"]}}, +{"id": "1209986153083335158", "name": "UI Prep Design System 7.0", "description": "

⭐️ 5.0 Gumroad rating

Battle-Tested, No Fluff Design System

Jump-start every new project with components and styles you’re confident in. This design system will help you work faster while teaching you best practices along the way!

πŸ‘‰ Learn more at uiprep.com

πŸ‘‰ Preview the full system here

πŸ‘‰ Demo part of the system here


What's included

Purchase includes full UI Prep Design System (light theme)

βœ… Latest features! Use auto layout, properties, and variants like a pro

βœ… Free updates! Receive all future updates for free

βœ… Quick start guide! Tutorial videos to help you customize & use the system asap

βœ… Playground! Test area where you can play with 3 sample components


Loved and trusted by solo designers, teams, and students

⭐️ β€œUI Prep has been instrumental in our agency work. I’m a firm believer in efficiencies and never starting projects from scratch, and UI Prep helps us start at 60% instead of 0%. It’s comprehensive, organized, and very thoughtfully designed. I could not recommend this more.” - Jon Moore, Principal Product Designer at Innovatemap

⭐️ β€œI would highly recommend this UI Kit! It was a well organized design system with variety of components to select from and simple to get started! The document guides were helpful and the emojis made it feel personal and friendly. This kit has dynamic components and easy to customize my designs. Overall, a great product!” - Jason Lopez, UX/UI Designer at H&R Block

⭐️ β€œUI Prep's kit is extremely thorough and well-organized. I'm excited about being able to swap instances so easily and utilizing the grid layouts while designing responsively. I highly recommend the kit to any designer that wants to save time and create beautiful, cohesive work.” - Renee Bruhn, Student at Design Lab

⭐️ \"This is a fantastic design system. Best thing on Gumroad!\" - Christopher Yellen, UX/UI Designer at Fidelity

", "version_id": "286637", "version": "7", "created_at": "2023-02-21T22:12:59.347Z", "duplicate_count": 1815, "like_count": 233, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3142881685/3fc7cb02-b4a9-4156-b854-ea3618a3a22f-cover.png", "redirect_canvas_url": "/community/file/1209986153083335158/canvas", "community_publishers": ["1573407"], "publisher": {"id": "1573407", "profile_handle": "mollyhellmuth", "follower_count": 1437, "following_count": 2, "primary_user_id": "712234545496602821", "name": "Molly Hellmuth", "img_url": "https://s3-alpha.figma.com/profile/97b054c6-33aa-4fe0-9703-ec33b28bbd56", "badges": []}, "support_contact": "molly@quantidesign.io", "creator": {"id": "712234545496602821", "handle": "Molly Hellmuth", "img_url": "https://s3-alpha.figma.com/profile/97b054c6-33aa-4fe0-9703-ec33b28bbd56"}, "tags": ["auto layout", "components", "design system", "library", "light theme", "properties", "responsive", "style guide", "table", "ui kit", "ui prep", "variants"], "badges": [], "related_content": {"content": ["882723790480307828", "888102678933348280", "880199211770085867"], "types": ["by_creator"]}}, +{"id": "1209701993929426029", "name": "❖ Untitled UI – Figma UI kit and design system", "description": "

#1 Design product on Gumroad with 1,300+ β˜…β˜…β˜…β˜…β˜… ratings


πŸ‘‰ Check out the 100% free version of Untitled UI


Untitled UI is the largest and best-selling Figma UI kit and design system in the world. Join 50,000+ designers, kickstart any project, save thousands of hours, and level up as a designer.


πŸ‘‰ Learn more at untitledui.com

πŸ‘‰ Preview Untitled UI PRO in Figma and compare us to the competition


Every purchase includes Untitled UI PRO LITE, a premium and lightweight version of the full Untitled UI PRO kit.


πŸ‘‰ Preview Untitled UI PRO LITE in Figma


β€”β€”β€”β€”β€”


Save thousands of design hours


Tired of wasting thousands of hours starting from scratch on every project and rebuilding the same components? Untitled UI comes packed full with everything you need to design modern and beautiful UI and websites.


500+ global styles


10,000+ components and variants


420+ ready-to-go desktop and mobile page examples


Every purchase includes Untitled UI PRO LITE


β€”β€”β€”β€”β€”


Become a better designer


Are you ready to level up your design workflow? We want to help you complete projects 10x faster, take on more clients, and free up your time to work on more important things. Untitled UI has everything you need.


Every component is meticulously crafted with 100% Auto Layout 4.0, super-smart variants, hover and click interactions, and with accessibility in mind. Swap out variants in seconds, like magic. We’ve thought of everything so you can start designing right away.


β€”β€”β€”β€”β€”


Scale is easy, but quality is rare


The most popular Figma UI kits on the market today lack in size, flexibility, or quality β€” usually all three. Untitled UI was built to solve this. We’ve built this design system to be professional quality, while neutral and flexible enough for any project.


πŸ‘‰ Preview Untitled UI in Figma and compare us to the competition


Seriously, compare us to other UI kits. We even wrote a blog post to make it easy: 24 Best Figma UI Kits and Design Systems


β€”β€”β€”β€”β€”


This UI kit is perfect for:



β€”β€”β€”β€”β€”


What are you waiting for?


Untitled UI is packed full of everything you need to kickstart that awesome project.


πŸ‘‰ Learn more at untitledui.com

πŸ‘‰ Learn what's new on our changelog


β€”β€”β€”β€”β€”


Why we created Untitled UI


This project started out of necessity. We tried a bunch of Figma UI kits, but found they lacked in size, flexibility, or quality β€” usually all three β€” and we ended up having to remake all the poor-quality components.


We needed an β€œultimate starter” kit for new freelance projects and design systems, rather than having to start from scratch each time. We were sick of rebuilding the same common components over and over again... which is not only a waste of time, but the most boring part of the design process.


Untitled UI was built to solve this. We’ve thought of everything you need to design modern and beautiful UI and websites and have wrapped it into one neatly organized package.


You can use this UI kit in unlimited projects. In fact, we designed it this way β€” to be as neutral, flexible, and scalable as possible to use as a kick-starter for any project.


β€”β€”β€”β€”β€”


Any questions?


Check out our Frequently Asked Questions page on our website.


Note: Untitled UI is not affiliated with Figma or Figma's team, nor is it endorsed by Figma.

", "version_id": "300817", "version": "11", "created_at": "2023-02-21T03:23:50.525Z", "duplicate_count": 1793, "like_count": 192, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3253465680/301b18eb-18d0-42e2-9d5b-d55be3a68d24-cover.png", "redirect_canvas_url": "/community/file/1209701993929426029/canvas", "community_publishers": ["1339065"], "publisher": {"id": "1339065", "profile_handle": "designer", "follower_count": 2924, "following_count": 1, "primary_user_id": "693707883872464537", "name": "Jordan Hughes", "img_url": "https://s3-alpha.figma.com/profile/910a809b-359c-4c9f-9a82-febd85377bbe", "badges": []}, "support_contact": "hi@jordanhughes.co", "creator": {"id": "693707883872464537", "handle": "Jordan Hughes", "img_url": "https://s3-alpha.figma.com/profile/910a809b-359c-4c9f-9a82-febd85377bbe"}, "tags": ["asset library", "design system", "icon library", "icons", "library", "ui kit", "untitled", "untitledui", "untitled ui", "wireframe", "wireframe kit"], "badges": [], "related_content": {"content": ["1020079203222518115", "1209707891179706483", "1114001199549197320"], "types": ["by_creator"]}} +] \ No newline at end of file diff --git a/ci/report/samples-5.json b/ci/report/samples-5.json new file mode 100644 index 000000000..c60a48ec0 --- /dev/null +++ b/ci/report/samples-5.json @@ -0,0 +1,7 @@ +[ +{"id": "1035203688168086460", "name": "Material 3 Design Kit", "description": "

Introducing Material Design 3

Meet Material Design 3, Material Design’s most personal design system yet. The Material 3 Design Kit provides a comprehensive introduction to the design system, with styles and components to help you get started.


Visualize dynamic color in your UI

The Material 3 Design Kit is built to work with the Material Theme Builder Figma plugin. Select an image or color to visualize dynamic color in your UI.


Looking for icons? Try the Google Icons Library


Suggestions and/or feedback?

Email m3-design-kit-feedback@google.com

Fill out this Google feedback form

or ping us @materialdesign on Twitter.


Changelog


03.28.23 V1.8

Major updates:

⚠ New tonal surfaces and fixed accents are here!

The latest update introduces Surfaces based on tone values, these are no longer read-only overlays. Surfaces 1–5 will remain in the gm3 design kit and material theme builder for current users, but we recommend migrating to new surface tokens as soon as possible.

Fixed accents add a new set of colors that will remain consistent across light and dark themes.

⚠ We added prototyping to components!


Additional updates: 

Bugs adressed: 


02.09.23 V1.7

Components and Styles Added: 

Updates:

Bugs addressed: 


12.15.22 V1.6

Components and Styles Added: 

Updates:

Bugs addressed: 


10.18.22 V1.5

Huge update πŸŽ‰

Components and Styles Added: 

Bugs addressed: 

Updates: 


07.01.22 V1.4


05.11.22 V1.3


02.14.22 V1.2


11.10.21 V1.1


10.27.21 V1

", "version_id": "300251", "version": "15", "created_at": "2021-10-27T14:49:52.407Z", "duplicate_count": 304043, "like_count": 12274, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3248391748/c8266c68-b5d6-4fc2-9fc6-d41b3cc8af6f-cover.png", "redirect_canvas_url": "/community/file/1035203688168086460/canvas", "community_publishers": ["2555098"], "publisher": {"id": "2555098", "profile_handle": "materialdesign", "follower_count": 27922, "following_count": 0, "primary_user_id": "771462962926009319", "name": "Material Design", "img_url": "https://s3-alpha.figma.com/profile/77d92d28-8203-4dbb-9a95-9d81cacbc6ce", "badges": ["figma_partner"]}, "support_contact": "materialdesignteam@gmail.com", "creator": {"id": "771462962926009319", "handle": "Material Design", "img_url": "https://s3-alpha.figma.com/profile/77d92d28-8203-4dbb-9a95-9d81cacbc6ce"}, "tags": ["android", "google", "material", "material design", "mobile", "stickersheet", "system", "ui kit"], "badges": [], "related_content": {"content": ["1164313362327941158", "1215441112935711382", "1199784060037728858"], "types": ["by_creator"]}}, +{"id": "778763161265841481", "name": "Material 2 Design Kit", "description": "

Customize and Create

Material Design's Baseline Design Kit provides all you need to create beautiful apps, complete with components and theming guidance.


Suggestions and/or feedback? Ping us @materialdesign on Twitter.


Changelog

10.27.21


08.24.21 V1.3


07.14.21 V1.2

     Updates:


06.28.21 V1.1

     Updates:

", "version_id": "69467", "version": "8", "created_at": "2019-11-19T23:26:46.362Z", "duplicate_count": 341590, "like_count": 7721, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/1243826780/733e5f32-55ba-4d02-adf9-54d6e041dcff-cover.png", "redirect_canvas_url": "/community/file/778763161265841481/canvas", "community_publishers": ["2555098"], "publisher": {"id": "2555098", "profile_handle": "materialdesign", "follower_count": 27922, "following_count": 0, "primary_user_id": "771462962926009319", "name": "Material Design", "img_url": "https://s3-alpha.figma.com/profile/77d92d28-8203-4dbb-9a95-9d81cacbc6ce", "badges": ["figma_partner"]}, "support_contact": null, "creator": {"id": "771462962926009319", "handle": "Material Design", "img_url": "https://s3-alpha.figma.com/profile/77d92d28-8203-4dbb-9a95-9d81cacbc6ce"}, "tags": ["android", "google", "material", "mobile", "stickersheet", "system", "ui kit"], "badges": [], "related_content": {"content": ["1035203688168086460", "1164313362327941158", "1215441112935711382"], "types": ["by_creator"]}}, +{"id": "890095002328610853", "name": "SALY - 3D Illustration Pack", "description": "

Collection of high-quality 3D illustrations, hand-crafted and full of personalities. FREE to use for your exploration or personal project.


Over 30 illustrations and will keep updated in the future. Enjoy!


Work Inquiry: talk@hellozea.com


------------------------------


Changelog:


v1.7.3 (23 September 2021):



v1.6.3 (11 May 2021):



v1.5.3 (4 May 2021):



v1.4.2 (11 January 2021):



v1.3.2 (12 Dec 2020):



v1.2.1:



v1.2.0:



v1.1.0:



v1.0.0:


", "version_id": "60438", "version": "12", "created_at": "2020-09-22T04:39:45.719Z", "duplicate_count": 213111, "like_count": 7766, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/1151541105/360c7092-f558-420d-b37f-9ff98ef61d7a-cover.png", "redirect_canvas_url": "/community/file/890095002328610853/canvas", "community_publishers": ["2523672"], "publisher": {"id": "2523672", "profile_handle": "zea", "follower_count": 464, "following_count": 6, "primary_user_id": "770168073021644197", "name": "Alzea", "img_url": "https://s3-alpha.figma.com/profile/9bb40d6d-f1d7-433c-b300-d2fe1b13016e", "badges": []}, "support_contact": null, "creator": {"id": "770168073021644197", "handle": "Alzea", "img_url": "https://s3-alpha.figma.com/profile/9bb40d6d-f1d7-433c-b300-d2fe1b13016e"}, "tags": [], "badges": [], "related_content": {"content": [], "types": ["by_creator"]}}, +{"id": "1211752161700087083", "name": "iPadOS 16 UI Kit for Figma", "description": "

About ✨

I'm excited to share this year's iPadOS 16 UI Kit for Figma with the community! This file contains hundreds of components, templates, demos, and everything else needed to help you start designing for iPadOS. Each component uses the latest version of Auto Layout, supports Component Properties, variants, Light and Dark Mode, and much more.


I can't wait to see what you'll create with these components!

", "version_id": "289240", "version": "3", "created_at": "2023-02-26T19:10:28.613Z", "duplicate_count": 1009, "like_count": 256, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3160180469/45404798-1c5a-46e5-ae29-065bb0ab2b9e-cover.png", "redirect_canvas_url": "/community/file/1211752161700087083/canvas", "community_publishers": ["938"], "publisher": {"id": "938", "profile_handle": "joey", "follower_count": 12182, "following_count": 1, "primary_user_id": "623995712489101040", "name": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5", "badges": []}, "support_contact": "support@baselinedesign.io", "creator": {"id": "623995712489101040", "handle": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5"}, "tags": ["apple", "appstore", "ios", "ipados", "keyboard", "library", "lockscreen", "message", "safari", "settings"], "badges": [], "related_content": {"content": ["1121065701252736567", "834093248798603357", "984106517828363349"], "types": ["by_creator"]}}, +{"id": "1208110531299974704", "name": "coolicons PRO | 1.320+ Carefully Designed Icons | Duotone, Duocolor, Line Icons", "description": "

coolicons PRO | 1.320+ Carefully Designed Icons


Three Styles: Line, Duotone, Duocolor, organized in Variants!


coolicons PRO is a carefully designed collection of 1.320+ icons with a focus on simplicity and consistency. Perfectly suited for web, application and mobile design.


✨ 1.320+ Icons

coolicons PRO comes in three styles, Duotone, Duocolor, Line Icons, that are empowered by Figma's Variants, allowing you to swap styles effortlessly.


🌈  Full Customization with coolicons PRO

Includes all source icons with live corners, duotone and duocolor icons. Easily change stroke weight or corner radius of any icon.


❀️ Created in Figma, Made for Figma!

All icons respect Figma’s component overrides like stroke and color changes. Crafted pixel precise with a 2px stroke and neatly organized in variants.


βœ… 24Γ—24 Grid

Each icon has been carefully crafted with love and attention to detail, ensuring that every icon is visually consistent.


🌚 Choose your Side! Dark or Light?

All three icon styles are also placed separately on their own pages in dark or light themes. Bulk select the icons you want and convert them into components.


Support my work and get coolicons PRO


🌈 Visit coolicons.cool


πŸ’› Made by Kryston Schwarze

", "version_id": "283741", "version": "16", "created_at": "2023-02-16T17:59:56.268Z", "duplicate_count": 704, "like_count": 178, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3118795253/51085a27-6a7f-496b-a399-49a9406920bd-cover.png", "redirect_canvas_url": "/community/file/1208110531299974704/canvas", "community_publishers": ["684894"], "publisher": {"id": "684894", "profile_handle": "kryston", "follower_count": 356, "following_count": 35, "primary_user_id": "618721935786092171", "name": "Kryston Schwarze", "img_url": "https://s3-alpha.figma.com/profile/e657ec1e-096e-47fc-ac28-10a1b8be0b90", "badges": []}, "support_contact": "kryston.schwarze@gmail.com", "creator": {"id": "618721935786092171", "handle": "Kryston Schwarze", "img_url": "https://s3-alpha.figma.com/profile/e657ec1e-096e-47fc-ac28-10a1b8be0b90"}, "tags": ["assets", "coolicons", "dark", "duocolor", "duotone", "icon libary", "icons", "icon set", "light", "line icons", "variants"], "badges": [], "related_content": {"content": ["800815864899415771", "788675347108478517", "788671198471043636"], "types": ["by_creator"]}} +] \ No newline at end of file diff --git a/ci/report/samples-50.json b/ci/report/samples-50.json new file mode 100644 index 000000000..092f56f01 --- /dev/null +++ b/ci/report/samples-50.json @@ -0,0 +1,52 @@ +[ +{"id": "1035203688168086460", "name": "Material 3 Design Kit", "description": "

Introducing Material Design 3

Meet Material Design 3, Material Design’s most personal design system yet. The Material 3 Design Kit provides a comprehensive introduction to the design system, with styles and components to help you get started.


Visualize dynamic color in your UI

The Material 3 Design Kit is built to work with the Material Theme Builder Figma plugin. Select an image or color to visualize dynamic color in your UI.


Looking for icons? Try the Google Icons Library


Suggestions and/or feedback?

Email m3-design-kit-feedback@google.com

Fill out this Google feedback form

or ping us @materialdesign on Twitter.


Changelog


03.28.23 V1.8

Major updates:

⚠ New tonal surfaces and fixed accents are here!

The latest update introduces Surfaces based on tone values, these are no longer read-only overlays. Surfaces 1–5 will remain in the gm3 design kit and material theme builder for current users, but we recommend migrating to new surface tokens as soon as possible.

Fixed accents add a new set of colors that will remain consistent across light and dark themes.

⚠ We added prototyping to components!


Additional updates: 

Bugs adressed: 


02.09.23 V1.7

Components and Styles Added: 

Updates:

Bugs addressed: 


12.15.22 V1.6

Components and Styles Added: 

Updates:

Bugs addressed: 


10.18.22 V1.5

Huge update πŸŽ‰

Components and Styles Added: 

Bugs addressed: 

Updates: 


07.01.22 V1.4


05.11.22 V1.3


02.14.22 V1.2


11.10.21 V1.1


10.27.21 V1

", "version_id": "300251", "version": "15", "created_at": "2021-10-27T14:49:52.407Z", "duplicate_count": 304043, "like_count": 12274, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3248391748/c8266c68-b5d6-4fc2-9fc6-d41b3cc8af6f-cover.png", "redirect_canvas_url": "/community/file/1035203688168086460/canvas", "community_publishers": ["2555098"], "publisher": {"id": "2555098", "profile_handle": "materialdesign", "follower_count": 27922, "following_count": 0, "primary_user_id": "771462962926009319", "name": "Material Design", "img_url": "https://s3-alpha.figma.com/profile/77d92d28-8203-4dbb-9a95-9d81cacbc6ce", "badges": ["figma_partner"]}, "support_contact": "materialdesignteam@gmail.com", "creator": {"id": "771462962926009319", "handle": "Material Design", "img_url": "https://s3-alpha.figma.com/profile/77d92d28-8203-4dbb-9a95-9d81cacbc6ce"}, "tags": ["android", "google", "material", "material design", "mobile", "stickersheet", "system", "ui kit"], "badges": [], "related_content": {"content": ["1164313362327941158", "1215441112935711382", "1199784060037728858"], "types": ["by_creator"]}}, +{"id": "778763161265841481", "name": "Material 2 Design Kit", "description": "

Customize and Create

Material Design's Baseline Design Kit provides all you need to create beautiful apps, complete with components and theming guidance.


Suggestions and/or feedback? Ping us @materialdesign on Twitter.


Changelog

10.27.21


08.24.21 V1.3


07.14.21 V1.2

     Updates:


06.28.21 V1.1

     Updates:

", "version_id": "69467", "version": "8", "created_at": "2019-11-19T23:26:46.362Z", "duplicate_count": 341590, "like_count": 7721, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/1243826780/733e5f32-55ba-4d02-adf9-54d6e041dcff-cover.png", "redirect_canvas_url": "/community/file/778763161265841481/canvas", "community_publishers": ["2555098"], "publisher": {"id": "2555098", "profile_handle": "materialdesign", "follower_count": 27922, "following_count": 0, "primary_user_id": "771462962926009319", "name": "Material Design", "img_url": "https://s3-alpha.figma.com/profile/77d92d28-8203-4dbb-9a95-9d81cacbc6ce", "badges": ["figma_partner"]}, "support_contact": null, "creator": {"id": "771462962926009319", "handle": "Material Design", "img_url": "https://s3-alpha.figma.com/profile/77d92d28-8203-4dbb-9a95-9d81cacbc6ce"}, "tags": ["android", "google", "material", "mobile", "stickersheet", "system", "ui kit"], "badges": [], "related_content": {"content": ["1035203688168086460", "1164313362327941158", "1215441112935711382"], "types": ["by_creator"]}}, +{"id": "890095002328610853", "name": "SALY - 3D Illustration Pack", "description": "

Collection of high-quality 3D illustrations, hand-crafted and full of personalities. FREE to use for your exploration or personal project.


Over 30 illustrations and will keep updated in the future. Enjoy!


Work Inquiry: talk@hellozea.com


------------------------------


Changelog:


v1.7.3 (23 September 2021):



v1.6.3 (11 May 2021):



v1.5.3 (4 May 2021):



v1.4.2 (11 January 2021):



v1.3.2 (12 Dec 2020):



v1.2.1:



v1.2.0:



v1.1.0:



v1.0.0:


", "version_id": "60438", "version": "12", "created_at": "2020-09-22T04:39:45.719Z", "duplicate_count": 213111, "like_count": 7766, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/1151541105/360c7092-f558-420d-b37f-9ff98ef61d7a-cover.png", "redirect_canvas_url": "/community/file/890095002328610853/canvas", "community_publishers": ["2523672"], "publisher": {"id": "2523672", "profile_handle": "zea", "follower_count": 464, "following_count": 6, "primary_user_id": "770168073021644197", "name": "Alzea", "img_url": "https://s3-alpha.figma.com/profile/9bb40d6d-f1d7-433c-b300-d2fe1b13016e", "badges": []}, "support_contact": null, "creator": {"id": "770168073021644197", "handle": "Alzea", "img_url": "https://s3-alpha.figma.com/profile/9bb40d6d-f1d7-433c-b300-d2fe1b13016e"}, "tags": [], "badges": [], "related_content": {"content": [], "types": ["by_creator"]}}, +{"id": "1211752161700087083", "name": "iPadOS 16 UI Kit for Figma", "description": "

About ✨

I'm excited to share this year's iPadOS 16 UI Kit for Figma with the community! This file contains hundreds of components, templates, demos, and everything else needed to help you start designing for iPadOS. Each component uses the latest version of Auto Layout, supports Component Properties, variants, Light and Dark Mode, and much more.


I can't wait to see what you'll create with these components!

", "version_id": "289240", "version": "3", "created_at": "2023-02-26T19:10:28.613Z", "duplicate_count": 1009, "like_count": 256, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3160180469/45404798-1c5a-46e5-ae29-065bb0ab2b9e-cover.png", "redirect_canvas_url": "/community/file/1211752161700087083/canvas", "community_publishers": ["938"], "publisher": {"id": "938", "profile_handle": "joey", "follower_count": 12182, "following_count": 1, "primary_user_id": "623995712489101040", "name": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5", "badges": []}, "support_contact": "support@baselinedesign.io", "creator": {"id": "623995712489101040", "handle": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5"}, "tags": ["apple", "appstore", "ios", "ipados", "keyboard", "library", "lockscreen", "message", "safari", "settings"], "badges": [], "related_content": {"content": ["1121065701252736567", "834093248798603357", "984106517828363349"], "types": ["by_creator"]}}, +{"id": "1208110531299974704", "name": "coolicons PRO | 1.320+ Carefully Designed Icons | Duotone, Duocolor, Line Icons", "description": "

coolicons PRO | 1.320+ Carefully Designed Icons


Three Styles: Line, Duotone, Duocolor, organized in Variants!


coolicons PRO is a carefully designed collection of 1.320+ icons with a focus on simplicity and consistency. Perfectly suited for web, application and mobile design.


✨ 1.320+ Icons

coolicons PRO comes in three styles, Duotone, Duocolor, Line Icons, that are empowered by Figma's Variants, allowing you to swap styles effortlessly.


🌈  Full Customization with coolicons PRO

Includes all source icons with live corners, duotone and duocolor icons. Easily change stroke weight or corner radius of any icon.


❀️ Created in Figma, Made for Figma!

All icons respect Figma’s component overrides like stroke and color changes. Crafted pixel precise with a 2px stroke and neatly organized in variants.


βœ… 24Γ—24 Grid

Each icon has been carefully crafted with love and attention to detail, ensuring that every icon is visually consistent.


🌚 Choose your Side! Dark or Light?

All three icon styles are also placed separately on their own pages in dark or light themes. Bulk select the icons you want and convert them into components.


Support my work and get coolicons PRO


🌈 Visit coolicons.cool


πŸ’› Made by Kryston Schwarze

", "version_id": "283741", "version": "16", "created_at": "2023-02-16T17:59:56.268Z", "duplicate_count": 704, "like_count": 178, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3118795253/51085a27-6a7f-496b-a399-49a9406920bd-cover.png", "redirect_canvas_url": "/community/file/1208110531299974704/canvas", "community_publishers": ["684894"], "publisher": {"id": "684894", "profile_handle": "kryston", "follower_count": 356, "following_count": 35, "primary_user_id": "618721935786092171", "name": "Kryston Schwarze", "img_url": "https://s3-alpha.figma.com/profile/e657ec1e-096e-47fc-ac28-10a1b8be0b90", "badges": []}, "support_contact": "kryston.schwarze@gmail.com", "creator": {"id": "618721935786092171", "handle": "Kryston Schwarze", "img_url": "https://s3-alpha.figma.com/profile/e657ec1e-096e-47fc-ac28-10a1b8be0b90"}, "tags": ["assets", "coolicons", "dark", "duocolor", "duotone", "icon libary", "icons", "icon set", "light", "line icons", "variants"], "badges": [], "related_content": {"content": ["800815864899415771", "788675347108478517", "788671198471043636"], "types": ["by_creator"]}}, +{"id": "984106517828363349", "name": "iOS 15 UI Kit for Figma", "description": "

iOS 16 UI Kit for Figma is now available!

figma.com/@joey


About

I'm unbelievably excited to share this year's iOS 15 UI Kit on the Figma Community, where my goal was to include everything one might need to begin designing.


Months of fun, nerdy, creating went into this and every component has been recreated and refactored to now work even better with Figma's Variants and updated Auto Layout features.


If you found this file helpful, I’d love to know. Say hi over on Twitter (I’m @joeyabanks)β€”please share any bugs or mistakes you find, too! πŸ™

", "version_id": "155797", "version": "84", "created_at": "2021-06-08T14:47:57.666Z", "duplicate_count": 211264, "like_count": 7650, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/2007993206/9b5e7117-1d28-4c26-8015-8d027af2e21b-cover.png", "redirect_canvas_url": "/community/file/984106517828363349/canvas", "community_publishers": ["938"], "publisher": {"id": "938", "profile_handle": "joey", "follower_count": 12182, "following_count": 1, "primary_user_id": "623995712489101040", "name": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5", "badges": []}, "support_contact": null, "creator": {"id": "623995712489101040", "handle": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5"}, "tags": ["apple", "browser", "home screen", "ios", "ios 15", "iphone", "keyboard", "lockscreen", "safari"], "badges": [], "related_content": {"content": ["1121065701252736567", "1211752161700087083", "834093248798603357"], "types": ["by_creator"]}}, +{"id": "1217481301531252836", "name": "Abstract 8K Wallpapers", "description": "

Give life to your your presentations with these handcrafted 8K wallpapers generated from 3D. Not AI, just lots of time moving pixels until I work with my overlords. Made and curated by Meng To.


Growing Library

There are 51 high-res wallpapers in different themes. I will keep adding new wallpapers via updates. Feel free to suggest more versions of your favorite ones!


Zoom in and paste your design on top

Need a presentation for your site & socials that’s beautiful and will complement your designs? Shift+2 any wallpaper, put your UI layouts, buttons, menus, cards on top and share with the world.


Blur the heck out of them to get good colors

Blur the whole thing or just the corners like in this background by using alpha masking. Wallpapers are fun!


Or, just use them

Turn these huge wallpapers into hundreds of viable backgrounds for your phone, desktop and presentations.


Commercial License

You can use these images for your commercial projects.


Updates

", "version_id": "301599", "version": "4", "created_at": "2023-03-14T14:36:01.985Z", "duplicate_count": 878, "like_count": 124, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3259775176/cb37919c-a2fa-4a2b-b4ee-757944160441-cover.png", "redirect_canvas_url": "/community/file/1217481301531252836/canvas", "community_publishers": ["38397"], "publisher": {"id": "38397", "profile_handle": "mengto", "follower_count": 233, "following_count": 4, "primary_user_id": "363355749660579106", "name": "Meng To", "img_url": "https://s3-alpha.figma.com/profile/948ce70c-57b0-4ea0-a257-8290137ba1be", "badges": []}, "support_contact": "shadownessguy@gmail.com", "creator": {"id": "363355749660579106", "handle": "Meng To", "img_url": "https://s3-alpha.figma.com/profile/948ce70c-57b0-4ea0-a257-8290137ba1be"}, "tags": ["3d", "abstract", "background", "wallpaper"], "badges": [], "related_content": {"content": ["1217619565147809091", "1066455834796929496", "1010544184877672084"], "types": ["by_creator"]}}, +{"id": "1217053085715485107", "name": "Medica - Online Doctor Appointment & Consultation App UI Kit", "description": "

Hello GUIs,

I just released a new product.


Medica is a Premium & High Quality UI Kit with All Full Features of Online Doctor Appointment & Consultation App. Medica came with unique style and niche, you can easily edit and customize all elements with design components which can speed up design process for your projects. Everything is integrated with the design system, so you only need to change the color, logo, text, and so on in the design system, then the entire design screen will automatically change.


Medica support for iOS/Android (design system included) and 212 screens which is 100% editable & customizable. Designs are available in Figma. In addition, the design is also equipped with a version of Light & Dark Theme.


Medica is designed in a trendy and modern way, with all layers well organized. Medica is equipped with a design system with hundred of components. The Design System has been equipped with typography, iconography, color styles, components, variants, elements, buttons, input forms, alerts, avatars, checkboxes, chips, grids, toggles, and many others.


In addition, the application design in figma has been designed with fully auto layout, so it is very adaptive if you want to edit, delete, or add some parts. You can also resize the artboard, and the design will be responsive according to the size of the artboard you want. If you are not familiar with auto layout, you can turn it off by right-clicking the layer, and selecting remove auto layout.


Medica UI Kit is suitable for:


Main App Features:


What's Inside:


Product Highlights:


Note: All images/photos in the preview are included 😊

Assets: Unsplash, unDraw, Freepik


---------------------------------------------------------------------------------------------------


Get more awesome products! πŸ‘‡πŸ‘‡πŸ‘‡

MunirSr


Want to donate?

Buy Me a Coffee: πŸ‘‡

Buy Me a Coffee


---------------------------------------------------------------------------------------------------


πŸ›ˆ Additional Information

This product was created and published by MunirSr. If you see someone else selling this product on the website or elsewhere, in any way, it is illegal and violates copyright. Please report it to me. Thank you 😊


---------------------------------------------------------------------------------------------------


Make your project more awesome!

Connect with me: sobakhul.munir527@gmail.com


More you can find me at:

Linkedin | Instagram | Dribbble | Behance | Linktr.ee

", "version_id": "288789", "version": "1", "created_at": "2023-03-13T10:14:27.384Z", "duplicate_count": 1212, "like_count": 130, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3155990013/ff452531-5b76-427d-a287-d46050ba20b2-cover.png", "redirect_canvas_url": "/community/file/1217053085715485107/canvas", "community_publishers": ["2389308"], "publisher": {"id": "2389308", "profile_handle": "MunirSr", "follower_count": 3639, "following_count": 1, "primary_user_id": "763822967356589666", "name": "Sobakhul Munir Siroj", "img_url": "https://s3-alpha.figma.com/profile/be510c7a-6bfc-4ae7-8098-3887c3553599", "badges": []}, "support_contact": "sobakhul.munir527@gmail.com", "creator": {"id": "763822967356589666", "handle": "Sobakhul Munir Siroj", "img_url": "https://s3-alpha.figma.com/profile/be510c7a-6bfc-4ae7-8098-3887c3553599"}, "tags": ["clinic app", "design system", "doctor app", "doctor appointment app", "doctor consultation app", "free", "health app", "medical app", "medicine app", "mobile", "portfolio", "ui kit"], "badges": [], "related_content": {"content": ["1223314222511062706", "1218823989467855715", "1218605363755606732"], "types": ["by_creator"]}}, +{"id": "1209986153083335158", "name": "UI Prep Design System 7.0", "description": "

⭐️ 5.0 Gumroad rating

Battle-Tested, No Fluff Design System

Jump-start every new project with components and styles you’re confident in. This design system will help you work faster while teaching you best practices along the way!

πŸ‘‰ Learn more at uiprep.com

πŸ‘‰ Preview the full system here

πŸ‘‰ Demo part of the system here


What's included

Purchase includes full UI Prep Design System (light theme)

βœ… Latest features! Use auto layout, properties, and variants like a pro

βœ… Free updates! Receive all future updates for free

βœ… Quick start guide! Tutorial videos to help you customize & use the system asap

βœ… Playground! Test area where you can play with 3 sample components


Loved and trusted by solo designers, teams, and students

⭐️ β€œUI Prep has been instrumental in our agency work. I’m a firm believer in efficiencies and never starting projects from scratch, and UI Prep helps us start at 60% instead of 0%. It’s comprehensive, organized, and very thoughtfully designed. I could not recommend this more.” - Jon Moore, Principal Product Designer at Innovatemap

⭐️ β€œI would highly recommend this UI Kit! It was a well organized design system with variety of components to select from and simple to get started! The document guides were helpful and the emojis made it feel personal and friendly. This kit has dynamic components and easy to customize my designs. Overall, a great product!” - Jason Lopez, UX/UI Designer at H&R Block

⭐️ β€œUI Prep's kit is extremely thorough and well-organized. I'm excited about being able to swap instances so easily and utilizing the grid layouts while designing responsively. I highly recommend the kit to any designer that wants to save time and create beautiful, cohesive work.” - Renee Bruhn, Student at Design Lab

⭐️ \"This is a fantastic design system. Best thing on Gumroad!\" - Christopher Yellen, UX/UI Designer at Fidelity

", "version_id": "286637", "version": "7", "created_at": "2023-02-21T22:12:59.347Z", "duplicate_count": 1815, "like_count": 233, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3142881685/3fc7cb02-b4a9-4156-b854-ea3618a3a22f-cover.png", "redirect_canvas_url": "/community/file/1209986153083335158/canvas", "community_publishers": ["1573407"], "publisher": {"id": "1573407", "profile_handle": "mollyhellmuth", "follower_count": 1437, "following_count": 2, "primary_user_id": "712234545496602821", "name": "Molly Hellmuth", "img_url": "https://s3-alpha.figma.com/profile/97b054c6-33aa-4fe0-9703-ec33b28bbd56", "badges": []}, "support_contact": "molly@quantidesign.io", "creator": {"id": "712234545496602821", "handle": "Molly Hellmuth", "img_url": "https://s3-alpha.figma.com/profile/97b054c6-33aa-4fe0-9703-ec33b28bbd56"}, "tags": ["auto layout", "components", "design system", "library", "light theme", "properties", "responsive", "style guide", "table", "ui kit", "ui prep", "variants"], "badges": [], "related_content": {"content": ["882723790480307828", "888102678933348280", "880199211770085867"], "types": ["by_creator"]}}, +{"id": "1209701993929426029", "name": "❖ Untitled UI – Figma UI kit and design system", "description": "

#1 Design product on Gumroad with 1,300+ β˜…β˜…β˜…β˜…β˜… ratings


πŸ‘‰ Check out the 100% free version of Untitled UI


Untitled UI is the largest and best-selling Figma UI kit and design system in the world. Join 50,000+ designers, kickstart any project, save thousands of hours, and level up as a designer.


πŸ‘‰ Learn more at untitledui.com

πŸ‘‰ Preview Untitled UI PRO in Figma and compare us to the competition


Every purchase includes Untitled UI PRO LITE, a premium and lightweight version of the full Untitled UI PRO kit.


πŸ‘‰ Preview Untitled UI PRO LITE in Figma


β€”β€”β€”β€”β€”


Save thousands of design hours


Tired of wasting thousands of hours starting from scratch on every project and rebuilding the same components? Untitled UI comes packed full with everything you need to design modern and beautiful UI and websites.


500+ global styles


10,000+ components and variants


420+ ready-to-go desktop and mobile page examples


Every purchase includes Untitled UI PRO LITE


β€”β€”β€”β€”β€”


Become a better designer


Are you ready to level up your design workflow? We want to help you complete projects 10x faster, take on more clients, and free up your time to work on more important things. Untitled UI has everything you need.


Every component is meticulously crafted with 100% Auto Layout 4.0, super-smart variants, hover and click interactions, and with accessibility in mind. Swap out variants in seconds, like magic. We’ve thought of everything so you can start designing right away.


β€”β€”β€”β€”β€”


Scale is easy, but quality is rare


The most popular Figma UI kits on the market today lack in size, flexibility, or quality β€” usually all three. Untitled UI was built to solve this. We’ve built this design system to be professional quality, while neutral and flexible enough for any project.


πŸ‘‰ Preview Untitled UI in Figma and compare us to the competition


Seriously, compare us to other UI kits. We even wrote a blog post to make it easy: 24 Best Figma UI Kits and Design Systems


β€”β€”β€”β€”β€”


This UI kit is perfect for:



β€”β€”β€”β€”β€”


What are you waiting for?


Untitled UI is packed full of everything you need to kickstart that awesome project.


πŸ‘‰ Learn more at untitledui.com

πŸ‘‰ Learn what's new on our changelog


β€”β€”β€”β€”β€”


Why we created Untitled UI


This project started out of necessity. We tried a bunch of Figma UI kits, but found they lacked in size, flexibility, or quality β€” usually all three β€” and we ended up having to remake all the poor-quality components.


We needed an β€œultimate starter” kit for new freelance projects and design systems, rather than having to start from scratch each time. We were sick of rebuilding the same common components over and over again... which is not only a waste of time, but the most boring part of the design process.


Untitled UI was built to solve this. We’ve thought of everything you need to design modern and beautiful UI and websites and have wrapped it into one neatly organized package.


You can use this UI kit in unlimited projects. In fact, we designed it this way β€” to be as neutral, flexible, and scalable as possible to use as a kick-starter for any project.


β€”β€”β€”β€”β€”


Any questions?


Check out our Frequently Asked Questions page on our website.


Note: Untitled UI is not affiliated with Figma or Figma's team, nor is it endorsed by Figma.

", "version_id": "300817", "version": "11", "created_at": "2023-02-21T03:23:50.525Z", "duplicate_count": 1793, "like_count": 192, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3253465680/301b18eb-18d0-42e2-9d5b-d55be3a68d24-cover.png", "redirect_canvas_url": "/community/file/1209701993929426029/canvas", "community_publishers": ["1339065"], "publisher": {"id": "1339065", "profile_handle": "designer", "follower_count": 2924, "following_count": 1, "primary_user_id": "693707883872464537", "name": "Jordan Hughes", "img_url": "https://s3-alpha.figma.com/profile/910a809b-359c-4c9f-9a82-febd85377bbe", "badges": []}, "support_contact": "hi@jordanhughes.co", "creator": {"id": "693707883872464537", "handle": "Jordan Hughes", "img_url": "https://s3-alpha.figma.com/profile/910a809b-359c-4c9f-9a82-febd85377bbe"}, "tags": ["asset library", "design system", "icon library", "icons", "library", "ui kit", "untitled", "untitledui", "untitled ui", "wireframe", "wireframe kit"], "badges": [], "related_content": {"content": ["1020079203222518115", "1209707891179706483", "1114001199549197320"], "types": ["by_creator"]}}, +{"id": "784448220678228461", "name": "Figma auto layout playground", "description": "

Auto Layout lets you create dynamic frames that respond to their content.


With the new updates, you can stretch in any direction, control padding independently, and distribute objects evenlyβ€”all in an easier to use interface.


Read more about the evolution of Auto Layout and how we got to where we are today.


Updated with keyboard shortcuts.

", "version_id": "189479", "version": "27", "created_at": "2019-12-05T15:57:10.151Z", "duplicate_count": 197168, "like_count": 8499, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/2289110755/25975e56-1021-4a82-9ad1-443f881aab85-cover.png", "redirect_canvas_url": "/community/file/784448220678228461/canvas", "community_publishers": ["2480257"], "publisher": {"id": "2480257", "profile_handle": "figma", "follower_count": 25680, "following_count": 54, "primary_user_id": "768244674400796816", "name": "Figma", "img_url": "https://s3-alpha.figma.com/profile/c82ecc52-1c47-405d-980b-904ff54c6577", "badges": []}, "support_contact": null, "creator": {"id": "768244674400796816", "handle": "Figma", "img_url": "https://s3-alpha.figma.com/profile/c82ecc52-1c47-405d-980b-904ff54c6577"}, "tags": [], "badges": [], "related_content": {"content": ["1128717174121908164", "921066411285098081", "911187952265027575"], "types": ["by_remixes"]}}, +{"id": "800815864899415771", "name": "coolicons | Free Iconset", "description": "

coolicons | Free Iconset


coolicons is a carefully designed collection of 440+ icons with a focus on simplicity and consistency. Perfectly suited for web, application and mobile design.


Support my work and get coolicons PRO



πŸš€ Visit coolicons.cool


πŸ’Ύ Visit the Github Project


πŸ’™ Created by Kryston Schwarze

😊 If you like, you can buy me a coffee

", "version_id": "284782", "version": "80", "created_at": "2020-01-19T19:56:20.631Z", "duplicate_count": 183699, "like_count": 6015, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3118841934/1e270003-71d7-49f7-9011-e5a1c1805e01-cover.png", "redirect_canvas_url": "/community/file/800815864899415771/canvas", "community_publishers": ["684894"], "publisher": {"id": "684894", "profile_handle": "kryston", "follower_count": 356, "following_count": 35, "primary_user_id": "618721935786092171", "name": "Kryston Schwarze", "img_url": "https://s3-alpha.figma.com/profile/e657ec1e-096e-47fc-ac28-10a1b8be0b90", "badges": []}, "support_contact": "kryston.schwarze@gmail.com", "creator": {"id": "618721935786092171", "handle": "Kryston Schwarze", "img_url": "https://s3-alpha.figma.com/profile/e657ec1e-096e-47fc-ac28-10a1b8be0b90"}, "tags": ["cool", "free", "icons", "icon set", "mobile", "ui", "ui kit", "ux", "web", "web design"], "badges": [], "related_content": {"content": ["1208110531299974704", "788675347108478517", "788671198471043636"], "types": ["by_creator"]}}, +{"id": "858143367356468985", "name": "iOS 14 UI Kit for Figma", "description": "

iOS 15 is here!

Download my latest file, the iOS 15 UI Kit for Figma Community.


About

I found myself frequently trying to locate many misplaced common iOS/iPadOS system-level interface elements, so decided to build and collect them all in one place.


All of the elements here are named for easy instance-swapping, have constraints applied, and use auto layout where appropriate.


Have suggestions? Let me know! @joeyabanks on Twitter.


Made with lots of πŸ’›.

-Joey

", "version_id": "39160", "version": "77", "created_at": "2020-06-26T00:35:22.309Z", "duplicate_count": 192686, "like_count": 5588, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/908520859/1fe1c6f3-e6c4-4c01-83d1-78296fa91a69-cover.png", "redirect_canvas_url": "/community/file/858143367356468985/canvas", "community_publishers": ["938"], "publisher": {"id": "938", "profile_handle": "joey", "follower_count": 12182, "following_count": 1, "primary_user_id": "623995712489101040", "name": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5", "badges": []}, "support_contact": null, "creator": {"id": "623995712489101040", "handle": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5"}, "tags": ["14", "alert", "apple", "dark", "emoji", "ios", "iphone", "kit", "light", "mobile", "switch", "ui kit"], "badges": [], "related_content": {"content": ["1121065701252736567", "1211752161700087083", "834093248798603357"], "types": ["by_creator"]}}, +{"id": "1173191692359768703", "name": "500 Vector Hand Drawn", "description": "

Vector Hand Drawn is a collection of hand-crafted vector shapes ready to use. Perfect for adding a handmade touch to your work within seconds! Use for products, marketing, social media graphics, annotating, mood boards, collages, cards, quotes, products, 

and more!


Made with lots of love and attention to the details for your projects. Includes more than 500 individual vector shapes, available in 2 styles (smooth & brush), high-res, customizable strokeΒΉ, and easy to use in any design tools.


What’s included?


License

The License includes unlimited personal and commercial projects. If you need an Extended Commercial License for a team, please get in touch for pricing details.


Kindly note that you may use the files to create artwork such as logos, branding, packaging, etc. However, you may not resell, give away, or include the actual files as part of your end product for sale or in editable format. You may not create derivative works, or resell or sub-license the licensed files in any way that is directly competitive with the original licensed files. If you have any questions about licensing, or would like to inquire a special license, such as a Large Volume Commercial Use License, or an E-Pub License, please get in touch.


Get in touch

β†ͺ Email: sajadabedi@outlook.com

β†ͺ Follow me on Twitter: @sajadabedi



β€”

1. Stroke sizes are only customizable for Smooth shapes in Figma. In case you need to customize the Brush and Brush Alt, Please get in touch and I will send you the Adobe Illustrator files where you can customize them.

", "version_id": "284124", "version": "5", "created_at": "2022-11-12T09:24:56.301Z", "duplicate_count": 849, "like_count": 279, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3122446808/bc8affff-841b-44ae-8554-63d9bf592601-cover.png", "redirect_canvas_url": "/community/file/1173191692359768703/canvas", "community_publishers": ["27682"], "publisher": {"id": "27682", "profile_handle": "sajad", "follower_count": 55, "following_count": 19, "primary_user_id": "356258955888311105", "name": "Sajad", "img_url": "https://s3-alpha.figma.com/profile/cc239e78-4894-4130-aece-8ba7b40775ea", "badges": []}, "support_contact": "sajadxabedi@gmail.com", "creator": {"id": "356258955888311105", "handle": "Sajad", "img_url": "https://s3-alpha.figma.com/profile/cc239e78-4894-4130-aece-8ba7b40775ea"}, "tags": ["abstract", "annotation", "arrows", "brush", "drawing", "hand-drawn", "handwritten", "highlight", "icons", "objects", "shapes", "vector"], "badges": [], "related_content": {"content": ["1018477313212753754", "967664403773808206", "1222756511423646439"], "types": ["by_creator", "by_tags"]}}, +{"id": "831698976089873405", "name": "Ant Design Open Source", "description": "", "version_id": "202488", "version": "198", "created_at": "2020-04-14T01:14:48.117Z", "duplicate_count": 123162, "like_count": 6661, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/2403780110/bd68c2c9-90df-4997-9a05-f697585ef9e6-cover.png", "redirect_canvas_url": "/community/file/831698976089873405/canvas", "community_publishers": ["1241"], "publisher": {"id": "1241", "profile_handle": "MrBiscuit", "follower_count": 3976, "following_count": 62, "primary_user_id": "405240457298389341", "name": "Mr.Biscuit", "img_url": "https://s3-alpha.figma.com/profile/e191e8c7-d5c2-4dea-97fe-ed352229e128", "badges": []}, "support_contact": null, "creator": {"id": "405240457298389341", "handle": "Mr.Biscuit", "img_url": "https://s3-alpha.figma.com/profile/e191e8c7-d5c2-4dea-97fe-ed352229e128"}, "tags": ["ados", "ant", "antd", "ant design", "atomic", "components", "design system", "ui kit"], "badges": [], "related_content": {"content": ["1159361577023569082", "1075548076968592561", "1043462750779677742"], "types": ["by_remixes"]}}, +{"id": "878585965681562011", "name": "Material Design Icons", "description": "

Material icons are delightful, beautifully crafted symbols for common actions and items. Download on desktop to use them in your digital products for Android, iOS, and web.


Recommended for use as a team library. All icons are organized in 24px frames and converted into components. All 5 themes are included in this file:


Filled

Outlined

Rounded

Two-tone

Sharp


material.io/resources/icons


Our icons are free for everyone to use. Please don’t try to sell them. Available under Apache license version 2.0


NEW! Update 08.09.2020

fix -- inaccurate names of some icons

fix -- some icons were not components

", "version_id": "11525", "version": "2", "created_at": "2020-08-21T10:26:57.555Z", "duplicate_count": 177935, "like_count": 4622, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/450093333/1c8da3c8-f9e3-49da-a5a1-23744ac8c736-cover.png", "redirect_canvas_url": "/community/file/878585965681562011/canvas", "community_publishers": ["460165"], "publisher": {"id": "460165", "profile_handle": "smrkv", "follower_count": 118, "following_count": 8, "primary_user_id": "572015760274440605", "name": "smrkv", "img_url": "https://s3-alpha.figma.com/profile/21bddb2d-74ce-43b2-9ebe-88000d84daaa", "badges": []}, "support_contact": null, "creator": {"id": "572015760274440605", "handle": "smrkv", "img_url": "https://s3-alpha.figma.com/profile/21bddb2d-74ce-43b2-9ebe-88000d84daaa"}, "tags": ["design", "design system", "google", "icons", "icon set", "kit", "library", "material", "material design", "ui"], "badges": [], "related_content": {"content": ["1215238043409842578", "1041232203418471601", "1062416533290758163"], "types": ["by_remixes"]}}, +{"id": "768365747273056340", "name": "iOS/iPadOS 13 Design UI Kit", "description": "iOS/iPadOS 13 UI Kit\n\nApple UI Design Resources for iOS and iPadOS.\nComprehensive UI resources that depict the full range of controls, views, and glyphs available to developers using the Apple iOS SDK.\n\nThese resources help you design apps that match the iOS design language. Icon and glyph production files are preconfigured to automate asset production using Figma.", "version_id": "606", "version": "10", "created_at": "2019-10-22T06:51:09.696Z", "duplicate_count": 174127, "like_count": 3596, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/200430207/28773041-9331-4641-a323-7119207010e7-cover", "redirect_canvas_url": "/community/file/768365747273056340/canvas", "community_publishers": ["5998"], "publisher": {"id": "5998", "profile_handle": "juanarreguin", "follower_count": 145, "following_count": 6, "primary_user_id": "283707351487349720", "name": "Juan Arreguin", "img_url": "https://s3-alpha.figma.com/profile/75dccd80-659b-4aa8-94d8-c319c56da3d1", "badges": []}, "support_contact": null, "creator": {"id": "283707351487349720", "handle": "Juan Arreguin", "img_url": "https://s3-alpha.figma.com/profile/75dccd80-659b-4aa8-94d8-c319c56da3d1"}, "tags": ["13", "apple", "design system", "ios", "ios13", "ipad", "iphone", "kit", "mobile", "system", "ui", "ui kit"], "badges": [], "related_content": {"content": ["988873972764555714", "1135945397758151839", "1077296325350308947"], "types": ["by_remixes"]}}, +{"id": "1121065701252736567", "name": "iOS 16 UI Kit for Figma", "description": "

Last Updated ⚑️

March 20, 2023


About ✨

Now with Dynamic Island!

I'm beyond excited to share this year's iOS 16 UI Kit for Figma with the community! This file contains hundreds of components, templates, demos, and everything else needed to help you start designing for iOS. Each component has been created with the latest version of Auto Layout, supports Component Properties, variants, Light and Dark Mode, and much more.


Learn More πŸŽ“

Schedule a training

If you're interested in learning more about how this UI kit was created or the best ways to use Figma, I offer 1:1 learning sessions!


Support πŸ™

Purchase support & changelog

If this iOS 16 UI Kit was helpful to you or your team, your support would genuinely mean the world to me. With the purchase of this kit, you'll receive everything that's included for free, along with email updates for component updates, changelog notes, and several Loom walkthroughs and demos. 🎬


I can't wait to see what you'll create with it! If you found this file helpful, I'd love to know! Say hi over on Twitter (I'm @joeyabanks).

", "version_id": "296315", "version": "40", "created_at": "2022-06-21T13:14:51.569Z", "duplicate_count": 112981, "like_count": 5448, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3218164839/69677b32-c7d3-429b-a407-9bd9acf4441a-cover.png", "redirect_canvas_url": "/community/file/1121065701252736567/canvas", "community_publishers": ["938"], "publisher": {"id": "938", "profile_handle": "joey", "follower_count": 12182, "following_count": 1, "primary_user_id": "623995712489101040", "name": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5", "badges": []}, "support_contact": "joeybanks23@gmail.com", "creator": {"id": "623995712489101040", "handle": "Joey Banks", "img_url": "https://s3-alpha.figma.com/profile/a96c6fbe-fc35-48df-a1b7-41511b1695f5"}, "tags": ["apple", "calendar", "design system", "dynamic", "ios", "ios 16", "island", "keyboard", "lockscreen", "message", "safari", "ui"], "badges": [], "related_content": {"content": ["1222904741096273952", "1223649906596645010", "1220427486954383059"], "types": ["by_remixes"]}}, +{"id": "1207810684945289418", "name": "Doodles and Scribbles", "description": "

Doodles and Scribbles is a collection of fun, vector illustrations to add some personality to your projects. With over 100 options, there's a ton or possibilities. Keep your eyes peeled for some surprising variants as well!

", "version_id": "284316", "version": "7", "created_at": "2023-02-15T22:08:27.326Z", "duplicate_count": 1418, "like_count": 366, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3124183786/a5461ce6-c877-4619-8dcb-7e586b9ae992-cover.png", "redirect_canvas_url": "/community/file/1207810684945289418/canvas", "community_publishers": ["2223031"], "publisher": {"id": "2223031", "profile_handle": "Micah", "follower_count": 131, "following_count": 4, "primary_user_id": "755517615186202273", "name": "Micah Lanier", "img_url": "https://s3-alpha.figma.com/profile/9e2237b1-56c0-4e17-981b-391e96bed856", "badges": []}, "support_contact": "studio.micah@gmail.com", "creator": {"id": "755517615186202273", "handle": "Micah Lanier", "img_url": "https://s3-alpha.figma.com/profile/9e2237b1-56c0-4e17-981b-391e96bed856"}, "tags": ["arrows", "blob", "collection", "content reel", "doodles", "illustration", "landing page", "line", "mockup", "resource", "scribble", "vector"], "badges": [], "related_content": {"content": ["849353769466663442", "829741575478342595"], "types": ["by_creator"]}}, +{"id": "1207881392795122938", "name": "50+ Abstract geometric shapes", "description": "

Hello, I’m Yan, nice meeting you! 😊


You might see my β€œ100+ abstract shapes/elements” file before. I hope you find this file is inspirational and helpful.


β€’ All of shapes are made with Figma.

β€’ You can edit any parts to cater to your projects

β€’ You can learn how I made different shapes and effects by applying the color of lights, shadows, layers, and lines in Figma

β€’ You can leverage this resource to create your amazing stuff.


Hope you enjoy it as much as I do ! ❀️

", "version_id": "282631", "version": "3", "created_at": "2023-02-16T02:49:25.390Z", "duplicate_count": 393, "like_count": 173, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3112712990/0d0da084-c5be-4d56-9216-a4d28ccc6765-cover.png", "redirect_canvas_url": "/community/file/1207881392795122938/canvas", "community_publishers": ["3763610"], "publisher": {"id": "3763610", "profile_handle": "yanliu", "follower_count": 1028, "following_count": 10, "primary_user_id": "823369290152226987", "name": "Yan Liu", "img_url": "https://s3-alpha.figma.com/profile/09e3ec0f-db40-4123-9e3a-84c791f1763f", "badges": []}, "support_contact": "yanliudesignlife@gmail.com", "creator": {"id": "823369290152226987", "handle": "Yan Liu", "img_url": "https://s3-alpha.figma.com/profile/09e3ec0f-db40-4123-9e3a-84c791f1763f"}, "tags": ["abstract", "geometric", "geometric shaps", "graphic design", "shapes", "simple shape", "ui kit", "visual"], "badges": [], "related_content": {"content": ["1127302394641561751", "1112098897788975788", "1097964499926853798"], "types": ["by_creator"]}}, +{"id": "887892609124245416", "name": "Lo-fi Wireframe Kit FREE DEMO", "description": "

To purchase the FULL VERSION, click here: Lo-fi Wireframe Kit ->


Please enjoy this free demo of Lo-fi Wireframe Kit! The free demo includes 5+ unique UI elements, text and color styles, and a preview of everything you get with the full version. 


The full version includes:


Full version UI element list:


Why use Figma?

I've used several standalone wireframing tools before, but I've always come across limitations. It might not have an element I need, prototyping capabilities, or good collaboration. By combining this kit with Figma's native features, you get prototyping, sharing, commenting, and real time collaboration β€” no more jumping between tools.


Feedback and help

Want to leave feedback? Found a bug? Feel free to email or contact me on Twitter.

", "version_id": "302177", "version": "16", "created_at": "2020-09-16T02:48:14.264Z", "duplicate_count": 166346, "like_count": 3998, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3263890833/176bace8-3d2d-4e9e-a52d-9a8749de011e-cover.png", "redirect_canvas_url": "/community/file/887892609124245416/canvas", "community_publishers": ["705703"], "publisher": {"id": "705703", "profile_handle": "davewhitley", "follower_count": 125, "following_count": 7, "primary_user_id": "621743905473225657", "name": "Dave Whitley", "img_url": "https://s3-alpha.figma.com/profile/25a37905-8abc-45fe-9919-2ace9a53451e", "badges": []}, "support_contact": "drw158@gmail.com", "creator": {"id": "621743905473225657", "handle": "Dave Whitley", "img_url": "https://s3-alpha.figma.com/profile/25a37905-8abc-45fe-9919-2ace9a53451e"}, "tags": ["desktop", "flow", "kit", "lo fi", "mobile", "mockup", "prototype", "sketch", "ui kit", "ux kit", "wireframe"], "badges": [], "related_content": {"content": ["1138383211797105648", "990412699885509595", "1061734063201026854"], "types": ["by_remixes"]}}, +{"id": "886554014393250663", "name": "Free Icon Pack 1600+ icons", "description": "

>> Donate for corgi’s food <<

", "version_id": "246946", "version": "46", "created_at": "2020-09-12T10:09:08.405Z", "duplicate_count": 182372, "like_count": 3243, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/2823129023/d99085f3-21aa-435e-b105-9b1f52f5fe35-cover.png", "redirect_canvas_url": "/community/file/886554014393250663/canvas", "community_publishers": ["1891080"], "publisher": {"id": "1891080", "profile_handle": "Leonid", "follower_count": 156, "following_count": 3, "primary_user_id": "735205186788041733", "name": "Leonid Tsvetkov", "img_url": "https://s3-alpha.figma.com/profile/38cc0b35-876a-41a1-9c2e-fef716b4fe31", "badges": []}, "support_contact": "ntrtd@ya.ru", "creator": {"id": "735205186788041733", "handle": "Leonid Tsvetkov", "img_url": "https://s3-alpha.figma.com/profile/38cc0b35-876a-41a1-9c2e-fef716b4fe31"}, "tags": ["download", "free", "icon pack", "icons", "icon set", "interface", "set", "ui", "ux", "web"], "badges": [], "related_content": {"content": ["1074955480886541120", "871326473979106389", "929628466119715777"], "types": ["by_creator"]}}, +{"id": "855517047816771255", "name": "Figma Charts & Infographics UI kit", "description": "

Figma chart templates & Graphs UI kit. Contains most common data visualization patterns from simple bar charts, to complicated heatmaps and financial candlesticks.

Preview full version β€’ Get license β€’ Website


", "version_id": "220441", "version": "8", "created_at": "2020-06-18T18:39:18.935Z", "duplicate_count": 141194, "like_count": 3755, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/2577480512/3ad61b77-1c16-486f-848e-cc364dd0f68f-cover.png", "redirect_canvas_url": "/community/file/855517047816771255/canvas", "community_publishers": ["179081"], "publisher": {"id": "179081", "profile_handle": "templates", "follower_count": 3508, "following_count": 0, "primary_user_id": "464443699919434908", "name": "Setproduct", "img_url": "https://s3-alpha.figma.com/profile/7e076460-c319-461c-ab2a-7f675d0c154f", "badges": []}, "support_contact": null, "creator": {"id": "464443699919434908", "handle": "Setproduct", "img_url": "https://s3-alpha.figma.com/profile/7e076460-c319-461c-ab2a-7f675d0c154f"}, "tags": ["app", "chart", "dashboard", "design", "graph", "infographic", "template", "ui", "ui kit", "ux", "web"], "badges": [], "related_content": {"content": ["1179529792420893296", "1083755632649209596", "976950603997167821"], "types": ["by_remixes"]}}, +{"id": "1209707891179706483", "name": "❖ Untitled UI Icons – 4,600+ essential Figma icons", "description": "

#1 icon library on Gumroad with 450+ β˜…β˜…β˜…β˜…β˜… ratings


Untitled UI Icons are a clean, consistent, and neutral icon library crafted specifically for modern UI design. Made for Figma, in Figma.


πŸ‘‰ Preview Untitled UI Icons in Figmaο»Ώ

πŸ‘‰ Learn more at untitledui.com/icons


πŸŽ‰ We won Product Hunt #1 Product of the Week. Thanks for the support! πŸŽ‰



β€”β€”β€”β€”β€”


4,600+ essential Figma UI icons + 4x styles


We searched everywhere for the \"ultimate\" icon set for modern UI design to use across all our projects... We couldn't find an icon library for Figma we loved so we made one.



β€”β€”β€”β€”β€”


Not all icon libraries are equal


There are hundreds of icon libraries, but the majority of them are low-quality, designed for Illustrator, or simply too small β€” usually all three. We couldn't find an icon library for Figma we loved so we made one.


We’ve built this icon library to be professional quality, while neutral and flexible enough for any project.


β€”β€”β€”β€”β€”


What are you waiting for?


Untitled UI Icons is the last icon library you'll need and comes packed full with everything you need to design modern and beautiful UI and websites.


πŸ‘‰ Learn more at untitledui.com/icons

πŸ‘‰ Learn what's new on our changelog


β€”β€”β€”β€”β€”


Why do I need a high-quality icon library?


Nothing stands out more in modern UI design than inconsistent icons. There are hundreds of icon libraries floating around the internet today, but the majority of them are low quality, buggy, overly stylized, or simply too small β€” usually all of these.


You don’t realize the power of a high-quality icon library until you start using one. A good icon library saves you time and money usually spent on meticulously creating icons one-by-one, or even worse, constantly fixing existing icons so they're more consistent and optically balanced.


A good way to frame it is to ask the question, β€œwill this icon library save me a few hours of work in a project?” If the answer is YES, it’s probably worth the investment. Then it becomes an asset you can use in unlimited future projects.


We’ve thought of everything you need for modern UI design and have wrapped it into one neatly organized package. Better yet, it's made for Figma, in Figma, which means they're carefully designed to be 100% compatible with Figma's latest 2022 component properties and override features.


You can use this icon library in unlimited projects. In fact, we designed it this way β€” Untitled UI Icons are designed to be 100% Figma native, consistent, professional quality, and neutral enough for any UI or web design project.


β€”β€”β€”β€”β€”


How are Untitled UI Icons different?


We get it. There are hundreds of icon packs. Why did we create another one?


When we were building Untitled UI, we looked at dozens and dozens of open source and best-selling icon libraries. Some were good, but we found the vast majority lacked in quality, were overly stylized, or simply too small.


The main problem was that not a single one was set up to respect component overrides in Figma. For example, when you use an icon in a component and change the stroke color, as soon as you swap out that icon instance, you'll lose those overrides and have to add the stroke color again. The same goes for fill colors, stroke weights, opacity etc.


We realized we needed an β€œultimate” icon library that was professional quality, but also big enough and neutral enough for any project, and designed to work seamlessly with Figma. We couldn't find an icon library we loved so we made one. Untitled UI Icons are made for Figma, in Figma, and tick all the boxes we were looking for. Basically, we made it for ourselves.


β€”β€”β€”β€”β€”


Any questions?


Check out our Frequently Asked Questions page on our website.


Note: Untitled UI is not affiliated with Figma or Figma's team, nor is it endorsed by Figma.

", "version_id": "298984", "version": "4", "created_at": "2023-02-21T03:47:16.541Z", "duplicate_count": 689, "like_count": 120, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3236764040/975326f8-a00b-4888-9cd1-aab4c3bda9c1-cover.png", "redirect_canvas_url": "/community/file/1209707891179706483/canvas", "community_publishers": ["1339065"], "publisher": {"id": "1339065", "profile_handle": "designer", "follower_count": 2924, "following_count": 1, "primary_user_id": "693707883872464537", "name": "Jordan Hughes", "img_url": "https://s3-alpha.figma.com/profile/910a809b-359c-4c9f-9a82-febd85377bbe", "badges": []}, "support_contact": "hi@jordanhughes.co", "creator": {"id": "693707883872464537", "handle": "Jordan Hughes", "img_url": "https://s3-alpha.figma.com/profile/910a809b-359c-4c9f-9a82-febd85377bbe"}, "tags": ["assets", "design system", "free icons", "icon library", "icons", "icon set", "line icons", "streamline", "ui kit", "untitled ui"], "badges": [], "related_content": {"content": ["1020079203222518115", "1209701993929426029", "1114001199549197320"], "types": ["by_creator"]}}, +{"id": "903303571898472063", "name": "Figma Variants Playground", "description": "

Variants are a new way to create, organize, and use components. If you’ve ever created multiple variations of a component, you’ll want to give variants a try. This playground will walk you through everything you need to know to start working with them!

", "version_id": "15017", "version": "12", "created_at": "2020-10-28T15:25:54.096Z", "duplicate_count": 108127, "like_count": 4736, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/537594407/53c4f4dd-f1bf-4392-91df-1df6369a89ed-cover.png", "redirect_canvas_url": "/community/file/903303571898472063/canvas", "community_publishers": ["2480257"], "publisher": {"id": "2480257", "profile_handle": "figma", "follower_count": 25680, "following_count": 54, "primary_user_id": "768244674400796816", "name": "Figma", "img_url": "https://s3-alpha.figma.com/profile/c82ecc52-1c47-405d-980b-904ff54c6577", "badges": []}, "support_contact": null, "creator": {"id": "768244674400796816", "handle": "Figma", "img_url": "https://s3-alpha.figma.com/profile/c82ecc52-1c47-405d-980b-904ff54c6577"}, "tags": ["components", "playground", "variants"], "badges": [], "related_content": {"content": ["1065233457055446010", "966514329878157914", "1220450893350820612"], "types": ["by_remixes"]}}, +{"id": "931906394678748246", "name": "Basil Icons", "description": "

Really big set of icons, perfectly fitting to any design. Black minimalistic shapes are presented in two styles: outline and solid. 500 pieces were gathered in 9 the most used categories to help you in search of what you need.


Explore All Craftwork Products β†—

", "version_id": "117781", "version": "4", "created_at": "2021-01-15T13:43:18.472Z", "duplicate_count": 122313, "like_count": 3988, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/1752518746/a39cb1b6-ce01-4e91-848e-4b0a31ad5f9f-cover.png", "redirect_canvas_url": "/community/file/931906394678748246/canvas", "community_publishers": ["1630"], "publisher": {"id": "1630", "profile_handle": "craftwork", "follower_count": 2004, "following_count": 0, "primary_user_id": null, "name": "Craftwork", "img_url": "https://s3-alpha.figma.com/profile/f3675c72-95ed-446b-bb87-b72c74585252", "badges": []}, "support_contact": null, "creator": {"id": "411812113701066823", "handle": "Denis Shepovalov", "img_url": "https://s3-alpha.figma.com/profile/903bec58-848b-4b96-b38e-384462a551ec"}, "tags": ["design", "glyph", "icons", "minimal", "outline", "pictogram", "set", "shapes", "soild", "vector", "web"], "badges": [], "related_content": {"content": ["1078025791565516324", "1114477110260013470", "1117009397494901135"], "types": ["by_remixes"]}}, +{"id": "836596421863073964", "name": "Mobile UI kit", "description": "Speed up your design workflow and create a beautiful app with Figma’s fully customizable mobile UI kit.", "version_id": "6657", "version": "1", "created_at": "2020-04-27T13:35:30.181Z", "duplicate_count": 163738, "like_count": 2945, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/309380907/da91b3a4-5fbb-4f59-a6ac-1edc7d049c3b-cover", "redirect_canvas_url": "/community/file/836596421863073964/canvas", "community_publishers": ["830496"], "publisher": {"id": "830496", "profile_handle": "tg", "follower_count": 537, "following_count": 27, "primary_user_id": "639491196713802396", "name": "Toni Gemayel", "img_url": "https://s3-alpha.figma.com/profile/3ce255d0-67f1-4da6-a3b7-3631b3cd8e6c", "badges": []}, "support_contact": null, "creator": {"id": "639491196713802396", "handle": "Toni Gemayel", "img_url": "https://s3-alpha.figma.com/profile/3ce255d0-67f1-4da6-a3b7-3631b3cd8e6c"}, "tags": ["kit", "mobile", "ui"], "badges": [], "related_content": {"content": ["1222027401509754471", "1222330127373036647", "1087534826859049236"], "types": ["by_remixes"]}}, +{"id": "775789888359782610", "name": "Device Mockups", "description": "

This file is depreciated and is no longer being actively updated. Please checkout the NEW UPDATED version in Figma Community that includes 43+ new and updated devices, including that latest devices from Apple and Google.


Get the New file ->


---


Nominated as a Community Awards Finalist for the \"Favorite graphic resources for Figma\" category .


---


A complete collection of pixel-perfect device mockups available in Figma. All devices are fully vectorize and infinitely scalable with easily swappable background images.


Includes the following devices:


Apple:


Google:


Samsung:


OnePlus:


Sony:

", "version_id": "284781", "version": "35", "created_at": "2019-11-11T18:32:02.863Z", "duplicate_count": 114607, "like_count": 3996, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3127246528/14fe2374-67aa-4276-90f3-4095691ff996-cover.png", "redirect_canvas_url": "/community/file/775789888359782610/canvas", "community_publishers": ["32663"], "publisher": {"id": "32663", "profile_handle": "koy", "follower_count": 206, "following_count": 14, "primary_user_id": "959421576083432580", "name": "Koy Carraway", "img_url": "https://s3-alpha.figma.com/profile/f875d840-22db-414d-b54f-9a44c0eb1ab7", "badges": []}, "support_contact": "kcarraway@fleetio.com", "creator": {"id": "363036213616062148", "handle": "Koy Carraway", "img_url": "https://s3-alpha.figma.com/profile/3ad2d4af-a751-4dc3-a469-d354b41bfff7"}, "tags": ["apple", "galaxy", "google", "ipad", "iphone", "iphone 12", "macbook", "mockup", "note20", "oneplus", "pixel", "samsung"], "badges": [], "related_content": {"content": ["1169548836051552164", "1203272401458200840", "1131887180480890075"], "types": ["by_remixes"]}}, +{"id": "1215248354808482218", "name": "central icon system", "description": "

Welcome to the central icon system



✦ What?

ο»Ώ

A collection of icons that will make your product design easier and faster. With over 581 symbols in 30 variations each, you have more than 17,400 icons at your disposal.


✦ Why?


Our icons are simple and versatile. You can adjust them to fit your brand and style: stroke width, border radius, line or filled version. All variations can be accessed directly through the Figma property panel. Whatever you choose, our icons will look crisp and clean on any device and screen size.


✦ How?


Each icon variation is hand crafted in Figma for Figma to make sure every change of a property corresponds to the icon system. This ensures consistency and quality across the entire set. Our icons are designed on a 24x24 px grid and is based on an enhanced grid system to make sure every icon is consistent to the core.


The central icon system is not just another icon set. It’s a tool that will help you create better products faster.


Made by iconists


www.iconists.co


twitter @iconists


instagram @theiconists


Andreas Storm @avstorm


Martin David @srioz

", "version_id": "302552", "version": "13", "created_at": "2023-03-08T10:43:06.007Z", "duplicate_count": 1145, "like_count": 195, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3267093841/42ee2790-192f-4d37-a5fa-e27ad6a815fe-cover.png", "redirect_canvas_url": "/community/file/1215248354808482218/canvas", "community_publishers": ["28905", "198724", "1212071983410015861"], "publisher": {"id": "1212071983410015861", "profile_handle": "iconists", "follower_count": 37, "following_count": 2, "primary_user_id": "1212071983206592537", "name": "iconists", "img_url": "https://s3-alpha.figma.com/profile/f063ce70-7ad4-46ec-88d2-fc1dc3ce9022", "badges": []}, "support_contact": "martinoliverdavid@gmail.com", "creator": {"id": "1212071983206592537", "handle": "iconists", "img_url": "https://s3-alpha.figma.com/profile/f063ce70-7ad4-46ec-88d2-fc1dc3ce9022"}, "tags": ["components", "design system", "glyph", "iconography", "icons", "icon set", "icon system", "pictogram", "properties", "symbols", "variants"], "badges": [], "related_content": {"content": ["1071404388941871350", "1085155066176261708", "1218589809425735347"], "types": ["by_tags"]}}, +{"id": "1209371598104774338", "name": "Device Mockups Ultimate Collection", "description": "

πŸŽ‰ Enjoy 25% OFF for a Limited Time πŸŽ‰


---


Introducing the Device Mockups Ultimate Collection - the ultimate resource for designers looking for high-quality device mockups. With over 43+ photo-realistic devices, including phones, tablets, desktops, and monitors, all built with scalable vectors and exact manufacturer specs, your designs will look stunningly accurate. Plus, with a growing library, lifetime access to new devices, fully editable vectors, smart image fills, easy exports, and commercial usage allowed, this Figma resource is a must-have for any designer.


Device List

Mobile Devices (25)


Tablet Devices (10)


Laptops, Desktops, and Monitors (8)


Links & Helpful Resources:

πŸ—ΊοΈ Roadmap

πŸ“± Device Requests

πŸ›Ÿ Support & Feedback

πŸ“‹ Changelog

", "version_id": "292224", "version": "19", "created_at": "2023-02-20T05:30:58.022Z", "duplicate_count": 693, "like_count": 184, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3185265794/0ec68060-c158-4a13-80c3-dc6336c28260-cover.png", "redirect_canvas_url": "/community/file/1209371598104774338/canvas", "community_publishers": ["32663"], "publisher": {"id": "32663", "profile_handle": "koy", "follower_count": 206, "following_count": 14, "primary_user_id": "959421576083432580", "name": "Koy Carraway", "img_url": "https://s3-alpha.figma.com/profile/f875d840-22db-414d-b54f-9a44c0eb1ab7", "badges": []}, "support_contact": "koycarraway@me.com", "creator": {"id": "959421576083432580", "handle": "Koy Carraway", "img_url": "https://s3-alpha.figma.com/profile/f875d840-22db-414d-b54f-9a44c0eb1ab7"}, "tags": ["app design", "apple", "device", "device frames", "device mockup", "marketing", "mockup", "presentation", "product design", "realistic", "showcase", "vector"], "badges": [], "related_content": {"content": ["775789888359782610", "812721945562507554", "775789656970237137"], "types": ["by_creator"]}}, +{"id": "1216002297485668740", "name": "Taxio - Taxi Booking App UI Kit", "description": "

Hello GUIs,

I just released a new product.


Taxio is a Premium & High Quality UI Kit with All Full Features of Taxi Booking App. Taxio came with unique style and niche, you can easily edit and customize all elements with design components which can speed up design process for your projects. Everything is integrated with the design system, so you only need to change the color, logo, text, and so on in the design system, then the entire design screen will automatically change.


Taxio support for iOS/Android (design system included) and 180 screens which is 100% editable & customizable. Designs are available in Figma. In addition, the design is also equipped with a version of Light & Dark Theme.


Taxio is designed in a trendy and modern way, with all layers well organized. Taxio is equipped with a design system with hundred of components. The Design System has been equipped with typography, iconography, color styles, components, variants, elements, buttons, input forms, alerts, avatars, checkboxes, chips, grids, toggles, and many others.


In addition, the application design in figma has been designed with fully auto layout, so it is very adaptive if you want to edit, delete, or add some parts. If you are not familiar with auto layout, you can turn it off by right-clicking the layer, and selecting remove auto layout.


Taxio UI Kit is suitable for:


Main App Features:


What's Inside:


Product Highlights:


Note: All images/photos in the preview are included 😊

Assets: Unsplash, unDraw, Freepik


---------------------------------------------------------------------------------------------------


Get more awesome products! πŸ‘‡πŸ‘‡πŸ‘‡

MunirSr


Want to donate?

Buy Me a Coffee: πŸ‘‡

Buy Me a Coffee


---------------------------------------------------------------------------------------------------


πŸ›ˆ Additional Information

This product was created and published by MunirSr. If you see someone else selling this product on the website or elsewhere, in any way, it is illegal and violates copyright. Please report it to me. Thank you 😊


---------------------------------------------------------------------------------------------------


Make your project more awesome!

Connect with me: sobakhul.munir527@gmail.com


More you can find me at:

Linkedin | Instagram | Dribbble | Behance | Linktr.ee

", "version_id": "287020", "version": "1", "created_at": "2023-03-10T12:38:59.948Z", "duplicate_count": 571, "like_count": 60, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3146072207/beaec5ea-5032-45dd-a6c8-f554b48b9ea5-cover.png", "redirect_canvas_url": "/community/file/1216002297485668740/canvas", "community_publishers": ["2389308"], "publisher": {"id": "2389308", "profile_handle": "MunirSr", "follower_count": 3639, "following_count": 1, "primary_user_id": "763822967356589666", "name": "Sobakhul Munir Siroj", "img_url": "https://s3-alpha.figma.com/profile/be510c7a-6bfc-4ae7-8098-3887c3553599", "badges": []}, "support_contact": "sobakhul.munir527@gmail.com", "creator": {"id": "763822967356589666", "handle": "Sobakhul Munir Siroj", "img_url": "https://s3-alpha.figma.com/profile/be510c7a-6bfc-4ae7-8098-3887c3553599"}, "tags": ["cab booking app", "car booking app", "design system", "driver booking app", "free", "mobile", "online transportation app", "portfolio", "rideshare app", "taxi app", "taxi booking app", "ui kit"], "badges": [], "related_content": {"content": ["1223314222511062706", "1218823989467855715", "1218605363755606732"], "types": ["by_creator"]}}, +{"id": "1209167957500972561", "name": "Cosmic Icons - 550 icons with tags", "description": "

πŸ“£ Updates!



-----------------------------


Set of bold and geometric icons ready to make your project neat and clean. Every icon has plenty of tags to help you search the list quickly and find what you need without a hustle. Sounds good to you? Purchase a license for yourself and start using them right away.


What's in it for you? πŸ“¦



Try before you buy! πŸ›’


You can duplicate a free sample (first page of the file) to experiment with a couple of icons and find out if they work for you and your project. After purchase, you will get access to the entire library.


Meet the creator πŸ‘¨β€πŸš€


Hey! I'm Daniel, and I have been speaking to you all the time. I hope you will find my icons helpful! Psst... Remember to tell your figmates about it!


Want to chat casually? Find me on LinkedIn

Want to send an official e-mail? Send at d.wodziczka@gmail.com

Want to request an icon? Check our development board

", "version_id": "296526", "version": "12", "created_at": "2023-02-19T16:01:46.319Z", "duplicate_count": 364, "like_count": 114, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3220109699/6b4d7be0-b8ae-47b5-8227-af098a3ffa35-cover.png", "redirect_canvas_url": "/community/file/1209167957500972561/canvas", "community_publishers": ["852955035141615265"], "publisher": {"id": "852955035141615265", "profile_handle": "wodziczka", "follower_count": 41, "following_count": 16, "primary_user_id": "852955035099402531", "name": "Daniel Wodziczka", "img_url": "https://s3-alpha.figma.com/profile/24e91ffe-4757-4413-a34c-c66dbc5d3c53", "badges": []}, "support_contact": "d.wodziczka@gmail.com", "creator": {"id": "852955035099402531", "handle": "Daniel Wodziczka", "img_url": "https://s3-alpha.figma.com/profile/24e91ffe-4757-4413-a34c-c66dbc5d3c53"}, "tags": ["iconate", "icon bundle", "icon list", "iconly", "iconography", "icon pack", "icons", "icon set", "kit", "library"], "badges": [], "related_content": {"content": ["942053544758339202", "1184089105981266541", "920101630987096609"], "types": ["by_creator"]}}, +{"id": "805195278314519508", "name": "❖ Base Gallery", "description": "Uber's Base design system was created to promote a centralized library of reusable UI components for Designers and Engineers.", "version_id": "287331", "version": "22", "created_at": "2020-01-31T21:58:34.157Z", "duplicate_count": 70179, "like_count": 3794, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3148211725/5176c453-2166-421a-89ba-175383b78cc4-cover.png", "redirect_canvas_url": "/community/file/805195278314519508/canvas", "community_publishers": ["11", "154994"], "publisher": {"id": "11", "profile_handle": "uber", "follower_count": 6171, "following_count": 0, "primary_user_id": null, "name": "Uber", "img_url": "https://s3-alpha.figma.com/profile/945806be-85b8-425a-9054-3fee73a8f315", "badges": []}, "support_contact": "jjura@uber.com", "creator": {"id": "796482260607165102", "handle": "Anton Chang", "img_url": "https://s3-alpha.figma.com/profile/9975f549-57f3-47d1-b4b2-24ccb2e204bb"}, "tags": ["design system", "uber"], "badges": [], "related_content": {"content": ["1117713433579648873", "1080118111304550979", "1002371580953957519"], "types": ["by_remixes"]}}, +{"id": "883778082594341562", "name": "Free 75+ illustrations - Surface Pack", "description": "

Hey there,

If you haven’t seen our other stuff, well then go check it out here


About

Over 75 free illustrations for your design/product.


As Usual

No attribution is needed.

All vectors and all yours.

Free for commercial use.


Who are we?

We’re a team of designers, artists and innovators with a business eye who help you create great products.


If you want more of the good stuff or need custom illustrations or end to end design solutions for your product reach out to us hey@thetreetop.org or go to our website thetreetop.org.

", "version_id": "47284", "version": "15", "created_at": "2020-09-04T18:18:34.692Z", "duplicate_count": 88493, "like_count": 3736, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/999638089/3e3e3e7f-8982-4cd7-a0a0-64a991d793b0-cover.png", "redirect_canvas_url": "/community/file/883778082594341562/canvas", "community_publishers": ["883306018996947820"], "publisher": {"id": "883306018996947820", "profile_handle": "treetop", "follower_count": 589, "following_count": 0, "primary_user_id": "883306018968769284", "name": "Treetop", "img_url": "https://s3-alpha.figma.com/profile/3b573f22-fb20-4e54-ad19-3c3efd2c4352", "badges": []}, "support_contact": null, "creator": {"id": "883306018968769284", "handle": "Treetop", "img_url": "https://s3-alpha.figma.com/profile/3b573f22-fb20-4e54-ad19-3c3efd2c4352"}, "tags": ["art", "color", "design system", "drawing", "graphic", "icons", "illustration", "mobile design", "ui kit", "vector", "web design", "wireframe"], "badges": [], "related_content": {"content": ["1223364746123203340", "1184671927990073585", "1075690399778279660"], "types": ["by_remixes"]}}, +{"id": "894552273937682724", "name": "Landify - Landing Page UI Kit v2", "description": "

Landify V2 (Free Version)

Create your landing page design faster with the Landify UI kit. The kit contains 170+ blocks and 500+ components. It's fully customisable, with well-organized layers, text, color, and effect styles. It is crafted with a vision to support any web project, creating a block system that helps with all the use cases.


✨ Learn more at landify.design βœ¨


πŸ’‘ Idea:

Recently, I received quite a few website design projects from multiple domains with a shorter deadlines. It was challenging to work on it with a short deadline and provide numerous variations to the founders. Then the spark came; why not create a landing page UI kit? So, here it is.


❓ What's Next?

Now, Landify v2 is crafted for all three breakpoints – desktop, tablet, and mobile. The upcoming release will also have a few more blocks and a few new categories.


------------------------------------------


Please share your thoughts if you have suggestions, feedback, or ideas to improve the Landify UI Kit.


πŸ’‘ Give Feedback | Roadmap


------------------------------------------

V2.1 (01 Jul 2022):


V2.0 (22 Jan 2022):


V1.1 (25 Apr 2021):


V1.0 (4 Oct 2020):

", "version_id": "207673", "version": "5", "created_at": "2020-10-04T11:51:22.085Z", "duplicate_count": 85650, "like_count": 3316, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/2446788237/8d2223c5-96c4-4498-ba57-c2d29f3e2371-cover.png", "redirect_canvas_url": "/community/file/894552273937682724/canvas", "community_publishers": ["1613479"], "publisher": {"id": "1613479", "profile_handle": "aravinddesign", "follower_count": 158, "following_count": 1, "primary_user_id": "715188871965176077", "name": "Aravind Little Jack", "img_url": "https://s3-alpha.figma.com/profile/82467afc-5898-484e-a1b0-82d67c0b92c3", "badges": []}, "support_contact": null, "creator": {"id": "715188871965176077", "handle": "Aravind Little Jack", "img_url": "https://s3-alpha.figma.com/profile/82467afc-5898-484e-a1b0-82d67c0b92c3"}, "tags": ["components", "design system", "kit", "landify", "landing page", "landing page uikit", "styles", "template", "ui kit", "web", "website", "website ui kit"], "badges": [], "related_content": {"content": ["1101804623897735018", "1182490254812994736", "1137061127714776255"], "types": ["by_remixes"]}}, +{"id": "880534892514982400", "name": "Material Design UI kit - Components library", "description": "

Material Design System for Figma is based on 100% guidelines compliance and contains an impressive amount of ready-to-use components to accelerate the application development, save time and money. Includes 1000+ dark & light UI components / 120 templates / 1000+ material icons.

πŸ‘‰ Discover more Figma templates

", "version_id": "10844", "version": "2", "created_at": "2020-08-26T19:31:17.921Z", "duplicate_count": 118203, "like_count": 2424, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/436219562/e6f0f5b1-2a8b-4f34-ae4e-fdb6228e031a-cover", "redirect_canvas_url": "/community/file/880534892514982400/canvas", "community_publishers": ["179081"], "publisher": {"id": "179081", "profile_handle": "templates", "follower_count": 3508, "following_count": 0, "primary_user_id": "464443699919434908", "name": "Setproduct", "img_url": "https://s3-alpha.figma.com/profile/7e076460-c319-461c-ab2a-7f675d0c154f", "badges": []}, "support_contact": null, "creator": {"id": "464443699919434908", "handle": "Setproduct", "img_url": "https://s3-alpha.figma.com/profile/7e076460-c319-461c-ab2a-7f675d0c154f"}, "tags": ["android", "components", "dashboard", "design", "design system", "desktop", "kit", "material", "system", "template", "ui", "ui kit"], "badges": [], "related_content": {"content": ["975107427506382587", "1215359335483983427", "1135938473120192664"], "types": ["by_remixes"]}}, +{"id": "1216056004395666907", "name": "Bobo - Chatbot Messenger App UI Kit", "description": "

Hello GUIs,

I just released a new product.


Bobo is a Premium & High Quality UI Kit with All Full Features of Chatbot App. Bobo came with unique style and niche, you can easily edit and customize all elements with design components which can speed up design process for your projects. Everything is integrated with the design system, so you only need to change the color, logo, text, and so on in the design system, then the entire design screen will automatically change.


Bobo support for iOS/Android (design system included) and 86 screens which is 100% editable & customizable. Designs are available in Figma. In addition, the design is also equipped with a version of Light & Dark Theme.


Bobo is designed in a trendy and modern way, with all layers well organized. Bobo is equipped with a design system with hundred of components. The Design System has been equipped with typography, iconography, color styles, components, variants, elements, buttons, input forms, alerts, avatars, checkboxes, chips, grids, toggles, and many others.


In addition, the application design in figma has been designed with fully auto layout, so it is very adaptive if you want to edit, delete, or add some parts. If you are not familiar with auto layout, you can turn it off by right-clicking the layer, and selecting remove auto layout.


Bobo UI Kit is suitable for:


What's Inside:


Product Highlights:


Note: All images/photos in the preview are included 😊


---------------------------------------------------------------------------------------------------


Get more awesome products! πŸ‘‡πŸ‘‡πŸ‘‡

MunirSr


Want to donate?

Buy Me a Coffee: πŸ‘‡

Buy Me a Coffee


---------------------------------------------------------------------------------------------------


πŸ›ˆ Additional Information

This product was created and published by MunirSr. If you see someone else selling this product on the website or elsewhere, in any way, it is illegal and violates copyright. Please report it to me. Thank you 😊


---------------------------------------------------------------------------------------------------


Make your project more awesome!

Connect with me: sobakhul.munir527@gmail.com


More you can find me at:

Linkedin | Instagram | Dribbble | Behance | Linktr.ee

", "version_id": "287227", "version": "1", "created_at": "2023-03-10T16:12:24.673Z", "duplicate_count": 750, "like_count": 65, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3147264209/64e656be-498c-463e-bb5b-3c0fd8986540-cover.png", "redirect_canvas_url": "/community/file/1216056004395666907/canvas", "community_publishers": ["2389308"], "publisher": {"id": "2389308", "profile_handle": "MunirSr", "follower_count": 3639, "following_count": 1, "primary_user_id": "763822967356589666", "name": "Sobakhul Munir Siroj", "img_url": "https://s3-alpha.figma.com/profile/be510c7a-6bfc-4ae7-8098-3887c3553599", "badges": []}, "support_contact": "sobakhul.munir527@gmail.com", "creator": {"id": "763822967356589666", "handle": "Sobakhul Munir Siroj", "img_url": "https://s3-alpha.figma.com/profile/be510c7a-6bfc-4ae7-8098-3887c3553599"}, "tags": ["artificial intelligence", "chat assistant app", "chatbot ai app", "chat bot app", "chatbot app", "chatting app", "design system", "free", "messenger app", "mobile", "portfolio", "ui kit"], "badges": [], "related_content": {"content": ["1223314222511062706", "1218823989467855715", "1218605363755606732"], "types": ["by_creator"]}}, +{"id": "931512007012650048", "name": "Unicons - Shared Library Ready", "description": "

Reorganized and Shared Library Ready version of Unicons from Iconscout -https://www.figma.com/community/file/902916014302207596


-


You can just Publish and start using it on your designs.

", "version_id": "18622", "version": "2", "created_at": "2021-01-14T11:36:09.126Z", "duplicate_count": 101700, "like_count": 2644, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/626214190/6e220bcf-c8cd-4dae-934c-e4f271d6f331-cover.png", "redirect_canvas_url": "/community/file/931512007012650048/canvas", "community_publishers": ["211587"], "publisher": {"id": "211587", "profile_handle": "FlavioSantos", "follower_count": 53, "following_count": 7, "primary_user_id": "484725639618061826", "name": "FlΓ‘vio Santos", "img_url": "https://s3-alpha.figma.com/profile/273a5784-ac24-46d1-b61f-37d174ba3141", "badges": []}, "support_contact": null, "creator": {"id": "484725639618061826", "handle": "FlΓ‘vio Santos", "img_url": "https://s3-alpha.figma.com/profile/273a5784-ac24-46d1-b61f-37d174ba3141"}, "tags": ["collection", "icon design", "icon pack", "icons", "library", "outline", "shared library", "unicons"], "badges": [], "related_content": {"content": ["1054240665233371805", "1087565899543119131", "1030525705341775283"], "types": ["by_remixes"]}}, +{"id": "1014241558898418245", "name": "Material Design Icons", "description": "

This is the official Material Design icon stickersheet managed by Google Fonts team!


Material Design Icons are available in five styles. The icons are crafted based on the core design principles and metrics of Material Design guidelines. Our icons are free for everyone to use. It’s available under Apache license version 2.0. In this file, over 2000 Material Design icons are built as components in 5 variants: Filled, Outlined, Sharp, Rounded, Two-tone.


You can access our icons directly on fonts.google.com/icons

", "version_id": "266363", "version": "7", "created_at": "2021-08-30T18:33:51.342Z", "duplicate_count": 79351, "like_count": 3293, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/2981282860/291e6b94-5df7-45ea-95a8-7e8b87a68279-cover.png", "redirect_canvas_url": "/community/file/1014241558898418245/canvas", "community_publishers": ["976570569365632935"], "publisher": {"id": "976570569365632935", "profile_handle": "googlefonts", "follower_count": 3227, "following_count": 0, "primary_user_id": null, "name": "Google Fonts", "img_url": "https://s3-alpha.figma.com/profile/2a630f4b-138d-4be7-bf2b-40d3647c209e", "badges": ["figma_partner"]}, "support_contact": "leesehee@google.com", "creator": {"id": "732629410291744805", "handle": "Victor Buholzer", "img_url": "https://www.gravatar.com/avatar/74a167a95c1b56f0a32cbe911176b8ac?size=240&default=https%3A%2F%2Fs3-alpha.figma.com%2Fstatic%2Fuser_v_v2.png"}, "tags": ["google", "google fonts", "icons", "material design", "system icons", "ui icons", "variants"], "badges": [], "related_content": {"content": ["1113950611695632368"], "types": ["by_creator"]}}, +{"id": "830510773896272856", "name": "User Flow Kit", "description": "Design user flows on Figma with User Flow Kit, a set of components with a variety of arrow styles and cards with basic desktop layouts.\n\nStrong kudos to @danial for the responsive arrow designs. I wouldn't have been able to do this without his contribution!\n\nContact me on Twitter at @jvrlvs if you have any suggestions πŸ‘‹", "version_id": "6207", "version": "4", "created_at": "2020-04-10T18:33:18.641Z", "duplicate_count": 75917, "like_count": 2854, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/299404204/cc64dc1e-fe40-43d7-8a0e-05de05227062-cover", "redirect_canvas_url": "/community/file/830510773896272856/canvas", "community_publishers": ["871451"], "publisher": {"id": "871451", "profile_handle": "javi", "follower_count": 411, "following_count": 11, "primary_user_id": "644847218054907523", "name": "Javier Alaves", "img_url": "https://s3-alpha.figma.com/profile/8f864941-7ec9-4488-8812-41dc20d93b6f", "badges": []}, "support_contact": null, "creator": {"id": "644847218054907523", "handle": "Javier Alaves", "img_url": "https://s3-alpha.figma.com/profile/8f864941-7ec9-4488-8812-41dc20d93b6f"}, "tags": ["arrows", "flow", "kit", "prototyping", "ui design", "user", "ux design"], "badges": [], "related_content": {"content": ["1108075486606639409", "1147357255414887080", "976759961830649991"], "types": ["by_remixes"]}}, +{"id": "832911648132248625", "name": "Spotify Ways of Working", "description": "We're excited to open up the music box and describe how we've shaped Figma to suit our needs and culture at Spotify. We hope this information will be useful for other design teams seeking more organisation for their work in Figma.", "version_id": "6489", "version": "3", "created_at": "2020-04-17T09:33:31.662Z", "duplicate_count": 44809, "like_count": 4345, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/303936394/d869e53c-b17a-40dc-9569-f0c4f2adf010-cover", "redirect_canvas_url": "/community/file/832911648132248625/canvas", "community_publishers": ["1653"], "publisher": {"id": "1653", "profile_handle": "spotify", "follower_count": 8126, "following_count": 0, "primary_user_id": null, "name": "Spotify", "img_url": "https://s3-alpha.figma.com/profile/6cb976b4-d5ce-43b9-8aa8-64bddd19e13d", "badges": []}, "support_contact": null, "creator": {"id": "737693600188199127", "handle": "Cliona O'Sullivan", "img_url": "https://s3-alpha.figma.com/profile/b06d98f0-39c3-403d-99d6-b716ee2bc025"}, "tags": [], "badges": [], "related_content": {"content": ["1197482290095874483", "1028912647506326393"], "types": ["by_remixes"]}}, +{"id": "852445385275060830", "name": "🍏 iOS design system β€” Free UI kit", "description": "

3300+ variants of 100+ components to craft perfectly shaped iOS apps. Powered by Figma auto-layout 3.0, Apple’s native styleguides, and free Apple’s SF Pro font with the original latest SF Symbols. Customizable mobile design system with 320 ready-to-use app layouts.

πŸ‘‰ Discover more Figma templates

", "version_id": "99242", "version": "2", "created_at": "2020-06-10T07:13:37.518Z", "duplicate_count": 90087, "like_count": 1957, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/1591731872/392ec641-02ad-4998-887f-aec1c47ad2c8-cover.png", "redirect_canvas_url": "/community/file/852445385275060830/canvas", "community_publishers": ["179081"], "publisher": {"id": "179081", "profile_handle": "templates", "follower_count": 3508, "following_count": 0, "primary_user_id": "464443699919434908", "name": "Setproduct", "img_url": "https://s3-alpha.figma.com/profile/7e076460-c319-461c-ab2a-7f675d0c154f", "badges": []}, "support_contact": null, "creator": {"id": "464443699919434908", "handle": "Setproduct", "img_url": "https://s3-alpha.figma.com/profile/7e076460-c319-461c-ab2a-7f675d0c154f"}, "tags": ["app", "design", "free", "ios", "iphone", "layout", "mobile", "system", "template", "ui", "ui kit", "ux"], "badges": [], "related_content": {"content": ["1163704724906470942", "1140342776323371589", "1121331285828146970"], "types": ["by_remixes"]}}, +{"id": "1204216495486020583", "name": "Home Designer - Imperial System", "description": "

IMPORTANT: THIS IS THE IMPERIAL SYSTEM VERSION. PLEASE DOWNLOAD THE OTHER VERSION FOR MILLIMETERS AND METERS. THIS FILE USES INCHES AND FEET.


Plan your perfect space right in Figma. Hundreds of true-to-size objects for designing a spectacular space.

", "version_id": "288246", "version": "24", "created_at": "2023-02-06T00:06:25.782Z", "duplicate_count": 326, "like_count": 117, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3152341188/e80e5f14-c475-4591-8831-54304544c30b-cover.png", "redirect_canvas_url": "/community/file/1204216495486020583/canvas", "community_publishers": ["1040871"], "publisher": {"id": "1040871", "profile_handle": "thejmoore", "follower_count": 641, "following_count": 0, "primary_user_id": "668116906486561661", "name": "Jon Moore", "img_url": "https://s3-alpha.figma.com/profile/7877caba-4de2-4f5f-867e-10d2b934c646", "badges": []}, "support_contact": "jon.moore@innovatemap.com", "creator": {"id": "668116906486561661", "handle": "Jon Moore", "img_url": "https://s3-alpha.figma.com/profile/7877caba-4de2-4f5f-867e-10d2b934c646"}, "tags": ["apartment", "architecture", "blueprint", "floor", "floor plan", "floorplanning", "furniture", "home", "house", "interior", "interior design"], "badges": [], "related_content": {"content": ["1204978049714158492", "1214601013410613826", "1200222759181998104"], "types": ["by_creator"]}}, +{"id": "1202590530137253284", "name": "The Ultimate Figma Project Setup and UXR Kit", "description": "

Over the years of using Figma, I often started a project with a blank file. I organized the space all over again and created various utilities depending on the project's requirements. I created personas and built another version of the Customer Journey Map, Kanban board, or any extras like visual comments. Today I’m no longer starting from scratch.


Now I have the THE ULTIMATE FIGMA SET PROJECT SETUP & UXR Kit, which includes everything I need to organize a Figma file for a new project quickly. And I’m not just talking about design. Whatβ€˜s inside? Take a look!


See movie on YouTube


Project Setup

This part includes: 

Skipping such obvious elements as the Cover template, you’ll find everything here to get your work file ready in minutes and make it look impressive. Take care of header structure and excellent documentation of your work thanks to comments and web carts, or organize new local components in an attractive form. With this section, you will give the impression of an organized designer who can focus on design and doesn’t have to worry about presenting your work.


Task Management

This part includes:

I can’t count all the task management apps I’ve used. Todoist, Things, a Asana. Nothing worked for me in the long term. The rush and change of habits often made a good system no longer work. That’s how I came up with the idea of making tasks as close to a design as possible. And I created a Kanban board component with task templates: design, presentation, research, etc. Moving them between columns was easy and besides, and I could quickly see how many things I had completed. This is very encouraging! The links to tasks, pages, and presentations were also helpful because I could quickly get to past materials.


Project Documentation

This part includes:

The amount of information related to projects grows every day. You don’t know when which one will be useful to you, which can inspire you and increase your creative thinking. Usually, when you work in Figma - jumping between Google Docs, Miro, Jira, Slides, and files on your laptop is just exhausting. Why not have the most important things next to the design? You can have basic design information or expanded ones like Lean Canvas, Competitive analysis, or Story mapping. A quick look at them can refresh your creative process, especially when you get stuck.


Research

This part includes:

Many questions and doubts are often in your head while working on a project. I usually wrote them down in different places. In Moleskine, files in the cloud, and cards on my desk. And I usually quickly lost connection with them. That’s how the idea to move research documentation closer to design came about. With the Research Planner template, I could build the foundation for the next tests. With the Interview template, I could write down questions to ask participants without getting distracted from design work. Similarlyβ€Šβ€”β€Špersona or Customer Journey Map. Thanks to that, after some time I felt that my files in Figma became comprehensive and helped me a lot when I was presenting my work. I could easily refer to particular data and my argumentation became stronger and more confident.

", "version_id": "277529", "version": "4", "created_at": "2023-02-01T12:25:25.434Z", "duplicate_count": 446, "like_count": 110, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3070587830/01624e39-f9bf-41fc-a841-ba614987dd61-cover.png", "redirect_canvas_url": "/community/file/1202590530137253284/canvas", "community_publishers": ["3749623"], "publisher": {"id": "3749623", "profile_handle": "aleksander_pro", "follower_count": 147, "following_count": 29, "primary_user_id": "822790805580109362", "name": "MichaΕ‚ Aleksander", "img_url": "https://s3-alpha.figma.com/profile/005b1f8a-b23d-47d3-b4e9-bccffc0f64b6", "badges": []}, "support_contact": "michal@aleksander.pro", "creator": {"id": "822790805580109362", "handle": "MichaΕ‚ Aleksander", "img_url": "https://s3-alpha.figma.com/profile/005b1f8a-b23d-47d3-b4e9-bccffc0f64b6"}, "tags": ["canvas", "documentation", "kanban", "lean", "research", "setup", "template", "ux"], "badges": [], "related_content": {"content": ["1210908075535334958", "967038079551866922", "965525436098683782"], "types": ["by_creator"]}}, +{"id": "900479694578549256", "name": "Mobile Wireframe UI Kit", "description": "

Mobile Wireframe Kit

This wireframe kit contains a collection of commonly used system components to mock up your mobile (phone) ideas quickly, before investing in the full design. Use it to share ideas, iterate, prototype, and get buy in before you build.


What's included?


Before you start

You'll need to install SF Pro from Apple to customize the iOS components, which you can download here.


What isn't included?

This kit only contains components for mobile devices, not tablet or desktop.

", "version_id": "39107", "version": "5", "created_at": "2020-10-20T20:24:49.288Z", "duplicate_count": 95613, "like_count": 1731, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/908157817/f6780ccf-bc0b-4bb7-ba09-31e63627a29c-cover.png", "redirect_canvas_url": "/community/file/900479694578549256/canvas", "community_publishers": ["199306"], "publisher": {"id": "199306", "profile_handle": "1", "follower_count": 509, "following_count": 53, "primary_user_id": "476961500878855530", "name": "をンドγƒͺγƒ₯γƒΌ", "img_url": "https://s3-alpha.figma.com/profile/677fd5cb-188c-4bb9-a7c5-661234cc87df", "badges": []}, "support_contact": null, "creator": {"id": "476961500878855530", "handle": "をンドγƒͺγƒ₯γƒΌ", "img_url": "https://s3-alpha.figma.com/profile/677fd5cb-188c-4bb9-a7c5-661234cc87df"}, "tags": ["android", "ios", "iphone", "low fidelity", "material design", "mobile", "pixel", "wireframe"], "badges": [], "related_content": {"content": ["1223626761798663268", "1223330592664849099", "1221203998887810905"], "types": ["by_remixes"]}}, +{"id": "1209181953593935396", "name": "Scribbles - 400+ hand-drawn vectors", "description": "

Get 400+ different hand-made vectors to bring life and creativity to your designs in Figma or brainstorming sessions in FigJam.


About the Scribbles component library ✍️


In the Scribbles library you'll find 100 components each with 4 different pen style variants for making the lines thinner, chonkier or more textured. Some even have additional variants for length and direction so your hand-made additions can feel truly organic.


There's arrows of all different lengths and styles, basic shapes, squiggles, dividers, accents, simple icons and even some text callouts to help you express your ideas – all for just $5!


What's included


\"Why is this only $5? That's like 1 cent per vector!?\"

I believe adding organic touches to our digital environments makes the web feel more human, and I've kept the price intentionally low on this resource to make it easy for anyone to add a hand-made touch to their digital work without having to draw or image trace a single thing (cos who has time for that when you're in the flow!?)


I hope you'll consider adding Scribbles to your design toolkit!

", "version_id": "286155", "version": "4", "created_at": "2023-02-19T16:57:23.249Z", "duplicate_count": 355, "like_count": 146, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3138529049/820a1be9-03f9-4d6e-a24c-b9e51825e946-cover.png", "redirect_canvas_url": "/community/file/1209181953593935396/canvas", "community_publishers": ["1203632585373189122"], "publisher": {"id": "1203632585373189122", "profile_handle": "charliprangley", "follower_count": 29, "following_count": 2, "primary_user_id": "1203632585184928777", "name": "Charli", "img_url": "https://s3-alpha.figma.com/profile/5b9aeb6b-9050-4d6c-8ae0-463eb9af7ddc", "badges": []}, "support_contact": "charli@charlimarie.com", "creator": {"id": "1203632585184928777", "handle": "Charli", "img_url": "https://s3-alpha.figma.com/profile/5b9aeb6b-9050-4d6c-8ae0-463eb9af7ddc"}, "tags": ["arrows", "component library", "design system", "doodles", "drawing", "hand drawn", "hand drawn vectors", "handmade", "handmade vectors", "organic vector", "scribble", "vector library"], "badges": [], "related_content": {"content": ["1213818142294950701", "1114930608793798350", "1206731303459021699"], "types": ["by_creator", "by_tags"]}}, +{"id": "1211744623968867617", "name": "Designely - Brand Guidelines", "description": "

Modern Branding Guidelines - Print & Digital

Need a Branding Guidelines document for your client?

Our Brand Guidelines template allows you to add your logo, and images and edit your brand colours and typography and you’re good to go.

Please don’t waste your time, we’ve done all the hard work for you.

Prototype in Figma or export and send to clients as a pdf.



 βž‘️ The template is lifetime access with updates!

", "version_id": "284854", "version": "2", "created_at": "2023-02-26T18:40:31.478Z", "duplicate_count": 554, "like_count": 59, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3128711583/7d50ea16-849c-45cd-a057-9a8edbc41c9b-cover.png", "redirect_canvas_url": "/community/file/1211744623968867617/canvas", "community_publishers": ["866639911109209140"], "publisher": {"id": "866639911109209140", "profile_handle": "designely", "follower_count": 163, "following_count": 5, "primary_user_id": "866639911087817340", "name": "Agatha Sakowicz", "img_url": "https://s3-alpha.figma.com/profile/e9bf31ed-f991-4456-b19e-bddf494cd992", "badges": []}, "support_contact": "agathasakowicz@gmail.com", "creator": {"id": "866639911087817340", "handle": "Agatha Sakowicz", "img_url": "https://s3-alpha.figma.com/profile/e9bf31ed-f991-4456-b19e-bddf494cd992"}, "tags": ["book", "brand", "branding", "deck", "guidelines", "logo", "presentation"], "badges": [], "related_content": {"content": ["1211745813012367650", "1211743870199873823", "1215666248567959489"], "types": ["by_creator"]}}, +{"id": "1215522045161191128", "name": "AllPay - Finance, Banking, & E-Wallet App UI Kit", "description": "

Hello GUIs,

I just released a new product.


AllPay is a Premium & High Quality UI Kit with All Full Features of Finance, Banking, E-Wallet, Payment, & Money Management App. AllPay came with unique style and niche, you can easily edit and customize all elements with design components which can speed up design process for your projects. Everything is integrated with the design system, so you only need to change the color, logo, text, and so on in the design system, then the entire design screen will automatically change.


AllPay support for iOS/Android (design system included) and 172 screens which is 100% editable & customizable. Designs are available in Figma. In addition, the design is also equipped with a version of Light & Dark Theme.


AllPay is designed in a trendy and modern way, with all layers well organized. AllPay is equipped with a design system with hundred of components. The Design System has been equipped with typography, iconography, color styles, components, variants, elements, buttons, input forms, alerts, avatars, checkboxes, chips, grids, toggles, and many others.


In addition, the application design in figma has been designed with fully auto layout, so it is very adaptive if you want to edit, delete, or add some parts. If you are not familiar with auto layout, you can turn it off by right-clicking the layer, and selecting remove auto layout.


AllPay UI Kit is suitable for:


Main App Features:


What's Inside:


Product Highlights:


Note: All images/photos in the preview are included 😊

Assets: Unsplash, unDraw


---------------------------------------------------------------------------------------------------


Get more awesome products! πŸ‘‡πŸ‘‡πŸ‘‡

MunirSr


Want to donate?

Buy Me a Coffee: πŸ‘‡

Buy Me a Coffee


---------------------------------------------------------------------------------------------------


πŸ›ˆ Additional Information

This product was created and published by MunirSr. If you see someone else selling this product on the website or elsewhere, in any way, it is illegal and violates copyright. Please report it to me. Thank you 😊


---------------------------------------------------------------------------------------------------


Make your project more awesome!

Connect with me: sobakhul.munir527@gmail.com


More you can find me at:

Linkedin | Instagram | Dribbble | Behance | Linktr.ee

", "version_id": "285949", "version": "1", "created_at": "2023-03-09T04:50:38.870Z", "duplicate_count": 604, "like_count": 53, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3137034043/b66e3048-7ec8-4bc9-8f8f-097c3fbf45f2-cover.png", "redirect_canvas_url": "/community/file/1215522045161191128/canvas", "community_publishers": ["2389308"], "publisher": {"id": "2389308", "profile_handle": "MunirSr", "follower_count": 3639, "following_count": 1, "primary_user_id": "763822967356589666", "name": "Sobakhul Munir Siroj", "img_url": "https://s3-alpha.figma.com/profile/be510c7a-6bfc-4ae7-8098-3887c3553599", "badges": []}, "support_contact": "sobakhul.munir527@gmail.com", "creator": {"id": "763822967356589666", "handle": "Sobakhul Munir Siroj", "img_url": "https://s3-alpha.figma.com/profile/be510c7a-6bfc-4ae7-8098-3887c3553599"}, "tags": ["design system", "digital wallet app", "e-wallet app", "finance app", "fintech app", "free", "mobile", "mobile banking app", "money management app", "payment app", "portfolio", "ui kit"], "badges": [], "related_content": {"content": ["1223314222511062706", "1218823989467855715", "1218605363755606732"], "types": ["by_creator"]}}, +{"id": "912837788133317724", "name": "MUI for Figma (Community, Material UI, Joy UI, MUI X)", "description": "

This is a community version of MUI for Figma, a UI kit with handcrafted components for Figma.


This community version covers Material UI, the components that are following the Material Design guidelines.


The documentation of the kit: https://mui.com/figma/getting-started/


For designers that want to ask for help or report improvement opportunities: open a new GitHub issue.


You can also preview the full version of MUI for Figma, see these two files:


Both files aim to support: MUI X, the advanced & customizable components, e.g. data grid.

", "version_id": "298536", "version": "48", "created_at": "2020-11-23T22:51:28.396Z", "duplicate_count": 80303, "like_count": 1845, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3233064752/09b8e348-1e04-4e6e-89a3-789c612ac26c-cover.png", "redirect_canvas_url": "/community/file/912837788133317724/canvas", "community_publishers": ["911937038911164764", "670676"], "publisher": {"id": "911937038911164764", "profile_handle": "mui_org", "follower_count": 396, "following_count": 0, "primary_user_id": null, "name": "MUI", "img_url": "https://s3-alpha.figma.com/profile/204f3be0-8b22-4a7d-9253-cf6a6697dae8", "badges": []}, "support_contact": "figma@mui.com", "creator": {"id": "834802856297975815", "handle": "Olivier Tassinari", "img_url": "https://s3-alpha.figma.com/profile/60510d9d-086a-4099-acf9-5c5598191dfa"}, "tags": ["material", "material design", "mui"], "badges": [], "related_content": {"content": ["1083401278147893772", "1222722936604183198", "1176232478193015917"], "types": ["by_remixes"]}}, +{"id": "1171268006329210940", "name": "🌎 Every Map", "description": "

Every map of the world. Includes every country of the world, as well as common regional maps for continents and global areas.


Follow me on Twitter for more resources like this!


https://twitter.com/thejmoore


---


Afghanistan, Albania, Algeria, Andorra, Angola, Antigua and Barbuda, Argentina, Armenia, Australia, Austria, Azerbaijan, Bahamas, Bahrain, Bangladesh, Barbados, Belarus, Belgium, Belize, Benin, Bhutan, Bolivia, Bosnia and Herzegovina, Botswana, Brazil, Brunei, Bulgaria, Burkina Faso, Burundi, CΓ΄te d'Ivoire, Cabo Verde, Cambodia, Cameroon, Canada, Central African Republic, Chad, Chile, China, Colombia, Comoros, Congo (Congo-Brazzaville), Costa Rica, Croatia, Cuba, Cyprus, Czechia (Czech Republic), Democratic Republic of the Congo, Denmark, Djibouti, Dominica, Dominican Republic, Ecuador, Egypt, El Salvador, Equatorial Guinea, Eritrea, Estonia, \"Eswatini (fmr. \"\"Swaziland\"\")\", Ethiopia, Fiji, Finland, France, Gabon, Gambia, Georgia, Germany, Ghana, Greece, Grenada, Guatemala, Guinea, Guinea-Bissau, Guyana, Haiti, Holy See, Honduras, Hungary, Iceland, India, Indonesia, Iran, Iraq, Ireland, Israel, Italy, Jamaica, Japan, Jordan, Kazakhstan, Kenya, Kiribati, Kuwait, Kyrgyzstan, Laos, Latvia, Lebanon, Lesotho, Liberia, Libya, Liechtenstein, Lithuania, Luxembourg, Madagascar, Malawi, Malaysia, Maldives, Mali, Malta, Marshall Islands, Mauritania, Mauritius, Mexico, Micronesia, Moldova, Monaco, Mongolia, Montenegro, Morocco, Mozambique, Myanmar (formerly Burma), Namibia, Nauru, Nepal, Netherlands, New Zealand, Nicaragua, Niger, Nigeria, North Korea, North Macedonia, Norway, Oman, Pakistan, Palau, Palestine State, Panama, Papua New Guinea, Paraguay, Peru, Philippines, Poland, Portugal, Qatar, Romania, Russia, Rwanda, Saint Kitts and Nevis, Saint Lucia, Saint Vincent and the Grenadines, Samoa, San Marino, Sao Tome and Principe, Saudi Arabia, Senegal, Serbia, Seychelles, Sierra Leone, Singapore, Slovakia, Slovenia, Solomon Islands, Somalia, South Africa, South Korea, South Sudan, Spain, Sri Lanka, Sudan, Suriname, Sweden, Switzerland, Syria, Tajikistan, Tanzania, Thailand, Timor-Leste, Togo, Tonga, Trinidad and Tobago, Tunisia, Turkey, Turkmenistan, Tuvalu, Uganda, Ukraine, United Arab Emirates, United Kingdom, United States of America, Uruguay, Uzbekistan, Vanuatu, Venezuela, Vietnam, Yemen, Zambia, Zimbabwe

", "version_id": "269724", "version": "16", "created_at": "2022-11-07T02:00:53.812Z", "duplicate_count": 411, "like_count": 114, "thumbnail_url": "https://s3-alpha.figma.com/hub/file/3004766778/1ffc9356-9446-4992-8bdb-af209ffbe0f7-cover.png", "redirect_canvas_url": "/community/file/1171268006329210940/canvas", "community_publishers": ["1040871"], "publisher": {"id": "1040871", "profile_handle": "thejmoore", "follower_count": 641, "following_count": 0, "primary_user_id": "668116906486561661", "name": "Jon Moore", "img_url": "https://s3-alpha.figma.com/profile/7877caba-4de2-4f5f-867e-10d2b934c646", "badges": []}, "support_contact": "jon.moore@innovatemap.com", "creator": {"id": "668116906486561661", "handle": "Jon Moore", "img_url": "https://s3-alpha.figma.com/profile/7877caba-4de2-4f5f-867e-10d2b934c646"}, "tags": ["asia", "australia", "countries", "country", "europe", "globe", "map", "middle east", "russia", "usa", "world"], "badges": [], "related_content": {"content": ["1204978049714158492", "1204216495486020583", "1214601013410613826"], "types": ["by_creator"]}} +] \ No newline at end of file diff --git a/testing/report/package.json b/testing/report/package.json index 003763983..efec199fc 100644 --- a/testing/report/package.json +++ b/testing/report/package.json @@ -5,13 +5,14 @@ "bin": "./dist/index.js", "scripts": { "clean": "rm -rf ./dist", - "build": "ncc build src/index.ts -s -o dist", - "dev": "ts-node src/index.ts", - "start": "node dist/index.js" + "build": "ncc build src/bin.ts -s -o dist", + "report": "node dist/index.js" }, "devDependencies": { + "@types/better-queue": "^3.8.3", "@types/node": "^20.2.5", "@types/serve-handler": "^6.1.1", + "@types/yargs": "^17.0.24", "@vercel/ncc": "^0.36.1", "ts-node": "^10.9.1", "ts-node-dev": "^2.0.0", @@ -21,9 +22,12 @@ "dependencies": { "@figma-api/community": "^0.0.7", "axios-cache-interceptor": "^1.1.1", + "better-queue": "^3.8.12", "minimist": "^1.2.8", "ora": "^5.4.0", + "p-map": "^6.0.0", "serve-handler": "^6.1.5", - "winston": "^3.9.0" + "winston": "^3.9.0", + "yargs": "^17.2.1" } } diff --git a/testing/report/report.config.js b/testing/report/report.config.js index 2eba836db..b3728fd63 100644 --- a/testing/report/report.config.js +++ b/testing/report/report.config.js @@ -9,9 +9,10 @@ const { OUTDIR, LOCAL_ARCHIVE_FILES, LOCAL_ARCHIVE_IMAGES } = process.env; module.exports = { sample: path.join(__dirname, "../../data/figma-archives/prod/meta.json"), outDir: OUTDIR, - localarchive: { - files: LOCAL_ARCHIVE_FILES, - images: LOCAL_ARCHIVE_IMAGES, - }, - skipIfReportExists: true, + localarchive: !!LOCAL_ARCHIVE_FILES && + !!LOCAL_ARCHIVE_IMAGES && { + files: LOCAL_ARCHIVE_FILES, + images: LOCAL_ARCHIVE_IMAGES, + }, + skipIfReportExists: false, }; diff --git a/testing/report/src/bin.ts b/testing/report/src/bin.ts new file mode 100644 index 000000000..316089427 --- /dev/null +++ b/testing/report/src/bin.ts @@ -0,0 +1,30 @@ +// cli for report generation + +import yargs from "yargs"; +import { hideBin } from "yargs/helpers"; +import path from "path"; +import { report, GenerateReportOptions } from "./report"; + +const argv = yargs(hideBin(process.argv)) + .option("port", { + alias: "p", + description: "The local fs server port", + type: "number", + default: 8000, + }) + .option("config", { + description: "The path to the reports.config.js file", + type: "string", + default: path.join(process.cwd(), "report.config.js"), + }) + .help() + .alias("help", "h").argv as GenerateReportOptions; + +if (require.main === module) { + report({ port: argv.port, config: argv.config }); +} + +process.on("unhandledRejection", (reason, promise) => { + console.info("Unhandled Rejection at:", promise, "reason:", reason); + process.exit(1); +}); diff --git a/testing/report/src/client.ts b/testing/report/src/client.ts new file mode 100644 index 000000000..3741b848f --- /dev/null +++ b/testing/report/src/client.ts @@ -0,0 +1,58 @@ +import { Client as ClientFS } from "@figma-api/community/fs"; +import { Client as ClientS3 } from "@figma-api/community"; +import { ReportConfig } from "./config"; +import type { FileResponse } from "@design-sdk/figma-remote-types"; + +type ClientInterface = + | ReturnType + | ReturnType; + +export class Client { + private readonly client: ClientInterface; + constructor(local?: { paths: ReportConfig["localarchive"]; port: number }) { + this.client = local + ? ClientFS({ + paths: { + files: local.paths.files, + images: local.paths.images, + }, + baseURL: `http://localhost:${local.port}`, + }) + : ClientS3(); + } + + async getFile(filekey: string) { + try { + const { data } = await this.client.file(filekey); + return data; + } catch (e) { + // file not found + return; + } + } + + async getFiles( + ...filekeys: string[] + ): Promise<{ [key: string]: FileResponse }> { + // Fetch all files concurrently and await the result array + const results = await Promise.all( + filekeys.map((filekey) => this.getFile(filekey)) + ); + + // Construct a new map from the filekeys and the result array + return filekeys.reduce((map, key, index) => { + return { + ...map, + [key]: results[index], + }; + }, {}); + } + // + get fileImages() { + return this.client.fileImages; + } + + get fileImageFills() { + return this.client.fileImageFills; + } +} diff --git a/testing/report/src/config.ts b/testing/report/src/config.ts new file mode 100644 index 000000000..284974c05 --- /dev/null +++ b/testing/report/src/config.ts @@ -0,0 +1,9 @@ +export interface ReportConfig { + sample: string; + outDir?: string; + localarchive?: { + files: string; + images: string; + }; + skipIfReportExists?: boolean; +} diff --git a/testing/report/src/index.ts b/testing/report/src/index.ts deleted file mode 100644 index 177e420d8..000000000 --- a/testing/report/src/index.ts +++ /dev/null @@ -1,348 +0,0 @@ -import path from "path"; -import fs from "fs/promises"; -import assert from "assert"; -import ora from "ora"; -import { mapper } from "@design-sdk/figma-remote"; -import { convert } from "@design-sdk/figma-node-conversion"; -import { Client } from "@figma-api/community/fs"; -import type { Frame } from "@design-sdk/figma-remote-types"; -import { htmlcss } from "@codetest/codegen"; -import { Worker as ScreenshotWorker } from "@codetest/screenshot"; -import { resemble } from "@codetest/diffview"; -import axios from "axios"; -import { setupCache } from "axios-cache-interceptor"; -import { - ImageRepository, - MainImageRepository, -} from "@design-sdk/asset-repository"; -import { RemoteImageRepositories } from "@design-sdk/figma-remote/asset-repository"; -import winston from "winston"; -import { createServer } from "http"; -import { promisify } from "util"; -import handler from "serve-handler"; - -const FS_SERVER_PORT = 8000; - -const logger = winston.createLogger({ - transports: [ - new winston.transports.File({ filename: "error.log", level: "error" }), - ], -}); - -setupCache(axios); - -const exists = async (path: string) => { - try { - await fs.access(path); - return true; - } catch (e) { - return false; - } -}; - -const mkdir = async (path: string) => - !(await exists(path)) && (await fs.mkdir(path)); - -interface ReportConfig { - sample: string; - outDir?: string; - localarchive?: { - files: string; - images: string; - }; - skipIfReportExists?: boolean; -} - -// disable logging -console.log = () => {}; -console.warn = () => {}; - -function fsserver(path: string) { - // fileserver for puppeteer to load local files - const fileserver = createServer((request, response) => { - return handler(request, response, { - public: path, - symlinks: true, - }); - }); - - // Promisify the listen and close methods - const listen = promisify(fileserver.listen.bind(fileserver)); - const close = promisify(fileserver.close.bind(fileserver)); - - return { - listen, - close, - }; -} - -async function report() { - console.info("Starting report"); - const cwd = process.cwd(); - // read the config - const config: ReportConfig = require(path.join(cwd, "report.config.js")); - - // load the sample file - const samples_path = (await exists(config.sample)) - ? config.sample - : path.join(cwd, config.sample); - - assert( - await exists(samples_path), - `sample file not found at ${config.sample} nor ${samples_path}` - ); - - const samples = JSON.parse(await fs.readFile(samples_path, "utf-8")); - - // create .coverage folder - const coverage_path = config.outDir ?? path.join(cwd, ".coverage"); - - console.info(`Loaded ${samples.length} samples`); - console.info(`Configuration used - ${JSON.stringify(config, null, 2)}`); - - const { listen: fileserver_start, close: fileserver_close } = fsserver( - config.localarchive.images - ); - - const client = Client({ - paths: { - files: config.localarchive.files, - images: config.localarchive.images, - }, - baseURL: `http://localhost:${FS_SERVER_PORT}`, - }); - - // Start the server - await fileserver_start(FS_SERVER_PORT); - console.info(`serve running at http://localhost:${FS_SERVER_PORT}/`); - - const ssworker = new ScreenshotWorker({}); - await ssworker.launch(); - - // setup the dir - await mkdir(coverage_path); - - let i = 0; - for (const c of samples) { - i++; - - const { id: filekey } = c; - let file; - let exports: { [key: string]: string }; - try { - const { data } = await client.file(filekey); - file = data; - if (!file) { - continue; - } - } catch (e) { - // file not found - continue; - } - - // create .coverage/:id folder - const coverage_set_path = path.join(coverage_path, c.id); - await mkdir(coverage_set_path); - - const frames: ReadonlyArray = file.document.children - .filter((c) => c.type === "CANVAS") - .map((c) => c["children"]) - .flat() - .filter((c) => c.type === "FRAME"); - - try { - exports = ( - await client.fileImages(filekey, { - ids: frames.map((f) => f.id), - }) - ).data.images; - } catch (e) { - console.error("exports not ready for", filekey, e.message); - continue; - } - - let ii = 0; - for (const frame of frames) { - ii++; - - const spinner = ora( - `[${i}/${samples.length}] Running coverage for ${c.id}/${frame.id} (${ii}/${frames.length})` - ).start(); - - // create .coverage/:id/:node folder - const coverage_node_path = path.join(coverage_set_path, frame.id); - await mkdir(coverage_node_path); - - // report.json - const report_file = path.join(coverage_node_path, "report.json"); - if (config.skipIfReportExists) { - if (await exists(report_file)) { - spinner.succeed(`Skipping - report for ${frame.id} already exists`); - continue; - } - } - - const _mapped = mapper.mapFigmaRemoteToFigma(frame); - const _converted = convert.intoReflectNode( - _mapped, - null, - "rest", - filekey - ); - - const width = frame.size.x; - const height = frame.size.y; - - // TODO: - MainImageRepository.instance = new RemoteImageRepositories(filekey, {}); - MainImageRepository.instance.register( - new ImageRepository( - "fill-later-assets", - "grida://assets-reservation/images/" - ) - ); - - try { - // image A (original) - const exported = exports[frame.id]; - const image_a_rel = "./a.png"; - const image_a = path.join(coverage_node_path, image_a_rel); - // download the exported image with url - // if the exported is local fs path, then use copy instead - if (await exists(exported)) { - try { - // Check if image_a exists and remove - try { - await fs.lstat(image_a); // use stat to check if file exists (even broken one) - await fs.unlink(image_a); - } catch (e) { - // Handle file not found error - if (e.code !== "ENOENT") { - throw e; - } - } - - await fs.symlink(exported, image_a); - } catch (e) { - // TODO: symlink still fails with "EEXIST: file already exists, symlink" - // we need to handle this. - // reason? - unknown - } - } else if (exported.startsWith("http")) { - const dl = await axios.get(exported, { responseType: "arraybuffer" }); - await fs.writeFile(image_a, dl.data); - } else { - throw new Error(`File not found - ${exported}`); - } - - if (!(await exists(image_a))) { - spinner.fail(`Image A not found - ${image_a} from (${exported})`); - continue; - } - - // codegen - const code = await htmlcss( - { - id: frame.id, - name: frame.name, - entry: _converted, - }, - async ({ keys, hashes }) => { - const { data: exports } = await client.fileImages(filekey, { - ids: keys, - }); - - const { data: images } = await client.fileImageFills(filekey); - - const map = { - ...exports.images, - ...images.meta.images, - }; - - // transform the path for local file url - return Object.keys(map).reduce((acc, key) => { - const path = map[key]; - const url = path.startsWith("http") ? path : `file://${path}`; - return { - ...acc, - [key]: url, - }; - }, {}); - } - ); - - // write index.html - const html_file = path.join(coverage_node_path, "index.html"); - await fs.writeFile(html_file, code); - - const screenshot_buffer = await ssworker.screenshot({ - htmlcss: code, - viewport: { - width: Math.round(width), - height: Math.round(height), - }, - }); - - const image_b_rel = "./b.png"; - const image_b = path.join(coverage_node_path, image_b_rel); - await fs.writeFile(image_b, screenshot_buffer); - - const diff = await resemble(image_a, image_b); - const diff_file = path.join(coverage_node_path, "diff.png"); - // write diff.png - await fs.writeFile(diff_file, diff.getBuffer(false)); - // const { diff, score } = await ssim( - // image_a, - // image_b, - // coverage_node_path - // ); - - const report = { - community_id: filekey, - filekey: "unknown", - type: "FRAME", - name: frame.name, - id: frame.id, - width, - height, - image_a: image_a_rel, - image_b: image_b_rel, - reported_at: new Date().toISOString(), - diff: { - hitmap: diff_file, - percent: diff.rawMisMatchPercentage, - }, - engine: { - name: "@codetest/codegen", - version: "2023.1.1", - framework: "preview", - }, - }; - - // wrie report.json - await fs.writeFile(report_file, JSON.stringify(report, null, 2)); - - spinner.text = `report file for ${frame.id} ➑ ${report_file}`; - spinner.succeed(); - } catch (e) { - // could be codegen error - spinner.fail(`error on ${frame.id} : ${e.message}`); - logger.log("error", e); - console.error(e); - } - } - - // cleaup - // if the coverage is empty, remove the folder - const files = await fs.readdir(coverage_set_path); - if (files.length === 0) { - await fs.rmdir(coverage_set_path); - } - } - - // cleaup - await ssworker.terminate(); - await fileserver_close(); -} - -report(); diff --git a/testing/report/src/report-frame.ts b/testing/report/src/report-frame.ts new file mode 100644 index 000000000..ee0ed2d9e --- /dev/null +++ b/testing/report/src/report-frame.ts @@ -0,0 +1,226 @@ +import fs from "fs/promises"; +import path from "path"; +import { Worker as ScreenshotWorker } from "@codetest/screenshot"; +import type { + FileImageResponse, + FileImageFillsResponse, + Frame, +} from "@design-sdk/figma-remote-types"; +import { htmlcss } from "@codetest/codegen"; +import { resemble } from "@codetest/diffview"; +import { Client } from "./client"; +import { mapper } from "@design-sdk/figma-remote"; +import { convert } from "@design-sdk/figma-node-conversion"; +import { + ImageRepository, + MainImageRepository, +} from "@design-sdk/asset-repository"; +import { RemoteImageRepositories } from "@design-sdk/figma-remote/asset-repository"; +import { sync } from "./utils/sync"; +import { exists } from "./utils/exists"; +import winston from "winston"; + +const logger = winston.createLogger({ + transports: [ + new winston.transports.File({ filename: "code.log", level: "error" }), + ], +}); + +function cvt(node: Frame, filekey: string) { + const _mapped = mapper.mapFigmaRemoteToFigma(node); + const _converted = convert.intoReflectNode(_mapped, null, "rest", filekey); + return _converted; +} + +function setImageRepository(filekey: string) { + // FIXME: - using global instance is very dangerous since we are running on multiple threads. + // Somehow, for some reason, this approach is still valid - because we are using custom resolver. + + MainImageRepository.instance = new RemoteImageRepositories(filekey, {}); + MainImageRepository.instance.register( + new ImageRepository( + "fill-later-assets", + "grida://assets-reservation/images/" + ) + ); +} + +export class FrameReporter { + readonly filekey: string; + readonly out: string; + readonly node: Frame; + readonly client: Client; + readonly ssworker: ScreenshotWorker; + readonly exported: string; + + get reportFilePath() { + return path.join(this.out, "report.json"); + } + + get htmlFilePath() { + return path.join(this.out, "report.html"); + } + + get aPath() { + return path.join(this.out, "a.png"); + } + + get bPath() { + return path.join(this.out, "b.png"); + } + + get diffPath() { + return path.join(this.out, "diff.png"); + } + + get width() { + return this.node.size.x; + } + + get height() { + return this.node.size.y; + } + + get fid() { + return this.node.id; + } + + constructor({ + node, + filekey, + out, + client, + ssworker, + exported, + }: { + node: Frame; + filekey: string; + out: string; + client: Client; + ssworker: ScreenshotWorker; + exported: string; + }) { + this.node = node; + this.filekey = filekey; + this.out = out; + this.client = client; + this.ssworker = ssworker; + this.exported = exported; + } + + async code() { + setImageRepository(this.filekey); + return await htmlcss( + { + id: this.fid, + name: this.node.name, + entry: cvt(this.node, this.filekey), + }, + async ({ keys, hashes }) => { + const assets = await Promise.all([ + this.client.fileImages(this.filekey, { + ids: keys, + }), + this.client.fileImageFills(this.filekey), + ]); + + const [exports, images] = assets.map((a) => a.data); + + const map = { + ...(exports as FileImageResponse).images, + ...(images as FileImageFillsResponse).meta.images, + }; + + return map; + } + ); + } + + async report() { + try { + let code: string; + try { + // sync the 'a' image and generate the code at the same time. + const comparisons = Promise.all([this.syncA(), this.code()]); + code = (await comparisons)[1]; + } catch (e) { + return { + error: e.message, + }; + } + + // write index.html + await fs.writeFile(this.htmlFilePath, code); + + // screenshot + await this.ss(code, this.bPath); + + // diff + const diff = await this.diff(); + + const report = { + community_id: this.filekey, + filekey: "unknown", + type: "FRAME", + name: this.node.name, + id: this.fid, + width: this.width, + height: this.height, + image_a: "./a.png", + image_b: "./b.png", + reported_at: new Date().toISOString(), + diff: { + hitmap: "./diff.png", + percent: diff.rawMisMatchPercentage, + }, + engine: { + name: "@codetest/codegen", + version: "2023.0.0.1", + framework: "preview", + }, + }; + + // wrie report.json + await fs.writeFile(this.reportFilePath, JSON.stringify(report, null, 2)); + + return { report }; + } catch (e) { + logger.log("error", e); + console.info(e); + return { + error: e.message, + }; + } + } + + async ss(code: string, path: string) { + await this.ssworker.screenshot({ + htmlcss: code, + viewport: { + width: Math.round(this.width), + height: Math.round(this.height), + }, + path: path, + }); + } + + async diff() { + const diff = await resemble(this.aPath, this.bPath); + const diff_file = path.join(this.out, "diff.png"); + // write diff.png + await fs.writeFile(diff_file, diff.getBuffer(false)); + + return diff; + } + + async syncA() { + // image A (original) + + await sync(this.exported, this.aPath); + if (!(await exists(this.aPath))) { + throw new Error( + `Image A not found - ${this.aPath} from (${this.exported})` + ); + } + } +} diff --git a/testing/report/src/report.ts b/testing/report/src/report.ts new file mode 100644 index 000000000..f9cad7c90 --- /dev/null +++ b/testing/report/src/report.ts @@ -0,0 +1,230 @@ +import os from "os"; +import fs from "fs/promises"; +import path from "path"; +import assert from "assert"; +import winston from "winston"; +import chalk from "chalk"; +import { Worker as ScreenshotWorker } from "@codetest/screenshot"; +import axios from "axios"; +import { setupCache } from "axios-cache-interceptor"; +import { fsserver } from "./serve"; +import { exists } from "./utils/exists"; +import { pad } from "./utils/padstr"; +import { ReportConfig } from "./config"; +import { Client } from "./client"; +import { FrameReporter } from "./report-frame"; +import Queue from "better-queue"; +import { SamplesResolver, Task } from "./samples"; + +const CI = process.env.CI; + +setupCache(axios); + +export interface GenerateReportOptions { + port: number; + config: string; +} + +const logger = winston.createLogger({ + transports: [ + new winston.transports.File({ filename: "error.log", level: "error" }), + ], +}); + +const mkdir = async (path: string) => + !(await exists(path)) && + (await fs.mkdir(path, { + recursive: true, + })); + +const noconsole = () => { + // disable logging + console.log = () => {}; + console.warn = () => {}; + console.error = () => {}; +}; + +const log = console.info; + +class ReportsHandler { + public tasks: Queue; + + constructor( + readonly config: ReportConfig, + readonly out: string, + readonly client: Client, + readonly ssworker: ScreenshotWorker, + readonly timeout: number, + readonly concurrency: number + ) { + this.tasks = new Queue( + (task: Task, cb: () => void) => this.handle(task, cb), + { concurrent: concurrency, maxTimeout: timeout } + ); + // prevent from starting + this.tasks.pause(); + } + + async handle(task: Task, cb: () => void) { + if (task === null) { + // end-of-data token + console.log("End of data token received, no more tasks to process"); + console.log("Closed reporter"); + return; + } + + const { filekey, node, a } = task; + + const logsuffix = pad(`${filekey}/${node.id}`, 32); + + try { + // create .coverage/:id/:node folder + const coverage_node_path = path.join(this.out, filekey, node.id); + await mkdir(coverage_node_path); + + // report.json + const report_file = path.join(coverage_node_path, "report.json"); + if (this.config.skipIfReportExists) { + if (await exists(report_file)) { + log( + chalk.green(`β˜‘ ${logsuffix} Skipping - report for already exists`) + ); + return; + } + } + + const reporter = new FrameReporter({ + filekey: filekey, + node: node, + out: coverage_node_path, + exported: a, + client: this.client, + ssworker: this.ssworker, + }); + + const result = await reporter.report(); + + if (result.report) { + log(chalk.green(`β˜‘ ${logsuffix} Reported ➑ ${report_file}`)); + } else if (result.error) { + log(chalk.red(`β˜’ ${logsuffix} Error: ${result.error}`)); + } else { + log(chalk.red(`β˜’ ${logsuffix} Unknown Error`)); + } + } catch (e) { + log(chalk.red(`β˜’ ${logsuffix} System Error: ${e.message}}`)); + } + + cb(); + } + + async start() { + this.tasks.resume(); + } + + async join() { + return new Promise((resolve) => { + this.tasks.on("drain", () => { + resolve(); + }); + }); + } +} + +export async function report(options: GenerateReportOptions) { + if (CI) { + noconsole(); + } + + const starttime = Date.now(); + + const concurrency = os.cpus().length; + + const cwd = process.cwd(); + // read the config + const config: ReportConfig = require(options.config); + + // load the sample file + const samples_path = (await exists(config.sample)) + ? config.sample + : path.join(cwd, config.sample); + + assert( + await exists(samples_path), + `sample file not found at ${config.sample} nor ${samples_path}` + ); + + const samples: Array<{ id: string; name: string }> = JSON.parse( + await fs.readFile(samples_path, "utf-8") + ); + + // create .coverage folder + const coverage_path = config.outDir ?? path.join(cwd, ".coverage"); + + console.info("Starting report", { + concurrency, + size: samples.length, + config: JSON.stringify(config, null, 2), + }); + + const { listen: fileserver_start, close: fileserver_close } = + config.localarchive + ? fsserver(config.localarchive.images) + : { listen: () => {}, close: () => {} }; + + const client = new Client( + config.localarchive + ? { paths: config.localarchive, port: options.port } + : null + ); + + if (config.localarchive) { + // Start the server + await fileserver_start(options.port); + console.info(`serve running at http://localhost:${options.port}/`); + } + + const ssworker = new ScreenshotWorker({}, 20); + await ssworker.launch(); + + // setup the dir + await mkdir(coverage_path); + + const reportHandler = new ReportsHandler( + config, + coverage_path, + client, + ssworker, + 60 * 1000, + concurrency + ); + + const samplesResolver = new SamplesResolver( + samples, + client, + reportHandler.tasks, + concurrency * 8 + ); + + samplesResolver.start(); + reportHandler.start(); + + await reportHandler.join(); + + // cleaup + // terminate puppeteer + await ssworker.terminate(); + + // terminate local file server + if (config.localarchive) { + await fileserver_close(); + } + + const endtime = Date.now(); + + log( + chalk.bgGreen( + `βœ“ Done in ${(endtime - starttime) / 1000}s. Coverage at ${coverage_path}` + ) + ); +} diff --git a/testing/report/src/samples.ts b/testing/report/src/samples.ts new file mode 100644 index 000000000..6ea7c7a87 --- /dev/null +++ b/testing/report/src/samples.ts @@ -0,0 +1,94 @@ +// files fetcher process +// once file is fetched, extract target nodes and put it to node queue +// +// downloader process +// screenshot process + +import Queue from "better-queue"; +import pMap from "p-map"; +import { Client } from "./client"; +import type { Document, Frame } from "@design-sdk/figma-remote-types"; + +export interface Task { + filekey: string; + node: Frame; + a: string; +} + +function filterFrames(document: Document) { + return document.children + .filter((c) => c.type === "CANVAS") + .map((c) => c["children"]) + .flat() + .filter((c) => c.type === "FRAME"); +} + +async function exporedNodesMap( + client: Client, + filekey: string, + ...ids: string[] +) { + try { + return ( + await client.fileImages(filekey, { + ids, + }) + ).data.images; + } catch (e) { + return; + } +} + +export class SamplesResolver { + constructor( + readonly samples: { id: string }[], + readonly client: Client, + readonly outqueue: Queue, + readonly concurrency: number + ) {} + + async resolve(sample: { id: string }) { + const { id: filekey } = sample; + try { + const file = await this.client.getFile(filekey); + if (!file) { + return; + } + + const frames: ReadonlyArray = filterFrames(file.document); + + const exports = await exporedNodesMap( + this.client, + filekey, + ...frames.map((f) => f.id) + ); + + return frames.map((frame) => { + const task: Task = { + filekey, + node: frame, + a: exports[frame.id], + }; + return task; + }); + } catch (e) { + return; + } + } + + async start() { + // wait 10 seconds before starting + await new Promise((resolve) => setTimeout(resolve, 10000)); + await pMap( + this.samples, + async (sample) => { + const tasks = await this.resolve(sample); + tasks?.filter(Boolean)?.forEach((task) => { + this.outqueue.push(task); + }); + }, + { concurrency: this.concurrency } // Set as needed + ); + this.outqueue.push(null); // end-of-data token + } +} diff --git a/testing/report/src/serve.ts b/testing/report/src/serve.ts new file mode 100644 index 000000000..50cce711a --- /dev/null +++ b/testing/report/src/serve.ts @@ -0,0 +1,22 @@ +import { createServer } from "http"; +import { promisify } from "util"; +import handler from "serve-handler"; + +export function fsserver(path: string) { + // fileserver for puppeteer to load local files + const fileserver = createServer((request, response) => { + return handler(request, response, { + public: path, + symlinks: true, + }); + }); + + // Promisify the listen and close methods + const listen = promisify(fileserver.listen.bind(fileserver)); + const close = promisify(fileserver.close.bind(fileserver)); + + return { + listen, + close, + }; +} diff --git a/testing/report/src/utils/exists.ts b/testing/report/src/utils/exists.ts new file mode 100644 index 000000000..b1aee75b2 --- /dev/null +++ b/testing/report/src/utils/exists.ts @@ -0,0 +1,10 @@ +import fs from "fs/promises"; + +export const exists = async (path: string) => { + try { + await fs.access(path); + return true; + } catch (e) { + return false; + } +}; diff --git a/testing/report/src/utils/padstr.ts b/testing/report/src/utils/padstr.ts new file mode 100644 index 000000000..d2da23ccb --- /dev/null +++ b/testing/report/src/utils/padstr.ts @@ -0,0 +1,3 @@ +export function pad(str, n = 80) { + return str.length > n ? str.substring(0, n) : str.padEnd(n); +} diff --git a/testing/report/src/utils/sync.ts b/testing/report/src/utils/sync.ts new file mode 100644 index 000000000..1e7e50e39 --- /dev/null +++ b/testing/report/src/utils/sync.ts @@ -0,0 +1,37 @@ +import fs from "fs/promises"; +import { exists } from "./exists"; +import axios from "axios"; + +/** + * download the 'a' with url + * if 'a' is local fs path, then use symlink instead + * @param a + * @param b + */ +export async function sync(a: string, b: string) { + if (await exists(a)) { + try { + // Check if b exists and remove + try { + await fs.lstat(b); // use stat to check if file exists (even broken one) + await fs.unlink(b); + } catch (e) { + // Handle file not found error + if (e.code !== "ENOENT") { + throw e; + } + } + + await fs.symlink(a, b); + } catch (e) { + // TODO: symlink still fails with "EEXIST: file already exists, symlink" + // we need to handle this. + // reason? - unknown + } + } else if (a.startsWith("http")) { + const dl = await axios.get(a, { responseType: "arraybuffer" }); + await fs.writeFile(b, dl.data); + } else { + throw new Error(`File not found - ${a}`); + } +} diff --git a/testing/testing-screenshot/index.ts b/testing/testing-screenshot/index.ts index a3ddc7d29..74366e221 100644 --- a/testing/testing-screenshot/index.ts +++ b/testing/testing-screenshot/index.ts @@ -1,3 +1,4 @@ +import os from "os"; import puppeteer, { Browser, Page, PuppeteerLaunchOptions } from "puppeteer"; interface ScreenshotOptions { @@ -6,77 +7,85 @@ interface ScreenshotOptions { width: number; height: number; }; + path?: string; } export class Worker { private browser: Browser; - private page: Page; - private readonly options; + private pages: Page[] = []; + private pageInUse: boolean[] = []; + private maxPages: number; + private readonly options: PuppeteerLaunchOptions; - constructor({ options }: { options?: PuppeteerLaunchOptions }) { - this.browser = null; - this.page = null; - this.options = options ?? { + constructor( + options: PuppeteerLaunchOptions = {}, + // not the best way to determine max pages, but it's a start + maxPages: number = os.cpus().length * 2 + ) { + this.maxPages = maxPages; + this.options = { headless: "new", args: ["--no-sandbox"], ignoreDefaultArgs: ["--disable-extensions"], + ...options, }; } async launch() { - if (this.browser) { - return this.browser; - } this.browser = await puppeteer.launch(this.options); - this.page = await this.browser.newPage(); - return this.browser; - } - - async relaunch() { - await this.close(); - return this.launch(); + (await this.browser.pages()).forEach((page) => { + this.pages.push(page); + this.pageInUse.push(false); + }); } - async screenshot({ htmlcss, viewport }: ScreenshotOptions) { - try { - if (!this.browser || !this.page || this.page.isClosed()) { - await this.relaunch(); + async allocatePage() { + let pageIndex = this.pageInUse.findIndex((inUse) => !inUse); + if (pageIndex === -1) { + if (this.pages.length < this.maxPages) { + const newPage = await this.browser.newPage(); + this.pages.push(newPage); + this.pageInUse.push(true); // The new page will be in use immediately + pageIndex = this.pages.length - 1; + } else { + // Wait for a page to be available + while (pageIndex === -1) { + await new Promise((resolve) => setTimeout(resolve, 100)); // Poll every 100ms + pageIndex = this.pageInUse.findIndex((inUse) => !inUse); + } } - await this.page.setViewport(viewport); - await this.page.setContent(htmlcss, { waitUntil: "networkidle0" }); - const buffer = await this.page.screenshot({ - type: "png", - // support transparency - omitBackground: true, - }); - return buffer; - } catch (error) { - console.log(`Failed to take screenshot: ${error.message}`); - await this.relaunch(); - // After relaunch, retry taking screenshot or rethrow the error - return this.screenshot({ htmlcss, viewport }); } + this.pageInUse[pageIndex] = true; // Mark the page as in use + return this.pages[pageIndex]; } - async close() { - if (this.browser) { - try { - await this.browser.close(); - } catch (e) { - console.log(`Failed to close browser: ${e.message}`); - } - this.browser = null; - this.page = null; - } + async screenshot(options: ScreenshotOptions) { + const page = await this.allocatePage(); + + await page.setViewport(options.viewport); + await page.setContent(options.htmlcss, { waitUntil: "networkidle0" }); + const buffer = await page.screenshot({ + type: "png", + omitBackground: true, + path: options.path, + }); + + // clear the page after use + page.setContent("", { timeout: 1000 }).finally(() => { + this.pageInUse[this.pages.indexOf(page)] = false; // Mark the page as no longer in use + }); + + return buffer; } - terminate() { - this.close(); + async terminate() { + await Promise.all(this.pages.map((page) => page.close())); + await this.browser.close(); } } export async function screenshot(options: ScreenshotOptions) { - const worker = new Worker({}); + const worker = new Worker(); await worker.launch(); const buffer = await worker.screenshot(options); await worker.terminate(); diff --git a/testing/testing-screenshot/tests/pupeteer-performance.js b/testing/testing-screenshot/tests/pupeteer-performance.js new file mode 100644 index 000000000..3ced51a5f --- /dev/null +++ b/testing/testing-screenshot/tests/pupeteer-performance.js @@ -0,0 +1,111 @@ +const puppeteer = require("puppeteer"); +const tmp = require("tmp"); +const path = require("path"); + +const url = "https://example.com"; // Replace with your test URL + +const takeScreenshot = async (page, filename) => { + await page.goto(url); + await page.screenshot({ path: filename }); +}; + +const measureConcurrency = async (concurrency, tmpDir) => { + const browser = await puppeteer.launch({ headless: "new" }); + const pages = await Promise.all( + Array(concurrency) + .fill() + .map(() => browser.newPage()) + ); + + const start = Date.now(); + + const promises = pages.map((page, i) => + takeScreenshot( + page, + path.join(tmpDir, `screenshot_${concurrency}_${i}.png`) + ) + ); + + await Promise.all(promises); + + const duration = Date.now() - start; + const averageDuration = duration / concurrency; + + await browser.close(); + + return averageDuration; +}; + +const testConcurrencies = async (tmpDir) => { + let concurrency = 1; + let lastAverageDuration = Infinity; + let optimalConcurrency; + let optimalAverageDuration = Infinity; + + let increaseCount = 0; + const maxIncreases = 5; // Number of increases to allow before stopping + + while (true) { + const averageDuration = await measureConcurrency(concurrency, tmpDir); + console.log( + `Tested concurrency ${concurrency}: ${Math.ceil( + averageDuration + )}ms per page` + ); + + if (averageDuration < optimalAverageDuration) { + optimalConcurrency = concurrency; + optimalAverageDuration = averageDuration; + } + + // If average duration per page starts increasing, increment the counter + if (averageDuration > lastAverageDuration) { + increaseCount++; + } + + // Stop if we've seen increases in average duration maxIncreases times + if (increaseCount >= maxIncreases) { + break; + } + + lastAverageDuration = averageDuration; + concurrency++; + } + + console.log( + `Optimal concurrency for this run is ${optimalConcurrency}: ${Math.ceil( + optimalAverageDuration + )}ms per page` + ); + + return optimalConcurrency; +}; + +async function test() { + const testRuns = 5; // Number of times to run the entire test + const optimalConcurrencies = []; + + for (let i = 0; i < testRuns; i++) { + console.log(`Running test ${i + 1} of ${testRuns}`); + const tmpDir = tmp.dirSync({ unsafeCleanup: true }); // Create a new temporary directory + optimalConcurrencies.push(await testConcurrencies(tmpDir.name)); + tmpDir.removeCallback(); // Clean up the temporary directory + } + + const counts = optimalConcurrencies.reduce((acc, concurrency) => { + acc[concurrency] = (acc[concurrency] || 0) + 1; + return acc; + }, {}); + + const mostCommonConcurrency = Object.keys(counts).reduce((a, b) => + counts[a] > counts[b] ? a : b + ); + + console.log( + `Most commonly observed optimal concurrency is ${mostCommonConcurrency}` + ); +} + +if (require.main === module) { + test(); +} diff --git a/yarn.lock b/yarn.lock index 60cd7c1e3..c979743de 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8747,6 +8747,13 @@ resolved "https://registry.npmjs.org/@types/base16/-/base16-1.0.2.tgz" integrity sha512-oYO/U4VD1DavwrKuCSQWdLG+5K22SLPem2OQaHmFcQuwHoVeGC+JGVRji2MUqZUAIQZHEonOeVfAX09hYiLsdg== +"@types/better-queue@^3.8.3": + version "3.8.3" + resolved "https://registry.yarnpkg.com/@types/better-queue/-/better-queue-3.8.3.tgz#69dd8ba158749749df0cb48ef05ab4d62145575a" + integrity sha512-xCWSF5i1CJMq271mGjK4MrAzIEFNFKVv/eMtL8eUyD4rOOcx1SBs2zhcQxVkWjCz2TVMQOUUxwkgWyDDyvw+rw== + dependencies: + "@types/node" "*" + "@types/body-parser@*": version "1.19.2" resolved "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz" @@ -10700,6 +10707,20 @@ better-opn@^2.1.1: dependencies: open "^7.0.3" +better-queue-memory@^1.0.1: + version "1.0.4" + resolved "https://registry.yarnpkg.com/better-queue-memory/-/better-queue-memory-1.0.4.tgz#f390d6b30bb3b36aaf2ce52b37a483e8a7a81a22" + integrity sha512-SWg5wFIShYffEmJpI6LgbL8/3Dqhku7xI1oEiy6FroP9DbcZlG0ZDjxvPdP9t7hTGW40IpIcC6zVoGT1oxjOuA== + +better-queue@^3.8.12: + version "3.8.12" + resolved "https://registry.yarnpkg.com/better-queue/-/better-queue-3.8.12.tgz#15c18923d0f9778be94f19c3ef2bd85c632d0db3" + integrity sha512-D9KZ+Us+2AyaCz693/9AyjTg0s8hEmkiM/MB3i09cs4MdK1KgTSGJluXRYmOulR69oLZVo2XDFtqsExDt8oiLA== + dependencies: + better-queue-memory "^1.0.1" + node-eta "^0.9.0" + uuid "^9.0.0" + big-integer@^1.6.16, big-integer@^1.6.7: version "1.6.51" resolved "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz" @@ -19291,6 +19312,11 @@ node-dir@^0.1.10: dependencies: minimatch "^3.0.2" +node-eta@^0.9.0: + version "0.9.0" + resolved "https://registry.yarnpkg.com/node-eta/-/node-eta-0.9.0.tgz#9fb0b099bcd2a021940e603c64254dc003d9a7a8" + integrity sha512-mTCTZk29tmX1OGfVkPt63H3c3VqXrI2Kvua98S7iUIB/Gbp0MNw05YtUomxQIxnnKMyRIIuY9izPcFixzhSBrA== + node-fetch-npm@^2.0.2: version "2.0.4" resolved "https://registry.npmjs.org/node-fetch-npm/-/node-fetch-npm-2.0.4.tgz" @@ -20201,6 +20227,11 @@ p-map@^4.0.0: dependencies: aggregate-error "^3.0.0" +p-map@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/p-map/-/p-map-6.0.0.tgz#4d9c40d3171632f86c47601b709f4b4acd70fed4" + integrity sha512-T8BatKGY+k5rU+Q/GTYgrEf2r4xRMevAN5mtXc2aPc4rS1j3s+vWTaO2Wag94neXuCAUAs8cxBL9EeB5EA6diw== + p-pipe@^3.1.0: version "3.1.0" resolved "https://registry.npmjs.org/p-pipe/-/p-pipe-3.1.0.tgz" @@ -25173,6 +25204,11 @@ uuid@^3.3.2: resolved "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz" integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A== +uuid@^9.0.0: + version "9.0.0" + resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5" + integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg== + uvu@^0.5.0: version "0.5.6" resolved "https://registry.yarnpkg.com/uvu/-/uvu-0.5.6.tgz#2754ca20bcb0bb59b64e9985e84d2e81058502df"