We've received quite a few messages lately about how to operationalize Ceros in an existing design workflow. Questions like: How does Studio work with Figma? Does Studio replace Illustrator? How do I best get my existing designs into Studio? So, I figured I'd take a second to jot down my initial thoughts around these topics, coming from a former Ceros customer working in the design space.
This is by no means a comprehensive guide or formula for incorporating Ceros into every design process; there are too many variables specific to individual designers, teams, and organizations for that! Instead, these are some recommendations and considerations that can help you figure out how to best integrate Ceros into your design process.
Is Ceros supposed to replace my other design tools?
No, definitely not (unless it's PowerPoint 😉)! We get this question a lot, and oftentimes, designers are apprehensive about learning how to use Studio because they like their established design "toolbox" and don't want to swap it out with Studio. The truth is Studio is meant to work alongside your other tools across your design process. For instance, when I'm working on a project:
I brainstorm in Miro
I write my copy in Google Docs
I create my graphics and visuals in Illustrator
I prototype my layouts in Figma
I create my final, published, interactive deliverable in Studio
So, as you can see, I don't even get to Studio until I'm at the tail end of a design project. This is my established flow that works perfectly with my process, but yours could be completely different. In fact, you may prefer to use Studio for every step in your process; there is nothing wrong with that! The point is, don't feel like you have to replace your current design tools with Ceros. Instead, discover how they work together.
Essentially, each tool I use is hyperspecialized for its usage in my process. Figma is the best prototyping tool out there! With Illustrator, it's in the name! In my opinion, both of them are better than Studio in fulfilling their roles. However, neither can publish interactive and trackable content like Studio can. Nor can I embed videos and other third-party content in them the same way I can in Studio. The same goes for creating adaptive layouts. It's all about selecting the right tool for the job.
How do I get my designs in Studio?
The simplest way of getting design assets into Studio is to:
Use the media import feature
Use the stock media library
Create your assets directly in Studio
But, as I mentioned above, I use other tools to build and prototype my designs, and then I bring them all into Studio when I'm ready to create my final experience. The most straightforward way is to export visuals and graphics from Figma, Illustrator, etc., and import them into Studio. Then, recreate text and shapes using Studio's toolbar. Again, the concept is to recreate my Figma prototype in Studio. Here are a couple of tips when going this route:
Upload your fonts and colors in Studio before you start building.
Ensure the canvas dimensions in Studio match the frame's in Figma.
If you're exporting visuals as .png or .jpeg files, do so at 2x scale.
The positioning and sizing specs are your best friends.
For example, if a textbox in Figma is 100px by 56px and its positioning is X: 435 and Y: 2,340 on the frame, then just input those exact specs in Studio rather than manually placing assets on the canvas or "eyeballing" the size. Doing so will save you loads of time, I swear!
What about the Ceros import plugins and features?
While Studio does have a native Figma plugin and the option to import existing design files (PhotoShop, Illustrator, Sketch), just know that your mileage may vary when using them. Think about it like this: Design tools are powerful and complex! There are a lot of moving parts and features that make them run smoothly, so much so that they sort of "speak their own language." So, moving content from one tool to another requires a lot of "translation of languages" to make it work. It's impressive that importing design files/assets into Studio is possible at all, but it won't always be a 1:1 "translation," and some things might get mixed up in the process.
For the Figma plugin in particular, I recommend experimenting with the tool and determining how you could best use it. But here are some key considerations when doing so:
Importing in smaller batches will yield more accurate results.
In other words, simpler imports will leave less room for "translation errors."
If I ever use the Figma import plugin, I only import one single asset at a time.
I avoid attempting to import entire artboards or layout frames.
Frames in Figma will import as Groups in Studio.
Auto layouts in Figma will not translate to Studio because there is no equivalent feature.
Gradients, image wrapping, and animations don't translate to Studio.
Overall, I think the Figma plugin is best for importing textboxes, logos, and basic shapes/containers. That may not seem like a lot, but when working on a multipage experience, that time-saving adds up! If you're struggling with the plugin based on how you build your content in Figma, don't feel you have to use it! You can always stick with the export > import flow, which we're all very used to. I know I do most of the time!
I've never done this myself, but I have heard of designers importing static .png versions of their entire page layout into Studio, locking it at the bottom of the layers panel, and then using it as a map while "tracing" content on top of it. Pretty clever!
What about you?
As I mentioned, these are just some of my thoughts about incorporating Ceros into my design process. The above points are things I've identified over the last six years as a Ceros user and now educator. But I'm sure there's a lot I haven't thought of! So, what design workflow tips, tricks, and best practices have you established while creating content in Ceros? I would love to hear your recommendations in a comment below!