Figma Tutorials & Templates on Speckyboy Design Magazine https://speckyboy.com/topic/figma/ Design News, Resources & Inspiration Wed, 27 Dec 2023 18:44:15 +0000 en-US hourly 1 25+ Best Free Resume Templates for Figma https://speckyboy.com/free-figma-resume-templates/ https://speckyboy.com/free-figma-resume-templates/#respond Thu, 30 Nov 2023 07:19:44 +0000 https://speckyboy.com/?p=150897 A collection of free to download and use Figma templates for creating professional and beautifully designed resumes and CVs.

The post 25+ Best Free Resume Templates for Figma appeared first on Speckyboy Design Magazine.

]]>
Let’s face it: today’s job market is tougher than ever. We work in a competitive global landscape, and it can be difficult to stand out! That’s where a powerful and striking resume design comes in.

But hiring managers may see hundreds of resumes. How can you help ensure that yours gets noticed? Resume templates for Figma are a great starting point.

These slick, polished, modern designs bring your skills and experience to the forefront. They let you share your qualifications and work hostory in moments. And even better, you don’t have to be a design expert to get the full benefits from them.

In this collection, you’ll find resume templates for Figma. They’re free to download and use. They span a wide array of styles and design aesthetics, so it will be easy to find the layout that best fits your skills and your sense of style.

Don’t hesitate to explore these designs! Find your favorite, and get to work building a fantastic resume. It’s the first step on in your journey toward landing your dream job. One last thing, make sure you include everything that’s expected from a professional resume!


The post 25+ Best Free Resume Templates for Figma appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/free-figma-resume-templates/feed/ 0
50+ Best Free Mobile UI Kits for iOS & Android https://speckyboy.com/free-mobile-ui-kits-ios-android/ https://speckyboy.com/free-mobile-ui-kits-ios-android/#comments Sun, 17 Sep 2023 07:32:08 +0000 http://speckyboy.com/?p=71004 Free iOS & Android mobile UI kits with an extensive collection of customizable screens & UI elements. For Photoshop, Figma, Sketch, and XD.

The post 50+ Best Free Mobile UI Kits for iOS & Android appeared first on Speckyboy Design Magazine.

]]>
Designing the UI of a mobile app from scratch can be both fun and challenging, especially when it comes to creating the user interface (UI). It can be a time-consuming and arduous task that requires a great deal of attention to detail.

To help streamline the design process and get you started on your next project faster, we’ve put together a collection of the best free mobile UI kits. These UI kits are compatible with popular design tools like Photoshop, Figma, Adobe XD, Sketch App, or Illustrator.

All of the UI kits in our collection have been designed with either iOS or Android in mind and come with an extensive collection of customizable screens and mobile UI elements. With hundreds of various UI components to choose from, you can easily create a polished and visually appealing mobile app that stands out from the crowd.

In addition, our selection of free mobile UI kits features high-resolution displays and minimal design aesthetics, which align with current design trends. By using these UI kits, you can create a mobile app that not only looks great but also offers an intuitive and user-friendly experience for your users.


The post 50+ Best Free Mobile UI Kits for iOS & Android appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/free-mobile-ui-kits-ios-android/feed/ 2
50+ Free Web & Mobile UI Templates for Figma https://speckyboy.com/free-web-mobile-figma-ui-templates/ https://speckyboy.com/free-web-mobile-figma-ui-templates/#respond Mon, 21 Aug 2023 14:49:23 +0000 https://speckyboy.com/?p=114822 With these free Figma UI kits, you will be able to prototype your next web or mobile design much quicker. Add them to your library today!

The post 50+ Free Web & Mobile UI Templates for Figma appeared first on Speckyboy Design Magazine.

]]>
Designing an effective user interface is a complex task that requires careful consideration of various design elements, including layout, typography, color, and usability. However, with the right tools, the process becomes much more manageable.

Figma is a widely popular prototyping tool for designers, known for its range of user-friendly features that make creating beautiful interfaces easier. As a collaborative design tool, it allows multiple users to work on a project simultaneously, making it perfect for large or remote teams.

Designing an interface from scratch can be time-consuming, which is why using a web or a mobile UI kit is a great way to speed up the design process. By using a premade design kit, you don’t have to spend time creating each UI element from scratch. Instead, you can focus on laying out those elements in the most logical and visually appealing way. A UI kit can also help ensure consistency throughout your design, making your interface look professional and polished.

We’ve curated a collection of the best free mobile and web UI kits and templates for Figma. Check them out below, download them, and save time on your next UI design project. With these UI kits, you’ll be able to create high-quality interfaces in a fraction of the time it would take to design them from scratch.

If you’re new to Figma, you might like to a look at collection of Figma tutorials.


Figma Professional


Free Figma Mobile UI Kits

iOS 16 UI Kit for Figma

This free Figma file comes with a multitude of components and templates to help you get up and running quickly on your next iOS project.

iOS 16 UI Kit for Figma Free Figma Web UI Kit Template

Nucleus UI Component Library

Nucleus is a free UI library of 300 components and over 30 screens. It will give you all of the building blocks you need to rapidly design your next mobile app.

Nucleus UI Component Library free figma ui kit

Onir Mobile App Landing Page Template

This template is easy to use and customize and includes well-organized layers, 15 artboards, and three page variations for creating mobile landing pages.

Onir - Mobile App Landing Page Figma Template free figma ui web layout template

Grada Figma UI Kit

