Top 10 Figma Plugins in 2023 | Includes AI Features!

Summary

Este video ofrece consejos de diseño de aplicaciones y destaca los 10 plugins de Figma más destacados de 2023, destacando la integración significativa de la inteligencia artificial. Plugins como Iconify, Unsplash, Color AI, Brand Fetch, Background Remover, Table Creator, Hippo AI, Content Re, Wireframe Designer, y HTML to Design permiten a los diseñadores crear interfaces de usuario más eficientemente y con mayor versatilidad. La incorporación de IA en estos plugins ha revolucionado el diseño, permitiendo tareas como la generación automática de wireframes y la conversión de páginas web en diseños de Figma, lo que ahorra tiempo y mejora la experiencia del usuario.

Takeaways

• 🚀 Los plugins de Figma han experimentado una notable incorporación de la inteligencia artificial en 2023, lo que ha transformado las capacidades de los diseñadores.
• 🔥 Cerca del 50% de los plugins destacados en la lista de 2023 utilizan la potencia de la IA, con una de ellas capaz de crear autónomamente esquemas de sitios web completos.
• 🎨 El plugin 'Iconify' es el más popular en el mercado, ofreciendo acceso a más de 100,000 íconos gratuitos de múltiples bibliotecas de íconos.
• 📸 'Unsplash' permite la integración directa de una biblioteca de imágenes de libre uso en Figma, mejorando la eficiencia en la selección de imágenes para los diseños.
• 🎨 'Color AI' es una herramienta útil para quienes están comenzando con una marca, proporcionando paletas de colores basadas en la personalidad y el enfoque de la marca.
• 🔍 'Brand Fetch' es ideal para trabajar con clientes con marcas establecidas, extrayendo y aplicando automáticamente recursos de marca desde sitios web.
• ✂️ 'Background Remover' permite la eliminación rápida de fondos de imágenes directamente en Figma, ahorrando tiempo en el proceso de edición de imágenes.
• 📊 'Table Creator' simplifica la creación de tablas complejas en Figma, utilizando componentes y Auto Layout para diseños escalables y reutilizables.
• 🖼️ 'Hippo AI' es capaz de generar una amplia variedad de ilustraciones web, proporcionando una alternativa a las imágenes de libre uso y permitiendo la vectorización de las mismas.
• 📝 'Content Re' es una herramienta para generar contenido de relleno, como nombres, direcciones y demás, facilitando la creación de mockups y prototipos.
• 📐 'Wireframe Designer' utiliza la IA para diseñar esquemas de páginas web basándose en la información proporcionada por el usuario, mejorando la eficiencia en el proceso de diseño.
• 🌐 'HTML to Design' convierte páginas web en diseños de Figma, lo que permite a los diseñadores trabajar rápidamente con layouts existentes y hacer modificaciones sin tener que recrearlos desde cero.

Q & A

¿Cuál es el tema principal del video de 'app design tips'?

El tema principal del video es la presentación de los 10 mejores plugins de Figma de 2023, destacando la integración significativa de la inteligencia artificial en ellos.

¿Qué ofrece Figma a los espectadores del video?

Figma ofrece gratuitamente el curso de Figma de alta calidad para un breve período, accesible a través del enlace en la descripción del video.

¿Qué tipos de plugins tradicionales solían ser populares en Figma antes de 2023?

Antes de 2023, los plugins populares en Figma incluían categorías repetitivas como iconos, bibliotecas de imágenes en stock y generadores de texto.

¿Cómo ha cambiado el enfoque de los plugins de Figma en 2023?

En 2023, el enfoque de los plugins de Figma ha cambiado gracias a la integración de la inteligencia artificial, lo que ha elevado lo que es posible a través de estos plugins.

¿Qué plugin menciona el video como el más popular en el mercado y por qué?

El plugin 'Iconify' se menciona como el más popular debido a su capacidad de utilizar múltiples bibliotecas de iconos y tener más de 100,000 iconos gratuitos.

¿Qué ventaja ofrece el plugin 'Unsplash' dentro de Figma?

El plugin 'Unsplash' permite a los diseñadores tener acceso directo a una biblioteca de imágenes de derechos de autor gratuito dentro de Figma y utilizarlas en sus diseños.

¿Cómo ayuda el plugin 'Color AI' a los diseñadores principiantes con su marca?

El plugin 'Color AI' ayuda a los diseñadores principiantes al proporcionar una paleta de colores basada en la personalidad y los tipos de colores que describen la marca que desean crear.

¿Qué función realiza el plugin 'Brand Fetch' y cómo es útil para los diseñadores?

El plugin 'Brand Fetch' recupera activos de una marca de un sitio web existente, como colores, fuentes e imágenes, facilitando el proceso de diseño para clientes con marcas establecidas.

¿Cómo puede el plugin 'Background Remover' ahorrar tiempo en el proceso de diseño?

El plugin 'Background Remover' ahorra tiempo al eliminar las capas de fondo de las imágenes directamente en Figma, evitando el uso de programas externos como Photoshop.

