쉐도잉 연습: Figma Agent Skills | How to write skills you will actually use - 영상으로 영어 말하기 배우기

we're going to look at how to build custom skills in figma to use them in figma agents and figma make

let's jump in now there's lots of things

that are named skill right now in the ai space

so let's clarify so let's say you've connected your claude

or your codex or anything like that into figma using the mcp then in

that mcp sort of connection there are certain skills

that allow let's say a claude to interact with figma like figma generate design or figma implement design or generate

library now these skills are ones that

when you prompt claude you don't have to tell it to

use the skill you just say hey i want you to

create blah blah blah then it looks through all of the skills

that it knows and selects the correct one the skills we're going to be building

and using inside of figma agents are actually skills that are ones

that you have to sort of slash and type in to invoke them

and they're more like repeatable reusable prompts all these skills are

written in the same way in the same format they're all md files markdown files

but just wanted to clarify that these ones are more like a repeatable action

that you have a shortcut into rather than something that

if i prompt figma the right way it might realize

that it should be using this skill now how do we

even go about building one of these i'm in my figma file

and if i go into my agents on the left you can see

that if i open a new conversation i have this plus this is where you can also find connectors

and libraries and websites and all of these good things

but you also have the skills now i can just click use skill

which will just type in a slash and then i can start writing whatever skill I want.

I can add a skill inside of here

which will be either writing your own one from scratch inside of Figma

or you can upload a file we'll be doing both of those in a bit

or I can also manage my skills and browse the community.

There are lots and lots of skills in the community

that people have built and very graciously shared and also some

that come from Figma as well so I'd really recommend checking those out.

Let's build our first skill together.

I have this design that was made with Figma Make

and then I copied it into my design panel and

And something I like to do with all of my designs is I like to sort of break them

when it comes to the text to see that A, I designed them properly, meaning I used the right like auto layouts and stuff like that and nothing will clash.

And also just to see what happens

when I put real life content in here because it's all well and nice when there's just 23 kilograms of coffee beans.

But what if there's more?

Yeah, what if there's loads and loads and loads more?

What's going to happen?

See, like already here, I can see that this is truncating because there's too long text.

Would I want that?

Would I not?

I just need to break it and see what happens.

So you might say, yeah, I could just go in and change the text or I could even select the frame,

open a new agent chat and just ask it to replace all the text content with something really long.

But because I know that I do this a lot, I'm going to write a reusable skill for it.

So all you need to do is prompt the agent and ask it to build that skill.

so without selecting anything on my canvas I just asked the agent write a skill

that replaces any text node with realistic edge case copy long names long values ultra complex data

so there we go it's put

that in for me it's called it stress test copy

but I did change the name to break my copy

because I like that better

and it's telling me I'm going to select one more frames invoke it

and this is what's going to happen now what's really important and I would really recommend that you do is you

actually read the skill yes it's a lot of text

but anything that ai outputs we need to look at

and understand what it's doing

so let's have a look it's explaining what it's going to

do here how you're going to run it the user selects one

or more frames then it will use evaluate script to find

all the text nodes it will infer the semantic role replace the table

so for example oh this is good use these as inspiration always pick something

that sounds like it could appear in a real product.

The point is to expose layout issues with plausible data, not just inject nonsense.

So it's giving it really, it's like a really good detail prompt.

It's saying this is the part, like an inspiration for the person's name, the company name, the job title, all of these different things.

So this is pretty good.

So let's test this in action.

I'm going to select my frame.

I'm going to slash and just, I know that I called it, break my copy.

Yeah, I could just select it from here and then send it on its way and it will run.

Okay, so it says all ATA text nodes have been replaced with extreme HX copy.

The screenshot reveals several layout issues already.

Yeah, thanks.

I can see that.

Okay, so it did it.

It's clearly showing that it is broken now, right?

So I can see that here.

This definitely, what is this set to? it's set to fill

and it's inside some sort of box

that should not have a fixed width right it could span this whole way i could see

that these held up quite well these however did not

but also i'm thinking is this really realistic content did it replace things in the right way not

so sure if we look at it against the original design

so for example in here it says total items across five categories

that didn't need to change the total items across all warehouses across however many categories

and regions like there's things that just can kind of stay as they are

and this is a good example of why you shouldn't really

one-shot anything in AI it's also about good like token usage

and just getting the result

that you want you do need to sort of have a conversation with the AI

and prompt it a bit better so we're going to try

and rewrite this skill again and maybe we just prompt it a bit better.

Now if you watch any of my videos you know

