Тёмный

Transform Figma to code with Visual Copilot 

Подписаться
Просмотров 16 тыс.
% 225

Watch how to transform Figma to clean code using Visual Copilot. Use AI to build a new component and build a new landing page from scratch.
Builder.io’s CEO, Steve Sewell, will teach you how to use AI to turn Figma files into clean code with Visual Copilot. Get a recap of what you missed during our launch and updates post-launch.
In this video, Steve will teach you how to:
- Use AI to build a new component from a popular page
- Bring that component into Builder so you can drag and drop with it
- Build a new landing page from scratch 50% faster with Visual Copilot
- Leverage the Visual Copilot best practices we’ve learned so far
0:00 Intro + Why use Visual Copilot
3:43 Export from Figma to Builder
5:33 Exporting Code from Builder
6:19 Helping Visual Copilot understand your content
10:07 How Mitosis Works
11:26 Quality code export
13:38 Customizing code with AI chat
14:44 Custom instructions
16:00 Q+A How did you train Visual Copilot?
17:51 Exporting pages
20:07 Bringing code into your codebase
22:40 Troubleshooting and improving results
25:20 Using Builder Dev Tools
30:45 Copy and paste layouts
31:50 Generate new content with AI
34:00 Using Figma components and props
37:30 What's next for Visual Copilot
42:40 Q+A

Развлечения

Опубликовано:

 

6 дек 2023

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 13   
@erikswanson3441
@erikswanson3441 Месяц назад
the only thing i have an issue with is your pricing model with page views. I dont think that u should, pretty much, get continuous pay based on page views. Its a little bit excessive.
@FlygOnLiTe
@FlygOnLiTe 9 месяцев назад
Thanks that really cleared things up for me
@HSGG_
@HSGG_ 8 месяцев назад
please add support for chakra ui when using react, its component based which compliments react nicely.
@_coderizon
@_coderizon 10 месяцев назад
will there be Figma to Flutter code in 2024? wold be great!
@biloczka
@biloczka 10 месяцев назад
Дякую, почала з дітьми в школі вивчати Figma, а тепер беремо мову розмітки html, але хотілось чогось саме пов'язаного з Figma
@MrAkshay1438
@MrAkshay1438 6 месяцев назад
How can I integrate a custom component library (that is provided as npm package) that offers more than just styling, such as an accordion component, Tables with some complex functions and components that react based on the prop values provided to them?
@SimenStaabyKnudsen
@SimenStaabyKnudsen 8 месяцев назад
Do I need to use Figma first? Can't I just produce what I want inside Builder? Seems like it works pretty much exactly like Fimga, or am I wrong?
@lutfiikbalmajid
@lutfiikbalmajid 9 месяцев назад
Hi, i want to give review. I've been using many figma to code, the code seems using absolute potition, however the code generated by visual copilot seems look human code using flex etc, the good thing is, it is responsove! cool. But. i couldn't find Quality Code Generation usage, where it is? i just want to make sure not exceed free plan hehe
@JustThinkingAboutIt-i5k
@JustThinkingAboutIt-i5k 5 месяцев назад
How can I use Figma to determine exactly how I want my responsive to work instead of having to select on frame size and allow builder to determine how it wants to make things responsive? I have variables and modes setup as most figma projects have so how do I tell builder.io to respect what I setup in 3 screens mobile, tablet and desktop? Is this a limitation?
@mcxue6529
@mcxue6529 9 месяцев назад
How to access your own component library
@EricNation
@EricNation 10 месяцев назад
If it's not already a feature request or in the backlog, how can I request that PandaCSS be added as an option for supported styling outputs in Visual Copilot?
@lutfiikbalmajid
@lutfiikbalmajid 9 месяцев назад
PandaCSS? just knew it, another tailwind likely
@zeroseven2882
@zeroseven2882 9 месяцев назад
It's to complicated, when i run pluggin from figma is not same. Always untidy design in builder or something missing