¿Qué utilidad tiene el plugin 'Table Creator' para la creación de tablas en Figma?

El plugin 'Table Creator' facilita la creación de tablas al manejar la configuración de componentes, variables y componentes anidados, permitiendo la creación de tablas escalables y reutilizables.

¿Qué características destacadas menciona el video sobre el plugin 'Hippo AI'?

El plugin 'Hippo AI' se destaca por su capacidad para generar una gran cantidad de imágenes web ilustradas, y ofrece la opción de vectorizar imágenes para su posterior edición.

¿Qué plugin menciona el video para generar contenido de texto y por qué es útil?

El video menciona el plugin 'Content Re' como una herramienta útil para generar contenido de texto, nombres, direcciones y otros elementos de texto de manera rápida y sencilla.

¿Qué hace el plugin 'Wireframe Designer' y cómo puede ser beneficioso para los diseñadores?

El plugin 'Wireframe Designer' utiliza la inteligencia artificial para diseñar esquemas básicos de páginas web, lo que puede ser muy útil para explorar conceptos rápidamente y obtener la aprobación de bajo nivel antes de diseñar la experiencia y la marca.

¿Cómo describe el video el plugin 'HTML to Design' y su utilidad para los diseñadores?

El plugin 'HTML to Design' se describe como una herramienta poderosa que convierte páginas web en diseños de Figma, manteniendo la estructura y el diseño original, lo que es útil para hacer cambios rápidos y mostrar conceptos a clientes.

¿Qué oportunidades menciona el video en cuanto a la incorporación de la inteligencia artificial en herramientas de diseño?

El video menciona que la incorporación de la inteligencia artificial en herramientas de diseño como Figma está en sus primeras etapas y abre oportunidades para encontrar maneras mejoradas de integrar esta tecnología en el futuro.

Outlines

00:00

🚀 Top 10 Plugins de Figma 2023 con Integración de IA

El video comienza con una introducción a los principales plugins de Figma para el año 2023, destacando la integración significativa de la inteligencia artificial (IA) en el diseño de aplicaciones. Los plugins tradicionalmente populares por su utilidad en iconos, imágenes y generadores de texto han sido superados por los nuevos plugins de IA que mejoran la eficiencia y el valor en el proceso creativo. El presentador menciona un plugin que puede crear autónomamente esquemas básicos de sitios web junto con texto relevante, y promueve un curso de Figma gratuito por un tiempo limitado.

05:02

🔍 Plugins Populares y su Impacto en la Eficiencia del Diseño

Seguidamente, el guionista examina los plugins que han marcado la diferencia en términos de eficiencia y valor agregado durante su exploración. Algunos plugins prometedores no cumplieron con las expectativas debido a su falta de intuición o adición de valor sustancial. Se menciona el uso del plugin Iconify, el más popular en el mercado, que permite importar iconos de múltiples bibliotecas, y Unsplash, para acceder a una biblioteca de imágenes de libre uso directo en Figma.

10:03

🎨 Herramientas de Color y Branding con Plugins de AI

El script sigue presentando herramientas como Color AI, que ayuda a definir paletas de colores basadas en la personalidad y el enfoque de una marca, y Brand Fetch, que permite importar y adaptar elementos de una marca existente en un diseño de Figma. Además, se destaca la capacidad de Background Remover para eliminar fondos de imágenes de manera eficiente, directamente desde Figma.

15:03

📊 Creación de Tablas y Generación de Contenido con Plugins

Se introduce el Table Creator, un plugin que facilita la creación de tablas con estructuras de componentes y variables reutilizables. Luego, se presenta Hippo AI, una herramienta que genera ilustraciones web a partir de una selección de estilos y modelos. El guionista también menciona Content Re, un plugin que permite rellenar tablas y otros elementos con datos ficticios, como nombres, direcciones e imágenes.

20:04

🛠 Diseño de Wireframes y Conversión HTML a Diseño de Figma

El guionista destaca el Wireframe Designer, un plugin de IA que ayuda a crear esquemas de páginas web basados en la información proporcionada por el usuario. Este plugin puede ser especialmente útil para los freelancers que buscan presentar conceptos rápidamente a sus clientes. Además, se presenta el plugin HTML to Design, que convierte páginas web en diseños de Figma, manteniendo la estructura y el diseño originales, lo que agiliza el proceso de edición y concepto en el diseño de sitios web.

25:09

🌟 Conclusión y Oportunidades en la Diseño con AI

Para concluir, el guionista reflexiona sobre el impacto que estas herramientas están teniendo en el futuro del diseño, especialmente con la incorporación de la IA en herramientas como Figma. Se alentan a los espectadores a explorar la comunidad de plugins y se menciona un próximo video sobre Fig Jam y widgets, que son herramientas diferentes a los plugins y pueden ser utilizadas en Figma y en Fig Jam.

Keywords

💡Figma