This is a beautiful and dark UI mobile kit for Figma. It has a plethora of elements needed to create rich mobile interfaces, so be sure to add it to your library.

Grada Figma UI Kit free figma ui mobile kit

Notes Mobile App Template for Figma

Notes Mobile App Template for Figma Template free figma ui web layout template

Survival Kit for iOS Design

Survival Kit for iOS Design free figma template

Ticketapp Figma Template

If you’re working on a ticketing app, this UI kit will come in handy. It works with both Figma and Sketch and includes elements such as ticket buying screens, seat selection, and more.

Ticketapp Figma Template free figma ui mobile kit

Material-UI React Components in Figma

This kit is based on Google’s Material Design, and it incorporates components such as bars, avatars, badges, expansion panels, and more. The kit is free to use in personal and commercial projects and is fully compatible with React Material-UI library.

Material-UI React Components free figma ui mobile kit

Chat Dashboard Figma Template

Consider this free Figma UI mobile kit when working on a chat dashboard. The kit features a full-screen interface for a chat app, and you can easily customize it to match your project needs.

Chat Dashboard free figma ui mobile kit

Finance Wireframe Template for Figma

These finances wireframes for Figma will come in handy whenever you need to create an interface for a payment processor, banking, accounting, or any other finance app. It can be used in personal and commercial projects.

Finance Wireframe free figma ui mobile kit

Deca Kit for Figma

Deca is a beautifully designed UI library of components. With over 150 components, you will find everything you need to complete your next project quickly.

Deca web free figma ui kit

Login Wallet Mobile UI Kit for Figma

Easily create a mobile wallet login screen with the help of this UI kit. The kit is free for personal projects and can easily be customized with your choice of colors and fonts.

Login Wallet free figma ui mobile kit

Atro Mobile Figma UI Kit

This beautiful and minimal UI kit contains 12 different screens, so you can easily bring your app vision to life. The kit includes various icons, screen elements, and fully vectorized elements.

Atro free figma ui mobile kit

iOS iPhone GUI

If you need iOS 10 UI elements, check out this kit. It was designed by the Facebook Design team and includes elements such as search bars, drawers, avatars, badges, and more.

ios free figma ui mobile kit

Free Figma Web Layout Templates

Responsive Portfolio Template

Download this 24-page responsive personal portfolio Figma template. It includes both desktop and mobile versions, and it is also compatible with Sketch and Adobe XD.

Responsive Portfolio free figma template

Bricks Wireframing UI Kit

Bricks is a extensive components library for Figma that has been designed for creating wireframes or as the starting point of your own design system.

Bricks UI Kit Free Figma Web UI Kit Template

Mechanical UI Kit 1.0

Mechanical is a free UI Kit for desktop interfaces with a full set of all components, including buttons, inputs, dropdowns, calendars, menus, toggles, sliders, and table elements.

Mechanical UI KIT 1.0 Free Figma Web UI Kit Template

Relume Library Figma Kit

With over 800 components, pages and templates, the free Relume Library Figma kit is a must download for Figma users.

Relume Library Figma Kit Free Figma Web UI Kit Template

34 Handy UI Components

34 Handy UI Components free figma template

Call To Action Blocks Figma Templates

Calls to action are one of the most important elements of any website or app. With the help of this kit, you will be able to create a high-converting call-to-action block in no time.

Call To Action Blocks free figma ui web layout template

Notable Free Email Templates

Available in both light and dark color schemes, Notable is an email design system and styleguide that comes with a collection of 30 screens.

Notable Email Template Free Figma Web UI Kit Template

Marka Email Template Generator

Marka Email Generator free figma template

Createx Website Templates

Createx is a collection of five Figma web layout templates for eCommerce, education, creative agency, digital marketing, and construction.

Createx Website Templates figma ui kit

Wireframe Library for Figma

This is a simple Figma plugin for quickly creating wireframes, prototypes, or just basic UI structures.

Wireframe Library free figma template

Breakpoints Responsive Figma Plugin

Breakpoints is a new free plugin that allows you to test responsive design layouts within a Figma frame.

Breakpoints Responsive Plugin free figma ui kit

Figma Web Dashboard & Statistics Template

Try this Figma kit if you need to make a web dashboard or a stats panel. The template includes a template in light and dark mode with a bunch of components to help you create a powerful and modern dashboard.

Web Dashboard Statistics free figma ui web layout template

Bookshop Figma Website Template

Quickly mock up a bookshop website with the help of this Figma template. The template includes an illustrated banner and is free for personal use.

Bookshop Figma Website free figma ui web layout template

Brutalist Web Kit for Figma

If you’re loving the brutalist trend, this UI kit will be right up your alley. The template includes over 70 screens with sections for testimonials, services, team members, and more. The template is free for personal and commercial projects.

Brutalist Web Kit figma ui web layout template

Free Figma Styleguide Templates & Starter Kits

Figma Starter Kit

This Figma starter kit contains basic UI elements such as forms, buttons, and basic icons. It comes in light and dark versions and is free for personal and commercial projects.

Starter Kit free figma ui styleguide kit

Paper Wireframe Kit

This simple wireframe kit is a great choice when you need to start prototyping your design quickly. All you have to do is select components you need, drop them on your screen, and start customizing them.

Paper Wireframe Kit free figma ui styleguide kit

Product Design Kit for Figma

This kit touts itself as the ultimate design kit for Figma. You can easily create high-fidelity wireframes, user interfaces, and style guides for desktop products. It’s fully customizable and free.

roduct Design Kit free figma ui styleguide kit

