Convert Figma to WordPress Theme using AI | Claude Code + Figma MCP Server for Design to Code — Transcript

Full transcript

1. 0:00Hello everyone. In this video we're
2. 0:02going to learn how to give a Figma file
3. 0:05to AI Cloud Code
4. 0:07and ask it to build the entire theme for
5. 0:11us with the styles, with index file, all
6. 0:15the classic theme related files like
7. 0:17functions.php
8. 0:19and basically build the whole page for
9. 0:21us as a page template. First of all, is
10. 0:23that even possible? And if it is, how
11. 0:26can we do that?
12. 0:28Well, the answer is yes, it is possible.
13. 0:30So, how do we do it?
14. 0:33Basically,
15. 0:35uh Cloud Code is going to read our Figma
16. 0:37design. All we're going to do is just
17. 0:40give this Figma link. Uh so, let's say
18. 0:43you receive a design from the designer
19. 0:45or you built it yourself
20. 0:47and you have a Figma URL. All we're
21. 0:49going to do is just give this URL to
22. 0:51Cloud Code and then it's going to build
23. 0:54this landing page, article page, about
24. 0:56page. We're going to ignore the shop and
25. 0:58product details, but we'll focus on
26. 1:00these basic pages first.
27. 1:03Right. Uh
28. 1:04so, um
29. 1:07it's going to read through the Figma
30. 1:08design through Figma MCP server
31. 1:11and it's going to scaffold the whole
32. 1:13classic theme for us
33. 1:15and it's going to follow all the
34. 1:16template hierarchy, uh create the index
35. 1:18file, uh the single.php, etc.
36. 1:22Uh
37. 1:23and also the the home page and it's
38. 1:26going to enqueue all the styles and
39. 1:28scripts, etc. Okay? What we're going to
40. 1:30need for this is basically Node.js and
41. 1:32NPX. Uh I already have got that
42. 1:35installed. If you haven't, then you can
43. 1:36install it.
44. 1:37And um one of the most important thing
45. 1:39we're going to need is Figma personal
46. 1:41access token. There are different ways
47. 1:43to do it, but um if you have a free
48. 1:45account with Figma, this will be the the
49. 1:48easiest one to do.
50. 1:49Otherwise, uh you're going to need to
51. 1:52buy the pro version of Figma. But, in
52. 1:54this video I'm going to show you the
53. 1:56free one if you have a free Figma
54. 1:58account, so you don't have to
55. 2:00buy a pro version. Okay. Uh and then you
56. 2:03once you create a personal access token,
57. 2:05you need to give the read only access
58. 2:08for the file content for the cloud to be
59. 2:10able to read um all of the content of
60. 2:13your Figma file in order for it to
61. 2:14generate it for you.
62. 2:16And of course, the access to the cloud
63. 2:17code uh in your project directory.
64. 2:20How it's going to work is you will
65. 2:22create the personal access token. Then
66. 2:26you're going to run this command uh by
67. 2:28passing your uh token
68. 2:30uh on on your terminal.
69. 2:32It's going to verify its connection.
70. 2:34You're going to restart the cloud code.
71. 2:36And then it's going to basically read
72. 2:39the layout styles, colors, export the
73. 2:41image icon assets, and it's going to
74. 2:43build the theme for you. Okay. So,
75. 2:46uh let's just um start to see how that
76. 2:49goes.
77. 2:51So, I have got
78. 2:53uh the local uh WordPress running.
79. 2:55And um
80. 2:57in this folder, sites folder, which is
81. 2:59basically this guy, WordPress example,
82. 3:01uh I'm going to run the cloud code.
83. 3:05And then I'm going to give this a
84. 3:07command.
85. 3:08Okay, so I'm going to say build
86. 3:11a classic oops
87. 3:13build
88. 3:15a classic WordPress
89. 3:19theme
90. 3:21here
91. 3:23using the Figma
92. 3:26design.
93. 3:28And
94. 3:30here is my Figma link.
95. 3:35And this is my Figma Figma link which
96. 3:36I've copied and I'm going to paste it
97. 3:38over here. And I'm going to hit enter.
98. 3:40All right. So, it took a it took some
99. 3:42time and here is what it's got for me so
100. 3:44far. So, it says, "Let me set this up.
101. 3:47The Figma cloud code connection uses
102. 3:49Figma's official dev mode MCP server,
103. 3:52which runs locally through the Figma
104. 3:54desktop app. And let me check your
105. 3:56current setup.
106. 3:58So, it checked a few things.
107. 4:00Uh here is what it found. Figma desktop
108. 4:02app is installed. So, I have got the
109. 4:04Figma uh desktop app, as you can see,
110. 4:07installed already.
111. 4:09And um what it doesn't have is it
112. 4:12doesn't have the MCP server yet.
113. 4:14No Figma MCP configured in the Claude
114. 4:17code yet. So, it's saying that there are
115. 4:19two ways to do it.
116. 4:20Um
117. 4:22one is
118. 4:25connect Figma. Which one you use depends
119. 4:27on your Figma plan. Let me
120. 4:29have you pick up. Okay. So,
121. 4:31it gave me a couple of choices and um I
122. 4:34went with
123. 4:36using the token because I have the free
124. 4:39plan.
125. 4:40Um
126. 4:42Okay, and then it's setting that up for
127. 4:43me.
128. 4:44Uh it says node and NPX are ready. Now,
129. 4:47you need Figma personal access token.
130. 4:49So, it gives me the step how to
131. 4:52basically get that information. So, I'm
132. 4:54going to go ahead and get that.
133. 4:56So, I'll just go to Figma
134. 4:59.com.
135. 5:01Then, I'm going to click on the icon.
136. 5:04So, it says, "In Figma, click your on
137. 5:06your avatar and then settings."
138. 5:09So, avatar and then settings.
139. 5:13And then uh
140. 5:15personal access token, generate new
141. 5:17token. So, I'm going to go to security.
142. 5:19Uh and then I'm going to click on
143. 5:21generate new token.
144. 5:23And then I'm going to give this a name
145. 5:25of
146. 5:26Claude code token.
147. 5:31Okay. And then it says, uh
148. 5:35"Give it a name."
149. 5:36And then for scope, set the file content
150. 5:39read only. That's all that's needed.
151. 5:41So,
152. 5:42let's see. File comment, file content
153. 5:45read only, right?
154. 5:47Um
155. 5:48I can give more read options if it needs
156. 5:50to, but basically you need to
157. 5:52give the read option only and nothing
158. 5:55else.
159. 5:57Okay, I think that should be okay. And
160. 5:59then I'm going to generate token.
161. 6:01So, generate token. You can see that
162. 6:03I've got the uh cloud code token over
163. 6:05here. You can click on this to copy it.
164. 6:08Uh later on you won't be able to copy
165. 6:10it, so make sure you copy it from here.
166. 6:12And then uh step two is add the MCP
167. 6:15server to the cloud code.
168. 6:17Once you have the token, you'll have two
169. 6:19options. Recommended uh type this prompt
170. 6:22and replace
171. 6:23this one uh
172. 6:25this guy with the token and hit enter.
173. 6:27And second is just paste
174. 6:30uh your token here and then I'll run the
175. 6:32command for you. Okay? So, I'm going to
176. 6:34go with the option one. So, I'm going to
177. 6:37copy this, paste it, and then I'm going
178. 6:40to
179. 6:41copy this token.
180. 6:43And I'm going to replace
181. 6:45your token here.
182. 6:47And then I'm going to run this command
183. 6:49on the terminal.
184. 6:50All right. So, as you can see I ran that
185. 6:52command and now it asked me to restart
186. 6:55the restart the cloud.
187. 6:58And uh uh it it verifies basically that
188. 7:01it's connected. It says Figma is
189. 7:02connected. Let me load the Figma tools
190. 7:04and pull your design.
191. 7:06It pulls up my design,
192. 7:08right? And then
193. 7:10uh Figma MCP server is connected. Uh
194. 7:12tools haven't loaded, so it's going to
195. 7:14load the tools,
196. 7:16right?
197. 7:17And it needs a full restart, not just
198. 7:19MCP.
199. 7:21So, basically you need to
200. 7:23um
201. 7:24just close the cloud and start that
202. 7:26again, okay?
203. 7:28So, once you've done that, it says
204. 7:31everything is set up correctly. Confirm
205. 7:32the server exposes these two
206. 7:35tools, which is get Figma data, which
207. 7:37reads your files layout, styles, colors,
208. 7:39text, and then download Figma images,
209. 7:41which exports the image and image icon
210. 7:43assets.
211. 7:44Okay, and then setup is complete. One
212. 7:46step left. Figma MCP server added.
213. 7:49Server connects. Tools exposed. The only
214. 7:52thing we need to do is restart the
215. 7:54session. So, I'm just going to close the
216. 7:56cloud and then
217. 7:58open it back again.
218. 7:59When I restart, it's saying that it's
219. 8:01going to do XYZ things, which is
220. 8:05fetch the node from the file get Figma
221. 8:07data. It's going to download the image
222. 8:09icons scaffold classic WordPress theme.
223. 8:12And it's also asking me to give it a
224. 8:14directory where it wants where I want
225. 8:17the theme to be installed. So, it's just
226. 8:20saying just give it the path.
227. 8:22And then go ahead and restart the cloud
228. 8:24and and let it know. So, I've using use
229. 8:26the exit to exit it and I've resumed the
230. 8:29session.
231. 8:30And then I've said that pull my Figma
232. 8:32design and build the theme in this
233. 8:34folder and call cos barrel.
234. 8:37It says Figma tools are now available.
235. 8:40It's loading
236. 8:42them up to pull my design. Both tools
237. 8:45are loaded.
238. 8:47And then
239. 8:49it's also picking up that it's landing
240. 8:51page title. So, it's actually got the
241. 8:53access of the
242. 8:55design. So, if I go to the design, you
243. 8:57can see this is the landing page we
244. 8:59have.
245. 9:01Right? Um
246. 9:03and it pulls the broader structure. It
247. 9:04says file is large.
248. 9:07It sees the real design, right?
249. 9:10And then I instructed it to say that
250. 9:13only do the landing article and about
251. 9:14because of course
252. 9:16currently I don't want everything to be
253. 9:18built up. So, just want it to do the
254. 9:20landing article and about.
255. 9:23Uh so, it says got it, confirmed. Just
256. 9:26landing and about and let's keep doing
257. 9:29its thing.
258. 9:30Right? Let's keep moving.
259. 9:33It has pulled design.
260. 9:36Uh design tokens. So, it has pulled up
261. 9:38that
262. 9:40font is enter, color
263. 9:42uh
264. 9:43typography, buttons, layout. Everything
265. 9:46is pulled up from Figma, which is great,
266. 9:48right?
267. 9:49If I click on that, you can see that
268. 9:51it's 1440 over here, right? 1440. That's
269. 9:54what it's picked up.
270. 9:56Padding and everything is picked up from
271. 9:57there.
272. 9:59And it's building the theme.
273. 10:01functions.php,
274. 10:03header, footer.
275. 10:05And
276. 10:07now the landing page front page.php,
277. 10:10single.php,
278. 10:12about,
279. 10:14index page.php.
280. 10:16All templates are written. All templates
281. 10:19are written.
282. 10:20Now it's validating.
283. 10:22Looks like it's built everything we
284. 10:24need, uh like style, functions, header,
285. 10:26footer, front page.
286. 10:28Everything's been set up.
287. 10:30And then all it's asking me to do is
288. 10:32activate the theme,
289. 10:34right? What I'm going to do now is just
290. 10:37check what it's done. So, if I go over
291. 10:39here
292. 10:41and I check
293. 10:42my project,
294. 10:45I can see that it's created this Cost
295. 10:47Peril theme here, and it's created all
296. 10:49the files.
297. 10:51I can see this is my style.css.
298. 10:54And [clears throat] it's created these
299. 10:55these um
300. 10:57CSS custom variables for
301. 10:59the theme colors, the radius, the
302. 11:02container size.
303. 11:03And it's added all the styles into it
304. 11:06from that Figma. It's using the CSS
305. 11:08variable, that is great.
306. 11:10Later on I can ask ask it to move the
307. 11:12CSS variables to the theme.json file,
308. 11:15but
309. 11:16this is very good for a start.
310. 11:18And uh as you can see, it's also using
311. 11:21BEM uh to style, even though I didn't
312. 11:24ask it to, but it's following the best
313. 11:26practices, which is great. It's also
314. 11:28added comments and stuff.
315. 11:31That is fantastic. So, these are all the
316. 11:33styles, not much, just 680 lines of
317. 11:36styles. Now, let's take a look at
318. 11:38index.php, so you've got your header,
319. 11:42your footer,
320. 11:43and then you have section container,
321. 11:46all of that stuff.
322. 11:47I'm very curious to see the front end,
323. 11:49how it's going to look like. So, let's
324. 11:52go to the front end and we'll come back
325. 11:53to and and read more about the files.
326. 11:56Okay, great. So, I can see it created
327. 11:58the theme called Cost Pedal. I'm going
328. 12:00to activate it.
329. 12:03And I'm going to go to front end and
330. 12:04let's see how close it is to the design,
331. 12:07okay?
332. 12:09Ready? 1 2 3 boom.
333. 12:13All right.
334. 12:15Well, this doesn't look too bad.
335. 12:18Let's compare it with the design.
336. 12:20So, if you open it,
337. 12:23landing page, this is my header. Looks
338. 12:27good.
339. 12:28Landing page title, the structure is the
340. 12:30same.
341. 12:31Yep.
342. 12:33Spacing also looks same. This is the
343. 12:35image, which is great. It's written
344. 12:37that.
345. 12:38Then you've got the section heading.
346. 12:41Yep, exactly that.
347. 12:43Size also looks correct. Uh section
348. 12:46heading,
349. 12:48another one, looks absolutely right.
350. 12:52Then this section.
351. 12:56This one, this one I'm not sure. I think
352. 13:00this one it couldn't get it, but that's
353. 13:02okay. It already gave us a warning that
354. 13:05it's not going to be perfect, but it's
355. 13:07very close.
356. 13:09Uh this one,
357. 13:12let's see.
358. 13:14Yeah, not bad, not
359. 13:16not completely as it is, but not bad.
360. 13:18So, only these two sections it wasn't
361. 13:20able to
362. 13:21do. Uh this one,
363. 13:24yeah, exactly that.
364. 13:26And then the footer
365. 13:28footer is slightly off.
366. 13:30It couldn't get the footer right, but
367. 13:32that's okay.
368. 13:33We can fix that. And let's take a look
369. 13:35as to how
370. 13:37it looks on the mobile.
371. 13:39Even though we didn't give it the mobile
372. 13:40view, but you can see
373. 13:43not bad, right?
374. 13:45The mobile it's also responsive.
375. 13:49And that is pretty good.
376. 13:52So it's actually got the grid system in
377. 13:55place.
378. 13:58That is great. And if you go to mobile
379. 14:00view
380. 14:01it's also got the
381. 14:04hamburger menu working, which is great.
382. 14:07Perfect.
383. 14:08Now let's go to
384. 14:12Is there any JavaScript? Yeah, it did
385. 14:13write the JavaScript also. It looks like
386. 14:15it
387. 14:16wrote the JavaScript for
388. 14:19um the navigation toggle, which is
389. 14:21great.
390. 14:23Um
391. 14:24and then
392. 14:25it's got header.
393. 14:28It's using the WordPress functions,
394. 14:29which is brilliant.
395. 14:31Using WP_Nav_Menu, which is great.
396. 14:34And then the footer
397. 14:37Okay, it's following the WordPress
398. 14:39uh templating structure
399. 14:42and the WordPress functions with the
400. 14:44proper escaping,
401. 14:45which is great.
402. 14:48It's got the front It's got the front
403. 14:50page.
404. 14:53Right? Looks good.
405. 14:57And then the functions.php looks like
406. 15:00it's added the theme support for title
407. 15:02tag, post thumbnails,
408. 15:04custom logo.
409. 15:09It also registered the nav menus, which
410. 15:11is great.
411. 15:14And it's using those nav menus. It's
412. 15:16enqueued the fonts, the styles, the
413. 15:19fonts from the Google fonts.
414. 15:21Um
415. 15:22and then the scripts, it's perfect.
416. 15:26And it's got the base.php, so it's
417. 15:29maintained the WordPress the loop. It's
418. 15:32got the commenting.
419. 15:34And it's got the single.php also for the
420. 15:37post.
421. 15:40Right?
422. 15:41Looks pretty good, actually.
423. 15:44Amazing. Isn't that amazing?
424. 15:45So, within like a few minutes it was
425. 15:48able to
426. 15:50convert your Figma file
427. 15:53into an actually running theme.
428. 15:55Okay, now we're going to check the
429. 15:56article page, so I'll go to the post.
430. 15:59And let's view this one.
431. 16:01Okay, and let's try to match it with the
432. 16:03design.
433. 16:04So, article or post title.
434. 16:07Very close, although the alignment looks
435. 16:09up slightly different, but very close.
436. 16:12Then I should have these two.
437. 16:17Nope, that's not there. That's all we
438. 16:19always because that comes from the
439. 16:20content, right? So,
440. 16:22that won't be there.
441. 16:23Does it have related posts?
442. 16:25Yeah, it has related posts. That is
443. 16:27great.
444. 16:28Comment is not mentioned here, although
445. 16:29it's added it. It doesn't know how to
446. 16:31style it, so it's fine.
447. 16:33And then
448. 16:36So, I would say not bad. It has actually
449. 16:38given us a starting point. It makes made
450. 16:40our job easier.
451. 16:42Now, all I have to do is just go and
452. 16:44tweak things that are and you basically
453. 16:46just fix things that are not in a way
454. 16:49that I aspired to be.
455. 16:51Brilliant. So, I hope you did like the
456. 16:54video. If you did, please give it a
457. 16:55thumbs up and do subscribe to my channel
458. 16:56if you aren't already. And I'm going to
459. 16:59see you in the next video and build some
460. 17:01really cool things. Bye-bye.