Converting Figma Design To Code using Builder.io

Summary

このビデオでは、Figmaデザインをコードに変換する方法を紹介しています。特に、Builder.ioを使って、デザインのレスポンシブ性を向上させるプロセスを詳しく解説します。まず、レイヤーを選択してBuilder.ioでコード生成を行い、その後、ナビゲーションバーやボタンなどのデザイン要素の調整を行います。さらに、オートレイアウトやグルーピングを活用して、AIがより正確にレスポンシブデザインを生成できるようにします。最終的には、改善されたデザインをBuilder.ioで再びコードに変換し、レスポンシブデザインの調整を細かく行います。このビデオは、FigmaとBuilder.ioを使って、効率的にデザインからコードへの変換を行う方法を学びたい人にとって有用です。

Takeaways

• 📌 ビデオの目的：Figmaのデザインをコードに変換する方法を紹介する
• 🔍 ビルダーの使い方：Figmaのデザインを選んで、コードに変換するプロセスを説明
• 🔗 デザインリンク：ビデオ説明欄にデザインのリンクを提供
• 💻 ビルダーのアドオン：Figmaのメニューからビルダーを管理し、検索してアクティブ化
• 🛠️ コード生成：ビルダーをクリックしてコードを生成し、builder.のウェブサイトに移動
• 🔍 問題点の確認：生成されたコードを確認し、AIの誤りを修正
• 🔄 レスポンシブデザイン：Figmaファイルに戻り、要素にAuto Layoutを提供し、グループ化
• 📏 Boxモデルの理解：ページの要素をボックスとして考え、適切なレイアウトを提供
• 🔧 要素の調整：ボタンやテキストのサイズを変更し、適切にレイアウトを調整
• 🖼️ 画像の扱い：builder.ウェブサイトで画像が表示されない場合、適切な画像を提供
• 📱 モバイル最適化：ナビゲーションバーを隠し、ハンバーガーメニューを表示
• 🎨 デザインのカスタマイズ：builder.のオプションを使ってデザインのレイアウトやスタイルを調整
• 📈 要約：ビルダーを使ってFigmaのデザインをコードに変換し、レスポンシブデザインを提供

Q & A

builder.を利用してFigmaのデザインをコードに変換する方法はどのように行われますか？

Figmaのデザインをコードに変換するには、builder.を利用する必要があります。まず、デザインを選んで、builder.のプラグインを有効にします。選択したレイヤーに対してbuilder.を実行し、コードを生成します。生成されたコードはbuilder.のウェブサイトで確認し、必要に応じて修正や調整を行います。

デザインのレスポンシブ性はどのように確保されますか？

builder.は自動的にデザインのレスポンシブ性を提供します。ただし、AIが生成したコードには誤りがある場合があるため、手動で修正する必要があります。テキストのオーバーフローやボタンのデザインの問題を解決するために、Figmaファイルに戻り、Auto Layoutとグループ化を適切に行うことで、AIがレスポンシブ性を改善できるようになります。

builder.のプラグインが表示されない場合はどのようにすれば良いですか？

builder.のプラグインが表示されない場合は、Figmaのメニューから「プラグイン」を選択し、「builder.」を検索して有効化します。新しいタブが開かれ、プラグインを使用できるようになります。

グループ化とAuto Layoutの設定はどのように行われますか？

グループ化は、同じレイヤーを選択し、「Control+G」（または「Command+G」如果是Mac）を使用することで行います。Auto Layoutは、グループ化されたレイヤーを選択し、「Shift+A」を使用して設定します。これにより、AIがデザインのレスポンシブ性を改善しやすくなります。

Box modelの概念はどのようなものですか？

Box modelは、ウェブページのすべてのコンテンツをブロックまたはボックスとして扱う方法です。ボックスは他のボックスに含まれ、レイアウトとデザインに必要なスペース（余白、ボーダー、パディングなど）を持ちます。builder.のドキュメントを読むことで、Box modelの概念を正しく理解し、適切にレイアウトを計画することができます。

builder.が生成したコードに問題がある場合はどのように修正すれば良いですか？

builder.が生成したコードに問題がある場合は、Figmaファイルに戻り、不足している画像や不正確なテキストを修正することができます。また、レイアウトやデザインの調整が必要であれば、builder.のウェブサイトで直接コードを編集することができます。