Figma es una plataforma de diseño colaborativa en línea que permite a los diseñadores trabajar en proyectos visuales de manera conjunta. En el video, Figma es la plataforma central en la que se basan los plugins mencionados, y se utiliza para demostrar cómo estos pueden mejorar la eficiencia y la experiencia del diseñador. Por ejemplo, se menciona que 'una de ellos puede autónomamente crear bocetos completos de sitios web', lo que demuestra cómo Figma se integra con los plugins para elevar las capacidades de diseño.

💡Plugins

Los plugins son extensiones o complementos que se pueden agregar a una plataforma o programa principal para ampliar sus funciones o agregar nuevas características. En el contexto del video, los plugins de Figma son herramientas que los diseñadores pueden utilizar para optimizar su flujo de trabajo y crear diseños más eficientemente. Se destacan varios plugins, como 'Iconify' y 'Unsplash', que permiten a los diseñadores importar recursos y trabajar de manera más rápida y efectiva.

💡AI Integration

La integración de IA (Inteligencia Artificial) se refiere a la unión de algoritmos y aprendizaje automático con las herramientas y sistemas existentes para mejorar su funcionamiento. En el video, se resalta cómo el año 2023 marcó un hito en la integración de la IA con los plugins de Figma, con casi la mitad de los plugins mencionados aprovechando la potencia de la IA para elevar lo que es alcanzable en el diseño.

💡Iconify

Iconify es el plugin más popular en el mercado de Figma, utilizado para incorporar iconos en proyectos de diseño. El video destaca cómo Iconify ofrece más de 100,000 iconos gratuitos de múltiples bibliotecas de iconos, lo que permite a los diseñadores importar iconos en el formato que deseen y elegir el color dentro de Figma, como se muestra cuando se menciona 'puede importarlos en cualquier formato que desee'.

💡Unsplash

Unsplash es una biblioteca de imágenes de libre uso que se integra con Figma a través de un plugin. Esto permite a los diseñadores buscar y agregar imágenes directamente en sus diseños de Figma. En el script, se muestra cómo el plugin Unsplash 'puede tenerlo todo en Figma y en tus diseños', facilitando la búsqueda de imágenes y su inserción en el proyecto, como en el caso de buscar una imagen de un 'ardilla'.

💡Color AI

Color AI es un plugin que ayuda a los diseñadores a crear paletas de colores personalizadas en función del perfil y la personalidad de la marca. En el video, se describe cómo Color AI 'puede hablar sobre la personalidad, ya sea que tu marca sea agresiva o juguetona', y basarse en la descripción del usuario para generar una paleta de colores que se adapte a la identidad de la marca.

💡Brand Fetch

Brand Fetch es un plugin que permite a los diseñadores importar y utilizar activos de marca desde sitios web existentes, lo que es especialmente útil cuando se trabaja con clientes con marcas establecidas. En el video, se menciona que Brand Fetch 'hará todo esto por ti y simplemente obtendrá esa marca', lo que incluye la extracción de colores, fuentes e imágenes del sitio web especificado.

💡Background Remover

Background Remover es un plugin que permite a los diseñadores eliminar el fondo de las imágenes de manera rápida y sencilla, sin tener que recurrir a programas externos como Photoshop. El video muestra cómo este plugin 'realiza un buen trabajo al eliminar todos los límites', facilitando el trabajo de los diseñadores al ahorrarles tiempo en tareas de edición de imágenes.

💡Table Creator

Table Creator es un plugin diseñado para facilitar la creación de tablas en Figma, proporcionando una solución más eficiente que la creación manual de celdas y filas. El video destaca cómo Table Creator 'hace todo el trabajo pesado por nosotros', permitiendo a los diseñadores crear tablas escalables y reutilizables con la ayuda de componentes y variables.

💡Hippo AI

Hippo AI es un plugin que permite generar una gran cantidad de imágenes, lo que complementa las funcionalidades de Unsplash para imágenes de stock. Aunque en el video se menciona que Hippo AI es un plugin de pago que cobra un centavo por generación, destaca su capacidad para 'generar hermosas ilustraciones web', lo que ofrece a los diseñadores una opción adicional para obtener imágenes personalizadas y originales.

💡Content Re

Content Re es un plugin que ayuda a los diseñadores a generar contenido, como nombres, direcciones y otros elementos de texto y imágenes, de manera rápida y sencilla. En el video, se muestra cómo Content Re puede 'agregar nombres en eso' y 'crear todos de esos', facilitando la generación de contenido para tablas y otros elementos en el diseño.

💡Wireframe Designer

Wireframe Designer es un plugin que utiliza la IA para ayudar a los diseñadores a crear esquemas básicos de páginas web, proporcionando una estructura y jerarquía de elementos sin preocuparse por el diseño detallado. El video destaca cómo este plugin 'puede ser muy útil' para crear rápidamente una estructura de página y 'obtener la aprobación de bajo nivel de esquema' antes de avanzar al diseño final.

💡HTML to Design