Dashboard UI Kit 2.0

This dashboard UI kit is an excellent choice if you need to mock up a web or mobile app dashboard. It comes with fully responsive mobile screens and includes a collection of charts, graphs, onboarding screens, a set of icons, and a detailed style guide.

Figma Design System UI Styleguide

If you need to create a design system in Figma, this kit has everything you need. The kit contains patterns, typography, color, and other settings needed to create a complete styleguide.

Design System UI Styleguide free figma kit

Eggplore Figma UI StyleGuide

This is a simple and free UI style guide for Figma that you can download, use, and adapt to your needs. The kit is free for personal and commercial projects.

Eggplore free figma ui styleguide kit

Button UI Design System for Figma

Thanks to this free UI design system, you can quickly and easily create buttons in Figma. The template is free for personal and commercial projects.

Button UI Design System free figma ui styleguide kit

Open Design Systems Repo

This is a fantastic resource for anyone that uses Figma. It is a directory that allows you to discover and download all of the open design systems currently available for Figma.

Open Design Systems Repo Free Figma Web UI Kit Template

Free Figma Icon Sets

Dripicons Figma Library

This set of Dripicons was explicitly created for Figma and can be downloaded and used in both personal and commercial projects. You can duplicate this file into your own Figma account with a single click.

Dripicons free figma ui icon set

Ripple Icon Library

The free Ripple icon set comes with over 500 icons, in three styles (line, fill and duo-tone), and all are completely editable.

Ripple Icon Library Free Figma Web UI Kit Template

Social Network Icon Collection 2022

This beautifully simple collection of 34 icons covers all major social media services, and includes both color and black & white versions.

Social Network Icon Collection free figma template

55 Crypto Logos

If you’re working on a cryptocurrency or blockchain project, this is the free icon set for you. Over fifty logos of the most popular services are included in the template.

55 Crypto Logos free figma template

Website Page Builder Icon Pack

Use this icon set if you need to create a user interface for a page builder. The set was inspired by the most popular page builders out there.

Website Page Builder free figma ui icon set

Evericons for Figma

This set contains a total of 460 icons that can be used for any project. The set is free for personal and commercial projects.

vericons free figma ui icon set

Shopping Icons for Figma

This set of icons includes 60 icons which are perfect for an online store, shopping application, or website. The icons have adjustable line width and can be used in Figma as well as Illustrator, Photoshop, and more.

Shopping Icons free figma ui icon set

Figma Social Icons

Try this set if you want to add social media icons to your designs. The set contains over 100 icons that are easy to customize and can be used in personal and commercial projects.

Social Icons free figma ui icon set

Computer and IT Figma Icons

Check out these computer and IT icons for Figma if you’re working on an IT project. The kit contains 60 icons.

Computer and IT figma ui icon set

Material Icons Figma Library

This free collection of icons comes with over 1000 icons that you’ll be able to use in any type of project and prototype. They can be used in commercial and personal projects.

Material Icons free figma ui icon set

Figma Font Awesome 5 Icon Component Library

This icon set is based on Font Awesome icons and contains over 1200 unique icons which are neatly categorized. They can be downloaded and used for free in any personal project.

Font Awesome 5 Icon Component Library free figma ui icon set

Figma Entypo Icon Component Library

This library of Entypo icons was made specifically for Figma. It comes with 411 free and premium vector icons ready to use for your next UX design project. It can be used for free in personal projects.

Entypo free figma ui icon set

Free Figma Flowchart Templates

Greyhound Flowchart Templates for Figma

This set of flowchart templates comes with more than 200 cards to help you quickly create flowchart and sitemap prototypes. The kit is free for personal and commercial projects.

Greyhound free figma flowchart data table

Design Presentation Template for Figma

This free template has been designed so that you can quickly create professional presentations of your UI creations. It comes with a variety of completely customizable buttons, charts, and text blocks so you can make your presentation your own.

Design Presentation Template free figma template


Figma makes it easy to quickly create beautiful prototypes for mobile apps, web apps, dashboards, sitemaps, and any other UI project you need. With the help of these Figma UI kits, you will be able to prototype your designs more quickly, so be sure to add them to your library today.

More Free UI Resources

The post 50+ Free Web & Mobile UI Templates for Figma appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/free-web-mobile-figma-ui-templates/feed/ 0
30 Free Social Media Icon Sets for UI Designers https://speckyboy.com/social-icon-sets/ https://speckyboy.com/social-icon-sets/#respond Sun, 13 Aug 2023 07:02:32 +0000 http://speckyboy.com/?p=43620 The icons, glyphs, or logos of popular social media platforms such as Facebook, Twitter, Snapchat, Instagram, LinkedIn, and others, are often used on websites, mobile apps, email campaigns, and YouTube...

The post 30 Free Social Media Icon Sets for UI Designers appeared first on Speckyboy Design Magazine.

]]>
The icons, glyphs, or logos of popular social media platforms such as Facebook, Twitter, Snapchat, Instagram, LinkedIn, and others, are often used on websites, mobile apps, email campaigns, and YouTube videos to provide users with an easy way to follow and engage with a person, brand or organization on social media.

By using recognizable social media icons, you can make it easier to be found and followed on social media. Additionally, a consistent and professional icon design can improve the visual design of your UI.

There are many options for free social media icon sets. They come in various styles, sizes, colors, and formats, so you will need to pick the set that best fits the specific needs of your project.