builder.で提供される異なるフレームワークのコードを表示するにはどうすればいいですか？

builder.で提供される異なるフレームワークのコードを表示するには、生成されたコードのページで、必要に応じたフレームワーク（例えばReactやReact Native、Angularなど）を選択することができます。スタイリングのオプションも同様に選択することができます。

モバイル画面でのナビゲーションバーの表示はどのように調整されますか？

モバイル画面でのナビゲーションバーは、builder.のウェブサイトで直接非表示に設定することができます。また、コードを編集してハンバーガーメニューを表示することも可能です。さらに、必要に応じてページの背景、タイポグラフィ、レイアウトなどを調整できます。

builder.を使用する際に重要とされる2つのことは何ですか？

builder.を使用する際に重要とされる2つのことは、Auto Layoutの提供と要素のグループ化です。これにより、AIがデザインを正しく配置し、レスポンシブ性を改善するのに役立ちます。

builder.のドキュメントを読むことで何を学ぶことができますか？

builder.のドキュメントを読むことで、Box modelの概念やレイアウトの計画方法など、builder.を使用するための基礎知識を学ぶことができます。また、builder.の機能や使い方をより深く理解し、デザインからコードへの変換プロセスをスムーズに行うことができます。

builder.で生成されたコードをカスタマイズするにはどうすれば良いですか？

builder.で生成されたコードをカスタマイズするには、builder.のウェブサイトで直接コードを編集することができます。必要に応じて、レイアウト、デザイン、タイポグラフィ、ビジュアル要素などを調整し、最終的なデザインに合致するよう微調整を行ってください。

Outlines

00:00

🚀 ビデオの紹介とFigmaデザインの選択

ビデオの概要と目的を説明し、Figmaデザインを使用してBuilder.を使ってコードに変換する方法について説明します。ビデオで使用するデザインは、説明欄にリンクを提供しています。Builder.がデザインにResponsivenessを提供する方法についても触れています。

05:00

🛠️ Builder.プラグインの使用とコード生成

FigmaのメニューからBuilder.プラグインを選択、有効化する方法と、コード生成プロセスをステップバイステップで説明します。コードが生成される様子を見ることができます。Builder.が生成したコードを確認し、いくつかの問題点に注意します。

10:01

🔧 レスポンシブデザインの改善とAutoレイアウトの適用

Builder.のAIが生成したコードの問題点を指摘し、Figmaファイルに戻り、改善する方法を説明します。Autoレイアウトを提供し、要素をグループ化して、より良いResponsivenessを実現します。具体的には、ナビゲーションセクションの改善方法と、Boxモデルの概念を紹介します。

15:01

🖼️ 画像の挿入とデザインの最終調整

Builder.のコード生成プロセスを再度実行し、デザインに必要な画像を挿入する方法を説明します。また、Desktop、Tablet、Mobileデバイスでの表示を調整する方法も触れています。最後に、ビデオの目的と成果をまとめ、視聴者に次のステップを提案します。

Keywords

💡Figma

Figmaは、ウェブベースのグラフィックデザインツールで、このビデオではデザインをコードに変換するプラットフォームとして使用されています。デザインの作成と共有が容易で、特にレスポンシブデザインの開発に適しています。ビデオでは、Figmaで作成されたデザインをBuilder.ioを使ってコードに変換する過程を説明しています。

💡Builder.io

Builder.ioは、デザインをコードに変換するツールで、Figmaのプラグインとして機能します。このビデオでは、Builder.ioを使用してFigmaのデザインをコード（特にレスポンシブなウェブデザイン）に変換する方法を紹介しています。ユーザーは、Builder.ioで自動的に生成されたコードをカスタマイズして、レスポンシブデザインの精度を向上させることができます。

💡レスポンシブデザイン

レスポンシブデザインは、異なる画面サイズやデバイスで一貫したユーザー体験を提供するウェブデザインのアプローチです。このビデオでは、Builder.ioを使用してFigmaのデザインをレスポンシブなコードに変換するプロセスを説明しており、異なるデバイスで適切に表示されるようにデザインの調整を行っています。

💡Auto Layout

