Minamahal na mga subscriber, Ngayon, gusto kong magbahagi ng bagong episode kay Felix Lee. Tinuruan ni Felix ang 1000s ng mga designer kung paano mag-code gamit ang Claude Code at Figma MCP. Nakuha ko sa kanya na ipakita sa akin kung paano niya iko-convert ang isang disenyo ng Figma sa isang gumaganang website at i-convert ang isang website pabalik sa mga nae-edit na layer sa Figma. Ang isang taga-disenyo na maaaring magpadala ay isa sa mga pinakamahalagang empleyado sa teknolohiya ngayon — alamin kung paano sa pamamagitan ng panonood sa episode na ito. Panoorin ngayon sa YouTube, Apple, at Spotify. Napag-usapan namin ni Felix ang:(00:00) 3 produkto na idinisenyo at binuo ni Felix sa Claude Code(06:36) Pagbuo ng 3D animated na mapa ng mundo sa one-shot(07:50) Ang app ni Felix na nagsusuri kung gaano kahusay ang iyong landing page(13:17) Demo: Figma na disenyo sa gumaganang website sa loob ng 15 min(23:07am) Demochar(23:07am) Demochar(23:07am) Isang kasanayan sa tagasuri ng UX para sa feedback sa disenyo(40:19) Paano i-export ang code pabalik sa Figma bilang mga nae-edit na disenyo(45:10) Bakit hindi sapat ang mabilis na pag-aangkop ng karamihan sa mga designer. Magagamit mo ito upang:I-explore ang mga variation ng disenyo sa isang walang katapusang canvasBumuo gamit ang maraming AI agent nang sabay-sabay gamit ang isang task board.Bumuo ng magagandang slide deck, animation at higit pa sa isang shot.Subukan ang Agent 4 nang 3 buwan nang libre sa pamamagitan ng paggamit ng aking code na PYANG26 sa pag-checkout. Kumuha ng Replit para sa 3 Buwan LibrengTop 10 takeaways natutunan ko mula sa episode na itoKung gumagamit ka ng Figma, ang Figma MCP ay ang pinakamahusay na paraan upang pumunta mula sa disenyo hanggang sa code:I-install. Sa iyong terminal, patakbuhin ang “claude mcp add --transport http figma https://mcp.figma.com/mcp”Authenticate. Buksan ang Claude Code, i-type ang "/mcp" at pagkatapos ay piliin ang Figma. Bubuksan nito ang iyong browser para ma-authenticate mo ang MCP gamit ang iyong Figma account. Kumopya ng Figma frame. Pumunta ngayon sa isa sa iyong mga disenyo ng Figma at i-right click ang anumang frame o layer. Piliin ang "Kopyahin ang link sa pagpili" at pagkatapos ay i-paste ang link sa Claude Code na may prompt: "Buuin ang disenyong ito." Ito ay kasing simple niyan. I-convert ang code pabalik sa mga nae-edit na layer ng Figma para mag-explore ng higit pang mga variation ng disenyo. Narito kung paano gawin ang hakbang-hakbang na ito pagkatapos i-set up ang Figma MCP: Magbasa pa
Paano Magdisenyo at Code gamit ang Claude Code at Figma MCP sa 50 Min | Felix Lee
By Creator Economy
·
·
2 min read
·
108 views
Read in:
aa
ace
af
ak
alz
am
ar
as
awa
ay
az
ba
ban
be
bew
+191 more
bg
bho
bik
bm
bn
brx
bs
bug
ca
ceb
cgg
ckb
co
crh
cs
cv
cy
da
de
din
doi
dv
dyu
dz
ee
el
en
eo
es
et
eu
fa
ff
fi
fj
fo
fr
fur
fy
ga
gd
gl
gom
gn
gu
ha
haw
he
hi
hil
hne
hmn
hr
hrx
ht
hu
hy
id
ig
ilo
is
it
ja
jam
jv
ka
kab
kbp
kg
kha
kk
kl
km
kn
ko
kri
ku
ktu
ky
la
lb
lg
li
lij
ln
lo
lmo
lt
ltg
lua
luo
lus
lv
mai
mak
mg
mi
min
mk
ml
mn
mni-mtei
mos
mr
ms
mt
my
nd
ne
nl
nn
no
nr
nso
nus
ny
oc
om
or
pa
pag
pam
pap
pl
ps
pt
pt-br
qu
rn
ro
ru
rw
sa
sah
sat
sc
scn
sg
si
sk
sl
sm
sn
so
sq
sr
ss
st
su
sus
sv
sw
szl
ta
tcy
te
tg
th
ti
tiv
tk
tl
tn
to
tpi
tr
trp
ts
tt
tum
ty
udm
ug
uk
ur
uz
ve
vec
vi
war
wo
xh
yi
yo
yua
yue
zap
zh
zh-hk
zh-tw
zu