HTML to Design es un plugin que convierte páginas web en diseños de Figma, lo que permite a los diseñadores trabajar con la estructura y el contenido existentes de una página web directamente en Figma. El video muestra cómo este plugin 'es realmente increíble' y 'poderoso', ya que importa no solo la estructura de la página web, sino también las imágenes y la jerarquía HTML, facilitando la modificación y el diseño de landing pages.

Highlights

2023年Figma插件排行榜，AI集成显著提升设计效率

Iconify插件：提供超过10万个免费图标，支持多种图标库

Unsplash插件：在Figma中直接访问无版权图片库

Color AI插件：根据品牌个性自动生成配色方案

Brand Fetch插件：自动提取现有品牌资源，如颜色、图标和字体

Background Remover插件：一键去除图片背景，节省时间

Table Creator插件：简化表格创建过程，支持组件和变量

Hippo AI插件：生成定制化的网页插图，支持向量化编辑

Content Re插件：填充表格、文本、图像等占位内容

Wireframe Designer插件：AI辅助生成网站框架和布局

HTML to Design插件：将网页转换为Figma设计，支持自动布局

Figma插件的AI集成使得设计工作更加高效和直观

探索Figma社区可发现更多有潜力的插件

Fig Jam虚拟白板和其Widgets将在后续视频中介绍

Figma插件的未来展望，AI和机器学习的集成带来无限可能

Transcripts

welcome to app design tips it's high

time we dive into the top 10 figma

plugins of 2023 a notable year due to

the significant leap in AI integration

I've been rolling out these videos

annually and traditionally we saw a lot

of repetitive categories with icons

stock image and text generator plugins

and they've been the workhorses for most

designers but 2023 has flipped the

script thanks to AI intertwining with

figma plugins elevating what's

achievable nearly half of the plugins on

this year's list harness AI power and

spoiler alert one of them can

autonomously craft entire website

wireframes along with relevant text

bidding goodbye to the old laurum

ipsum this episode is brought to you by

figma who's generously offering my

toprated figma course for free for a

brief period hit the link in the

description to snag this offer and

master designing a full-fledged mobile

app from scratch quickly skimming

through here's a peek at the plugins and

their capabilities with chapter markers

for effortless

navigation now how did these plugins

earn their spot it's not about

popularity or Trends but the tangible

impact they had on my efficiency and the

value during my exploration of hundreds

of plugins some that I thought were very

promising fell short due to a lack of

intuitiveness or substantial value

addition especially a few AIC Centric

ones that felt a little gimmicky for

instance while designing inigma I often

pair up with chat GPT for compelling

copy which seamlessly integrates into my

design just using copy and paste while

some plugins mimic this only a few truly

save time or enhance the copy quality so

without further delay let's unveil this

year's Stellar

[Music]

plugins all right first up we have

iconify and this is actually the most

popular plugin in the market and

probably for a good reason 110% % of

websites apps or interfaces use icons

and this plugin is very powerful

utilizing multiple icon libraries

there's over 100,000 free icons and you

can import them in whatever format that

you want so let's take a look at this

one all right so to jump to this plugin

we go to plugins iconify and this is

what the plugin looks like and what's

great about this is there are a few

different categories from General to

animated icons emoji and things like

that we also have access to multiple

categories so we have the material

symbols here phosphor solar so you can

see different types this one's a little

bit more playful and then you can jump

into these arrows or the likes or things

like that just to see what those look

like so very great for exploring icons

but if you want to just jump in and

search we can search for video here and

as we go down here we can see that we

have 104 icons for video and if you want

to match the same look that's where we

jump into material design icons and we

can see all of the icons look very

similar now when you select an icon here

you can actually choose the color within

here so here's my fig Jam colors right

here and you can choose to import this

as just a regular icon or import as a

component and it'll generate that

component for you if we move this out of

the way we can see what that component

looks like right here and we have the

ability to jump in here because it is

Vector we can go ahead and change that

up maybe we like our play buttons to be

just a little bit more

acute isn't that a cute play button all

right so that's

iconify next up is unsplash and if

you've been designing for too long

you've likely heard of unsplash is a

royalty-free stock image library and

what's great about this plugin is you

can have it right within figma and in

your designs so jumping into plugins we

can go to unsplash here and this is what

the unsplash window looks like so you

can very simply just search search for

things like maybe I want an image of a

squirrel so we can search for that

you'll notice that some of these have

unsplash plus and that is if you do have

an account and if you're paying for

unsplash you can actually unlock

hundreds of thousands of more images so

you would go to more and log in or

register for that but I like to stick to

a lot of these free images here so I

like that image we'll go ahead and add

that one and that one loads directly

into figma and as we do this we can see

that we have the original size it's a

very large window um or if we just draw

a frame here and have that frame

selected let's just click on another one

here and that will fill the frame or the

object that you have selected so that's

another way to add that and another

great feature of this plugin is if you

decide to use this image for your

website we can see that we have the

cropped version right here but if you

want that original version in case you

want to do some responsive design right

here into the inspector window you can

