Using Sparkle for My Web Design/Development Business

Running a website design business with Sparkle

A little about my past

I am a designer with very minimal knowledge of HTML and CSS, but I have worked on several web design/development projects for years. I have tried editing HTML templates with Dreamweaver, fidgeting around inside a CSS box with Blocs, trying to tame the infamous dinosaur (WordPress), and paying a monthly fee for each website I create in Wix and Webflow. Though the websites I delivered were good enough, I always felt someday I would find a tool to help me design a website as I quickly move around objects on a Pages document. One fateful day, I stumbled upon Sparkle, and suddenly, my web design/development workflow changed. Now, I deliver 90+% of the web projects using Sparkle.

Challenge into profit

When I switched to Sparkle as my go-to website builder, my biggest challenge was that most clients wanted a website they could edit on their phone or PC without paying an additional app fee. The majority of clients had a WordPress/Wix mindset. To solve this issue, I chose clients who chose custom design beauty over template use and did not have the time to manage their websites; then, I offered a separate monthly website management fee, which was a win-win situation for me.

My design workflow:


I create a Figma file that includes the company logo, color theme, font usage, and sample website designs on a Moodboard in a Figma frame. I give my customers access to view and comment on the Figma file.


Usually, most of my clients do not come with their copy prepared, so I conduct an interview to write website copy and then provide it to them for comments. I use AI tools to generate the first draft. Then, I place all the generated website copies on another Figma frame next to my mood board so customers can see and edit it.

Page Designs:

I use Figma to design web pages and give access to my clients. I start with a 1200px frame for the page designs. After getting feedback from my clients, I use the Figma2Sparkle plugin to export my design to Sparkle. And voila! All the design elements are now in my Sparkle app and placed into a currently open Sparkle file on a new page.

Editing in Sparkle

1200px (Desktop):

If your selection was a frame while exporting from Figma, the frame would be considered as an element, and all the elements would be grouped in Sparkle. I will ungroup the elements and delete the frame, which is now converted to a box with the entire page size from Sparkle.

Next, I edit my color palette in Sparkle and copy hex codes from Figma to place them in the Sparkle color palette. Then, I define text styles in Sparkle and give all the text I have in the file a defined text style.

Then, I choose elements that I want to be full page width and edit them. I select elements to move to a layout block and edit the elements inside accordingly. I usually use a trick to give the layout blocks my desired size. I create a box with the size I need around the elements I need to move into a layout block, select the elements with the newly created box, move them to a layout block, and delete the box.

I might have a rectangle background created in Figma before moving items to a layout block, but once I do, the layout block will have its color, so I delete the former rectangle background because it won’t have any use now.

Moving all related elements into a layout block makes resizing sections easier for later. Say, for example, you want to add elements in the middle of your design. If you place your design elements in layout blocks, you can resize the block you want to put your new elements in, and Sparkle will move down all the rest of the layout blocks so you get space in the section you wish to place.

After that, I add some Sparkle fairy dust to give some items animation and button functionalities. I create a Thank you page for my form “Submit” button. I check that my buttons and forms are functional and take me to the desired page sections. I avoid using scroll location because, thanks to Sparkle, since the addition of layout blocks as scroll location elements, this feature helped me not move around scroll locators each time I change element locations. Now, my 1200px website is ready to go.

320px (Mobile):

Since Sparkle introduced layout blocks, editing Sparkle’s mobile site design has become even more accessible.

The first thing I do here is to edit my text styles and update the mobile version text styles across my Sparkle file. Then, I resize each layout block to my estimated size and resize text boxes to fit their content. I do this from bottom to top since this is the more manageable approach to editing mobile-size designs. At this stage, I focus on something other than how my mobile design looks. It might look messy for now, but that’s the beauty of designing.

Then, I resize buttons and images, rearrange element placements, and start seeing the design I wish my mobile website version to have. I often use Sparkle’s Arrange tab here, so similar elements are resized uniformly. I sometimes memorize how wide and tall my buttons are and at which pixels most of my images and text boxes start and end.

Finally, I touched up some final looks and activated auto-scaling for the rest of the devices. Unless mandatory, I usually leave the other viewports to be automatically scaled, but sometimes I custom edit for 768px (portrait tablets).

Final Words

Sparkle has become an indispensable tool for me, enabling me to create beautiful websites with ease and efficiency. With its various features, Sparkle has helped me streamline my web design process, reducing the time and effort required to create visually appealing websites. I strongly recommend it to anyone who wants to design websites without getting bogged down by technical details.


