"CSS - Beyond the Basics" was retired on February 22, 2017. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Supercharge Your Figma Workflow with AI Plugins!
You have completed Supercharge Your Figma Workflow with AI Plugins!
Preview
Imagine getting a design critique from an AI that understands your creative pulse. Aidentic is your go-to for instant, intelligent design feedback. This journey will show you how to harness AI insights to transform good designs into great experiences, making every pixel count.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In our final video I'll be going
over the AI powered plugin for
0:00
Figma called Aidentic.
0:03
Aidentic uses the power of AI to
review and critique your designs,
0:04
offering valuable feedback on
various categories such as size,
0:08
alignment, line, height, layout,
and more, but let's dive right in.
0:13
To get started I'll click on
the Resources icon to find and
0:17
select the Aidentic plugin.
0:21
Once I have it open,
I'll click the let's go run button.
0:22
This will open up a brand new tab in
your browser to the ADENTIC website.
0:26
You will need to sign up for an account or
login if you already have one.
0:29
Signing up as a straightforward process,
and I already have an account, so
0:33
I'll sign in.
0:36
Once you sign in,
you'll need to create a new project.
0:38
I'll name mine Meditation App and
click Create.
0:44
Next, I'll return to the plugin in
Figma and try to find my new project.
0:46
I don't see it, but
let me go back to the list of projects.
0:51
There it is Meditation App, so
I'll click on Meditation App and
0:53
now I can start a new test.
0:57
I'll click on the button and
0:59
put Meditation App Landing Page Review
as the test title.
1:00
Then I need to add the Figma
project file link,
1:03
which you can get from the share
button at the top of your screen.
1:05
Make sure your link is
set to public visibility,
1:09
now I'll click run test and wait.
1:11
Just a heads up,
this process can take a while.
1:13
On smaller projects,
it's taken me a couple of minutes minimum,
1:16
all the way up to 10 or so minutes for
large Figma files with multiple pages,
1:19
components, and frames, etc.
1:23
With that said, I'll skip ahead to
when this process has finished.
1:25
All right, the test is finished and
we have our results by category.
1:28
But we can scroll down and
1:31
click the Detailed report button
to view the full results.
1:32
On the left, we have all of our individual
frames from our Figma doc in a list.
1:35
Next, we have the preview
of the current frame,
1:40
followed by the list of
suggestions from Aidentic.
1:42
The various suggestions fall under a few
different categories, such as texts,
1:45
images, colors and
1:50
layouts, with interactions and
components coming at a later time.
1:51
Let's start by clicking on letter
spacing to see what Aidentic says.
1:55
Even though we have a green checkmark for
this subcategory,
1:59
it says all of my paragraphs text have
the right amount of letter spacing.
2:02
Awesome, well that's good to know.
2:05
Let's go down to font size as
there's at least one issue here.
2:08
It says the font size in the following
paragraphs seems quite small,
2:11
less than 14 px, and
the text might be hard to read.
2:15
Consider increasing it to 14px or more,
and below it shows the text that is
2:18
smaller than 14px and it looks like
it was the privacy policy agreement.
2:23
Here it is right here in the preview,
not a huge issue, but let's fix it.
2:27
Then we'll hop back over
in Figma to take a look.
2:31
Yeah, as you can see, our privacy
policy subscription text is now 14px.
2:33
Nice, now,
let's try fixing another suggestion.
2:38
Let's see what it suggests
under Align Center.
2:42
It says, the following paragraphs are
composed of multiple sentences with center
2:45
alignment.
2:49
It goes on to say, this style works for
one sentence paragraphs, but not for
2:49
longer ones.
2:53
Then, if we hover over the reported text,
2:54
it will jump to where that text is
on the design and highlight it.
2:56
That's a really useful feature for
identifying these reported issues.
3:00
Let's fix this bit of text underneath
the benefits section headline.
3:04
Well, matter of fact, let's fix all of
the instances where the text is centered,
3:07
when it should be left aligned.
3:11
Then I'll hop back into Figma
to check out the changes.
3:13
And as you can see, all of our multiple
line paragraphs are now left aligned
3:15
versus center aligned,
improving the overall readability.
3:20
However, I think the top headline and
3:26
supporting paragraph of my benefits
section could stand out by
3:28
being center aligned while still not
being too hard to read, let's try it out.
3:31
I'll click on the text layers and
select the center align option, and boom,
3:35
there it is.
3:39
While I think it could work either way,
I'll keep it centered for this design, but
3:40
that will do it for
3:44
this course on supercharging your
Figma workflow with AI plugins.
3:44
I hope you were able to take
away some valuable nuggets and
3:48
that you learned a few new
tricks to add to your tool belt.
3:51
Do you have any favorite figma plugins
powered by AI that I didn't go over today?
3:53
Let us know your favorites in
the forums and in our Discord server,
3:57
I'll link it in the teachers notes below.
4:00
Until next time friends, happy designing.
4:02
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up