In this collection, we have thirty professionally designed free social media icon sets to help narrow your search. They all include the icons and logos of all the major social media services – and some of the lesser-known – and come in various popular formats (icon fonts, Figma, Adobe XD, PSD, AI, EPS, Sketch, PNG, and SVG).


The post 30 Free Social Media Icon Sets for UI Designers appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/social-icon-sets/feed/ 0
20 Free Payment Method & Credit Card Icon Sets https://speckyboy.com/free-payment-method-credit-card-icon-sets/ https://speckyboy.com/free-payment-method-credit-card-icon-sets/#respond Sat, 05 Aug 2023 21:00:20 +0000 http://speckyboy.com/?p=71596 A collection of payment method credit card icon sets you can freely use on your own web and mobile eCommerce sites and projects.

The post 20 Free Payment Method & Credit Card Icon Sets appeared first on Speckyboy Design Magazine.

]]>
One small and often overlooked aspect of web and mobile app eCommerce design is those tiny icons used to signify the various accepted payment methods. They’re an essential element of any eCommerce site. Instantly recognizable, they give buyers a visual stamp of security, making your site a bit more trustworthy.

In this collection, we have selected twenty professionally designed payment method icon sets that you can freely use on your eCommerce site.

You will find free icon sets for all major payment gateways, including VISA, MasterCard, American Express, Cirrus, PayPal, BitCoin, and many more. They’re available in PNG, PSD, EPS, SVG, Adobe XD, Figma, and Sketch. Who doesn’t love free icon sets?


The post 20 Free Payment Method & Credit Card Icon Sets appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/free-payment-method-credit-card-icon-sets/feed/ 0
Top 50 Free Web UI Kits & Templates https://speckyboy.com/free-web-ui-kits/ https://speckyboy.com/free-web-ui-kits/#respond Fri, 04 Aug 2023 15:04:20 +0000 https://speckyboy.com/?p=82045 A collection of free web UI kits to help designers create stunning websites and web applications in Photoshop, Sketch, Figma, and XD quickly.

The post Top 50 Free Web UI Kits & Templates appeared first on Speckyboy Design Magazine.

]]>
Web UI kits are pre-designed collections of user interface components that can help you save time and streamline your design process. These kits typically include common design elements such as buttons, menus, forms, and icons.

Rather than starting from scratch, you can use a UI kit as a foundation for a design and customize it to fit your specific project requirements. This can be especially useful when working on tight deadlines or creating a UI design for clients with specific design requirements.

The free UI kits we have for you here have been created by talented designers and can help ensure that your website, application, or admin dashboard is both aesthetically pleasing and user-friendly. A well-designed UI kit can help establish a consistent visual identity, which is essential for creating a cohesive and polished website.

This is a curated collection of our favorite free web UI kits. These kits come in various styles and popular formats like Photoshop PSD, Figma, Sketch App, and Adobe XD. We hope you find these resources helpful and use them to create beautiful and functional designs.


The post Top 50 Free Web UI Kits & Templates appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/free-web-ui-kits/feed/ 0
The 10 Best Free Instagram Story Templates https://speckyboy.com/free-instagram-story-templates/ https://speckyboy.com/free-instagram-story-templates/#respond Wed, 02 Aug 2023 06:25:47 +0000 https://speckyboy.com/?p=105132 The best free Instagram Story templates that will allow you to create and share consistently and get them published quicker.

The post The 10 Best Free Instagram Story Templates appeared first on Speckyboy Design Magazine.

]]>
Crafting a new Instagram story every time can be a hassle, especially if you are aiming for a consistent and polished look. That’s why using Instagram Story templates can be a game-changer. With the right templates, you can save time and effort while creating engaging stories that reflect your brand’s style and vibe.

In this collection, we’ve gathered some of the best Instagram Story templates that are currently available. They come in various formats, including Photoshop PSD, Figma, Adobe XD, and Sketch. With these templates, you won’t have to waste your precious time browsing for the perfect fit.

Whether you’re a social media manager, a business owner, or just an Instagram enthusiast, these templates will help you maintain a consistent and professional look across all your stories. So go ahead, give them a try, and see how much easier your Instagram game becomes!

Figma Instagram Story Templates (Figma Format)

With various layouts, graphics, and text styles, you can customize these Instagram templates to match your personal or brand’s aesthetic and create professional-looking stories in minutes. Whether you’re a social media manager or influencer, these Figma story templates will help you elevate your Instagram presence.

Figma Instagram Story Templates social media template pack format photoshop psd

Vana – Free Fashion Social Media Instagram Templates (Photoshop PSD & Sketch App Format)

The Vana template is a stylish template pack for Instagram stories that can be edited in Photoshop and Sketch. Thanks to the minimal design, you can use these templates for any type of post, and you’ll receive eight templates in total.

Vana Fashion instagram social media template pack format sketch app

Instagram Stories Vol. 4 (Photoshop PSD Format – Envato Elements)

If you’re looking for an Instagram story template that features elegant and stylish typography, you should try the Instagram Stories template. The download pack includes nine Photoshop files and features a fresh color scheme.

stories instagram social media template pack format Adobe Photoshop

Tanska – Free Instagram Template Collection (Photoshop PSD Format)

Consider the Tanska templates if you’re promoting a Scandinavian brand or lifestyle. This collection comes with ten unique templates featuring soft color palettes and stylish geometric shapes.

Tanska Free instagram social media template pack format Adobe Photoshop

Fallen – Instagram Pack (Photoshop PSD Format – Envato Elements)

