{"id":1627,"date":"2021-06-08T19:01:22","date_gmt":"2021-06-09T00:01:22","guid":{"rendered":"https:\/\/giovanirodriguez.dev\/?post_type=resources&#038;p=1627"},"modified":"2022-06-09T16:06:35","modified_gmt":"2022-06-09T21:06:35","slug":"free-figma-bootstrap-5-ui-kit","status":"publish","type":"resources","link":"https:\/\/giovanirodriguez.dev\/resources\/free-figma-bootstrap-5-ui-kit\/","title":{"rendered":"Free Figma Bootstrap 5 UI Kit"},"content":{"rendered":"\n<p>If you're looking for components that help you design faster, you need to know about Figma Bootstrap UI Kit. Keep reading to learn more:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">About the Figma Kit<\/h3>\n\n\n\n<p><strong>Figma Bootstrap UI Kit<\/strong> comprises 300+ Bootstrap 5 components that are built with an atomic design system and auto layout. Using the Assets panel, you can drag and drop ready-made components into your Figma project. Set them up in the right sidebar. Simple and fast, as it should be.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/06\/image-15.png\" alt=\"Different components from Figma Bootstrap 5 UI Kit\" class=\"wp-image-2473 lazyload\" width=\"838\" height=\"366\" data-srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/06\/image-15.png 682w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/06\/image-15-300x131.png 300w\" data-sizes=\"auto, (max-width: 838px) 100vw, 838px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 838px; --smush-placeholder-aspect-ratio: 838\/366;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/06\/image-15.png\" alt=\"Different components from Figma Bootstrap 5 UI Kit\" class=\"wp-image-2473\" width=\"838\" height=\"366\" srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/06\/image-15.png 682w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/06\/image-15-300x131.png 300w\" sizes=\"auto, (max-width: 838px) 100vw, 838px\" \/><\/noscript><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Features:<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Auto Layout<\/strong><\/li><\/ul>\n\n\n\n<p>With this feature you can easily and quickly create a website or application, saving you time and money.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Effortless resizing<\/strong><\/li><\/ul>\n\n\n\n<p>As easy as that. Resize any components horizontally or vertically like a pro!<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Over 300 organized Bootstrap 5 components built with atomic design<\/strong><\/li><\/ul>\n\n\n\n<p>It is a ready-to-use, organized component set that includes a consistent naming convention, which allows you to search and import with ease.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Design and Dev consistency<\/strong><\/li><\/ul>\n\n\n\n<p>Layers and groups are made to match the Bootstrap class names, and components are arranged exactly as specified in the Bootstrap documentation. With it, you have the ability to enhance your workflow between designer and developer, and stay ahead of the competition.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Easily customizable<\/strong><\/li><\/ul>\n\n\n\n<p>In Figma Boostrap UI Kit you are able to easily customize colors, typography and border radius for a clean and consistent presentation everywhere through instant change. The component can also be quickly updated regarding its state, which is quite useful.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion<\/h3>\n\n\n\n<p>This Figma Bootstrap UI Kit is a powerful and easy to use library for Figma that consists of components and atoms organized by category. Furthermore, it includes some of Bootstrap's colors, grids, and typography, so that you can quickly and easily customize it for your brand or product.<\/p>\n\n\n\n<p>Do we recommend it? For sure.<\/p>\n\n\n\n<p>Check the demo <a href=\"https:\/\/www.youtube.com\/watch?v=r6xTC0_O5cE\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n\n\n<p><strong>Continue reading:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/giovanirodriguez.dev\/resources\/open-doodles\/\" target=\"_blank\" rel=\"noreferrer noopener\">Open Doodles<\/a><\/li><li><a href=\"https:\/\/giovanirodriguez.dev\/resources\/bootstrap-5-cheat-sheet\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap 5 Cheat Sheet<\/a><\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"template":"","resource-category":[255],"class_list":["post-1627","resources","type-resources","status-publish","has-post-thumbnail","hentry","resource-category-componente-de-boceto"],"_links":{"self":[{"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/resources\/1627","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/resources"}],"about":[{"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/types\/resources"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/media\/1588"}],"wp:attachment":[{"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/media?parent=1627"}],"wp:term":[{"taxonomy":"resource-category","embeddable":true,"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/resource-category?post=1627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}