100

that I am very bad at prompting but I am really trying to get better at it.

101

So I've recently taken this class on Skillshare called Prompting for Everyone by Cassia Pilch.

102

I think I'm saying her name right.

103

The name of the class suggests that it was just for chat GPT

104

but actually she talks about really good prompt engineering techniques that are useful for any model you use.

105

She also mentions that during the classes.

106

What I really like about this class is there are so many actual examples and actual tips of what you can do.

107

She talks about the flipped interaction pattern, the question refining pattern, the cognitive verifier pattern, and I used all of these to make sure

108

that these skills come out even better because the prompt was better to begin with.

109

If you've not heard about Skillshare, it's an online platform where real people upload video tutorials about different topics.

110

There are thousands of videos on there.

111

Skillshare are very kindly sponsoring this video and have given me the special link to share with you all.

112

The first 500 people to sign up using the link in the description will receive a free month of Skillshare

113

so make sure to check it out all right

114

so I've taken some cheeky screenshots from this class and some

115

and some of the examples of how to prompt a bit better

116

and you can see

117

that the idea is to almost ask the AI don't just go straight in ask me clarifying questions

118

so let's try a new prompt I'm gonna say from now on

119

when I ask you to do something suggest a better version of my prompt to use

120

that will help me write a top quality high performing fitness skill until you have enough information

121

and then I put in the exact same from before.

122

So what will happen now is that the Figma agent is going to go into a sort of plan mode with me, which is really great.

123

This is also a slightly newer functionality of agents.

124

I believe in their first iteration, they couldn't really do this.

125

Let's have a look.

126

What scope would the skill operate?

127

Let's say it's going to be the selected layer only.

128

Then it's asking me, okay, let's see.

129

So it's already telling me, here's a few things I love to know.

130

Feel free to answer them all at once

131

so I can just write it down

132

or I can go in here let's say I want beyond

133

long names of value to cover things like special characters okay

134

so it's asking me lots and lots of questions

135

and also there's some things here to answer detect the data

136

type oh yes definitely not just generic I want it to

137

be the correct data type another great question should it save the original text

138

or should it just undo manually let's just say undo manually it's offering me an option where

139

if i run the skill it will ask me a question back like

140

when i run the skill it might say

141

which level are we going are we going extreme are we going moderate actually like

142

that i'm going to go maximum chaos uh for this time

143

great it's saying i have everything i need let me rebuild now

144

so once it's building it

145

when you create this skill inside of the figma agent it automatically saves

146

that skill i can go in and edit it inside of

147

that managed skill or i can download it as a markdown file send it to another llm

148

or whatever to help me figure it out but um

149

when you do create it inside of figma it kind of automatically adds

150

that skill into there so worth noting okay so it's created

151

that skill it's called stress test copy let's have a look at how it did

152

and i'm looking at it kind of side by side with the previous one um a bit better

153

definitely so for example it didn't change the name of the brand

154

which makes sense

155

because why would it it did do some weird stuff here

156

okay um it didn't change these interesting it changed this

157

and there so it did it it is

158

if we look at the previous one it's way less chaotic

159

which already i'm liking yes we wanted to stress test

160

but we don't want it to stress test like the world is ending

161

and everything is now super long

162

so this is great before we move on to the next

163

skill i just want to show you i used the same prompting kind of questioning technique

164

and built another skill again inside of claude

165

and i just want to show you what the output of

166

that was so just to see how when we use different ai models

167

and we prompt it slightly differently the outputs can be varied

168

so same original design three skills that are technically supposed to do the same thing

169

and three very different outputs so one chaos two slightly better three pretty damn good

170

so you You can see here that it broke it, but it really was really conscious about what it was doing.

171

So this is the skill that was written with Claude.

172

You can see low stock 37.

173

It's still more than it was here, but it's kind of keeping it realistic.

174

And it's not changing the words like the other ones did.

175

Also here, like, it's made some changes, but kept it realistic.

176

Though it's still good and long, but it's not, like, chaos.

177

So I would say Claude wins on this one.

178

I'll include the text of these skills inside of a Figma

179

file in the description in case you want to have a look at them and test them for yourself.

180

So feel free.

181

Let's move on to an example of another skill

182

that I have created for myself and I will definitely be using loads of.

183

So when I'm doing developer handover, I also like to map out the screen reader or the voiceover interaction and the order of the elements.

184

I'm still learning how to do this and how this all works.

185

So if you have any notes, please let me know.

186

But the way I like to do it visually is something like this.

187