The first template on this list comes with an elegant design that would be great for a fashion brand or influencer. The template includes ten Instagram Story templates and ten regular Instagram posts so you can keep everything cohesive.

Fallen pack instagram social media template pack format Adobe Photoshop

Free Instagram Story Templates (Photoshop PSD Format)

This free collection of Instagram Story templates features minimal typography and puts the main focus on photography. They are an excellent choice for a fashion, food, or travel brand that wants a creative way to share behind-the-scenes photos.

Story Templates instagram social media template pack format Adobe Photoshop

Glorious Instagram Quotes Stories Pack (Photoshop PSD Format – Envato Elements)

Quotes are one of the most engaging posts on Instagram, so if you’re looking to motivate or inspire your audience, check out this pack. You’ll get access to more than 50 easy-to-edit quote templates – simply replace the quote with your own, customize the colors, and save the design.

Glorious Instagram Quotes Stories instagram social media template pack format Adobe Photoshop

Hepburn Free Instagram Templates (Photoshop PSD Format)

A feminine brand or a brand that caters to a female audience would do well with this Instagram template pack. The collection includes nine stylish templates with elegant typography and a soft color palette. You’ll find templates for quotes, regular posts, sales announcements, and more.

Hepburn instagram social media template pack format Adobe Photoshop

Instagram Stories Vol. 3 (Photoshop PSD Format – Envato Elements)

Instagram Stories Vol 3 is a collection of fun and fresh story templates with various designs. You can make use of the templates to promote your sale, special offers, or announce new product launches, as well as share a quote or a behind-the-scenes photo.

Stories Vol. 3 instagram social media template pack format Adobe Photoshop

Everyday Adventure Free Instagram Templates (Photoshop PSD Format)

The Everyday Adventure Instagram templates collection is a multipurpose set of social media templates that are perfect for promoting travel, lifestyle, fashion, and other types of posts on Instagram. They have a colorful design and modern typography that’s easy to customize.

Everyday Adventure Free instagram social media template pack format Adobe Photoshop

Free Instagram Stories Template (Adobe Photoshop & Sketch App Format)

Check out this free Instagram Stories template with a trendy design. The template includes a well-organized, layered Photoshop file and features a material color scheme paired with modern typography.

Free Instagram Stories Template instagram social media template pack format Adobe Photoshop sketch app

Lush Free Social Media PSD Templates for Instagram (Adobe Photoshop & Sketch App Format)

An elegant set of 24 Instagram Stories template that makes it easy not only to promote your brand and share quick updates but also to announce product launches, sales, and more. The template comes with smart shapes, so it’s easy to replace the demo images and text with your own.

Lush Free PSD instagram social media template pack format Adobe Photoshop sketch app

Free Instagram Story Mockup Templates (Photoshop PSD Format)

The free Instagram Story Mockup templates include four editable Photoshop files. All of the files use smart objects, so you can easily add your photos. This template collection features an iPhone mockup, so you easily showcase your app designs.

Free Instagram Story Mockup social media template pack format Adobe Photoshop

Instagram Stories Free PSD Template (Photoshop PSD Format)

This minimal template includes several well-organized Photoshop files that are easy to edit. Thanks to a simple design, you can easily incorporate your brand colors and tweak the typography to your brand fonts.

Stories instagram social media template pack format Adobe Photoshop

Free Template Instagram (Adobe XD Format)

This free Instagram Story template stands out as it was designed with Adobe XD in an effort to improve the Instagram Stories’ layout. Nonetheless, it’s still a stylish template that you can use to engage your followers and grow your following.

free instagram social media template pack format adobe xd

Free Instagram Stories Templates (Photoshop PSD Format)

This free template features two different designs; one for sharing quotes and one that’s perfect for quick announcements and getting your followers to take action. The template features a neutral color palette, but you can easily customize it to your brand’s colors.

free stories instagram social media template pack format Adobe Photoshop

How Can You Use Instagram Story Templates?

Instagram Story templates can serve various purposes and offer multiple creative opportunities. Here are some things you can do with Instagram Story templates:

  1. Share Personal Updates: Use templates to share updates about your day, travel adventures, personal milestones, or even your current mood. The above templates will include spaces for images, captions, and other elements to help you express yourself.
  2. Promote Events or Sales: Businesses and creators can use templates to promote events, sales, product launches, or special offers.
  3. Engage Your Audience: Some templates may include interactive features like polls, quizzes, and questions. They can be used to engage your followers, gather opinions, or encourage them to interact with your content.
  4. Showcase Products or Services: If you’re a business owner, you can use templates to showcase new products or services.
  5. Share Quotes & Inspiration: Templates often include space for quotes or inspirational messages. They can be used to motivate and uplift your audience.
  6. Tutorials & How-Tos: Create step-by-step tutorials or how-to guides using templates. This can be particularly useful for sharing tips related to your niche or expertise.
  7. Announce Giveaways or Contests: Use the templates to announce and provide information about giveaways, contests, or challenges.
  8. Travel Diaries: Share your travel experiences using templates that allow you to organize photos, captions, and maps to show your journey.
  9. Share Recommendations: Whether books, movies, places to visit, or products to try, templates can help you curate and share recommendations with your followers.
  10. Share Fun Facts or Trivia: Educate and entertain your audience with interesting facts, trivia, or little-known information related to your niche.

Remember that Instagram Story templates can be customized to match your style and branding, making your Stories more visually cohesive and engaging.

Stand Out With Your Instagram Stories

