Top 10 Figma Plugins in 2023 | Includes AI Features!
Summary
TLDREste 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
🚀 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.
🔍 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.
🎨 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.
📊 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.
🛠 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.
🌟 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.
Mindmap
Keywords
💡Figma
💡Plugins
💡AI Integration
💡Iconify
💡Unsplash
💡Color AI
💡Brand Fetch
💡Background Remover
💡Table Creator
💡Hippo AI
💡Content Re
💡Wireframe Designer
💡HTML to Design
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
関連動画をさらに表示
UX Research con INTELIGENCIA ARTIFICIAL | UX 2024
Inteligencia Artificial VS Diseñador Gráfico (QUÉDATE AL FINAL) | Geekformante
Evolución de la Web 1.0, 2.0, 3.0, 4.0
¿DESAPARECE EL DISEÑO GRÁFICO con la llegada DE LA INTELIGENCIA ARTIFICIAL?
10 Estrategias de éxito para crear una Startup, diseñar un producto, o reinventar un trabajo
🔥 NUEVA DIVI UPDATE: DIVI QUICK SITES: Crea sitios completos de forma nativa con Divi 🥴 👉
5.0 / 5 (0 votes)