Converting Sketch Designs to React Native - tool or coding shop?
I'm working with a couple friends (very experienced in other frameworks) on a new React Native app. We are trying to establish a good workflow for going from Sketch (or another modern design tool) into RN so that our designer can hand off to our developer with minimal friction and without the developer needing to do a lot of layout and design fixes.
So far going from Sketch to Zeplin to RN seems to be working the best, but it's not perfect. Other tools like BuilderX seem to be a lot worse and not a usable workflow. We've basically tried the obvious 5 or 6 things that come in when you google this problem.
I'm interested in general advice but also have two specific questions:
Is there a better flow we're missing? Would working in WebFlow and then converting that output to RN be better than Sketch+Zeplin?
Are there coding shops like the psd->html services that take Sketch designs and make good RN code and can be available for small ongoing design tweaks and things? Any recommendations?
If all else fails, we'll hire a developer onto our team to do this in between step of turning the designs into layouts, but we're soooo close to not needing that and I'd love to find a good solution.
Thanks!
reactjs react-native mobile sketchapp
asked Nov 15 '18 at 19:20
nicholasnicholas
1012
add a comment |
I'm working with a couple friends (very experienced in other frameworks) on a new React Native app. We are trying to establish a good workflow for going from Sketch (or another modern design tool) into RN so that our designer can hand off to our developer with minimal friction and without the developer needing to do a lot of layout and design fixes.
So far going from Sketch to Zeplin to RN seems to be working the best, but it's not perfect. Other tools like BuilderX seem to be a lot worse and not a usable workflow. We've basically tried the obvious 5 or 6 things that come in when you google this problem.
I'm interested in general advice but also have two specific questions:
Is there a better flow we're missing? Would working in WebFlow and then converting that output to RN be better than Sketch+Zeplin?
Are there coding shops like the psd->html services that take Sketch designs and make good RN code and can be available for small ongoing design tweaks and things? Any recommendations?
If all else fails, we'll hire a developer onto our team to do this in between step of turning the designs into layouts, but we're soooo close to not needing that and I'd love to find a good solution.
Thanks!
reactjs react-native mobile sketchapp
asked Nov 15 '18 at 19:20
nicholasnicholas
1012
add a comment |
I'm working with a couple friends (very experienced in other frameworks) on a new React Native app. We are trying to establish a good workflow for going from Sketch (or another modern design tool) into RN so that our designer can hand off to our developer with minimal friction and without the developer needing to do a lot of layout and design fixes.
So far going from Sketch to Zeplin to RN seems to be working the best, but it's not perfect. Other tools like BuilderX seem to be a lot worse and not a usable workflow. We've basically tried the obvious 5 or 6 things that come in when you google this problem.
I'm interested in general advice but also have two specific questions:
Is there a better flow we're missing? Would working in WebFlow and then converting that output to RN be better than Sketch+Zeplin?
Are there coding shops like the psd->html services that take Sketch designs and make good RN code and can be available for small ongoing design tweaks and things? Any recommendations?
If all else fails, we'll hire a developer onto our team to do this in between step of turning the designs into layouts, but we're soooo close to not needing that and I'd love to find a good solution.
Thanks!
reactjs react-native mobile sketchapp
asked Nov 15 '18 at 19:20
nicholasnicholas
1012
I'm working with a couple friends (very experienced in other frameworks) on a new React Native app. We are trying to establish a good workflow for going from Sketch (or another modern design tool) into RN so that our designer can hand off to our developer with minimal friction and without the developer needing to do a lot of layout and design fixes.
So far going from Sketch to Zeplin to RN seems to be working the best, but it's not perfect. Other tools like BuilderX seem to be a lot worse and not a usable workflow. We've basically tried the obvious 5 or 6 things that come in when you google this problem.
I'm interested in general advice but also have two specific questions:
Is there a better flow we're missing? Would working in WebFlow and then converting that output to RN be better than Sketch+Zeplin?
Are there coding shops like the psd->html services that take Sketch designs and make good RN code and can be available for small ongoing design tweaks and things? Any recommendations?
If all else fails, we'll hire a developer onto our team to do this in between step of turning the designs into layouts, but we're soooo close to not needing that and I'd love to find a good solution.
Thanks!
reactjs react-native mobile sketchapp
reactjs react-native mobile sketchapp
asked Nov 15 '18 at 19:20
nicholasnicholas
1012
asked Nov 15 '18 at 19:20
nicholasnicholas
1012
asked Nov 15 '18 at 19:20
nicholasnicholas
1012
asked Nov 15 '18 at 19:20
nicholasnicholas
1012
asked Nov 15 '18 at 19:20
nicholasnicholas
1012
1012
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I think you need to convert the file from Sketch to Framer (Framer X) before.
Framer X is really good for developing an react native app.
answered Nov 20 '18 at 6:45
Huu Phong NguyenHuu Phong Nguyen
39938
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53326550%2fconverting-sketch-designs-to-react-native-tool-or-coding-shop%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I think you need to convert the file from Sketch to Framer (Framer X) before.
Framer X is really good for developing an react native app.
answered Nov 20 '18 at 6:45
Huu Phong NguyenHuu Phong Nguyen
39938
add a comment |
I think you need to convert the file from Sketch to Framer (Framer X) before.
Framer X is really good for developing an react native app.
answered Nov 20 '18 at 6:45
Huu Phong NguyenHuu Phong Nguyen
39938
add a comment |
I think you need to convert the file from Sketch to Framer (Framer X) before.
Framer X is really good for developing an react native app.
answered Nov 20 '18 at 6:45
Huu Phong NguyenHuu Phong Nguyen
39938
I think you need to convert the file from Sketch to Framer (Framer X) before.
Framer X is really good for developing an react native app.
answered Nov 20 '18 at 6:45
Huu Phong NguyenHuu Phong Nguyen
39938
answered Nov 20 '18 at 6:45
Huu Phong NguyenHuu Phong Nguyen
39938
answered Nov 20 '18 at 6:45
Huu Phong NguyenHuu Phong Nguyen
39938
answered Nov 20 '18 at 6:45
Huu Phong NguyenHuu Phong Nguyen
39938
39938
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53326550%2fconverting-sketch-designs-to-react-native-tool-or-coding-shop%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