Instagram stories are the perfect tool to keep your followers engaged and interested in your brand. They’re quick, fun, and effective, and they can help you boost your Instagram engagement rate like never before.

With these modern Instagram story templates, you’ll be able to create stories that look professional, polished, and unique without spending hours brainstorming and designing. Plus, you’ll be able to capture your audience’s attention and make a lasting impression on them.

More Social Media Templates & Resources

The post The 10 Best Free Instagram Story Templates appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/free-instagram-story-templates/feed/ 0
50 Free Wireframe Templates for Mobile, Web & UX Design https://speckyboy.com/free-wireframe-templates-mobile-app-web-ux-design/ https://speckyboy.com/free-wireframe-templates-mobile-app-web-ux-design/#comments Wed, 19 Jul 2023 10:25:03 +0000 https://speckyboy.com/?p=75798 A collection of UI templates and kits for wireframing websites and mobile applications in Photoshop, Illustrator, Figma, or Sketch.

The post 50 Free Wireframe Templates for Mobile, Web & UX Design appeared first on Speckyboy Design Magazine.

]]>
Wireframing is an essential step in the initial stages of a UI project, allowing you to define the information hierarchy of your mobile app or web design project and plan for functionality and user flow. By stripping away non-essential design elements, wireframes help to communicate the layout effectively.

Whether you use a whiteboard, pencil and paper, web-based tools, or UI design applications, effective wireframing and planning play a crucial role in the success of your product.

In addition to the many readily available wireframing tools, there are free wireframing templates available for UI applications like Photoshop, Illustrator, Figma, and Sketch.

We’ve curated a collection of free wireframing templates to make your job easier. These templates are customizable to fit your specific project requirements, allowing you to streamline the wireframing process and focus on defining the layout and functionality of your mobile app or web design project.


The post 50 Free Wireframe Templates for Mobile, Web & UX Design appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/free-wireframe-templates-mobile-app-web-ux-design/feed/ 4
25 Fantastic Tutorials For Learning Figma https://speckyboy.com/learn-figma-tutorials/ https://speckyboy.com/learn-figma-tutorials/#respond Fri, 14 Jul 2023 07:15:07 +0000 https://speckyboy.com/?p=146123 From UI basics to more advanced techniques, with the help of these tutorials, you'll be able to learn and master Figma in no time.

The post 25 Fantastic Tutorials For Learning Figma appeared first on Speckyboy Design Magazine.

]]>
Figma is a browser-based design tool that allows designers, developers, and creative teams to create, edit, and collaborate on UI designs. Its robust interface and real-time collaboration features have made it a popular choice.

For beginners, tutorials are a great way to learn how to use Figma effectively. These tutorials offer step-by-step visual instructions that are easy to follow, enabling you to quickly learn new skills and improve your techniques.

Our round-up includes the best Figma tutorials available online. These tutorials cover everything from UI basics to more advanced techniques, and they will help you master Figma in no time. By following these tutorials, you’ll learn how to navigate the interface, create and edit designs, and make the most of Figma’s features.

We have also published a collection of free Figma UI templates.


Figma Professional


Figma Tutorials For Beginners

To get started, let’s explore some winning resources for beginners. If you’re totally new to Figma, these handy tutorial guides will help you get up and running fast.

What is Figma? (Video Tutorial)

Are you just curious about Figma and what it can do? Those questions and many more are answered in this brief, bite-sized tutorial video for 2023.

What is Figma Tutorial

Learn Figma In Under 10 Minutes (Video Tutorial)

Ready to get started with Figma? This quick intro video is a great way to get going. It covers the basics in less than ten minutes!

Learn Figma In Under 10 Minutes

Design a Website from Start to Finish with Figma (Video Tutorial)

Do you want to build an entire website in Figma but need help figuring out where to start? This video is here to help, showing you how to build an entire website from scratch using Figma.

Design a Website from Start to Finish with Figma

Introduction to Figma

Prefer written tutorials over videos? Try this one, with handy step-by-step guides to help you find your way around Figma and its basic features.

Introduction to Figma

A Complete Figma Tutorial for Beginners

This complete guide is another resource for Figma newbies. It assists you with getting up and running, building unique content with Figma quickly.

A Complete Figma Tutorial for Beginners

A Beginners Tutorial to Figma (Video Tutorial)

Many of us learn best by doing. This complete video guide showcases and explains the essentials of Figma.

A Beginners Tutorial to Figma

How to Use Figma for Your Next Project

Last but not least, start your Figma journey with this introductory tutorial. A sample design is used for a real-world example. You can follow along and learn how to start making edits of your own.

How to Use Figma for Your Next Project

Figma Web Design Tutorials

Now, let’s dive into the details. You’ll learn how to start using Figma to design amazing websites of your own in no time. Read on!

How to Use Figma for Website Design

Figma is crafted for robust website designs. Learn how to use Figma to construct sleek, readable layouts in just a few clicks.

How to Use Figma for Website Design

Advanced Features in Figma Explained (Video Tutorial)

Building a workflow in Figma is a key part of success. This video guide shows off several productivity tools that will help you work smarter and create designs faster.

Advanced Features in Figma Explained

Variants in Figma Tutorial (Video Tutorial)

Variants in Figma help you make alternate versions of a single object. This video shows you how to use them and offers ideas for how to leverage their power effectively.

Variants in Figma Tutorial

Figma Auto Layout Tutorials

In this set of tutorials, you will learn how to use Auto Layout in Figma. With it, you can make dynamic designs that adapt to different screen sizes and layouts.

