はじめに
先週YouTuberの記事を書きましたが、その中で紹介したJavier Suárezさんが作ったFigmaのデザインをそのまま.NET MAUIに持ってくるツールを使ってみたので、その紹介をします。
他の記事で導入方法については書いていますので、ここではインストール後からお話できればと思います。
Figma Design to .NET MAUI
さて、ここからが本題になります。
まず、インストールしたFigma.Maui.Graphics.Sampleを開きます。
ここに赤の線のところにコピーしたFigmaのアクセストークンを貼り付けます。
そして黄色いところにはデザインを持っていきたいFigmaFileのURLのFileID部分をコピペします。
「Generate」を押すとC#のコードが作成されるので「Export」して保存してください。
.NET MAUIで実装
新規作成をして生成したコードを表示するGraphicsViewを作成します。
MAUIのテンプレートを新規作成して「MainPage.xaml」を以下のように書き換えます。
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FigmaApps.MainPage">
<ScrollView>
<GraphicsView //GraphicsViewの追加
x:Name="figmaSample"/>
</ScrollView>
</ContentPage>
そして「MainPage.xaml.cs」は以下のように書き換えます。
namespace FigmaApps;
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
figmaSample.Drawable = new Drawable();//x:Nameと名前をあわせること
}
class Drawable:IDrawable //IDrawblewを継承したDrawbleクラスを実装
{
public void Draw(ICanvas canvas, RectF dirtyRect)
{
//ここに生成したコードをコピペする ここに書いてあるコードをどう編集していいかはさすがにわかってると思うので割愛
/////////////////////////////////////////////////////////////////////////////////
// View: rectangleView
// NodeName: Rectangle 1
// NodeType: RECTANGLE
// NodeId: 1:4
canvas.SaveState();
canvas.SetFillPaint(new LinearGradientPaint { GradientStops = new PaintGradientStop[] { new PaintGradientStop(0, new Color(234, 234, 234, 255)), new PaintGradientStop(1, new Color(234, 234, 234, 130)), } }, new RectF(0f, 0f, 350f, 500f));
canvas.FillRoundedRectangle(0f, 0f, 350f, 500f, 10f);
canvas.StrokeColor = Color.FromRgb(0, 0, 0);
canvas.Alpha = 1;
canvas.StrokeSize = 1;
canvas.DrawRoundedRectangle(0f, 0f, 350f, 500f, 10f);
canvas.RestoreState();
// View: rectangleView1
// NodeName: Rectangle 2
// NodeType: RECTANGLE
// NodeId: 1:5
canvas.SaveState();
canvas.SetFillPaint(new LinearGradientPaint { GradientStops = new PaintGradientStop[] { new PaintGradientStop(0, new Color(81, 43, 212, 255)), new PaintGradientStop(1, new Color(43, 151, 212, 41)), } }, new RectF(0f, 430f, 350f, 5f));
canvas.FillRoundedRectangle(0f, 430f, 350f, 5f, 0f);
canvas.RestoreState();
// View: rectangleView2
// NodeName: Rectangle 3
// NodeType: RECTANGLE
// NodeId: 1:7
canvas.SaveState();
canvas.SetFillPaint(new LinearGradientPaint { GradientStops = new PaintGradientStop[] { new PaintGradientStop(0, new Color(81, 43, 212, 255)), new PaintGradientStop(1, new Color(81, 43, 212, 89)), } }, new RectF(14f, 446f, 325f, 41f));
canvas.FillRoundedRectangle(14f, 446f, 325f, 41f, 20f);
canvas.RestoreState();
// View: elipseView
// NodeName: Ellipse 1
// NodeType: ELLIPSE
// NodeId: 1:8
canvas.SaveState();
canvas.SetFillPaint(new LinearGradientPaint { GradientStops = new PaintGradientStop[] { new PaintGradientStop(0, new Color(81, 43, 212, 255)), new PaintGradientStop(1, new Color(43, 151, 212, 41)), } }, new RectF(19f, 28f, 116f, 116f));
canvas.StrokeSize = 5;
canvas.DrawEllipse(19f, 28f, 116f, 116f);
canvas.RestoreState();
// View: textView
// NodeName: Name
// NodeType: TEXT
// NodeId: 1:9
canvas.SaveState();
canvas.FontColor = Color.FromRgb(0, 0, 0);
canvas.Alpha = 1;
canvas.Font = new Microsoft.Maui.Graphics.Font("Shrikhand-Regular", 400, FontStyleType.Normal);
canvas.FontSize = 16f;
canvas.DrawString(@"Name", 175f, 28f, 63f, 23f, HorizontalAlignment.Left, VerticalAlignment.Top);
canvas.RestoreState();
// View: rectangleView3
// NodeName: Rectangle 4
// NodeType: RECTANGLE
// NodeId: 1:10
canvas.SaveState();
canvas.SetFillPaint(new RadialGradientPaint { GradientStops = new PaintGradientStop[] { new PaintGradientStop(0, new Color(81, 43, 212, 255)), new PaintGradientStop(1, new Color(139, 117, 214, 255)), new PaintGradientStop(1, new Color(217, 217, 217, 255)), } }, new RectF(30f, 200f, 50f, 50f));
canvas.FillRoundedRectangle(30f, 200f, 50f, 50f, 10f);
canvas.RestoreState();
// View: rectangleView4
// NodeName: Rectangle 5
// NodeType: RECTANGLE
// NodeId: 1:11
canvas.SaveState();
canvas.SetFillPaint(new RadialGradientPaint { GradientStops = new PaintGradientStop[] { new PaintGradientStop(0, new Color(43, 151, 212, 255)), new PaintGradientStop(1, new Color(43, 151, 212, 0)), } }, new RectF(30f, 270f, 50f, 50f));
canvas.FillRoundedRectangle(30f, 270f, 50f, 50f, 10f);
canvas.RestoreState();
// View: rectangleView5
// NodeName: Rectangle 6
// NodeType: RECTANGLE
// NodeId: 1:12
canvas.SaveState();
canvas.FillColor = Color.FromRgb(163, 242, 143);
canvas.Alpha = 1;
canvas.FillRoundedRectangle(30f, 340f, 50f, 50f, 10f);
canvas.RestoreState();
// View: imageView
// NodeName: Vector 1
// NodeType: VECTOR
// NodeId: 1:16
// View: textView1
// NodeName: MAUI
// NodeType: TEXT
// NodeId: 1:17
canvas.SaveState();
canvas.FontColor = Color.FromRgb(0, 0, 0);
canvas.Alpha = 1;
canvas.Font = new Microsoft.Maui.Graphics.Font("Shrikhand-Regular", 400, FontStyleType.Normal);
canvas.FontSize = 16f;
canvas.DrawString(@"MAUI", 88f, 184f, 47f, 23f, HorizontalAlignment.Left, VerticalAlignment.Top);
canvas.RestoreState();
// View: textView2
// NodeName: .Net MAUI High School
// NodeType: TEXT
// NodeId: 1:22
canvas.SaveState();
canvas.FontColor = Color.FromRgb(0, 0, 0);
canvas.Alpha = 1;
canvas.Font = new Microsoft.Maui.Graphics.Font("Rakkas-Regular", 400, FontStyleType.Normal);
canvas.FontSize = 16f;
canvas.DrawString(@".Net MAUI High School", 96f, 213f, 153f, 24f, HorizontalAlignment.Left, VerticalAlignment.Top);
canvas.RestoreState();
// View: textView3
// NodeName: TwitterAccount
// NodeType: TEXT
// NodeId: 1:24
canvas.SaveState();
canvas.FontColor = Color.FromRgb(0, 0, 0);
canvas.Alpha = 1;
canvas.Font = new Microsoft.Maui.Graphics.Font("Rakkas-Regular", 400, FontStyleType.Normal);
canvas.FontSize = 16f;
canvas.DrawString(@"TwitterAccount", 96f, 289f, 103f, 24f, HorizontalAlignment.Left, VerticalAlignment.Top);
canvas.RestoreState();
// View: textView4
// NodeName: QiitaAccount
// NodeType: TEXT
// NodeId: 1:25
canvas.SaveState();
canvas.FontColor = Color.FromRgb(0, 0, 0);
canvas.Alpha = 1;
canvas.Font = new Microsoft.Maui.Graphics.Font("Rakkas-Regular", 400, FontStyleType.Normal);
canvas.FontSize = 16f;
canvas.DrawString(@"QiitaAccount", 96f, 358f, 87f, 24f, HorizontalAlignment.Left, VerticalAlignment.Top);
canvas.RestoreState();
// View: textView5
// NodeName: Twitter
// NodeType: TEXT
// NodeId: 1:18
canvas.SaveState();
canvas.FontColor = Color.FromRgb(0, 0, 0);
canvas.Alpha = 1;
canvas.Font = new Microsoft.Maui.Graphics.Font("Shrikhand-Regular", 400, FontStyleType.Normal);
canvas.FontSize = 16f;
canvas.DrawString(@"Twitter", 88f, 254f, 64f, 23f, HorizontalAlignment.Left, VerticalAlignment.Top);
canvas.RestoreState();
// View: textView6
// NodeName: Qiita
// NodeType: TEXT
// NodeId: 1:20
canvas.SaveState();
canvas.FontColor = Color.FromRgb(0, 0, 0);
canvas.Alpha = 1;
canvas.Font = new Microsoft.Maui.Graphics.Font("Shrikhand-Regular", 400, FontStyleType.Normal);
canvas.FontSize = 16f;
canvas.DrawString(@"Qiita", 88f, 324f, 41f, 23f, HorizontalAlignment.Left, VerticalAlignment.Top);
canvas.RestoreState();
}
}
}
これで完了になります。
Visual StudioはIDEでありTeacherです。
影がないなと思ったらつければいいのです。
shadowをつけようと思ったら勝手にSetShadowが出てきてその引数が何のかさえ教えてくれます。
こんな感じでVisual Studioをうまく使っていきましょう。先生最高！！
不具合など
見たらわかると思いますが、変換がうまくいってない箇所が多少見受けられます。
それらの理由や対処法などご紹介できればと思います。
・Elipeseのグラデーションができない。→ソフト的には未対応。しかしコードを書き替えることによって対応は可能
・ドロップシャドウがついてない→ソフト的には未対応。しかしコードを付け足すことによって対応は可能(canvas.SetShadow())
・パスが描かれない→ソフト的に未対応詳細はこちら(https://github.com/jsuarezruiz/figma-to-maui-graphics#known-limitations-or-issues)
・不具合ではないですがコンポーネントのX,Yの値を0にそろえていないとうまく変換されないようです。↑参照
・フォントが変わっていない→.NET MAUIプロジェクトに対応するﾌｫﾝﾄを入れ込めば反映可能
・3つボタンの上2つがうまく変換できていない→下の図のように決められたサイズの枠からはみ出してコンポーネントを作ったための不具合。きちんとルールにのっとれば可能
さいごに
以上がFigmaのデザインを.NET MAUIへ持ってくる方法の紹介となりました。
多少の不具合はありますがこんなに簡単にFigmaで作ったデザインをモバイルアプリのUIを構築できる方法は今のところないと思います。
(あっても多少のお金がかかったり、操作が大変であったり)
今回私が自作したデザインで試しましたが、ほかのFigmaユーザーが作成したデザインであってもコピーを取得し、URLさえ入手できればどのものでも生成が可能です。
UIコンポーネントくらいならかなり良い感じで爆速で生成ができますね。