choose to view image on unsplash it'll

open up unsplash here and we can just

download the full resolution here and

crop it in whatever ratio that we want

if you're enjoying this content so far

and want to see more videos like this it

really does the channel a lot of good if

you can hit subscribe and hit that Bell

icon so that you're notified of future

videos like the Fig Jam widgets I'm

going to be talking about the top 10 fig

Jam widgets inside of fig jam and figma

so if you want more content like that

stay tuned hit subscribe and we'll show

you that in the next one but let's move

on next up is color Ai and this is a

great plugin if you're just starting out

with a brand this is a plugin where you

can talk about the personality whether

your brand is aggressive or playful what

types of colors that you want and just

really what you want to see in a brand

it'll give you a color palette that you

can use to just explore new ideas so for

example if you were in the figma

community and you just take a template

like this this blackout landing page by

Rodrigo you can open this in figma and

just explore how you would like your

brand to be so you can see that there

are some local Styles here already

applied and I can jump right out the

plugin and choose color AI right here

it'll open up this window and you can

just talk about what inspires you for a

brand so a minimalistic palette with a

dark blue background and a light blue

foreground um what I might say is is

this is for a sporting good website I

want a bold red call to action and more

uh subtle secondary colors I want this

brand to be

aggressive bold and

adventurous uh similar to Red Bull

um so something like that and then you

can choose the number of colors click

generate and once you get this color

palette you can explore with a template

just apply those and see how that's

going to look with your

layout and here we go we have something

that we can try so with these colors

here when we have this selected you can

see all the 15 colors within here and

all you'd need to do is just take that

red color this is FF

we'll just copy that hex color and if

there's anything applied like right here

we should be able to just click on this

gear so you click on the canvas first to

get all your local color styles and just

click on the gears right here to just

change this so we'll change that here

and see what that looks like it looks

like that that hasn't been applied to

all these uh elements so all you need to

do is select all of these here I'm going

to hold down command and shift to select

multiple and when we go to fill now we

can go into this new color and see what

that looks like so I'm just going to try

this a few more times within

here and see what that looks like so

that's something that I think that I

like um you can try some of these other

colors here um if you don't want to

apply them to the color style yet what

you could do is just take the color and

just take a few elements and just plug

them in and say I wonder if I like that

so that's not looking too great but

that's a way you can play with color Ai

and use different templates just to

start to mold your brand to see how you

want it to

look all right moving on we have brand

Fetch and brand fetch is really great if

you're working with existing clients

that already have an established brand

what I like to do if I don't have a

plug-in like this is go to their website

and you can screenshot their web designs

bring it into figma and you can use the

ey dropper to take some of those colors

it's just more of a manual process you

can even take some of their icons and

things like that and pull them in

manually um this is something it doesn't

take a huge amount of time I can do this

in probably 15 minutes to a half hour to

pull some brand assets and start to

apply that into a new design let's say

that they want you to create a new

landing page but with brand fetch it'll

do all of this for you and just fetch

that brand I'm just going to try it out

we'll go to plugins and we'll go into

our saved plugins here and I'll choose

brand fetch

and just very simply you can just type

in redbull.com and it'll find some of

their different properties so I want

this redbull.com right here and it's

going to grab some icons whether these

are SVG or PNG um it'll grab some colors

from the site the fonts and also images

that it finds Banner images and things

like that you can just click and add

these logos so here's one variant right

here we'll grab this logo and we'll

apply that as well and let's just move

this around you can see that this is an

SVG so we can go in there and we can

turn this into Rod bull if we want I

might get in trouble doing this so

please don't

hate

boom bucket

F and that's a very skewy Rod

bull so that's what's great about some

of the vector assets this is something

that would not be sanctioned if you're

actually working with them as a client

do not touch their uh brand so just

leave it like this but um might be ideal

if they don't have variations let's say

that you do have their brand style guide

and you know that there's a

stackable um version like this that you

want to use you can just simply take

that um Zoom right in and it's razor

sharp so that's really great now we go

into the colors here we can take all of

those colors um same thing with the

fonts there's a preview that's

unavailable if you you don't have it

installed if you do just from my past

experience it will show that preview

which is really great and now if I click

on this image here it will insert the

image for

me and I can scale that and use that

however I'd like next up is background

remover and this is something that I can

do in Photoshop very quickly but to save

some round tripping and to be able to do

this directly in figma it does still

save me a lot of time so this is a very

straightforward plugin and I want to

give you an idea of how good it is at

removing backgrounds the most ideal

solution is something like this with a

solid white background or a solid pink

background but I'm going to show you six

different variations in how that

background remover

works now you'll notice when I go and

use plugins I just go to the plug-in

menu right here and find some of them

here but there's actually another button

right here that will open up a resources

panel and this is something that you can

detach and just use this anywhere you'd

like and one thing is if you're

exploring ing plugins you don't have a

lot of them saved you can actually find

some from the community directly here

and just start running them I'm going to

just select this image right here and