Auto Layout & Components in Figma (Video Tutorial)

You’ll learn how to use two of Figma’s essential features here. They are auto layout and components, both of which are covered here in detail. You’ll watch the features at work and learn to troubleshoot common issues.

Auto Layout Components in Figma

Getting Started with Auto Layout in Figma (Video Tutorial)

Auto Layout in Figma is a newer feature for building advanced designs. It can seem daunting, but this tutorial simplifies things. It’s detailed without becoming overly lengthy.

Getting Started with Auto Layout in Figma

Learn Auto Layout in Figma

Another option is this written Auto Layout article. It stands out for its detailed descriptions of Auto Layout features and how they work. Use it to boost your understanding of Figma’s creative options.

Learn Auto Layout in Figma

Figma Auto-Layout with Responsive Components Tutorial (Video Tutorial)

Combine the power of Auto Layout and components using the skills you’ll learn in this tutorial. They help you maintain a steady design aesthetic across projects, even while working faster.

Figma Auto-Layout with Responsive Components Tutorial

Figma Prototype & Button Tutorials

Prototypes in Figma let you create interactive mockups of designs. Buttons are one of the critical parts of creating interactive prototypes. Here, you’ll learn to use both.

Working with Figma Button Components

Components are user interface elements in Figma. Learn how to build and work with them in this task-based tutorial article.

Working with Figma Button Components

The Correct Way to Prototype in Figma (Video Tutorial)

Prototyping helps you see how users will experience your finished product. It ensures your content works flawlessly and stays current. To do it right, turn to this tutorial guide for Figma.

The Correct Way to Prototype in Figma

Create & Test a Prototype in Figma

Robust and detailed, this tutorial shows you how to create a prototype in Figma. You’ll learn how to connect key parts of your design, and then share it with others.

Create & Test a Prototype in Figma

How to Create a Button With a Hover Functionality in Figma (Video Tutorial)

In this guide, you’ll learn how to create a button in Figma. This is an incredibly common use case, and here, it’s simplified so that you can get to work quickly.

How to Create a Button With a Hover Functionality in Figma Tutorial

Three Tips for Building Complex Prototypes in Figma

Here, you’ll learn three tips for complex Figma prototypes. They will help you dial in the specifics you need to put your work to the test.

Three Tips for Building Complex Prototypes in Figma Tutorial

Other Figma Tips & Tricks

To close out our tutorial roundup, we’ve compiled even more helpful resources. These written guides and videos help you make the most of Figma by unlocking its most powerful features.

10 Figma Hacks for Boosting Your Productivity

Users of every skill level can always enjoy learning new skills. Here, ten Figma tips and tricks are featured to help you do your very best work. It’s a fast read that may save you hours of work.

15 Tips to Design Faster in Figma (Video Tutorial)

Expert Figma users know tips and tricks that save time. Here, 15 of these are compiled into one fun video. It’s essential viewing if you want to master Figma.

How to Export Figma to HTML

Exporting HTML is easy in Figma – and you don’t have to learn to code! Learn exactly how in this written tutorial. Prefer a video? You’ll find a link here too.

How to Export Figma to HTML Tutorial

Advanced Figma Tips & Tricks (Video Tutorial)

Advanced Figma features help you focus on details and fine-tune designs. Here, you’ll learn how to scrub fields, save image styles, add properties, and so much more.

Advanced Figma Tips Tricks Tutorial

How to Build a Design System in Figma

You don’t have to construct design systems from scratch. Figma supports work just like this, and the fundamentals are mapped out in this tutorial guide.

How to Build a Design System in Figma

What is FigJam?

FigJam is a whiteboard built by Figma that works online. It’s an effective tool for design and collaboration. Learn the basics and get to work with FigJam after learning about the features in this tutorial.

What is FigJam by Figma

The post 25 Fantastic Tutorials For Learning Figma appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/learn-figma-tutorials/feed/ 0
20 Free Mobile UI & Wireframe Kits for Sketch App https://speckyboy.com/free-mobile-ui-wireframe-kits-sketch-app/ https://speckyboy.com/free-mobile-ui-wireframe-kits-sketch-app/#respond Sat, 08 Oct 2022 15:13:16 +0000 https://speckyboy.com/?p=105060 Collection of the best free mobile UIs and wireframe kits for Sketch App that you can use as a starting point for your next design.

The post 20 Free Mobile UI & Wireframe Kits for Sketch App appeared first on Speckyboy Design Magazine.

]]>
Sketch is a widely-used design tool for the Mac that enables designers to create stunning user interfaces. A user-friendly interface, an extensive library of plugins, customizable vector graphics, regular updates, and collaborative features make Sketch a versatile and efficient tool for designing mobile UIs and wireframes.

Its popularity has soared in recent years. As a result, numerous resources that cater specifically to Sketch users have become available, which helps make the UI design process faster and more efficient.

This collection features some of the best free mobile UIs and wireframe kits available for Sketch App. They can be used as a starting point for your next mobile UI designs or as inspiration to fuel your creativity.



H1 Free Mobile UI Kit (Free)

The H1 Free Mobile UI Kit comes with an impressive number of elements that are sure to get your creative juices flowing. You’ll find 470 different elements spread out over 130 templates. You can use this kit for both Android and iOS devices.

h1 sketch mobile app ui kit sketch ux format free design creative sketch.app

Chameleon UI Kit (Envato Elements)

