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": "
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.
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
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.
10.27.21
08.24.21 V1.3
07.14.21 V1.2
Updates:
06.28.21 V1.1
Updates:
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:
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": "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": "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
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.
Note: All images/photos in the preview are included π
Assets: Unsplash, unDraw, Freepik
---------------------------------------------------------------------------------------------------
Buy Me a Coffee: π
---------------------------------------------------------------------------------------------------
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
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
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
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
βοΈ β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": "π 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
βββββ
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
βββββ
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.
βββββ
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
βββββ
βββββ
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
βββββ
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.
βββββ
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": "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.
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
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.
10.27.21
08.24.21 V1.3
07.14.21 V1.2
Updates:
06.28.21 V1.1
Updates:
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:
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": "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": "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.
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
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.
10.27.21
08.24.21 V1.3
07.14.21 V1.2
Updates:
06.28.21 V1.1
Updates:
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:
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": "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": "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
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.
Note: All images/photos in the preview are included π
Assets: Unsplash, unDraw, Freepik
---------------------------------------------------------------------------------------------------
Buy Me a Coffee: π
---------------------------------------------------------------------------------------------------
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
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
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
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
βοΈ β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": "π 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
βββββ
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
βββββ
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.
βββββ
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
βββββ
βββββ
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
βββββ
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.
βββββ
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 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": "Download my latest file, the iOS 15 UI Kit for Figma Community.
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:
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": "March 20, 2023
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.
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!
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.
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.
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": "Figma chart templates & Graphs UI kit. Contains most common data visualization patterns from simple bar charts, to complicated heatmaps and financial candlesticks.
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! π
βββββ
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.
βββββ
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.
βββββ
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
βββββ
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.
βββββ
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.
βββββ
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.
---
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:
β¦ 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
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.
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.
Note: All images/photos in the preview are included π
Assets: Unsplash, unDraw, Freepik
---------------------------------------------------------------------------------------------------
Buy Me a Coffee: π
---------------------------------------------------------------------------------------------------
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
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": "-----------------------------
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.
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.
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": "Over 75 free illustrations for your design/product.
As Usual
No attribution is needed.
All vectors and all yours.
Free for commercial use.
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):
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.
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.
Note: All images/photos in the preview are included π
---------------------------------------------------------------------------------------------------
Buy Me a Coffee: π
---------------------------------------------------------------------------------------------------
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
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.
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!
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.
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.
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.
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": "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.
You'll need to install SF Pro from Apple to customize the iOS components, which you can download here.
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.
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.
Note: All images/photos in the preview are included π
---------------------------------------------------------------------------------------------------
Buy Me a Coffee: π
---------------------------------------------------------------------------------------------------
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
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!
---
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