Ditto @Nathan! :slight_smile:

I can relate to all of this and also really love the Figma / Sketch integration.
I also really love the tool Lunacy that works like Figma / Sketch - their the new kid on the block!

For me I work more with the 960px and autoscale for 1200px, and the 960 works better for me when I autoscale the tablet (769px). But then there are also times I work the 1200px instead.

I agree with you regrading the clients! You just either have to educate them or lean towards the clients that love how you create and maintain websites. For me my clients run their business and have no time playing a “web master”, so yes in the end it is a win-win situation! :slight_smile:

1 Like

It seems like it would be great if the collaboration feature came to Sparkle.

@FlaminFig I thought I was the only one using Lunacy. :slight_smile:

1 Like

I recommend you to check out Lunacy’s linked design feature. Maybe in the future, the collaboration part with Lunacy to Sparkle can be left to the Lunacy side and automatically updated pages can be made.

1 Like

I am hearing about Lunacy for the first time from you @selcuk. I’ve got to try it.

1 Like

If you use Figma you will see that it is very similar. For some reason, Lunacy seems more comfortable to me than Figma. It may be because it is a native app. Also ready icons, ilustrations, images etc. It’s also very good to have.

Hey @selcuk, what can i say… all great design minds think alike! :slight_smile:
Oh yes it would be great!!! :pray:

For me Sketch has become to bloated, confusing to use and getting really expensive, so I went for a hunt and came across Lunacy. It is very comparable with Figma (now unfortunately owned by Adobe!)! :frowning:

I find Lunacy really intuitive and the company has been updating it regularly over the last 5-6 months of me using it. So they are definitely in the game! And it is across all OSs, just not Apple.

And like Sparkle I lover the offline mode it offers! :slight_smile:
Keeping my fingers crossed for a Lunacy integration! :crossed_fingers:

1 Like

Great post @Nathan, i haven’t created as much sparkle sides as you did but i totally agree with you.
Once, I went out in the wide www to search for a website builder that can create easier and faster websites.
Tested uncountable website website builders, being back to Sparkle lets you conclude how my search went :slight_smile:

I also heard about Lunacy the fdirst time and very interested in that.
I am on a mission this year to re structure my website business and change the way how I do websites and how i approach people about websites with Sparkle.

With all the unsecure server driven websites and all the hacking thats going on right now, Sparkle is in a very good spot to win clients on a safe website approach.


Ohh!.. The last I heard it was a done deal but I haven’t been following it as Adobe doesn’t interest me!
But I stand corrected @selcuk and apologise for spreading mis-information! :frowning:

I was wondering why I hadn’t seen Adobe tomfoolery spreading and growing throughout Figma.
So from what I read Figma has some serious sluch funds to make Figma even better.
I feel so sorry for Adobe, NOT!


This was an interesting read, thank you for sharing.

For what do you use Figma, Lunacy or sketch? I find doing all the design in Sparkle much faster :wink: if I use one of those apps I have to do 2 steps even with the integrations.

1 Like

You’re spot on, @dpamping. Sparkle is by far the only tool I can say without hesitation a real time-saver for building websites as I wish them to look. I design in Sparkle from scratch when I’ve already got all my design materials ready to go.

I use Figma because my design workflow involves several vector elements and stock images. Dealing with this without leaving the app is a breath. I often import premium stock images and Icons from FreePik using a Figma plugin. I also edit vector objects; manipulate shapes and change colors of objects inside a vector element.

hi @selcuk, i am a lunacy user also but want to know if there’s a way to import a layout into Sparkle?

thank you.

*anyone else with info please feel free to chime in. i am not an expert in web design. just someone trying to build a small non-web related business.

@once_elevenses for now it is not possible to import into Sparkle from Lunacy, like it is for Figma. I’m keeping my fingers-crossed though!!! :hand_with_index_finger_and_thumb_crossed: :slightly_smiling_face:

There is a way, yes.
You can export your Lunacy document as a .sketch file, open it with Sketch, and transfer your design to Sparkle with the sketch to web plug-in. For detailed information about Sketch to web, visit this site.

He he he @selcuk ! :slight_smile:
I let Sketch go so I’m out of this one!

I respect your decision, but I wanted to explain that there is a way for those who use it.

@selcuk I meant no innuendo, just that I don’t use Sketch anymore.
Your idea is a good one so I went in quickly to see if Lunacy saves as a .fig file but it said no!

So all good! :slight_smile:

Yes, it doesn’t export as .fig, but it can import.

But there is already a Figma to Sparkle plugin. You don’t need this.