I'll just type into search background

and the way that this uh plugin works is

you just click run and then remove

background and you can see that it's

running this background remover in the

background so I'll removeing background

in the background and as soon as that's

done you'll see the full transparency

and how good of a job it does at

removing all the

boundaries there we go now we can take

this and with the option Command right

bracket you can see that it actually

does a really good job so one of the

limitations with this is there's no

fine-tuning or control it's just remove

background or have background um you can

still view this image on unsplash

because I brought that in from the

unsplashed plugin but that's really

great so because we don't have those

controls this is an ideal solution to

remove the background I'm going to

quickly remove the background on all of

these and then we'll show you what the

results look

like so as you can see this actually did

a really good job even with one of the

more complex images I would have thought

this would have been the most difficult

one this one here still has some uh

something there let's go and to view

this on unsplash just to see what it

used to look like so I guess as far as

all this does I can see that it actually

uh considering still did a really good

job and so as far as that if I wanted to

crop that out there we go um still does

a really good job I notice on this image

it kind of removes some of this so it's

not perfect but you can see four out of

six right here did an excellent job so

we can take this here for example we can

just give her a new hand with ice cream

just like that there we go and that is

totally believable who needs mid Journey

all right so in addition to the

background remover plugin if you go into

this plugin right here and choose go to

web version right here you'll get this

version and you can actually drop up to

500 images so if you have product images

you want to remove the background and

see what a red background looks like on

those images you can do that in bulk

here so upload up to 500 images at once

I've already taken these same two images

and it looks like it does the same thing

as the plug-in just in bulk so this is

where you can click download it'll

assemble and give you those pngs so a

great addition to that plugin all right

next up is table creator and this is

really helpful when you want to create

tables and if you don't know what you're

doing when creating tables you might

just want to you might just create some

shapes like this for some cells and go

over here and turn them into rows and

columns but if you do it the right way

and you use components and nested

components and variables you can create

something that's scalable that you can

reuse throughout your design but but

learning how to set up those components

and variables and nested components can

be a challenge in itself if you're not

used to that and this is where this

plugin comes in very handy because it

does all the heavy lifting for us so I'm

going to go ahead and delete that we'll

just jump into our components here and

we have this table creator so all we

have to do is choose create table and

it'll ask if we want to start with a new

template or import a template and

because we don't have one to import

we'll just choose new template and then

we can add the columns and rows uh the

width and then the height is just

hugging so let's say that we want to do

something maybe like this so that's six

columns three rows and then the width we

want to fill if they're Center aligned

we'll just do a top aligned right here

and create table so when we create this

table here the beauty here is we do have

this set up for us so if we want to go

into the cell for example we can choose

this

cell and we can change this to to maybe

our bold red color so we can change that

if we want to just turn that up like

this that doesn't look that great um but

changing that within the sell component

here is going to change that within our

table and also within our table

component and if we just choose this

cell component we can see all of the

selection colors within here and so this

stroke color right here if you want to

change this all at once you can change

that here and see what that looks like

right here so let's see if we want to

make it a little bit more subtle

something like that and another nice

thing is if we want to change that row

height right here we can change that

within the table itself so as we use

that table

again we can jump into the

components we can choose that table and

just drag this in and we have that with

a new updated

Heights so now how do we use this table

if we jump in here we can actually just

hit command d d d d for new rows and we

can swap out these rows because this is

using Auto layout everything's

Incorporated for us super helpful to be

able to use this plugin quickly get

those tables and then universally change

everything last thing about this plugin

is it actually has cells to be able to

add that content within here and you can

see as it wraps it's growing and fitting

that content for you so really awesome

to be able to have all of that you can

change that change the width of

everything

um it just works

beautifully next let's jump into hippo

Ai and hippo AI can generate a lot of

images so we do have unsplash for our

stock images but here's what's great

about hippo aai when we go into plugins

we open up hippo

AI now you can generate beautiful web

illustrations so to get started we need

to select a layer or create one I'm just

going to create a 512 by 512 and this is

something that you just want to select

select what you want to create here and

then select the style preset here from

photography architecture icons Vector

illustrations and things like that so

let's just get started here and as you

can see here we're not able to add

anything exactly because it is a paid

plugin so if you click upgrade right

here basically it's going to charge one

penny per generation which is still very

cost effective for imagery if you wanted

to use this but for right now I'm just

going to randomize and just see what I

like

here let's try a

CBO and you can choose some raw models

from open Journey or dolly or any of

those stable diffusion or if you wanted

to choose something like just like a

daytime portrait or let's say that we

wanted something like a flat Vector we

can go down there and just click

generate you'll see this little progress

here as it generates and one thing

that's really nice within this plugin

too is it will generate an image but

built inside is the ability to vectorize

this if you wanted to reshape it

differently because we all know AI is

still learning and there might be some

things that are a little bit skewed or

off and if you want to change that you

have the complete ability to do so so

I'll show you that once this

generates all right so there's our cell

booat here we can see different variants