This fresh and stylish mobile UI kit includes more than 120 unique screens. The kit can be used with both Photoshop and Sketch and also comes with 15 unique themes, 70 icons, and hundreds of neatly organized components.

Chameleon sketch mobile app ui kit sketch ux format design creative sketch.app

Fusion Free UI Kit for Sketch (Free)

The next kit on the list is a perfect choice for designing a shopping app. This template comes with 13 screens with layered and neatly organized elements that are easy to edit. Photoshop and Sketch formats are available.

fusion sketch mobile app ui kit sketch ux format free design creative sketch.app

Free Mobile eCommerce UI Kit for Sketch (Free)

Try this Mobile eCommerce UI kit if you need an elegant design for a shopping app or a mobile store. You’ll find eight different app pages and a web page to accompany the mobile app design.

eCommerce sketch mobile app ui kit sketch ux format free design creative sketch.app

Momento Free Mobile Sketch UI Kit (Free)

If you need a kit for a social media app, look no further than this template. It contains several different screens with all the elements you’ll need to create a powerful social media app.

Momento sketch mobile app ui kit sketch ux format free design creative sketch.app

Profile Mobile UI Collection (Envato Elements)

The Profile Mobile UI Collection is a set of 15 mobile screens that are fully customizable, well-organized, and designed with iOS devices in mind. The standout feature of this template collection is the flat design style.

profile collection sketch mobile app ui kit sketch ux format design creative sketch.app

Rodman Mobile UI Kit (Envato Elements)

Rodman is a gorgeous mobile UI Kit with a clean and light design. It comes with 80+ layouts in 7 categories and can be used to design any type of app.

rodman sketch mobile app ui kit sketch ux format design creative sketch.app

Free Material UI Kit for Sketch (Free)

If you love Material Design, don’t miss this Material UI kit. Packed with various screens and icons, you’ll be able to knock out a mobile app design in no time with this kit.

material design sketch mobile app ui kit sketch ux format free design creative sketch.app

Mobile Wireframe Kit (Envato Elements)

Try this Mobile Wireframe Kit for your next design. Packed with 90+ mobile screens, a collection of 16 categories, and hundreds of elements, this kit works with both Sketch and Illustrator. It also includes a handy collection of tools and flowchart templates.

wireframe sketch mobile app ui kit sketch ux format design creative sketch.app

Free iOS iPhone GUI (Free)

If you need an iPhone GUI mockup, check out this free Sketch kit. The kit was designed by Facebook’s design team and includes all the elements you need to create a stunning mobile app.

ios iphone ipad gui facebook sketch mobile app ui kit sketch ux format free design creative sketch.app

Vera Block for Sketch (Free)

Vera Block is an impressive collection of mobile screens and components with a trendy design. You can use them in a variety of projects, and the kit comes in Sketch and Photoshop format.

vera block sketch mobile app ui kit sketch ux format free design creative sketch.app

Zoomie – Social Media Mobile App for Sketch (Envato Elements)

The Zoomie kit is another excellent choice if you’re working on a social media app design. This kit contains a grand total of 15 screens and features a modern design.

Zoomie Social Media sketch mobile app ui kit sketch ux format free design creative sketch.app

Music Mobile App Kit (Envato Elements)

This kit is the perfect starting point for mobile music-related apps. It comes with 30+ carefully designed mobile screens that will help you to prototype, design, and build any music-related app.

music sketch mobile app ui kit sketch ux format design creative sketch.app

Relate – Clean & Simple UI Kit for Mobile (Free)

The Relate kit features a modern and minimal design with 45 unique templates, 19 categories, and more than 99 various elements. The template follows the material design best practices, so don’t miss it if you love material design.

Relate Clean Simple sketch mobile app ui kit sketch ux format free design creative sketch.app

Crypto Wallet Mobile App Concept Template (Free)

Consider this Crypto Wallet Mobile App template if you need to design a mobile wallet app. The template contains neatly organized files for the dashboard, the trading screen, and the currency trend.

Crypto Wallet Concept sketch mobile app ui kit sketch ux format free design creative sketch.app

Messagly Free UI Kit for Sketch (Free)

This UI kit is a perfect choice for a social messaging app. The template comes with 13 screens and dozens of unique elements to help you get started with your design.

Messagly sketch mobile app ui kit sketch ux format free design creative sketch.app

Harmony Free UI Kit for Sketch (Free)

This UI kit was designed with a hiking app in mind. It features a clean and fresh design with over 10 iOS ready core screens designed in vector and based on symbols.

Harmony sketch mobile app ui kit sketch ux format free design creative sketch.app

Material Design Wireframe Kit v_02 for Sketch (Free)

This collection is perfect for any lover of Material Design. It contains an impressive number of more than 40 screens and the designers keep adding to it so don’t miss this one.

Material Design Wireframe Kit sketch mobile app ui kit sketch ux format free design creative sketch.app

iPhone Wireframe Template for Sketch (Free)

If you need to design an iPhone app, this wireframe template is an excellent choice. The kit comes with everything you need for an app design, including screens, buttons, headers, alerts, input fields, and more.

iPhone Wireframe ios sketch mobile app ui kit sketch ux format free design creative sketch.app


With so many fantastic Sketch UI kits and wireframes, you can quickly prototype and design any type of app. Use the kits in this collection as your starting point or simply as an inspiration for your next design project.

More Free UI Resources

The post 20 Free Mobile UI & Wireframe Kits for Sketch App appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/free-mobile-ui-wireframe-kits-sketch-app/feed/ 0