So let's say this is the screen.

188

I create these little circles with number inside of them

189

so I can show my developer this is the order I want it to go with.

190

It's going to go there, then that, two, three, four, five, six.

191

And for example, in this case, I just skipped the illustration because it adds no real value.

192

It's just a decorative thing.

193

And then I like to also write out how it should sound because for example, here next, it needs to say button after it or lose weight,

194

it should say lose weight option one of four selected

195

so there's all of these little bits

196

that i want to give as guidance now this is quite a manual task

197

and i do think it does require a bit of brain

198

but let's try and create a skill and see how it goes

199

so i continued on the conversation i had in the previous skill i gave claude a screenshot of this

200

and then i said help me write another skill where you can select a frame

201

and the skill maps out in what order would a voiceover

202

screen reader read out the contents of the screen note with the number circles like the screenshot

203

if it can also add a text node where it writes

204

all the text content in the frame in the correct order

205

that would be great too ask any questions you might have

206

so claude thought for a while and then it giving me these few questions

207

and you can see sort of telling me these are the

208

questions i'm going to be going through what is the role inference

209

so do you want me to infer from the layer component naming to know what i'm reading out

210

or is it more a visual structural cues only

211

and i can also type in something if i want

212

so i don't have to just stick to the options

213

that it gave me

214

so i'm actually going to type something in i'm going to

215

say mix of all of these now we're going to go

216

on to the order algorithm is it just top to bottom left to right

217

or is it because of the content the decorative filter what do you want to do about

218

that and then the text node format what should it have should it read it out

219

and then we just submit after it worked for a

220

while it did ask another question

221

which is do you want me to duplicate the frame

222

and annotate the copy or just annotate in place

223

and i did say let's just annotate the copy it saved it on my desktop as an md file

224

and then all i need to do is come into figma

225

start an agent's chat go into here skills add a skill then upload a file

226

and just find that one so this one is the figma screed reader i'll add that in

227

It says I already have one with that name.

228

But you can see that I can have all of it inside of here.

229

Now, I'm really skeptical about this one.

230

So let's run it and see what happens.

231

Let's try it on this frame.

232

So I'm going to select the frame and then forward slash check reader.

233

Okay, so what it did is it did create a copy of it.

234

And just on first glance, it actually looks really good.

235

Like I'm actually really surprised.

236

So it's saying everything's positioned correctly.

237

mapped seven stops across the reading um skip top right chevron

238

this is like it's telling me this is the order assumptions

239

that are made the status bar skipped the logo dots are

240

skipped the progress bar skipped okay good assumptions shoe illustration skipped moderate activity market selected

241

so it's asking me how does it look it looks great

242

so i would say like it says skip instead of next

243

but that's fine how actively are currently it's reading everything out option one of five

244

that is actually so impressive this is definitely a skill

245

that I can see myself using and reusing so that's

246

that I wanted to show you a few examples of what

247

kind of skills you can create for yourself in Figma

248

and also test out the different techniques of actually writing these

249

skills I'll say it again read your skills understand them understand what they're doing

250

and if they're actually doing what you want them to

251

and also work on your prompt engineering techniques I say this

252

for all of us I hope you enjoyed please like a

253

subscribe leave a comment below let me know what other videos you want to see.

254

See you at the next one.

쉐도잉이란? 영어 실력을 빠르게 키우는 과학적 방법

쉐도잉(Shadowing)은 원래 전문 통역사 훈련을 위해 개발된 언어 학습 기법으로, 다언어 학자인 Dr. Alexander Arguelles에 의해 대중화된 방법입니다. 핵심 원리는 간단하지만 매우 강력합니다: 원어민의 영어를 들으면서 1~2초의 짧은 지연으로 즉시 소리 내어 따라 말하는 것——마치 '그림자(shadow)'처럼 화자를 따라가는 것입니다. 문법 공부나 수동적인 청취와 달리, 쉐도잉은 뇌와 입 근육이 동시에 실시간으로 영어를 처리하고 재현하도록 훈련합니다. 연구에 따르면 이 방법은 발음 정확도, 억양, 리듬, 연음, 청취력, 말하기 유창성을 크게 향상시킵니다. IELTS 스피킹 준비와 자연스러운 영어 소통을 원하는 분들에게 특히 효과적입니다.

쉐도잉 연습: Figma Agent Skills | How to write skills you will actually use - 영상으로 영어 말하기 배우기

이 레슨에 대해

쉐도잉이란? 영어 실력을 빠르게 키우는 과학적 방법