Auto Layoutは、Figmaの機能の一つで、要素のサイズや配置を自動的に調整することでレスポンシブデザインを容易に実現します。ビデオでは、デザインの要素にAuto Layoutを適用し、それによりBuilder.ioでの変換時にレスポンシブ性が向上することを説明しています。

💡ナビゲーションバー

ナビゲーションバーは、ウェブサイトの重要なインターフェース要素で、ユーザーがサイト内を移動するためのリンクを提供します。ビデオでは、ナビゲーションバーのデザインの調整と、それをレスポンシブにするためのBuilder.ioでのコード生成プロセスを説明しています。

💡グルーピング

グルーピングは、複数のデザイン要素を一つの単位として扱うプロセスです。Figmaで要素をグループ化することで、Builder.ioがレスポンシブなコードをより効率的に生成できるようになります。このビデオでは、特定のデザイン要素をグループ化してから、それらにAuto Layoutを適用する方法を紹介しています。

💡Boxモデル

Boxモデルは、ウェブデザインでコンテンツのレイアウトを構成するための基本的なコンセプトです。マージン、ボーダー、パディング、コンテンツ領域を含んでいます。ビデオでは、Boxモデルの概念を説明し、レスポンシブデザインにおけるその重要性を強調しています。

💡アライメント

アライメントは、デザイン要素の位置を調整するプロセスです。ビデオでは、特にレスポンシブデザインにおけるテキストや画像などの要素の配置方法について説明しており、これらの要素を適切にアライメントすることで、さまざまなデバイスや画面サイズでの表示を最適化しています。

💡コードのカスタマイズ

コードのカスタマイズは、自動生成されたコードを手作業で調整し、特定のデザイン要件や機能要件を満たすプロセスです。このビデオでは、Builder.ioによって生成されたレスポンシブなコードを手作業で調整することで、より精密なデザインの制御が可能になる方法を紹介しています。

💡スクリーンサイズ

スクリーンサイズは、デバイスのディスプレイの寸法を指し、レスポンシブデザインでは重要な考慮事項です。このビデオでは、異なるスクリーンサイズに合わせてデザインを調整し、それらをBuilder.ioでコードに変換する過程を示しています。

Highlights

使用Builder将Figma设计转换为代码

设计将具有响应性

选择设计并使用Builder插件生成代码

Transcripts

hey there everyone today I have an

interesting video for you where we will

use builder. to convert the figma design

into code and yes our design will be

responsive too if you're ready to

convert your design to code let's get

into it here I already have the design

that I selected for this video and if

you want to use the same design then I

will leave the link for it in the

description box okay so let's get going

before we start with the conversion

let's first look at how builder. I

directly provides responsiveness to this

design so what we have to do is Select

this layer just like this and then you

can press control plus forward slash on

your keyboard to bring this search bar

so here we will search for

builder. and if by any chance you don't

get this over here what you can do is

you can go into this figma menu and then

in plugins option you can can select

manage plugins and here you can search

for

builder. Okay and then select this and

it will bring us this new tab over here

as a layer is already selected so it's

set to generate the code so let's click

on this button so now it is generating

our code so let's wait for a moment and

there we have our code so let's click on

view code button and then it will take

us to the builder. website and there we

have our code ready and if you look at

how builder. provided the responsiveness

to our design there are some mistakes

like this navigation bar and then here

we don't have the image okay you will

see we don't have the image and then we

have this button which doesn't really

look good okay so these are some of the

mistakes which AI has done okay so we

have to improve this so let's start

doing it what we will do is we will head

back to our figma file over here and

then select the layer copy this layer by

clicking on control+ C or you can just

right click on your mouse and copy from

here and then let's minimize this for

now and let's move ahead and down here

let's paste that design just like this

okay let's move it more down here we

should not make changes to our main file

okay never and one more thing that I

want want to tell you is that when we

decrease the screen size you will notice

the text overflow and it doesn't look

good so what we can do is we can provide

Auto layout for each of these elements

present on our web page in even we are

going to group them together so they can

have a proper Auto layout okay providing

Auto layout and grouping the elements

together will help AI better to improve

their responsiveness so we will start by

working on this navigation section so

what I'm going to do is I'm going to