so with one penny we have eight

different variants that we can choose

from so I'll select this one that one

looks pretty good so now that we have

this this is just an image but if we

click modification and we add that we

can remove background from here we can

remove text upscale zoom out or what I

really love is this vectorize so let's

zoom in here and we can see all those

beautiful pixels right there and if we

want to make this razor sharp we're

going to just click vectorize and apply

changes so there it goes loading for us

now I try not to Showcase plugins that

are paid plugins because there's that

barrier and I know that a lot of you are

trying to save money but this really is

something that's very powerful for very

inexpensive for what you get and very

easily we can select this rectangle we

can go into show selection colors and

just see what all these colors look like

and if we want to change any of them we

can change them very easily because it

is vectorized and something like this

for example um this is a gradient that

we we might want to just reapply as a

gradient so I'll just choose this side

just to show you what I'm talking about

and how to do this all you would need to

do is Click merge right here now that's

one object and when we go into fill we

can go into gradient and we can choose

this color right here we can just select

this and this color right here we can

select down here and now we have that

beautiful gradient within that

vectorization all right jumping back in

onto the next one there's another plugin

called content real and this is

something that I've showcased in the

past but again again um there's a lot of

things that you can use AI for for a lot

of your copy and then there's still some

things that are very helpful as far as

random dates or names or addresses and

you can use content re to still get a

lot of this content in here so for

example with this table we created if we

wanted to Simply select the text within

here we can select all of that and just

add some names in there there you go

we're going to do the same thing over

here maybe we want some addresses in

here so Us full address we'll go ahead

and click apply and we have all of those

created so very easy when you're

generating tables you're generating uh

text and different elements to be able

to do

that and in addition to that if we had

little avatars or if we had rectangles

that we wanted to display images in

addition to unsplash we can go into our

images here and just add photos

logos Maps the options are endless so

content re is still one of my main

go-tos just because it has that

categorized content as far as the text

images icons and things like that and I

always like to just jump in there and

dump that data in there all right we're

getting down to the home stretch and

these two next plugins are some really

wowing amazing plugins and what they're

able to do

so the second to last one that I want to

show is the wireframe designer now this

is something like I said I use chat GPT

for a lot of my content I usually have

that displayed right here and I have

figma right here and I and I work side

by side with figma and chat GPT but

there's sometimes where right within the

plugin this could be very useful so

let's say that I want to just create a

new page right here let's call this a

Sporting Goods

website so we don't have any artboards

we don't have anything set up we're just

going to go into our resources and I'm

going to search for

wireframe and this is it wireframe

designer now this thing is just magical

it's

unbelievable um this is something that

works with AI so it's just asking what

do you want to design today now when

you're designing Page by Page wouldn't

it be helpful for AI to have some

context into your business your brand

and this is why I always use chat GPT or

another window because it can go and

remember a lot of the past conversation

that I have and apply that in context to

the next thing that I ask that's where

some of these plugins fall short but

with this plugin when we go into the

settings we can actually add that

context so I can say Sporting Goods

store called uh let's say wasach

Sporting

Goods

and uh this brand has an

adventurous personality and makes Bold

claims

on Great Value sporting products we

sell categories like for biking

camping

softball basketball

and fishing this is an e-commerce store

so we'll just start with something like

that now I want to design for the

desktop so that's our context we're

going to click okay and now what do you

want to design

today I want a homepage that has a

navigation that shows all our product

categories I want a hero slider image

show

showing deals we have on camping

gear below that I want a section that

has a grid with

camping

products and below that I want to

have a banner letting them know to check

out all our discounts and Deals the last

section I want them to sign up to our

newsletter and then have a footer at the

bottom so we'll start with something

like that and again this is a wireframe

so we're not worrying about the design

right now but to have the hierarchy and

the layout and things just generated for

us right in front of our eyes so you can

see designing right there isn't that

just like the most magical thing you've

ever seen this gets me excited about

designing and the thing that's so

powerful about this especially for

Freelancers out there that are thinking

about the scope of new websites to

create this can set you above the

competition to be able to within the

next day offer something at this level

of this value to be able to create

Concepts that quickly and show that off

is just a game Cher now again as soon as

you get the layout and the content

signed off you are going to want to do

what you got paid for and actually uh

Design This and actually set the brand

but this is just really awesome to be

able to even switch you can see that it

has Auto layout Incorporated so you can

swap that out we can go in here change

that so if we want to remove that and

just have two in there that's great if

again we want to just jump in here and

just hit command or control D and

duplicate we can have four in there

wireframe designer is really a game Cher

to super fast explore some Concepts see

what you want out of an app or out of a

website display that for your clients to

get that low Fidelity wireframe sign off

and then really jump into what we love

to do is actually design the experience

the look and The

Branding all right last plugin I want to

talk about and there are some other

great plugins out there so really just

jump in and click that run button cuz

most of the are free they're very quick

to explore uh videos like this will help

guide you through what the value is and

how you can use a lot of these but

really if you explored this according to

