Speaker 1: Hi I'm Sean Connolly, a product designer here at
Crema.
And today we're asking the question, "Does Figma work on
iPad?"
And if, like myself, you're a fan of Betteridge's Law of
Headlines you already know the answer.
Speaker 2: But we're going to ask it anyway.
A number of people at Crema use their iPads all throughout their
workflow.
Speaker 1: I know PMs use them a lot for note taking.
We do some testing on an iPad, and I do a bit of design work on
iPad. Really early on, maybe some sketching on the sketch app
with an Apple Pencil.
But lately I've been thinking, "Well how cool would it be to do
the entire workflow from sketches on a like a sketching
app all the way through a full fledged design product"?
So a bit ago George and I dove into Figma. Well, it was my
first time diving into Figma.
I think he had seen it before.
But I was really blown away about the potential that it had.
So using it on iPad and having this like a really slimmed down
version of a workflow I thought would be really cool.
And actually, it's funny because here's my my laptop which is the
same size as my iPad.
So really it's not anything more than like, "wouldn't it be
cool?"
There's like a lot of horsepower in this MacBook Pro and not so
much an iPad.
So I thought I would be a really cool thing to test.
This just seems like it's a little bit more mobile although
it's not much.
So iPad now runs its own operating system that used to be
iOS but they've differentiated that a bit and now they support
a mouse.
So you can have a cursor on your screen. And Safari is now a full
fledged desktop version of the app.
So with that I thought,
"Wow. I mean, Figma is totally web based. Like why wouldn't
this work? I can use a mouse now!"
And I dove into it, and I think a couple of cool things about
connecting all of these pieces so we can take a look at that.
Ok enough context.
Let's get started. The way we're going to start is connecting our
mouse for the first time.
Now, i've already done this so some of the settings might be a
bit different but to start we just go to accessibility.
So I think this is kind of interesting.
Apple has sort of incorporated a mouse and a cursor into the
workflow but it's meant to be an accessibility feature.
So we go into touch and it's called assistive touch.
So if we turn that on you'll see my mouse just my cursor appears
here and it looks totally different than what you're used
to seeing.
It's a little round indicator.
And again I think it's really meant to never like touching and
tapping on the screen so it's kind of this round interface.
And what's cool here is that you have a bunch of options and I've
already done a bit of customization to my my cursor.
So as you can see my mouse is connected here, and I like it
because you can see I don't know if you can see but I can connect
up to three different devices to the single mouse.
I just simply switch between them with a button.
So I use it on my Mac and my iPad
But a couple of customization things that I've already done, I
made the cursor as small as I possibly could.
And so it's still pretty large but I think it starts maybe
somewhere around here which is huge.
But again, it's not too different than a finger but you
can blow this thing way up.
So I have it really small and I turned off auto hide so that
means after three seconds the cursor will disappear.
But as I've connected the mouse I wanted to always be connected.
So I can turn that off and it won't go away.
And the only other thing is that the assistive touch means that
this little mini down here has to be present.
But you can either reduce the opacity of that or turn it off
completely as long as the mouse is connected.
So to do that.
That's just right here.
It's just this on screen menu and we can turn that off.
Connected mouse, it's a really cool start.
We'll see what we can do with it.
So here we are now in the Figma application as you would know it
on any other desktop browser.
The mobile version looks different.
I can show you that in a second.
But.
We'll start a new project.
And here we just have a clean slate.
And the first thing we do is add a frame.
So I'm just going to tap F to draw a frame and here you go.
This is this is this is the trial right here.
All right.
We have a.
All right folks.
Let's see.
We have a 28 by 28 pixel frame.
And that's not going to work for anything.
Yeah.
There it is.
So what you'll see is like I'm typing I have to start the
frame.
I'm dragging it.
And I get a couple pixels in and for whatever reason that locks
up I have no idea why other than again this this mouse and the
cursor on the screen that I've had sort of interprets that as a
finger on a screen.
And so you can imagine you'd want to pan around this canvas.
There's really no other way to do that.
You don't have a trackpad and things like that.
So.
It tries to draw for you.
It tries to draw a shape for you but then it locks up and then it
starts dragging the canvas around.
So again it's like it thinks there's a finger on the screen.
Another thing to I have the type keyboard which I love and if I
were to hold that command I could zoom in and out but that
doesn't work here.
You'd have to pinch.
So you have to pinch to zoom in and out.
Could be kind of a cool workflow if your you know using your hand
over here a bit and then using your mouse over here.
I don't know if maybe it sounds a bit chaotic that way.
So here we are.
So we've added a frame.
Now, you can still manipulate some of the stuff.
It's a bit finicky.
So look I can grab that.
Speaker 2: We can move it around the board.
We can make.
Whoops.
We can make the size.
So we can make the size where we want it to be.
So this is going to be a desktop.
Oh man.
Let's see.
And that's two pixels.
I can't select that.
Speaker 1: Ok.
There we go.
And we can blow that up to nine hundred.
Here we go.
So that's like a normal frame if you want to maybe do something
on desktop.
It took us a long time to get to this point.
You wouldn't, you would never want to use iPad for Figma as it
stands. I guess that's our answer.
It's really cool that you can see it all in this way.
And you totally can go to like the read only version which is
like the mobile version I'll show you that.
So I have I have one pull up on Chrome will pull up an existing
project because this is the mobile version of prom.
There's no like panels on either side to actually manipulate the
content but you can zoom in and kind of see everything and see
what you can do in that.
Yeah.
You can't do much in this in this view here.
So it's totally the mobile version.
Whereas you saw on Safari it's the desktop version kind of
presented in the mobile view.
We can still view prototypes and click through clickable
prototypes. I'll open up this one right here.
We'll go view you that. So it'll open up a new tab.
Cool.
So this works a lot like you were touching the screen and in
fact, because it's an iPad I CAN touch the screen.
So that's kind of cool.
Kind of gives you another level of connection to the designs
you're making.
This is a mobile app we're looking at.
So it's kind of cool to be able to touch the screen there.
So here we are back on our little temporary trial canvas.
We can start to try to draw shapes.
Yes.
So shapes don't work. Frames are the only thing that seemingly
works.
And then sometimes they just stop working.
So I can't do anything there.
Let's see if we can add text.
Nope.
What can we do?
Can we select that frame? We can select here in the side menu.
That's cool.
And we can change the color of the background.
Awesome.
Can we.
Struggling.
I can't I can't click it.
So.
So then some things are broken.
Ok cool.
I can click that.
There we go.
Did that cool cool cool cool.
Can I make it a component.
Yes I can.
Cool.
So we can do some things, but not much.
And you would never want to use this in your actual design flow.
So the moral of the story is Figma, in its current state,
does not work on iPad or iPadOS. But I think there's a huge
opportunity there.
Would be really cool to use a web app on iPad and do the
design of workflow from start to finish.
So iPadOS is brand new.
Maybe a couple of weeks old and I'm still very new to Figma.
So if anybody has dug through the accessibility settings or
knows any way to get Figma to work on iPad, please leave a
comment below.
I would love to know how that works.
I would love to be able to start designing a sketch app and bring
it all the way to fruition in Figma.
Ok.
And that's all I have.
Thank you so much for watching.
Please like and subscribe for more content like this.