remove this Technologies and how to

section and even this contact us

button after deleting them then select

this service layer and also this about

layer and then let's move it over here

so that it can look better and there

perfect and now we start by grouping the

elements together and then providing

Auto layout to them what we will do is

we will select this logo and press shift

and select this Hydra layer or you can

even select it from this layer now these

both are selected let's group them

together to group them what you can do

is right click on your mouse and then

here you have this group selection and

its shortcut is control+ G so I'm going

to use control+ G from now okay so let's

group them now they are grouped all

together here you will see this this one

frame and this second frame are grouped

together and then let's provide them the

auto layout to provide them Auto layout

we have a shortcut key which is shift

plus a so let's click on this and from

now on I will use shift plus a for auto

layout because it's easy okay so now

these both are grouped together and they

also have an auto layout now let's move

on to here about and service section

let's group them together by clicking on

contrl + G and then providing them the

auto layout by pressing shift plus a so

we have provided Auto layout to this

section also and we also have group them

together now one thing I want to tell

you is that when we try to add something

to this button it does not resize or if

you want to reduce something it really

does not resize so what we can do to

resize the button according to the

content inside it is by selecting this

join Hydra layer or text over here you

will see and then we will select the

button just like this we will group them

together by clicking on crl + G and then

we will provide them the auto layout by

clicking on shift plus a so now they are

also grouped and have Auto layout and

now when we try to add something you

will see the button resize and if you

remove something from it the button also

resizes okay so let's just keep it how

it was before we move further by

grouping all of the elements present in

the navigation bar one thing I want you

to know is the concept of Box model

which is really very important for the

responsive

designs so this is the diagram that I

have prepared so that we can better

understand the concept of Box model as

you will see here that this is our main

page okay inside which we have two main

boxes which is one navigation box and

another one being the main content of

the page with this orange outline and

inside this navigation we have this one

logo over here which is one specific

block and we also have some special

links and these all the links are kept

inside this black box and then we have

another box in the navigation that is

the button so all together this logo

this navigation links and this button is

contained inside one big box inside this

Orange Box orange outline box we have

this one green box and we have another

box which is for the footer inside this

main content box we have two big boxes

this one with a yellow background and

this one with the blue background which

contains the images okay so basically

this is the image which I prepared to

tell you that all of the content on our

web page is considered to be a block or

a box and similarly these small boxes

are contained inside one big box just

like this correct so this is the concept

of Box model and if you want to learn

about the Box model concept properly

what I will suggest is you should read

this documentation which is present on

builder. and I will leave the link for

this in the descript description so you

don't need to worry okay learn about it

and then plan your layout accordingly

just like this so yeah let's head back

to our design so we should now group all

of these elements which are present in

our navigation to be a one group so

let's select this section okay just like

this and select this button and then

let's group them together crl + G and

then provide them the Auto layout shift

and a and if you notice when we provide

the auto layout they shift according to

this button so now that we have grouped

them together let's group this section

together also so let's group them

control+ G and provide them the auto

layout now we have to work with this

blue box section so let's first see this

this is one frame okay if you see over

here and this is another frame select

this layer and then press shift on on

your keyboard and select this then click

on contrl + G okay now they are group as

you will see here then let's provide

them the auto layout and now we have the

auto layout for them let's have Auto

layout for this section also because

this is one independent block so let's

give this an auto layout by pressing

shift + a and then this will also be one

box okay now similar to what we did for

this joint Jo hyra button we will do for

this build your world button we will

select this text and then this button

now they both are selected group them

together provide them the auto layout

and now when we try to add something or

remove something the Box resizes isn't

it perfect okay and also let's provide

this an auto layout because this is one

another block let's provide this the

auto layout and then

select this and this to be together

because they are going to be in one line

so first group them together and then

provide them the auto layout Shi and a

so Auto layout has been added now let's

group all of these together select this

layer select this and also this now this

is one full big box group them together

by doing Control Plus G okay now they

are grouped over here and then provide

them the auto layout out and if you saw

they shifted accordingly okay and now

let's provide Auto layout for this image

also if you notice that we did not got

an image in the builder. website okay

over here what best we can do that is we

can provide an image accordingly from

here even if this image does not appear

we should provide the layout for this