your use case you might find some that

are far more compelling that I haven't

had a chance to review yet but the next

one that I want to show off is HTML to

design so again I work with a lot of

Brands and there's sometimes where they

have a starting landing page and they

want to just show a concept of maybe a

new image Carousel or or a certain call

to action within the same design so if

we're talking about something let's say

for Apple if we go into

apple.com you know I might see a website

like this for example and what I would

do just to quickly change something is

just hold down shift control command 4

and go on here and just start to

screenshot a lot of this and paste it

into figma just to show what that

landing page looks

like so I would start to build it like

this and just bring that within here and

as soon as you do that there are a lot

of times just to quickly get an idea

across of maybe what a banner looks like

on this uh website we might be looking

at some uh paid ads we'll do something

like that wrap it around a frame and

then just add this banner and show what

that looks like or if you wanted to

remove something here you would just

draw a rectangle hit the eye button for

the ey dropper and that's how you would

remove icons to add new ones but it's a

very cut and paste hacked way of

changing something on a landing page so

that's where this plugin comes in very

handy for me is I can actually convert a

web page into a figma design and a lot

of the times with auto layout and

everything already Incorporated it's so

powerful a lot of these plugins in the

past there's been a lot of plugins that

have claimed to do something like this

but they're very gimmicky and sometimes

they're so frustrating you just want to

go back and recreate them anyways this

is where I balance something that's

magical that's actually impactful and

super timesaving and this plugin here is

HTML to

design we can find that here from the

community and we just click run right

here and really I can't believe how cool

this is so first of all what size do you

want I'll just choose the 1440 right

here light or dark mode you can save

multiple viewports now this is a paid

upgrade so if you wanted to for $15 a

month per user honestly all these are

worth it but let's just jump right into

uh just importing this for free so just

watch what it does for free right here

and you can install a browser extension

this is really helpful for Pages where

you have to log in and once you log into

that in Chrome you can just click on

that browser extension pull that into

figma but for right now I'm just going

to click import and just watch the magic

that happens and this is where things

usually kind of just blow up and you're

like oh man this isn't organized the

right way it doesn't have Auto layout

Incorporated the right way it didn't

pull in the right uh text or sizes um

colors might be off but when I did this

I was like magically surprised at

everything that it's doing all right so

seriously let's get this out of the

way check that out that's the website we

have not only do we have this website we

have the full resolution images within

here within each frame so just to be

able to take this I'm just going to take

this section right here let's swap this

out boom boom boom boom we can do that

very easily let's say that we don't want

to showcase the iPhone 15 because the

pro was so cool but now we don't want

black on black so let's go in here and

change this right there so within here

let's just dissect what it's doing when

we go into here we can see all of the

hierarchy of the

HTML um right here with the divs the div

modules things like that um but one

thing that I found super just amazing is

even right within here we have the auto

layout so we say you know what this

Vision thing is not going to do good

that Oculus is just way too competitive

so let's not do that um we're not get

that great at entertainment so let's

remove that um there we go and just

change in the text so what do we do when

we want to upgrade the iPhone 16 Pro we

just do that and no need to replace the

image here because they always look the

same so titanium now we're going to say

so for the iPhone 16 we're going to say

Valyrian and I don't know how to spell

Valyrian

steel but there we go let's see that

sounds better so that's the iPhone 16

Pro we can come down here really the

same hierarchy for the HTML like this is

just just so cool um now this still is

dependent on how this website was

generated and how it's created so there

might be some layers that are meant for

code that aren't really relevant in the

design so there still might be some

cleanup but just how powerful this is um

it's it's just amazing to be able to

just remove a slider very quickly um

bring this up here and let's just bring

this slider up right here and I'll bet

you there's something overlaying here

that we can just turn that on and off

just to see what that looks like and it

looks like as we're looking at this even

this image is at 100% but it has a pass

through layer that we can just say now

this is 100% right here and this one

right here is now

29%

so isn't that like the coolest thing

you've ever seen in your life and that

is a perfect one to end on the top 10

plugins for figma the future is looking

very bright for design tools and

especially as figma and other tools

incorporate AI there are opportunity for

better ways to incorporate this but this

stuff is really groundbreaking right now

so we're really exploring the ideas of

what's possible with artificial

intelligence machine learning uh with a

tool like figma and to be able to have

something so lightweight so powerful so

quick with all of these powerful plugins

that really just click that run button

nothing to install you don't have to put

it in a subfolder or anything like that

like this is just amazing to be able to

explore explore all the boundaries of

what's possible in your design so I

encourage you to explore the community

to see what other plugins there are out

there and I'm going to be talking about

fig Jam which is a virtual whiteboard

that figma also has and in there I'm

going to be talking about widgets now

widgets are different than plugins and

they can be used some of them in figma

and fig Jam so if you're interested in

that video that'll be next and I'll have

the link in the description so you can

explore that as well I hope you found

this video use if you did please click

subscribe and hit that Bell notification

for more

[Music]

videos