rectangles we will select this layer

which is providing the radius to the

image and then we have another rectangle

which is the back one this one okay if I

separate it out this one is the layer I

talking about okay so let's select this

layer and also this layer and then group

them together now you will see that

image overflows what we can do best is

we will just delete this image as of now

and then what we group together this two

rectangles we will provide them them the

auto layout by clicking on shift and a

so now they are grouped together and we

will delete this image for now okay now

let's group all of these together

because this is one big box on our web

page so select this layer and then

select this layer let's group them

together contrl + G and then provide

them the auto layout these text are

aligned accordingly for this we will

have to provide them the auto layout for

each and every text okay so let's start

doing this first we will provide them

the auto layout then we will group them

together so let's provide this an auto

layout provide this an auto layout even

this an auto layout if you see it aligns

accordingly to all of its content

present over here then let's provide

this an auto layout this an auto layout

and also Auto layout to this same thing

we will do for this and now we have Auto

layout for each of these frames now

let's group them together just like this

control+ G and then shift and a but one

thing if you notice that this gets down

we don't want this so let's first group

these two text together crl + G now

select this layer also and then group

them together and then providing Auto

layout for this one full block okay same

thing for this let's group these text

together and then select this and

provide them the auto layout similarly

for this and this group them together

select this provide them the auto

layout now that is done this is one full

box isn't it right so let's provide

first of all this rectangle and auto

layout so that it can reset size

accordingly let's group

this this and this together and then

provide them the auto layout now let's

group all of these together because this

is one full group we have done that

let's give them the auto layout okay so

that's

perfect and now that we are done with

this section over here one thing that is

remaining is that this is a shape and it

has some layers so to have this align

properly in our code what we can do best

is we can flatten this shape right click

on your mouse and here you will select

flatten so that the unnecessary layers

will get removed okay and it won't

affect our design that much when we

generate our code so now that we are

done with this section you can do same

thing for this also you can have Auto

layout for these headings you can

flatten this Arrow give Auto layout to

this and then group this section

together so you can just go ahead and

follow the instructions for each of

these sections you just have to Auto

layout and group them together one by

one so now that we are done with this

part let's generate the code and look at

how builder. I gave us the

responsiveness for this design so let's

call builder. iio it will bring this new

popup and it is asking us to select

layer to export the code so we will s

select this layer click on the button

generate code and now that is ready

let's click on view code and here we

have the code for react if you want to

change it to view SW react native

angular or whatever you want you can do

it from here and for styling you have

different options and let's just look

how it will look at the desktop so this

is how it is going to look and of course

we didn't got the image so we are going

to bring it how we can do that is Select

this layer and then here fill the image

click on this and here I have this photo

so I'm going to select it and it gave us

this photo over here perfect and if you

see over here the heading is not proper

let's see in the design what the heading

is it is dive into the dep so let's just

write it over here double click on it

and let's write it over here Dive

Into the Depths perfect and then we have

this button which does not look good

okay so so let's select this box have

the width for it to be shrink what this

will do is it will shrink horizontally

so that the content can fix and then we

will align it to the left side so for on

the desktop screen everything is perfect

okay then let's go to the tablet devices

we want this heading and paragraph and

this button to be centered so what we

can do is here you can go in layouts and

in align you will do it Center

horizontally so it will Center them and

and then let's do the same for this

image Also let's Center it

horizontally and that's perfect isn't it

on Mobile screen devices we should not

have navigation bar like this so what we

can do is we can hide it visibility then

we will have the hamburger menu over

here you could do it in your code there

are so many things over here that you

could do anything according to your

needs you can change your layout change

the visibility you can have the

background for this full web page you

can change the typography change the

font size line height margin and pening

then you have border if you want to do

it so just try it okay the only two

things that we have to basically do so

that the builder. AI knows what the

responsiveness is is providing Auto

layout and grouping the elements

together so that they can be aligned

properly and that's how we use builder.

to convert a design into Cod and that

wraps this video I hope this video helps

you convert Your Design into code in a

matter of time also if you have any

doubts feel free to drop a comment below

or you can even join my Discord server

the link for it will be given in the

description box thank you for joining me

today and I'll see you in the next video

till then bye-bye and take

care